css cascading style sheet :

层叠样式表，一种专门描述结构文档的表现方式的文档，主要用于网页风格的设计，包括字体大小，颜色，以及元素的精确定位。

css发展：

1998年css2.0,最为广泛使用的一个版本，现在一般是这个版本
2004年css2.1对css2的小范围修改，删除了一些浏览器支持不成熟的属性，我们认为是css2.0的修订版。
2010年css3.0 完善一些不足，增加了色彩校正，透明功能，变形，动画模块，一些浏览器并不能很好支持。在htm5的使用；

css和传统html的优势：

1.表达效果丰富：精确了，属性也多了
2.文档体积减少了：因为一些样式可重复使用
3.便于信息检索：文档的分离，搜索更快
3.可读性好：规范统一了格式，以及分离了文档。

下面主要介绍的是css2.0

1.使用样式需要引入样式到html中，有下面4种方式：

1.1.用的不是很多，没有做分离，不是很方便

1.2.

1.3.样式和html文件为两个文件，分离：

1.4.这种方式，有些浏览器不是很好的支持，一般将一些比较高级的样式通过这种方式导入，优选第三种方式。

2.样式的优先级，采用哪个样式效果，一般只使用一两种方便，以便维护和可读性。

即：上面的1，2，4，3顺序。

3.样式的语法，选择器的种类

selector:选择器，决定该样式对哪些元素起作用。

3.1：直接标签的名字

3.2.类选择器，以“.”号隔开，可以不指定元素（有元素表示特指），class的值，表示该值对应的标签都是该样式。

一个标签同时使用多个样式：（类选择器独有的）[只有这种方式像是标签在选择样式，别的方式都像是样式在选择标签]

3.3.Id选择器，以“#”号隔开。和类选择器最大区别：看的是Id值和一个标签不支持多个样式写法，其他类似效果。

3.4.选择器的组合，以“，”号隔开选择器，让不同类型选择器拥有相同的样式，减少代码，更直观。

3.5选择器的嵌套，以空格间隔，表示该选择器的子选择器，以标记选择器为例：

4.字体和文本属性

5.边框的属性：border可以其设置所有的属性。

简写：

6.背景的属性：

7.列表的属性：

list-style-position是列表项前面空格的距离，上边标识的有误。下面实例：

不一样的方式可以实现同样的效果：

8.表格的样式：

因为一些选择器的组合使用，所以有些选择器的样式被分开写在同样的选择器中。如上情况。

实例:空单元格隐藏和标题在下，单元格边距大的例子。

9.链接动态效果的伪属性：

10.div+css布局：

10.1盒子模型：

10.1.1：border属性

10.1.2：padding内容和边框的距离

将整个内部div当作外部div的一个内容处理。

10.1.3：margin：外边距

左右俩个行级元素距离是俩个margin的和

上下两个元素（块级标签）的距离是其中一个较大的marging值：

当margin值为负数的时候：相邻元素可以出现覆盖效果；父子元素可以出现分离的效果。

10.2：元素定位

10.2.1float属性三个值：left,right,默认none。

添加该浮动属性，相当将其移出父标签，其他标签按照没有他的效果布局，只是被他挡住的文本向右边移动（外边距的距离）出现环绕效果，

而这个标签大小会缩小（由文本和内边距决定）同时尽量向属性规定方向移动，由父标签的内边距和该标签的外边距决定，上方向的距离不变。

都是设置为左浮，两个都移除父标签，但两个之间仍然遵循外边距规则，并且左上端点会在同一水平线上。

10.2.2有时候需要有些地方清除浮动的影响：清除的效果就是移动到其下方。

10.2.1一般标签的位置都是基于父标签或者兄弟标签，有时候需要基于body标签和初始位置（默认的一般位置）进行定位：

两个子标签absolute的例子：

另一个相对自身的距离relative属性值：

10.3对于重叠的标签，谁显示在上面的问题：

 css的总结：（了解是行级标签还是块级标签对于布局很重要：决定是否有边框和换行显示）

1.四种导入方式，不同的优先级：

2.五种选择器的方式：标记，类，id，组合，嵌套选择器。

2.1一种样式对应多个标签的写法：

(先定义好样式了：)

a.标签是同一种标签类型

b.标签有相同的Id或者类名

(先定义好标签了：)

c.组合的方式，多个标签，写成一个样式

2.2一种标签拥有多个样式的写法：

（先定义好标签了）

a.标签有部分相同的样式被组合写在一起，另一部分样式单独写在一个地方。

(先定义好类标签和样式了（别的类标签和样式已经存在了，相当于新加的标签，采用多个定义好的样式）)

b.类选择器（独有）的方式，一个class中可以有多个样式。

3.元素的属性（特殊的属性display:block/inline 行级和块级标签进行转换，是否拥有边框和是否换行的能力）

3.1文字的属性：

3.2文本的属性：

边框的属性：（块级标签才有）

背景的属性

列表的属性：

表格的属性：

链接的属性：

4.元素的盒子模型：边距（外边距），边框，填充（内边距），内容

margin

border

padding

5.元素布局的位置：float  positon z-index

左右浮动：

相对位置定位：

层叠优先显示：

css

原文：http://www.cnblogs.com/straybirds/p/6288369.html