关于CSS1, CSS2, CSS3
CSS1(Cascading Style Sheets, level 1)， 最早的一代CSS。早期的HTML页面很简陋，多数用标签来表示元素的样式，这时的CSS主要用来进行HTML元素的表现，因此包含的主要内容是文字、颜色、背景、盒子模型。
CSS2(Cascading Style Sheets, level 2)，由于第一代CSS与HTML混合，这时提出表现与内容分离，CSS只做表现，HTML只做内容，泾渭分明。这时的选择器比CSS1更丰富，独立性更强，也丰富了一些新的样式属性，增加了定位。
CSS3(Cascading Style Sheets, level 3)，这一代的CSS则朝着模块化方向发展，且样式内容更丰富，效果更炫酷，像过度，动画，变换等，以及排版布局更方便的伸缩盒子等。
下面是分类列出的三代CSS的样式内容，以便查阅和理解。
CSS1
选择器 Selectors
| 选择符 | 名称 | 类型 | 描述 |
|---|
| T | 类型选择器(Type Selector) | 元素选择器 | 以文档语言对象类型作为选择符（如p) |
| #myid | id选择符(ID Selector) | 元素选择器 | 以唯一标识符id属性等于myid的E对象作为选择符 |
| .myclass | class选择符(Class Selector) | 元素选择器 | 以class属性包含myclass的E对象作为选择符 |
| E F | 包含选择符(Descendant combinator) | 关系选择器 | 选择所有被E元素包含的F元素 |
| E:link | | 伪类选择器 | 设置超链接a在未被访问前的样式 |
| E:visited | | 伪类选择器 | 设置超链接a在其链接地址已被访问过时的样式 |
| E:hover | | 伪类选择器 | 设置元素在其鼠标悬停时的样式 |
| E:active | | 伪类选择器 | 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式 |
| E:focus | | 伪类选择器 | 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式 |
| E:first-letter | | 伪元素选择器 | 设置对象内的第一个字符的样式 |
| E:first-line | | 伪元素选择器 | 设置对象内的第一行的样式 |
属性 Properties
布局 Layout
| 属性 | 继承性 | 描述 |
|---|
| float | 无 | 定义了元素向左或者向右浮动放置 |
| clear | 无 | 定义了一个元素是否可以放置在它之前的浮动元素旁边，或者必须向下移动在新行中放置 |
尺寸与补白（Dimension）
| 属性 | 继承性 | 描述 |
|---|
| width | 无 | 定义了元素内容区（Content Area）的宽度 |
| height | 无 | 定义了元素内容区（Content Area）的高度 |
| margin | 无 | 为元素设置所有四个方向（上右下左）的外边距 |
| margin-* | 无 | 为元素设置某方向的外边距，*可以为top, right, bottom, left |
| padding | 无 | 为元素设置所有四个方向（上右下左）的内边距，即内容和元素边界之间的空间 |
| padding-* | 无 | 为元素设置某方向的内边距，*可以为top, right, bottom, left |
背景（Background）
| 属性 | 继承性 | 描述 |
|---|
| background | 无 | 简写属性。定义元素的背景特性 |
| background-color | 无 | 定义元素使用的背景颜色 |
| background-image | 无 | 定义元素使用的背景图像 |
| background-repeat | 无 | 定义元素的背景图像如何填充 |
| background-attachment | 无 | 定义滚动时背景图像相对于谁固定 |
| background-position | 无 | 指定背景图像在元素中出现的位置 |
边框（Border）
| 属性 | 继承性 | 描述 |
|---|
| border | 无 | 简写属性。定义元素边框的外观特性 |
| border-width | 无 | 简写属性。定义元素的边框厚度，按上、右、下、左的顺序作用于四边 |
| border-*-width | 无 | 分拆属性。定义元素某边框厚度，*可以为 top, right, bottom, left |
| border-style | 无 | 简写属性。定义元素的边框样式，按上、右、下、左的顺序作用于四边 |
| border-*-style | 无 | 分拆属性。定义元素某边框样式，*可以为 top, right, bottom, left |
| border-color | 无 | 简写属性。定义元素的边框颜色，按上、右、下、左的顺序作用于四边 |
| border-*-color | 无 | 分拆属性。定义元素某边框颜色，*可以为 top, right, bottom, left |
颜色（Color）
字体（Font）
| 属性 | 继承性 | 描述 |
|---|
| font | 有 | 简写属性。定义元素的文本特性 |
| font-family | 有 | 定义元素文本的字体名称序列 |
| font-size | 有 | 定义元素的字体大小 |
| font-weight | 有 | 定义元素文本字体的粗细 |
| font-style | 有 | 指定元素的文本是否为斜体 |
| font-variant | 有 | 定义元素的文本是否为小型的大写字母 |
文本（Text）
| 属性 | 继承性 | 描述 |
|---|
| text-transform | 有 | 定义元素的文本如何转换大小写 |
| text-indent | 有 | 定义块内文本内容的缩进 |
| text-align | 有 | 定义元素内容的水平对齐方式 |
| vertical-align | 无 | 定义行内元素在行框内的垂直对齐方式 |
| line-height | 有 | 定义元素中行框的最小高度 |
| word-spacing | 有 | 指定单词之间的额外间隙 |
| letter-spacing | 有 | 指定字符之间的额外间隙 |
| white-space | 有 | 指定元素是否保留文本间的空格、换行；指定文本超过边界时是否换行 |
文本装饰（Text Decoration）
| 属性 | 继承性 | 描述 |
|---|
| text-decoration | 无 | 文本装饰样式，如下划线，删除线 |
列表（List）
| 属性 | 继承性 | 描述 |
|---|
| list-style | 有 | 复合属性。设置列表项目相关内容 |
| list-style-image | 有 | 设置或检索作为对象的列表项标记的图像 |
| list-style-position | 有 | 设置或检索作为对象的列表项标记如何根据文本排列 |
| list-style-type | 有 | 设置或检索对象的列表项所使用的预设标记 |
Only IE
| 属性 | 继承性 | 描述 |
|---|
| scrollbar-3dlight-color | 有 | 检索或设置对象滚动条3d亮色阴影边框(threedlightshadow)的外观颜色 |
| scrollbar-darkshadow-color | 有 | 检索或设置对象滚动条3d暗色阴影边框(threeddarkshadow)的外观颜色 |
| scrollbar-highlight-color | 有 | 检索或设置对象滚动条3d高亮边框(threedhighlight)的外观颜色 |
| scrollbar-shadow-color | 有 | 检索或设置对象滚动条3d阴影边框(threedshadow)的外观颜色 |
| scrollbar-arrow-color | 有 | 检索或设置对象滚动条方向箭头的颜色。当滚动条出现但不可用时，此属性失效 |
| scrollbar-face-color | 有 | 检索或设置对象滚动条3D表面的(threedface)的外观颜色 |
| scrollbar-track-color | 有 | 检索或设置对象滚动条拖动区域的外观颜色 |
| scrollbar-base-color | 有 | 检索或设置对象滚动条基准颜色，其它界面颜色将据此自动调整 |
| filter | 有 | 设置或检索对象所应用的滤镜效果 |
| behavior | 有 | 设置或检索对象的DHTML行为 |
CSS2
这里只列出CSS2中新增的内容，包括选择器、属性（新增的属性值未列出）。
选择器（Selectors）
| 选择符 | 名称 | 类型 | 描述 |
|---|
| * | 通配选择符(Universal Selector) | 元素选择器 | 所有元素对象 |
| E>F | 子选择符(Child combinator) | 关系选择器 | 选择所有作为E元素的直接子元素F |
| E+F | 相邻选择符(Adjacent sibling combinator) | 关系选择器 | 选择紧贴在E元素之后F元素 |
| E[attr] | | 属性选择器 | 选择具有att属性的E元素 |
| E[attr="val"] | | 属性选择器 | 选择具有att属性的E元素 |
| E[attr~="val"] | | 属性选择器 | 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素 |
| E[attr|="val] | | 属性选择器 | 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择 |
| E:lang(fr) | | 伪类选择器 | 匹配使用特殊语言的E元素 |
| E:first-child | | 伪类选择器 | 匹配父元素的第一个子元素E |
| E:before | | 伪元素选择器 | 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用 |
| E:after | | 伪元素选择器 | 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用 |
属性（Properties）
定位（Positioning）
| 属性 | 继承性 | 描述 |
|---|
| position | 无 | 用于指定一个元素在文档中的定位方式 |
| top | 无 | 定义了元素的上外边距边界与其包含块上边界之间的偏移 |
| right | 无 | 定义了元素的右外边距边界与其包含块右边界之间的偏移 |
| bottom | 无 | 定义了元素的底外边距边界与其包含块底边界之间的偏移 |
| left | 无 | 定义了元素的左外边距边界与其包含块左边界之间的偏移 |
| clip | 无 | 定义了元素的哪一部分是可见的。区域外的部分是透明的 |
| z-index | 无 | 定义一个元素在文档中的层叠顺序 |
布局（Layout）
| 属性 | 继承性 | 描述 |
|---|
| display | 无 | 定义了元素是否显示，及生成哪种盒用于显示 |
| visibility | 有 | 定义了元素是否可见。与display属性不同，此属性为隐藏的对象保留其占据的物理空间 |
| overflow | 无 | 简写属性。定义了元素处理溢出内容的方式 |
| overflow-* | 无 | 分拆属性。定义了元素处理溢出内容的方式。*可为x, y |
尺寸与补白（Dimension）
| 属性 | 继承性 | 描述 |
|---|
| min-width | 无 | 定义了元素内容区（Content Area）的最小宽度 |
| max-width | 无 | 定义了元素内容区（Content Area）的最大宽度 |
| min-height | 无 | 定义了元素内容区（Content Area）的最小高度 |
| max-height | 无 | 定义了元素内容区（Content Area）的最大高度 |
书写模式（Writing Modes）
| 属性 | 继承性 | 描述 |
|---|
| direction | 有 | 检索或设置文本流的方向 |
| unicode-bidi | 无 | 用于同一个页面里存在从不同方向读进的文本显示。与 <' direction '> 属性一起使用 |
表格（Table）
| 属性 | 继承性 | 描述 |
|---|
| table-layout | 无 | 设置或检索表格的布局算法 |
| border-collapse | 有 | 设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开 |
| border-spacing | 有 | 设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距 |
| caption-side | 有 | 设置或检索表格的caption对象是在表格的那一边 |
| epmty-cells | 有 | 设置或检索当表格的单元格无内容时，是否显示该单元格的边框 |
内容（Content）
| 属性 | 继承性 | 描述 |
|---|
| content | 无 | 用来和:after及:before伪元素一起使用，在对象前或后显示内容 |
| counter-increment | 无 | 设定当一个selector发生时计数器增加的值 |
| counter-reset | 无 | 将指定selector的计数器复位 |
| quotes | 有 | 设置或检索对象内使用的嵌套标记 |
用户界面（User Interface）
| 属性 | 继承性 | 描述 |
|---|
| outline | 无 | 复合属性。设置或检索对象外的线条轮廓 |
| outline-width | 无 | 设置或检索对象外的线条轮廓的宽度 |
| outline-style | 无 | 设置或检索对象外的线条轮廓的样式 |
| outline-color | 无 | 设置或检索对象外的线条轮廓的颜色 |
| cursor | 有 | 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状 |
打印（Printing）
| 属性 | 继承性 | 描述 |
|---|
| page-break-before | 无 | 检索或设置对象之前出现的页分割符 |
| page-break-after | 无 | 检索或设置对象之后出现的页分割符 |
| page-break-inside | 无 | 检索或设置对象容器内部出现的页分割符 |
CSS3
这里只列出CSS3中新增的内容，包括选择器、属性（新增的属性值未列出）。
选择器（Selectors）
| 选择符 | 名称 | 类型 | 描述 |
|---|
| * | 通配选择符(Universal Selector) | 元素选择器 | 所有元素对象 |
| E~F | 相邻选择符(Adjacent sibling combinator) | 关系选择器 | 选择E元素所有兄弟元素F |
| E[att^="val"] | | 属性选择器 | 选择具有att属性且属性值为以val开头的字符串的E元素 |
| E[att$="val"] | | 属性选择器 | 选择具有att属性且属性值为以val结尾的字符串的E元素 |
| E[att*="val"] | | 属性选择器 | 选择具有att属性且属性值为包含val的字符串的E元素 |
| E:not(s) | | 伪类选择器 | 匹配不含有s选择符的元素E |
| E:root | | 伪类选择器 | 匹配E元素在文档的根元素 |
| E:last-child | | 伪类选择器 | 匹配父元素的最后一个子元素E。 |
| E:only-child | | 伪类选择器 | 匹配父元素仅有的一个子元素E。 |
| E:nth-child(n) | | 伪类选择器 | 匹配父元素的第n个子元素E。 |
| E:nth-last-child(n) | | 伪类选择器 | 匹配父元素的倒数第n个子元素E。 |
| E:first-of-type | | 伪类选择器 | 匹配父元素下第一个类型为E的子元素。 |
| E:last-of-type | | 伪类选择器 | 匹配父元素下的所有E子元素中的倒数第一个。 |
| E:only-of-type | | 伪类选择器 | 匹配父元素的所有子元素中唯一的那个子元素E。 |
| E:nth-of-type(n) | | 伪类选择器 | 匹配父元素的第n个子元素E。 |
| E:nth-last-of-type(n) | | 伪类选择器 | 匹配父元素的倒数第n个子元素E。 |
| E:empty | | 伪类选择器 | 匹配没有任何子元素（包括text节点）的元素E。 |
| E:checked | | 伪类选择器 | 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) |
| E:enabled | | 伪类选择器 | 匹配用户界面上处于可用状态的元素E。 |
| E:disabled | | 伪类选择器 | 匹配用户界面上处于禁用状态的元素E。 |
| E:target | | 伪类选择器 | 匹配相关URL指向的E元素。 |
| E::placeholder | | 伪元素选择器 | 设置对象文字占位符的样式。 |
| E::selection | | 伪元素选择器 | 设置对象被选择时的颜色。 |
属性（Properties）
边框（Border）
| 属性 | 继承性 | 描述 |
|---|
| box-shadow | 无 | 定义元素的阴影 |
| border-radius | 无 | 简写属性。定义元素的圆角 |
| border-image | 无 | 简写属性。定义将图像应用到元素的边框上 |
| border-image-source | 无 | 定义元素边框样式所使用的图像。 |
| border-image-slice | 无 | 用以指定从哪 4 个位置分割图像（遵循上右下左的顺序） |
| border-image-width | 无 | 定义元素边框图像的厚度 |
| border-image-outset | 无 | 定义边框图像从边框边界向外偏移的距离 |
| border-image-repeat | 无 | 定义分割图像怎样填充边框图像区域 |
颜色（Color)
字体（Font）
| 属性 | 继承性 | 描述 |
|---|
| font-stretch | 有 | 定义元素的文字是否横向拉伸变形 |
| font-size-adjust | 有 | 定义小写字母x的高度与对象文字字号的比率。 |
文本（Text）
| 属性 | 继承性 | 描述 |
|---|
| tab-size | 有 | 定义元素内容中制表符的长度 |
| word-break | 有 | 定义元素内容文本的字间与字符间的换行行为 |
| word-wrap/overflow-wrap | 有 | 定义元素内容文本遇到边界时如何换行 |
| text-align-last | 有 | 定义块内文本内容的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）或者被强制打断的行的对齐方式 |
| text-justify | 有 | 定义使用什么方式实现文本内容两端对齐 |
| text-size-adjust | 有 | 定义移动端页面中元素文本的大小如何调整 |
文本装饰（Text Decoration）
| 属性 | 继承性 | 描述 |
|---|
| text-decoration-line | 无 | 定义元素文本装饰线条位于文本的哪个位置 |
| text-decoration-color | 无 | 指定元素文本装饰线条的颜色 |
| text-decoration-style | 无 | 定义元素文本装饰线条的形状 |
| text-decoration-skip | 有 | 定义元素文本装饰线条必须跳过内容中的哪些部分 |
| text-underline-position | 有 | 定义元素装饰线的位置 |
| text-shadow | 有 | 定义文字是否有阴影及模糊效果 |
书写模式（Writing Modes）
| 属性 | 继承性 | 描述 |
|---|
| writing-mode | 有 | 设置或检索对象的内容块固有的书写方向 |
用户界面（User Interface）
| 属性 | 继承性 | 描述 |
|---|
| appearance | 无 | 设置或检索外观按照本地默认样式 |
| text-overflow | 无 | 当块容器overflow为非visible时，定义内联内容溢出其块容器是否截断或者添加(...)及自定义字符 |
| outline-offset | 无 | 设置或检索对象外的线条轮廓偏移位置的数值 |
| nav-index | 无 | 设置或检索对象的导航顺序。 |
| nav-up | 无 | 设置或检索对象的导航方向。 |
| nav-right | 无 | 设置或检索对象的导航方向。 |
| nav-down | 无 | 设置或检索对象的导航方向。 |
| nav-left | 无 | 设置或检索对象的导航方向。 |
| zoom | 有 | 设置或检索对象的缩放比例。 |
| box-sizing | 无 | 设置或检索对象的盒模型组成模式。 |
| resize | 无 | 设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。 |
多列（Multi-column）
| 属性 | 继承性 | 描述 |
|---|
| columns | 无 | 设置或检索对象的列数和每列的宽度。复合属性 |
| column-width | 无 | 设置或检索对象每列的宽度 |
| column-count | 无 | 设置或检索对象的列数 |
| column-gap | 无 | 设置或检索对象的列与列之间的间隙 |
| column-rule | 无 | 设置或检索对象的列与列之间的边框。复合属性 |
| column-rule-width | 无 | 设置或检索对象的列与列之间的边框厚度。 |
| column-rule-style | 无 | 设置或检索对象的列与列之间的边框样式。 |
| column-rule-color | 无 | 设置或检索对象的列与列之间的边框颜色。 |
| column-span | 无 | 设置或检索对象元素是否横跨所有列。 |
| column-fill | 无 | 设置或检索对象所有列的高度是否统一。 |
| column-break-before | 无 | 设置或检索对象之前是否断行。 |
| column-break-after | 无 | 设置或检索对象之后是否断行。 |
| column-break-inside | 无 | 设置或检索对象内部是否断行。 |
伸缩盒子（Flexible Box）
| 属性 | 继承性 | 描述 |
|---|
| flex | 无 | 复合属性。设置或检索伸缩盒对象的子元素如何分配空间。 |
| flex-grow | 无 | 设置或检索弹性盒的扩展比率。 |
| flex-shrink | 无 | 设置或检索弹性盒的收缩比率 |
| flex-basis | 无 | 设置或检索弹性盒伸缩基准值。 |
| flex-flow | 无 | 复合属性。设置或检索伸缩盒对象的子元素排列方式。 |
| flex-direction | 无 | 设置或检索伸缩盒对象的子元素在父容器中的位置。 |
| flex-wrap | 无 | 设置或检索伸缩盒对象的子元素超出父容器时是否换行。 |
| align-content | 无 | 设置或检索弹性盒堆叠伸缩行的对齐方式。 |
| align-items | 无 | 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 |
| align-self | 无 | 设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式。 |
| justify-content | 无 | 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 |
| order | 无 | 设置或检索伸缩盒对象的子元素出現的順序。 |
变换（Transform）
| 属性 | 继承性 | 描述 |
|---|
| transform | 无 | 检索或设置对象的变换 |
| transform-origin | 无 | 检索或设置对象中的变换所参照的原点 |
| transform-style | 无 | 指定某元素的子元素是否位于三维空间内 |
| perspective | 无 | 指定观察者与「z=0」平面的距离 |
| perspective-origin | 无 | 指定透视点的位置 |
| backface-visibility | 无 | 指定元素背面面向用户时是否可见 |
过度（Transition）
| 属性 | 继承性 | 描述 |
|---|
| transition | 无 | 复合属性。检索或设置对象变换时的过渡效果 |
| transition-property | 无 | 检索或设置对象中的参与过渡的属性 |
| transition-duration | 无 | 检索或设置对象过渡的持续时间 |
| transition-timing-function | 无 | 检索或设置对象中过渡的类型 |
| transition-delay | 无 | 检索或设置对象延迟过渡的时间 |
动画（Animation）
| 属性 | 继承性 | 描述 |
|---|
| animation | 无 | 复合属性。检索或设置对象所应用的动画特效 |
| animation-name | 无 | 检索或设置对象所应用的动画名称 |
| animation-duration | 无 | 检索或设置对象动画的持续时间 |
| animation-timing-function | 无 | 检索或设置对象动画的过渡类型 |
| animation-delay | 无 | 检索或设置对象动画延迟的时间 |
| animation-iteration-count | 无 | 检索或设置对象动画的循环次数 |
| animation-direction | 无 | 检索或设置对象动画在循环中是否反向运动 |
| animation-play-state | 无 | 检索或设置对象动画的状态 |
| animation-fill-mode | 无 | 检索或设置对象动画时间之外的状态 |
打印（Printing）
| 属性 | 继承性 | 描述 |
|---|
| page | 无 | 检索或指定显示对象容器时使用的页面类型 |
来源：css.doyoe.com/
