零基础学习前端开发不可不知的CSS原理

从事Web前端开发的人都与CSS打交道不少，有的人也许不知道CSS是怎么去工做的，写出来的CSS浏览器是怎么样去解析的呢？学习前端开发必不可少必定要先了解CSS的原理的。

1.浏览器的发展与CSS

网页浏览器主要经过 HTTP 协议链接网页服务器而取得网页， HTTP 允许网页浏览器送交资料到网页服务器而且获取网页。目前最经常使用的 HTTP 是 HTTP/1.1，这个协议在 RFC2616 中被完整定义。HTTP/1.1 有其一套 Internet Explorer 并不彻底支援的标准，然而许多其余当代的网页浏览器则彻底支援这些标准。网页的位置以 URL（统一资源定位符）指示，此乃网页的地址；以 http: 开首的即是经过 HTTP协议登录。不少浏览器同时支援其余类型的 URL 及协议，例如 ftp: 是 FTP（档案传送协议）、gopher: 是 Gopher 及 https: 是 HTTPS（以SSL加密的HTTP）。

早期的网页浏览器只支援简易版本的HTML。专属软件的浏览器的迅速发展致使非标准的 HTML 代码的产生。但随着 HTML 的成长，为了知足设计师的要求，HTML 得到了不少显示功能。随着这些功能的增长外来定义样式的语言愈来愈没有意义了。

1994年哈坤·利提出了 CSS 的最初建议。伯特·波斯（BertBos）当时正在设计一个叫作 Argo 的浏览器，他们决定一块儿合做设计CSS。

当时已经有过一些样式表语言的建议了，但 CSS 是第一个含有“层叠”的主意的。在 CSS 中，一个文件的样式能够从其余的样式表中继承下来。读者在有些地方可使用他本身更喜欢的样式，在其余地方则继承，或“层叠”做者的样式,这种层叠的方式使做者和读者均可以灵活地加入本身的设计，混合各人的爱好。

1997年初，W3C 内组织了专门管 CSS 的工做组，其负责人是克里斯·里雷。这个工做组开始讨论初版中没有涉及到的问题，其结果是1998年5月出版的第二版要求。到2007年为止，第三版还未完备。

2.浏览器是如何渲染页面和加载页面的

为何有些网站打开的时候会加载会很慢，并且是整个页面同时显示的，而有些网站是从顶到下逐步显示出来的？要搞懂这个能够先从下面这个常规流程开始：

1. 浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
2. 在渲染到页面的某一部分时，其上面的全部部分都已经下载完成（并非说全部相关联的元素都已经下载完）。
3. 若是遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独链接进行下载。
4. 而且在下载后进行解析，解析过程当中，中止页面全部往下元素的下载。
5. 样式表在下载完成后，将和之前下载的全部样式表一块儿进行解析，解析完成后，将对此前全部元素（含之前已经渲染的）从新进行渲染。
6. JS、CSS中若有重定义，后定义函数将覆盖前定义函数。

这里关键的是第2-5这三点。渲染效率与下面三点有关：

1. CSS 选择器的查询定位效率
2. 浏览器的渲染模式和算法
3. 要进行渲染内容的大小

3.什么是CSS以及CSS的优势

什么是 CSS？

· CSS 是 Cascading Style Sheets(层叠样式表)的简称。

· CSS 语言是一种标记语言，它不须要编译，能够直接由浏览器解释执行(属于浏览器解释型语言)。

· 在标准网页设计中 CSS 负责网页内容 (XHTML)的表现。

· CSS 文件也能够说是一个文本文件，它包含了一些 CSS 标记，CSS 文件必须使用 css 为文件名后缀。

· 能够经过简单的更改 CSS 文件，改变网页的总体表现形式，能够减小咱们的工做量，因此它是每个网页设计人员的必修课。

· CSS是由W3C的CSS工做组产生和维护的。

采用 CSS+DIV 进行网页重构，相对与传统的 TABLE 网页布局而具备如下3个显著优点：

1. 表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中
2. 提升页面浏览速度。对于同一个页面视觉效果，采用 CSS+DIV 重构的页面容量要比 TABLE 编码的页面文件容量小得多，前者通常只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。
3. 易于维护和改版。你只要简单的修改几个 CSS 文件就能够从新设计整个网站的页面。

4.浏览器对CSS的匹配原理

浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。好比以前说的 DIV#divBox p span.red{color:red;}，浏览器的查找顺序以下：先查找 html 中全部 class=’red’ 的 span 元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有 id 为 divBox 的 div 元素，若是都存在，则 CSS 匹配上。

浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。Firefox 称这种查找方式为 keyselector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的 key 就是 span.red。