从事web前端开发的人，都与CSS有着千丝万缕的关系。可能有人不知道CSS是怎么工作的，浏览器是怎么解析写好的CSS呢？学习前端开发必不可少，首先要了解CSS的原理。一、浏览器和CSS的发展Web浏览器主要是通过HTTP协议连接Web服务器获取网页。HTTP允许网络浏览器向网络服务器发送数据并获取网页。目前最常用的HTTP是HTTP/1.1，在RFC2616中有完整的定义。HTTP/1.1有一组InternetExplorer不完全支持的标准，但是许多其他当代Web浏览器完全支持它们。网页的位置用URL（UniformResourceLocator）表示，也就是网页的地址；以http:开头的都是通过HTTP协议登录的。许多浏览器还支持其他类型的URL和协议，例如ftp:是FTP（文件传输协议），gopher:是Gopher，https:是HTTPS（HTTPoverSSL）。早期的网络浏览器只支持简化版的HTML。专有软件浏览器的快速发展导致了非标准HTML代码的产生。但随着HTML的发展，它获得了很多显示功能以满足设计人员的需求。随着这些能力的增加，拥有一种在外部定义样式的语言变得越来越没有意义。1994年，HaKunLee提出了CSS的初步提案。BertBos正在设计一款名为Argo的浏览器，他们决定在CSS方面进行合作。曾经有一些关于样式表语言的提议，但CSS是第一个包含“级联”思想的人。在CSS中，文档的样式可以从其他样式表继承。读者可以在某些地方使用自己喜欢的风格，而在其他地方继承或“级联”作者的风格。这种层叠的方式，让作者和读者都可以灵活的加入自己的设计，组合自己的喜好。.1997年初，W3C组织了一个CSS工作组，由ChrisRiley领导。该工作组针对第一版中未涵盖的问题展开讨论，从而产生了第二版的要求，该版于1998年5月出版。截至2007年，第三版尚未完成。2.浏览器如何渲染和加载页面？为什么有的网站打开时加载很慢，同时显示整个页面，而有的网站是从上到下逐渐显示的？要理解这一点，可以从下面的大致流程说起：浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。当渲染到页面的某个部分时，上面所有的部分都已经下载了（并不是所有关联的元素都已经下载了）。如果遇到语义可解释的标签嵌入文件（JS脚本、CSS样式），那么IE的下载过程会启用单独的连接进行下载。并在下载后解析，在解析过程中，停止下载页面下方的所有元素。下载样式表后，将与之前下载的所有样式表一起解析。解析完成后，所有之前的元素（包括之前渲染过的元素）都会被重新渲染。如果JS和CSS中有重定义，后面定义的函数会覆盖前面定义的函数。这里的关键是三分2-5。渲染效率与以下三点有关：CSS选择器查询定位效率浏览器渲染方式和算法渲染内容的大小3.什么是CSS以及CSS的优点什么是CSS？CSS是层叠样式表的缩写。·CSS语言是一种标记语言，不需要编译，可以直接被浏览器解释执行（属于浏览器解释型语言）。·CSS负责在标准网页设计中呈现网页内容(XHTML)。·CSS文件也可以说是文本文件，其中包含一些CSS标签，CSS文件必须以css作为文件名后缀。·通过简单的更改CSS文件，就可以改变网页的整体呈现方式，减少我们的工作量，因此是每一位网页设计师的必修课。·CSS由W3C的CSS工作组制作和维护。与传统的TABLE网页布局相比，使用CSS+DIV进行网页重构具有以下三个显着优势：性能和内容分离。将设计部分分离出来，放在一个独立的样式文件中，提高页面浏览速度。同样的页面视觉效果，CSS+DIV重构的页面容量远小于TABLE编码的页面文件，前者一般只有后者的1/2大小。浏览器不必编译大量冗长的标签。易于维护和修改。只需修改几个CSS文件，就可以重新设计整个网站的页面。4、浏览器对CSS的匹配原则浏览器的CSS匹配不是从左到右查找，而是从右到左查找。比如前面提到的DIV#divBoxpspan.red{color:red;}，浏览器的搜索顺序是这样的：首先在html中搜索所有class='red'的span元素，然后检查是否父元素p元素中有没有，然后判断p的父元素中是否有id为divBox的div元素，如果都存在则css匹配。浏览器从右向左搜索的好处是尽早过滤掉一些不相关的样式规则和元素。Firefox将这种搜索方法称为keyselector（关键字查询）。所谓关键字就是样式规则中最后一个（最右边）的规则，上面的key就是span.red。
