CSS（Cascading Style Sheets）指层叠样式表（也叫级联样式表） 。这些样式可以用来定义如何显示 HTML 元素。
语法
selector.gif
CSS 规则由两个主要的部分构成：选择器（selector）和声明块（declaration block）。
- 选择器用于选择需要改变样式的 HTML 元素；
-
声明块由一条或多条声明组成，以大括号
{}括起来； - 每条声明由一个属性（property）和以及对应的值（value）组成。属性是希望设置的 CSS 属性，每个属性有一个值。属性和值之间使用冒号分开。每条声明末尾必须包含一个分号。冒号和分号后面可以有零个或多个空白；
-
如果属性的值可以是多个关键字，则多个关键字之间通常使用空格分隔，有时则使用斜线
/或逗号。不是每个属性都可以接受多个关键字，不过很多属性都是如此； - 如果声明中的属性或值有误，则整个声明都将被忽略。
示例如下：
p {color:red; text-align:center;}
为了让 CSS 可读性更强，可以每行只描述一个属性：
p {
color:red;
text-align:center;
}
注释
CSS 注释以 /* 开始, 以 */ 结束。CSS 注释可以既可以单行显示，也可以分成多行，可以放在样式规则内部，也可以放在样式规则外部，但是不能嵌套。示例如下：
/* 这是个 CSS 注释 */
p {
text-align:center; /* 这是另一个 CSS 注释 */
/* 这是一个
多行的 CSS 注释 */
color:black;
font-family:arial; /* 这是一个包含 /* 嵌套 CSS 注释 */ 非法 CSS 注释 */
}
临时注释已经包含注释的一大段样式表时容易出现嵌套的 CSS 注释，需要特别注意。
CSS 中除了选择器、规则声明、CSS 注释以外，一般不可以包含其他内容，尤其是 HTML 标签。由于历史原因，CSS 中可以包含 HTML 注释。如下所示。
<style> <!--
p {
text-align:center;
color:black;
font-family:arial;
} -->
</style>
空白
一般来说，CSS 对待空白的方式跟 HTML 差不多，连续的空白会合并成一个空白。
当然，除此之外还有其他分隔方式。唯一的要求是，要使用空白分隔，可以是空格、制表符或换行符，可以是单个空白，也可以任意数量随意组合。同样，规则之间的空白也可以随意使用。可用的示例如下：
html{color:black;}
body {background: white;}
p {
color: gray;}
h2 {
color : silver ;
ol
{
color
:
silver
;
}
可以省略多数空白。其实，简化压缩之后的 CSS 通常就是这样的，即把多余的空白都删掉。前两个规则之后的三个规则使用的空白量一个比一个多，最后一个规则几乎把所有可以分开的内容都写在单独的一行里。
某些地方是必须使用空白的。比如空白符分隔的多个关键字，多个关键字必须要使用空白分隔开来。
厂商前缀
浏览器厂商们有时会给实验性的或者非标准的 CSS 属性和 JavaScript API 添加厂商前缀（vendor prefix），这样开发者就可以用这些新的特性进行试验，同时（理论上）防止它们的试验代码被依赖，从而在标准化过程中避免破坏 Web 开发者的代码。开发者应该等到浏览器行为标准化之后再使用未加前缀的属性。
Web 开发者一直在生产环境的网站上使用这些实验性代码，这使得浏览器厂商更难保证浏览器兼容性和处理新特性；这也伤害了更小众的浏览器，它们被迫添加其他浏览器前缀以加载热门网站。浏览器厂商们正在努力停止使用前缀来表示实验性质的代码的行为，新版浏览器逐渐删除了对带前缀属性和值的支持。现在的趋势是将实验性功能添加在需要用户自行设置偏好或标记（flag）的地方，同时编写一个更小规模的规范，以更快达到稳定状态。
主流浏览器引擎前缀:
-
-webkit-：谷歌，Safari，新版 Opera 浏览器，以及几乎所有 iOS 系统中的浏览器（包括 iOS 系统中的火狐浏览器）。基本上所有基于 WebKit 内核的浏览器； -
-moz-：火狐浏览器； -
-o-：旧版Opera浏览器； -
-ms-：IE 浏览器和 Edge 浏览器。
示例：
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
网友评论