从css到页面样式渲染

写了那么多class，color，background，display...；可能有时候会想怎么在页面上显示，改变元素的样式。本文简要介绍了整个解析、匹配、渲染过程css描述CSS是CascadingStyleSheets的简称，是一种样式表语言。对应各种语法规则，可以为HTML指定样式。基本规则图像来源。CSS规则由两部分组成：选择器和声明。上图中element对应的类选择器，后面是声明（Declaration）。每个语句由一个属性（Property）后跟一个冒号（:）和一个值（value）后跟一个分号（;）组成。CSS解析解析html或外部css文档，就是将文档转化为代码可以理解的有意义的结构。解析结果表示文档结构的节点树，解析分为词法分析和句法分析。词法分析也是编译原理中的一个术语。它从左到右一个字符一个字符地读取源程序，扫描字符流，根据构词规则识别单词。这个过程可以使用lex等工具自动生成。语法分析，主要任务是在词法分析的基础上，将单词序列组合成各种语法短语，如“程序”、“语句”、“表达式”等。解析工作通常分为两个部分：词法分析Decoder，负责将输入流分解为有效字符。解析器负责根据不同语言的语法规则分析文档结构，最后构建解析树。词法分析器知道如何去除不相关的字符，例如空格和换行符，并且是css解析所特有的，因为它是一种上下文无关的语法，可以被各种解析器解析。webkit使用Flex和Bison解析器生成器从css语法文件自动创建解析器。解析器将CSS文件解析为StyleSheet对象，每个对象包含CSS规则。CSS规则包含选择器和声明对象。上图是从像素生命周期的ppt中选出的一张图。有兴趣的可以看演讲视频。这非常简单。CSS样式规则将以各种方式进行索引，以便快速有效地进行搜索。实现各个样式属性的C++类，比如ppt中的BorderLeftColor类，是Python脚本在构建时自动生成的。具体在代码实现上，webkit使用CSSRuleSet对象保存样式规则，需要创建通用规则时调用createStyleRule()；browsersmatchselectorsfromrighttoleft在使用css选择器进行样式匹配时，尽量少使用层级关系，因为这样可以减少选择器匹配的次数，提高css解析的效率。事实上，浏览器使用了从右到左的解析顺序，这也提高了效率。通常在写css样式的时候，我们一贯的思路是从左到右解析，从根节点开始，逐层遍历匹配，直到匹配到所有的选择器。浏览器以相反的顺序解析它们。从右向左匹配的好处我们简单回顾一下本题的上下文，也就是浏览器对页面的解析过程：HTML解析器生成DomTree，css解析器生成样式规则，即CSSOM树。Dom和CSSOM的匹配完成后，rendertree最终合并。根据rendertree开始布局...根据这张图，可以对渲染流程有个大概的了解。回到浏览器匹配css规则，如果只有一个选择器匹配一个元素，从左到右匹配似乎很合理，但正常情况是一个dom节点，比如