本篇则主要介绍CSS的语法与CSS是如何工作的。 CSS语法 1. 基本规则 CSS规则主要由两部分组成：选择器(selector)与声明(declarations)。 选择器(selector)是开发者希望改变样式的HTML元素。 声明(declarations)则是开发者制定的希望HTML改变的元素规则，可以是一条或多条。 每条声明(declarations)由一个属性(property)和一个值(value)组成。 属性(property)是开发者希望设置的样式属性（style attribute）。 值(value)为属性的具体内容。 属性与值之间由冒号隔开，声明与声明直接由分号隔开。 CSS中的注释以 /* 开始并以 */ 结束。 /* selector {property: value} */ h1 {color:red; font-size:14px;} 上面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。 2. 样式表书写规则 每个HTML元素都有初始的样式，但是也可以经过开发者书写而改变样式规则。 HTML的元素样式修改有以下的书写规则。 内部样式表（写在标签内部） web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF） 内联样式（写在HTML标签中）

外部样式表（写在CSS文件中，引入到HTML里） h1 {color:red; font-size:14px;}

3. @规则（at-rule） 一个at-rule就是一个CSS语句，以@开头，后接标识符，最后以；结束。 @charset @charset用于定义样式表中使用的字符编码。它必须写在样式表的最开头且前面不可有别的字符。 /* @charset ""; */ @charset "UTF-8"; @import @import用于导入外部CSS样式表文件。 /* @import url; */ /* @import url list-of-media-queries; */ @import 'custom.css'; @import url("fineprint.css") print; @namespace @namespace是用来定义使用在CSS样式表中的XML命名空间的@规则。 /* @namespace ? [ | ]; */ @namespace url(http://www.w3.org/1999/xhtml); @namespace svg url(http://www.w3.org/2000/svg); @media @media用于定义在一个或多个设备类型、具体特点和环境的媒体查询来应用样式。 /* @media */ @media screen and (min-width: 900px) { h1 { color:red; font-size:14px; } } web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF） @page @page用于在打印文档时修改某些CSS属性。@page规则只能修改margin、orphans、widow 和 page breaks of the document，对其他属性的修改是无效的。 /* * @page { * * } */ @page { size: 10in 20in; margin: 10% 20%; } @keyframes @keyframs通过定义动画序列中的关键帧来控制CSS动画不同步骤的状态。 /* @keyframes */ @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } @supports @supports用来检测规则组的规则是否生效。规则与@media类似 /* * @supports { * * } */ @supports (display: flex) { div { display: flex; } } @viewport @viewport用于设置视口（viewport）的特性。 /* * @viewport { * * } */ @viewport { min-width: 640px; max-width: 800px; } @viewport { zoom: 0.75; min-zoom: 0.5; max-zoom: 0.9; } @viewport { orientation: landscape; } @counter-style @counter-style用于自定义counter的样式 /* * @counter-style { * * } */ @counter-style circled-alpha { system: fixed; symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ; suffix: " "; } .items { list-style: circled-alpha; } @font-face @font-face用于给网页指定文本字体。 /* * @font-face { * * } */ @font-face { font-family: "Bitstream Vera Serif Bold"; src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf"); } body { font-family: "Bitstream Vera Serif Bold", serif } @doucment @document如果满足条件组的条件，则规则生效（推延至 CSS Level 4 规范） /* * @document name(guide) { * * } */ @document url(http://www.w3.org/), url-prefix(http://www.w3.org/Style/), domain(mozilla.org), regexp("https:.*") { /* 该条CSS规则会应用在下面的网页: + URL为"http://www.w3.org/"的页面. + 任何URL以"http://www.w3.org/Style/"开头的网页 + 任何主机名为"mozilla.org"或者主机名以".mozilla.org"结尾的网页 + 任何URL以"https:"开头的网页 */ /* make the above-mentioned pages really ugly */ body { color: purple; background: yellow; } } web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF） 注：上面的@规则属性并非完整，还有少量相关的没有列出，需要详细列表的可以翻阅MDN CSS是如何工作的？ 页面渲染机制 在讲CSS的工作流程之前，首先来简单看看页面的渲染机制。 页面渲染可分为下面5个步骤： 处理HTML来创建DOM tree； 处理CSS来创建CSSOM tree； 根据DOM跟CSSOM来合并render tree； 根据render tree来布局； 绘制render tree。 以上便是页面渲染的过程。 CSS的工作流程 从上面的页面渲染流程可以知道浏览器在解析了HTML跟CSS之后便开始合并渲染，简单来说就是绘制带有样式的HTML规则。 CSS的工作流程就是把CSS规则定义到DOM tree上。 HTML与CSS具体解析规则属于编译原理的内容，在这里就不作展开了。但是有在CSS工作的过程中有两个词值得注意的就是重排（reflow）跟重绘（repaint）。 重排：render tree的重新构建叫重排。也就是当页面布局或者DOM元素的几何属性发生变化时，就会发生浏览器重排。以下5种情况便会引发浏览器回流： 页面渲染初始化； DOM元素的增删； DOM元素的位置、尺寸以及引起尺寸变化的内容改变； resize事件发生时。 重绘：render tree中只影响外观而不影响风格的属性改变就叫重绘。例如color与background-color的改变。 注：后面的文章会仔细讲解重排（reflow）跟重绘（repaint）以及相关的性能问题与优化。

本文章由javascript技术分享原创和收集