从事前端开发必须要了解的CSS原理

一、浏览器的发展与CSS

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

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

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

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

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

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

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

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

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

• CSS 是 Cascading Style Sheets(层叠样式表)的简称。
• CSS 语言是一种标记语言，它不需要编译，可以直接由浏览器解释执行(属于浏览器解释型语言)。
• 在标准网页设计中 CSS 负责网页内容 (XHTML)的表现。
• CSS 文件也可以说是一个文本文件，它包含了一些 CSS 标记，CSS 文件必须使用 css 为文件名后缀。
• 可以通过简单的更改 CSS 文件，改变网页的整体表现形式，可以减少我们的工作量，所以它是每一个网页设计人员的必修课。
• CSS是由W3C的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有微妙的速度优势）。