前端开发之CSS原理详解

前端开发之CSS原理详解

　从事Web前端开发的人都与CSS打交道很多，有的人也许不知道CSS是怎么去工作的，写出来的CSS浏览器是怎么样去解析的呢？当这个成为我们提高CSS水平的一个瓶颈时，是否应该多了解一下呢？

　　一、浏览器的发展与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年为止，第三版还未完备。

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

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

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

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

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

　　三、什么是 CSS 以及 CSS 的优点

　　什么是 CSS？

1. CSS 是 Cascading Style Sheets(层叠样式表)的简称。
2. CSS 语言是一种标记语言，它不需要编译，可以直接由浏览器解释执行(属于浏览器解释型语言)。
3. 在标准网页设计中 CSS 负责网页内容 (XHTML)的表现。
4. CSS 文件也可以说是一个文本文件，它包含了一些 CSS 标记，CSS 文件必须使用 css 为文件名后缀。
5. 可以通过简单的更改 CSS 文件，改变网页的整体表现形式，可以减少我们的工作量，所以它是每一个网页设计人员的必修课。
6. CSS是由W3C的CSS工作组产生和维护的。

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

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

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

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

　　四、浏览器对 CSS 的匹配原理

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

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

　　五、优化你的 CSS

　　所谓高效的 CSS 就是让浏览器在查找 style 匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写 CSS 犯一些低效错误：

　　1、不要在ID选择器前使用标签名

　　一般写法：DIV#divBox

　　更好写法：#divBox

　　解释：因为ID选择器是唯一的，加上div反而增加不必要的 CSS 匹配。

　　2、不要在 class 选择器前使用标签名

　　一般写法：span.red

　　更好写法：.red

　　解释：同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下：

　p.red{color:red;}
　　span.red{color:#ff00ff}

　　如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写

　　3、尽量少使用层级关系

　　一般写法：#divBoxp.red{color:red;}

　　更好写法：.red{..}

　　4、使用 class 代替层级关系

　　一般写法：#divBox ul li a{display:block;}

　　更好写法：.block{display:block;}

　　5、在 CSS 渲染效率中 id 和 class 的效率是基本相当的

　　class 会在第一次载入中被缓存，在层叠中会有更加好的效果，在根部元素采用id会具有更加好（id有微妙的速度优势）。

       感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# 前端开发之CSS原理  # javascript  # CSS原理详解  # 样式表  # 是从  # 选择器  # 自己的  # 的人  # 重构  # 的是  # 从上到下  # 波斯  # 是一个  # 加载  # 几个  # 就会  # 如果你  # 是一种  # 会有  # 完成后  # 放在  # 第一个  # 多个 

相关文章： 济南网站建设制作公司,室内设计网站一般都有哪些功能？  网站制作外包价格怎么算,招聘网站上写的“外包”是什么意思？  深入理解Android中的xmlns:tools属性  建站之星后台密码遗忘？如何快速找回？  建站DNS解析失败？如何正确配置域名服务器？  高端建站三要素：定制模板、企业官网与响应式设计优化  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？  中山网站推广排名,中山信息港登录入口？  C++如何将C风格字符串（char*）转换为std::string？（代码示例）  建站主机选哪种环境更利于SEO优化？  香港服务器部署网站为何提示未备案？  开源网站制作软件,开源网站什么意思？  如何高效完成自助建站业务培训？  如何用景安虚拟主机手机版绑定域名建站？  如何通过智能用户系统一键生成高效建站方案？  如何在万网自助建站平台快速创建网站？  专业网站制作服务公司,有哪些网站可以免费发布招聘信息？  南阳网站制作公司推荐,小学电子版试卷去哪里找资源好？  如何通过FTP空间快速搭建安全高效网站？  郑州企业网站制作公司,郑州招聘网站有哪些？  建站主机功能解析：服务器选择与快速搭建指南  如何快速搭建FTP站点实现文件共享？  制作电商网页,电商供应链怎么做？  如何快速查询网站的真实建站时间？  西安专业网站制作公司有哪些,陕西省建行官方网站？  常州企业建站如何选择最佳模板？  湖北网站制作公司有哪些,湖北清能集团官网？  网站制作知乎推荐,想做自己的网站用什么工具比较好？  相亲简历制作网站推荐大全,新相亲大会主持人小萍萍资料？  高防服务器：AI智能防御DDoS攻击与数据安全保障  专业网站设计制作公司,如何制作一个企业网站，建设网站的基本步骤有哪些？  详解ASP.NET 生成二维码实例（采用ThoughtWorks.QRCode和QrCode.Net两种方式）  如何规划企业建站流程的关键步骤？  ,有什么在线背英语单词效率比较高的网站？  Android自定义listview布局实现上拉加载下拉刷新功能  如何通过商城自助建站源码实现零基础高效建站？  SAX解析器是什么，它与DOM在处理大型XML文件时有何不同？  头像制作网站在线观看,除了站酷，还有哪些比较好的设计网站？  Swift中switch语句区间和元组模式匹配  详解jQuery中基本的动画方法  在线制作视频网站免费,都有哪些好的动漫网站？  教程网站设计制作软件,怎么创建自己的一个网站？  网站制作的软件有哪些,制作微信公众号除了秀米还有哪些比较好用的平台？  广州网站制作的公司,现在专门做网站的公司有没有哪几家是比较好的，性价比高，模板也多的？  江苏网站制作公司有哪些,江苏书法考级官方网站？  建站之星导航如何优化提升用户体验？  建站之星后台密码遗忘如何找回？  香港服务器网站测试全流程：性能评估、SEO加载与移动适配优化  如何快速搭建响应式可视化网站？  如何配置WinSCP新建站点的密钥验证步骤？