1. 简介
用于布局与美化网页（颜色，字体）
CSS语言是一种标记语言，不需编译，可直接由浏览器执行
大小写不敏感
CSS定义由选择符、属性、属性取值组成
格式：selector{property:value}
注释：/*CSS注释*/
长度单位：
相对长度单位：px像素，em相对于当前对象内文本的字体尺寸，%百分比
绝对长度单位：pt点，cm厘米，mm毫米
颜色值：#rrggbb，#rgb，rgb（x，x，x），rgb（x，x，x），x为0~100的整数值
css指定URL地址方式：
body{background-image:url(……)}
2. 在html文档中放置css的几种方式
2.1 内联引用（也叫行内引用）
就是把css样式直接作用在html标签中
<p style=”font-size:10px;color:#ffffff”>
使用css内联引用表现段落
</p>
2.2 内部引用（也叫内嵌式）
使用style标签直接把css文件中的内容直接加载到html文档内部的<head>标签中
特点是适合用于一个html文档具有独一无二的样式时
2.3 外部引用
使用了外接的css文件，一般的浏览器都有缓存功能，所以用户不用每次都下载此css文件
相对于内部引用和内联引用来说是高效的，是节省带宽的。
实现外部引用有两种方式：
使用link标签引用css
使用@import导入css
多重样式表的叠加：如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。
3. css选择器（选择符）
3.1 html（标签）选择符
即html标签，用来改变一个指定标签的样式，任何html元素都可以是一个css的选择符。
语法：html标签名{属性：值}
P{text-indent:3em} /*当中的选择符是p*/
3.2 类选择符
匹配文档中元素E的class属性的属性值为classname的元素
语法：标记名.类名{属性：值}或.类名{属性：值}
类选择符的定义需要有.符号
.note{font-size:small} /*为note的类可以被用于任何元素*/
3.3 ID选择符
匹配文档中元素E的id属性的属性值为idname的元素
语法：ID名称{属性：值}
定义需要有#符号
#main{text-indent:3em;} /*ID名称main前加上一个#号*/
id属性的特殊之处在于，一个文档中只能有一个元素使用一个ID选择符（与class属性正好相反），id属性可用来单一地标识一个元素。
3.4 关联选择符
也叫包含选择符，可单独对某种元素包含关系定义的样式表，元素1包含元素2，这种方式只对在元素1的元素2定义，对单独的元素1或元素2无定义
语法：选择符1 选择符2 ……{属性：值}
如：table a {font-size:12px}
3.5 组合选择符
也叫选择符组，可把相同属性和值的选择符组合起来书写，用逗号将选择符分开，可减少样式重复定义。
语法：选择符1，选择符2，……{属性：值}
如：h1,h2,h3,h4,h5,h6{color:green}
3.6 伪元素选择符
指对同一个html元素不同状态的一种定义方式
语法：标签：伪元素{属性：值}
例：a：link{……} /*未访问的链接*/
a：visited{……} /*已访问的链接*/
a：hovor{……} /*鼠标在链接上*/
a：active{……} /*激活链接*/
提示：a：hovor必须置于a：link和a：visited之后才有效；a：active必须置于a：hovor之后才有效
4. 常见属性和值
4.1 字体和颜色
font---简写，把所有针对字体的属性设置在声明中
font-family字体系列 font----size字体尺寸 font----style字体风格 ……
4.2 文本属性
color---文本颜色
text-align 对齐元素中的文本
text-indent 缩进元素中文本的首行
text-height 设置行高
text-decoration 向文本添加修饰，如underline下划线
4.3 背景属性
background 简写，将背景属性设置在一个声明中
background-color、background-image、background-repeat（设置是否重复，repeat、repeat-x、repeat-y、no-repeat）……
可简写为一行：
background:<背景颜色>||<背景图片>||<背景重复>||<背景附件>||<背景位置>
4.4 边框属性
每个内容或元素外边都可以有一个边框，分top、bottom、left、right
有color（颜色），style（样式，一定要取值），width（宽度）
style取值：none无样式 hidden除了同表格边框发生冲突的时候，其他同none
dotted点划线 dashed虚线 solid实线 double双线 groove槽状 ridge脊状与groove相反
inset凹陷 outset凸出，与inset相反
4.5 列表属性
list-style-type 设定引导列表项的符号类型，可设置多种符号类型，值为disc、circle、square等
list-style-image 使用图像作为定制列表符号
list-style-position 决定列表项目缩进的程度
三．DIV+CSS网页标准化布局
1. DIV+CSS对页面布局的优势
表现与内容相分离；代码简洁，提高页面浏览速度；易于维护和改版；提高搜索引擎对网页的索引效率
2. “无意义”的HTML元素div和span
div和span标签没有任何内容上的意义，但与CSS结合起来后应用十分广泛。它们被用来组合成一大块HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来。span是内联的，用在一小块内联HTML中，而div是块级的（等同于其前后有断行）。
3. W3C盒子模型
4. 与页面布局有关的CSS属性
position 用于定义一个元素是否absolute（绝对），relative（相对）
top、left 层距离顶点纵、横坐标的距离
text-align、line-height
z-index 决定层的先后顺序和覆盖关系
display 显示属性，设定block值以块状显示；设定inline值则内联显示；设定none值关闭指定元素及其子元素的显示
visibility 针对嵌套层的设置，inherit父层可见子层可见，visible父层是否可见子层都可见，hidden父层是否可见子层都隐藏
overflow 设置层内的内容超过曾所能容纳的范围处理方式。常用hidden，隐藏超出层大小的内容
float 设置区块漂浮属性，分left、right
clear 清除属性指定一个元素是否允许有元素漂浮在它旁边，值有left、right、none（缺省值）、both
5. 盒子区块框的定位
相对定位a:hovor{
position:relative;
top:1px; /*设置元素使用相对定位*/
left:1px;
}
绝对定位（不方便更改，少用）