标签:style blog http color 使用 io strong 文件 ar
一、浏览器的发展与CSS
早期的网页浏览器只支援简易版本的HTML。专属软件的浏览器的迅速发展导致非标准的 HTML 代码的产生。但随着 HTML 的成长,为了满足设计师的要求,HTML 获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。前端UI分享
当时已经有过一些样式表语言的建议了,但 CSS 是第一个含有“层叠”的主意的。在 CSS 中,一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式,在其他地方则继承,或“层叠”作者的样式,这种层叠的方式 使作者和读者都可以灵活地加入自己的设计,混合各人的爱好。
二、浏览器是如何渲染页面和加载页面
1. 浏览器下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。
3. 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。
5. 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。
这里关键的是第2-5这三点。渲染效率与下面三点有关:
2. 浏览器的渲染模式和算法
三、什么是 CSS 以及 CSS 的优点
1. 表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。
3. 易于维护和改版。你只要简单的修改几个 CSS 文件就可以重新设计整个网站的页面。
浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找。比如之前说的 DIV#divBox p span.red{color:red;},浏览器的查找顺序如下:先查找 html 中所有 class=’red’ 的 span 元素,找到后,再查找其父辈元素中是否有p元素,再判断p的父元素中是否有 id 为 divBox 的 div 元素,如果都存在,则 CSS 匹配上。
五、优化你的 CSS
1、不要在ID选择器前使用标签名
更好写法:#divBox
2、不要在 class 选择器前使用标签名。前端UI分享
更好写法:.red
p.red{color:red;} span.red{color:#ff00ff}
3、尽量少使用层级关系
一般写法:#divBoxp.red{color:red;}
4、使用 class 代替层级关系
一般写法:#divBox ul li a{display:block;}
更好写法:.block{display:block;}
class 会在第一次载入中被缓存,在层叠中会有更加好的效果,在根部元素采用id会具有更加好(id有微妙的速度优势)。
标签:style blog http color 使用 io strong 文件 ar
原文地址:http://www.cnblogs.com/zuizhongxinhao/p/3935850.html