(CSS)cascading style sheets:层叠样式表。级联式样式表，简称：样式表。

Sheets :就是一个样式文件，它的扩展名为.css

Style:外观，个性化

样式表的位置

为了学习方便，先用内嵌式样式(内部样式表)

位置：<head></head>之间。

标记：<style type=”text/css” >样式写在这里</style>

CSS语法格式

声明方法

选择器{属性1：值1;属性2：值2;属性n：值n;}

什么是选择器？

就是通过名称指定对哪些标签进行样式设置

CSS注释

HTML注释：<!--注释内容-->

CSS注释：/*注释内容*/，不管是单行还是多行只有这一种方法。

CSS基本选择器：

基本选择器：

style属性(行内样式)

直接写在标签内

如：<p style=”font-size:12px; color:red;” >文字内容</p>

标签

针对HTML的标签直接设置样式。

ID

语法：

以“#”开头，

命名方法：建议全小写，以字母开头

使用方法：<p id=”id的名称”></p>

类

语法：

定义的方法：用“.”开头,后跟类名。

类名书写规范，以小写字母开始。

使用方法：

<p class=“类名”>内容</p>

通配符选择器

*{CSS规则}

意思：针对当前页面所用的标签应用同样的样式（对标签的初始化）

如：*{margin:0;padding:0;border:0;}

专家建议对标签初始化时采用下面的方法

body,p,ul,li,p,ol,h1,h2,h3,h4,h5,h6,img{margin:0;padding:0;border:0;}

标签和类结合

如：p.test{color:red}

针对p标签应用类名为test1的样式。

组合选择器

多元素选择器

多个标签或选择器同时声明

如：h1,h2,ul,li{margin:0;padding:0;}

定义的方法注意思：

选择器之间用逗号隔开。

后代选择器

p空格span{color:red;}

含义：针对p标签中的span标签定义样式。

注意：选择器之间用空格隔开。

 

子元素选择器

定义的方法

P>span {CSS规则}

只针会p标签中的span一级有效。

伪类选择器

链接<a href=”#”></a>

a:link 链接的正常状态

a:visited 鼠标单击过的链接状态

a:hover 鼠标放在链接上面的（悬停）状态

a:active 当前正在访问的链接状态

当有多种链接样式时，通常配合类来设置

CSS尺寸属性

px,em ,%（相对单位）

font-size:25不加单位的数字毫无意思

px像素，相对单位。和屏幕的分辨率有关。

em：一个字体高（1倍字体高）,2em(当前默认字体的2倍)

%,百分比。相对单位。相对于当前默认值的百分比。

浏览器的默认字体大小为16px.

CSS字体属性

font-family: 设置字体,建议英文的中文字体，黑体=>simhei

如：Font-family:simhei;

font-size: 设置字体的大小单位，(注意：一定加上单位)

如：font-size:24px;

font-weight:设置字体的加粗方式，100－900，bold,normal(取消加粗)

如：font-weight:100; font-weight:bold; font-weight:normal;

font-style：设置字体样式，italic

Font-style:italic; 设置字体为斜体。

CSS文本属性

color ：设置文本的颜色 用单词或16进制（建议#RRGGBB）

可以简写：如：#669900; 也可成：#690;

text-align

文本的对齐方式

left ,center right

line-height 行高

垂直方向居中，所在容器，所在元素的高度与line-height保持一致。

 

text-indent 文本的缩进

letter-spacing 字间距

text-decoration

文本的描述，修饰

underline,overline,line-through,none;

CSS列表属性

List-style:none;

List-style-type:none;

列表项前面的项目符号去掉。

ul,li{List-style-type:none;}

CSS细线表格

<table rules=”all”>

<table bgcolor=”” cellspacing=”2” >

<td bgcolor=”white” >

<table style=”border-collapse:collapse”

CSS边框属性table,td

CSS边框属性

border:线宽像素 线型 红色。

Border:1px solid red; 同时设置四条边

Border-方向（top,right,bottom,left）:1px solid red; 设置一条边的情况。

Border-方向（top,right,bottom,left）:none 不要某条边的设置方法。

案例 新闻案例，排版

案例 新闻列表

<style type="text/css">

.title,.content{ /*多元素组合声明*/

width:500px; /*设置div的宽度*/

border:1px solid green;/*设置div的边框*/

}

.title{

height:45px; /*设置div的高度*/

line-height:45px; /*设置div的行高*/

background:green;  /*设置div的背景色*/

font-size:25px;/*设置字体的大小*/

font-weight:200;/*设置字体的加粗*/

}

.content a:link,.content a:visited{color:gray; text-decoration:none;}/*同时声明链接默认样式及鼠标单击过后的样式*/

