作者：陈大羽头github：KRISACHAN在上一篇【HelloCSS】CSS起源的序言中介绍了CSS的诞生缘由和发展历史，了解CSS的存在意义。从正文开始，正式介绍CSS语言的特性和功能。本文主要介绍CSS的语法以及CSS的工作原理。CSS语法1.基本规则CSS规则主要由两部分组成：选择器和声明。选择器是开发人员希望更改其样式的HTML元素。Declarations是HTML中开发者想要改变的元素规则，可以是一个也可以是多个。每条声明（declarations）由一个属性（property）和一个值（value）组成。属性是开发人员希望设置的样式属性。值（value）是属性的具体内容。属性和值用冒号隔开，声明直接用分号隔开。CSS中的注释以/*开头，以*/结尾。/*选择器{property:value}*/h1{color:red;font-size:14px;}上面这行代码的作用是定义h1元素中的文字颜色为红色，设置字体大小为14px。这是基本规则，具体规则请参考CSS基础语法。2.样式表编写规则每个HTML元素都有一个初始样式，但样式规则也可以被开发者改变。HTML元素样式修改有如下书写规则。内部样式表（写在标签内）内联样式（写在HTML标签中）外部样式表（写在CSS文件中并导入到HTML中）h1{颜色：红色；字体大小：14px;

3.@rule(at-rule)at-rule是以@开头，后跟标识符，以;结尾的CSS语句。@charset@charset用于定义样式表中使用的字符编码。它必须写在样式表的最开头，并且前面不能有其他字符。/*@charset"<字符集>";*/@字符集“UTF-8”；@import@import用于导入外部CSS样式表文件。/*@导入网址；*//*@importurl媒体查询列表；*/@import'custom.css';@importurl("fineprint.css")print;@namespace@namespace用于定义用于CSS样式表中XML命名空间的@rules。/*@namespace<命名空间前缀>?[<字符串>|<网址>];*/@namespaceurl(http://www.w3.org/1999/xhtml);@namespacesvgurl(http://www.w3.org/2000/svg);@media@media用于定义媒体查询以将样式应用于一种或多种设备类型、特定功能和上下文。/*@media*/@mediascreenand(min-width:900px){h1{color:red;字体大小：14px；}}@page@page用于在打印文档时修改某些CSS属性。@page规则只能修改文档的margin、orphans、widow、pagebreak，其他属性修改无效。/**@page{**}*/@page{大小：10in20in;margin:10%20%;}@keyframes@keyframes通过在动画序列Frames中定义key来控制一个CSS动画不同步骤的状态。/*@keyframes*/@keyframesslidein{from{margin-left:100%;宽度：300%；}至{左边距：0%；宽度：100%；}}@supports@supports用于检测规则组规则是否生效。规则类似于@media/**@supports{*<具体规则>*}*/@supports(display:flex){div{display:flex;}}@viewport@viewport用于设置视口（viewport）特性。/**@viewport{**}*/@viewport{最小宽度：640px;最大宽度：800px；}@viewport{缩放：0.75；最小缩放：0.5；max-zoom:0.9;}@viewport{orientation:landscape;}@counter-style@counter-style用于自定义counter的样式/**@counter-style{**}*/@counter-style带圆圈的alpha{系统：固定；符号：????????????????????????:"}.items{用于指定网页的文本字体。/**@font-face{**}*/@font-face{font-family:"BitstreamVeraSerifBold";src:url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");}body{font-family:"BitstreamVeraSerifBold",serif}@doucment@document如果满足条件组的条件，则规则生效（推迟到CSSLevel4规范）/**@documentname(guide){**}*/@documenturl(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:"*//*让上面提到的页面真的很丑*/body{color:purple;背景：黄色；}}注意：上面的@rule属性并不完整，还有少量相关的没有列出来。如果需要详细列表，可以阅读HowdoesMDNCSSwork?页面渲染机制在讲CSS工作流程之前，我们先简单了解一下页面渲染机制。页面渲染可以分为以下五个步骤：处理HTML创建DOM树；处理CSS以创建CSSOM树；根据DOM和CSSOM合并渲染树；根据渲染树布局；绘制渲染树。以上就是页面渲染的过程。CSS工作流程从上面的页面渲染流程我们可以知道，浏览器在解析完HTML和CSS之后，就开始进行合并渲染了。简单的说就是用样式来绘制HTML规则。CSS的工作流程就是在DOM树上定义CSS规则。HTML和CSS的具体解析规则属于编译原理的内容，这里就不展开了。但是在CSS工作的过程中有两个词值得注意，reflow和repaint。重排：渲染树的重构称为重排。也就是说，当页面布局或DOM元素的几何属性发生变化时，就会发生浏览器回流。以下五种情况会触发浏览器重排：页面渲染初始化；添加和删??除DOM元素；DOM元素的位置、大小，以及引起大小变化的内容变化；当调整大小事件发生时。重绘：渲染树中只影响外观而不影响样式的属性变化称为重绘。例如，颜色和背景颜色的变化。注：后面的文章会详细讲解reflow和repaint，以及相关的性能问题和优化。参考资料：浏览器如何工作？CSS是如何工作的？CSS语法CSS参考MDNCascadingStyleSheetsBrowserRenderingProcess【HelloCSS】系列【HelloCSS】是以CSS基本概念为主题的系列文章，旨在帮助您更深入地理解和提升CSS在开发者心目中的地位.由于本人鱼头水平有限，文笔水平有限，如果您发现文章中有不合理或不正确的地方，欢迎指出。我将不胜感激；如果您通过文章有什么想法或疑问，希望您能积极留言，我们共同探讨；如果你通过这一系列的文章有所收获，这会让鱼头大喜过望！如果你也喜欢CSS，喜欢讨论技术，或者对本文或本系列有什么意见或建议，非常欢迎你加鱼头微信好友一起讨论。当然，鱼头也希望和大家聊聊生活和爱好。谈论一切。鱼头微信公众号是：krisChans95，也可以扫描二维码加好友，备注“顺丰”即可