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

Posted 2021-04-08 web前端网页设计

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

浏览器的发展与CSS

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

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

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

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

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

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

1. 浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。

2. 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。

3. 如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。

4. 并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。

5. 样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。

6. JS、CSS中如有重定义，后定义函数将覆盖前定义函数。

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

1. CSS 选择器的查询定位效率

2. 浏览器的渲染模式和算法

3. 要进行渲染内容的大小

什么是 CSS 以及 CSS 的优点

什么是 CSS？

  CSS 是 Cascading StyleSheets(层叠样式表)的简称。

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

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

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

 可以通过简单的更改 CSS 文件，改变网页的整体表现形式，可以减少我们的工作量，所以它是每一个网页设计人员的必修课。

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

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

1. 表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。

2. 提高页面浏览速度。对于同一个页面视觉效果，采用 CSS+DIV 重构的页面容量要比 TABLE 编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。

3. 易于维护和改版。你只要简单的修改几个 CSS 文件就可以重新设计整个网站的页面。

浏览器对 CSS 的匹配原理

浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。

比如之前说的 DIV#divBox pspan.red{color:red;}，浏览器的查找顺序如下：先查找 html 中所有 class=’red’ 的 span 元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有 id 为 divBox 的 div 元素，如果都存在，则 CSS 匹配上。

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

 这些都是一些前端开发学习中必须了解的CSS知识，这些你都知道了吗？