.content a:hover{color:red; text-decoration:none;}/*设置鼠标放上面的样式*/

.content li{

border-bottom:1px dashed gray; /*设置li的底边的线的样式*/

width: 450px; height:25px;  /*设置li的宽和高*/

line-height:25px;/*设置li行高*/

}

</style>

Body中的内容：

<div class="title"> 新闻中心</div>

<div class="content">

<ul>

<li><a href="#">长春供暖首日遇重度“烟霾“ 市民:以为谁家着火了</a></li>

<li><a href="#">广州去年28部门罚没8.7亿 7亿其他收入未说明</a></li>

<li><a href="#">广州去年28部门罚没8.7亿 7亿其他收入未说明</a></li>

<li><a href="#">年内5次降息为买房人减负 百万房贷可省17万</a></li>

<li><a href="#">台湾太平岛灯塔完工 可照射越南所占岛礁</a></li>

<li><a href="#">解放军允许智能手机进军营安装部队自研软件</a></li>

<li><a href="#">广州去年28部门罚没8.7亿 7亿其他收入未说明</a></li>

</ul>

</div>

最后效果如下：

CSS简介及基本知识的更多相关文章

  1. CSS 简介

    CSS 简介 需要具备的基础知识 在继续学习之前,你需要对下面的知识有基本的了解: HTML XHTML CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义 ...

  2. CSS那些事儿-阅读随笔1（CSS简介与选择符）

    最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style ...

  3. CSS：CSS 简介

    ylbtech-CSS:CSS 简介 1.返回顶部 1. CSS 简介 你需要具备的知识 在继续学习之前,你需要对下面的知识有基本的了解: HTML / XHTML 如果你希望首先学习这些项目,请在  ...

  4. html5快速入门（二）—— CSS简介

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

  5. Htmlt_Div+Css简介

    DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV ...

  6. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  7. CSS 简介、 选择器、组合选择器

    #CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  8. CSS（一）：CSS简介和基本语法

    一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet:即层叠样式表.样式定义了如何显示HTML或XHTML元素.包括对字体.颜色.边距.高度.宽度.背景图片.网页定位等 ...

  9. IT兄弟连 HTML5教程 CSS3揭秘 CSS简介

    HTML使用标签将内容放到网页上,也可使用元素和属性来控制简单的文档外观.如果希望更全面地控制Web页面的外观和布局,则需要使用层叠样式表(简写为CSS).CSS规范的工作原理在于允许用户制定一些规则 ...

随机推荐

  1. iOS加密算法总结

    常用加密算法: DES:Data Encryption Standard,即数据加密算法,它是IBM公司于1975年研究成功并公开发表的. DES(数据加密标准)原理: DES是一个分组加密算法,它以 ...

  2. 员工选票系统-java

    Yuangong.java package com.toupiao; public class Yuangong { private String name; private int piao; pu ...

  3. Linux目录结构和基础知识

    目录结构: /bin:存放系统常用的命令程序 /boot:系统启动或引导所需要的一些文件 /dev:可用的设备文件 /etc:系统配置相关的东西 /home:所有用户的主目录 /lib,lib64:存 ...

  4. Java基本包装类型

    基本类型的对象包装,也就是将常用的基本数据类型包装成对象 byte Byte short Short int Integer long Long boolean Boolean float Float ...

  5. Webpack结合ES6

    一.概述ES6现在正是风华正茂的时候,各个公司都是 尝试去使用,并且作为前端工程师ES6也是体现技术的亮点.但是,现在的浏览器对es6支持不是 特别的兼容,最终还是需要把es6转换为es5,webpa ...

  6. 1077. Kuchiguse (20)

    The Japanese language is notorious for its sentence ending particles. Personal preference of such pa ...

  7. php和apache工作原理?

    1.CGI和FastCGI是apache处理php脚本的其中两种工作模式,还有ISAPI,SAPI等 2.而php-fpm并不是一种工作模式,而是一个PHP在FastCGI模式运行下的进程管理器,全称 ...

  8. IDEA2017注册码

    1. 到网站 http://idea.lanyus.com/ 获取注册码. 2.填入下面的license server: http://intellij.mandroid.cn/ http://ide ...

  9. Spring MVC之适配器的获取及执行(RequestMappingHandlerAdapter)

    首先看下doDispatch()方法如何找到适合的适配器来执行方法的: protected HandlerAdapter getHandlerAdapter(Object handler) throw ...

  10. C语言博客作业—函数嵌套调用

    一.实验作业 1.1 PTA题目:递归法对任意10个数据按降序排序 1.1.1设计思路 void sort(int a[],int n) { 定义整型循环变量i,中间变量temp,最小值min: 令m ...