了解CSS发展史和工作原理

http://blog.sina.com.cn/s/blog_6056c1900100egjq.html

仅仅是知识了解需要，转载自百度：

 CSS历史:

 

    

    从1990年代初HTML被发明开始样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。

　　但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。

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

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

　　哈坤于1994年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯·雷尔登）是这个项目的主要技术负责人。1996年底，CSS已经完成。1996年12月CSS要求的第一版本被出版。

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

使用CSS+DIV的优点

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

1：表现和内容相分离

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

2：提高页面浏览速度　

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

3：易于维护和改版

　　你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

 

具体说明请见百度知道CSS发展史.

----------------------------------------------------------------------------------------------

CSS2

 

样式单自从CSS1的版本之后，又在1998年5月发布了CSS2版本，样式单得到了更多的充实。

　　CSS2.0是一套全新的样式表结构，是由W3C推行的，同以往的CSS1.0或CSS1.2完全不一样，CSS2.0推荐的是一套内容和表现效果分离的方式，HTML元素可以通过CSS2.0的样式控制显示效果，可完全不使用以往HTML中的table和td来定位表单的外观和样式，只需使用div和 Li此类HTML标签来分割元素，之后即可通过CSS2.0样式来定义表单界面的外观。

　　CSS2.0提供给我们了一个机制，让程序员开发时可以不考虑显示和界面就可以制作表单和界面，显示问题可由美工或是程序员后期再来编写相应的 CSS2.0样式来解决。不过由于CSS2.0目前尚未见过很好的编辑软件，所以无法做到所见即所得，编写起来不易。

----------------------------------------------------------------------------------------------

CSS3

　CSS3语言开发是朝着模块化发展的。 以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：

盒子模型

列表模块

超连结方式

语言模块

背景和边框

文字特效

多栏布局

 

CSS3选择器

　　CSS3增加了更多的CSS选择器，可以实现更简单但是更强大的功能，比如:nth-child()等。

 时间表

　　几个模块现已完成，包括的SVG （可扩展矢量图形） ，媒介资源类型（Media Queries）和命名，而其他的模块开发工作则仍在进行中。如果要给出一个预定的日期的话，非常困难，不管怎样，web浏览器将全面支持CSS3的各种新特点，一些新的探索已经开始了。针对不同浏览器，新的功能是逐渐应用的，仍然需要1-2年的时间，每一个新的模块才有可能被广泛应用。

 CSS3将给我带来哪些新的影响

　　首先，我们希望，这是个正确的方式，CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说，CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许你实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。

##################################################

http://blog.csdn.net/lipeishenshen/article/details/50696271

CSS发展史

CSS（Cascading Style Sheets，层叠样式表）是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名，并使用于Web和其他媒介，如XML文档中。1996年12月W3C推出了CSS规范的第一个版本，1998年W3C发布了CSS的第二个版本即CSS2.0,2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿。

CSS1.0

• 选择器：要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，就需要用到CSS选择器。选择器大致分为派生选择器、ID选择器和类选择器，用来定义希望应用样式的HTML元素或者标签。
• 样式属性：该属性主要包括Font字体、Text文本、Background背景、Position定位、Dimensions尺寸、Layout布局、Margin外边框、Border边框、Padding内边框、List列表、Table表格和Scrollbar滚动条等，用于定义网页的一些样式变化。
• 伪类属性：主要定义了针对描述对象a的link、hover、active、visited和针对节点的first-letter、first-child、first-line等几个伪类属性。
• 保存方式：用户可以直接存储在HTML网页中，也可以将CSS样式代码存储为独立的样式表文件。

CSS2.0

• 选择器：css2提供了更多强大的选择器，用来定位HTML节点或者标记

符号名称

含义

示例

*

用于匹配任何标记

*{color：red}

>

用于指定父子节点关系

AAA > CCC > DDD > {color:red}匹配父节点分别为CCC和AAA的节点DDD节点

□

用于匹配在某一层有某个父节点的节点

AAA CCC DDD {color:blue}匹配包含父节点CCC的父节点AAA的节点DDD

+

用于表示在同一个级别节点之间的关系

AAA+BBB{color:red}表示，有一个兄弟节点AAA的节点BBB

名称[表达式]

选择包含特殊属性值的节点

BBB[text="xyz"]{color:blue} 表示包含text属性值为xyz的BBB标签

• 位置模型：在CSS2中进一步增强了位置属性功能，增加了relative、absolute和fixed等几个值

值名称

含义

relative

元素框相对父节点偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留

absolute

元素框从文档流中完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样

fixed

元素框的表现类似于absolute值，不过其包含块是视窗本身

z-index

用来指定相互重叠的元素的叠放顺序，数字较大的元素会叠放在数值较小的元素前面

• 布局、表格样式：CSS2对display属性进行了扩充，用户可用该属性指定元素是否会显示以及如何显示，也可以使用该属性配合位置和浮动进行页面的布局。另外，用户还可以将一个非表格的结构化文档显示为一个表格样式。
• 媒体类型：用于对不同的媒体类型定义不同的样式。

属性名称

含义

aural

用于语音和音频合成器

embossed

用于分页的盲人用点字法打印

print

用于打印机

screen

用于计算机显示器

braille

用于盲人用点字法触觉回馈设备

projection

用于方案展示如幻灯片

 

• 伪类：CSS2增加了focus（将样式添加到被选中的元素）、：first-child（将特殊的样式添加到元素的第一个子元素）、：lang（允许创作者来定义指定的元素中使用的语言）。
• 光标样式：增加了cursor属性，用于指定设备应该显示怎样的光标类型。

值名称

含义

default

默认光标（通常是一个箭头）

auto

默认，浏览器设置的光标

crosshair

光标呈现为十字线

pointer

光标呈现为指示链接的指针（一只手）

move

此光标指示某对象可被移动

e-resize

此光标指示矩形框的边缘可被向右移动

text

此光标指示文本

wait

此光标指示程序正忙（通常是一只表或沙漏形状）

help

此光标指示可用的帮助（通常是一个问号或一个气球）

DIV+CSS其实是一种错误的叫法，标准的叫法应该是XHTML+CSS，因为DIV与table都是XHTML或HTML语言中的一个标记，而CSS只是一种样式表现。DIV+CSS已经将内容和表现分割开来，所以修改网页时只需指定内容修改即可。

CSS常用命令规则

名称

含义

名称

含义

header

页头

content/Container

内容

footer

页脚

nav

导航

sidebar

侧栏

column

栏目

wrapper

页面外围控制整体布局宽度

left

左侧

right

右侧

center

中间

loginbar

登录条

logo

标志

banner

广告

main

页面主题

hot

热点

news

新闻

download

下载

subnav

子导航

menu

菜单

submenu

子菜单

search

搜索

friendlink

友情链接

copyright

版权

scroll

滚动

content

内容

tab

标签页

list

文章列表

msg

提示信息

title

栏目标题

joinus

加入

guild

指南

service

服务

register

注册

status

状态

vote

投票

partner

合作伙伴

####################################################

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文件中定义如下：

1p .red{color:red;}

2span .red{color:#ff00ff}

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

3. 尽量少使用层级关系。一般写法：#divBoxp.red{color:red;}，更好写法：.red{..}

4. 使用class代替层级关系。一般写法：#divBoxullia{display:block;}，更好写法：.block{display:block;}

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

#########################