CSS的历史与工作原理

与CSS经验分享
服务器君一共花费了300.454 ms进行了6次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

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这三点。渲染效率与下面三点有关:

  • css选择器的查询定位效率
  • 浏览器的渲染模式和算法
  • 要进行渲染内容的大小

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

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

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

  • 表现和内容相分离将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。
  • 提高页面浏览速度对于同一个页面视觉效果,采用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。

5. 优化你的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代替层级关系。一般写法:#divBoxullia{display:block;},更好写法:.block{display:block;}

5. 在css渲染效率中id和class的效率是基本相当的。class最在第一次载入中被缓存,在层叠中会有更加好的效果,在根部元素采用id会具有更加好(id有微妙的速度优势)。

本文地址:http://www.nowamagic.net/librarys/veda/detail/192,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/192

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《代码之美》 聂雪军 (译者)

《代码之美》介绍了人类在一个奋斗领域中的创造性和灵活性:计算机系统的开发领域。在每章中的漂亮代码都是来自独特解决方案的发现,而这种发现是来源于作者超越既定边界的远见卓识,并且识别出被多数人忽视的需求以及找出令人叹为观止的问题解决方案。《代码之美》33章,有38位作者,每位作者贡献一章。每位作者都将自己心目中对于“美丽的代码”的认识浓缩在一章当中,张力十足。38位大牛,每个人对代码之美都有自己独特的认识,现在一览无余的放在一起,对于热爱程序的每个人都不啻一场盛宴。 虽然《代码之美》的涉猎范围很广,但也只能代表一小部分在这个软件开发这个最令人兴奋领域所发生的事情。

更多计算机宝库...