CSS发展史

html-css07

CSS发展史,第1张

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主要的影响是将可以使用新的可用的选择器和属性,这些会允许你实现新的设计效果(譬如动态和渐变),而且可以很简单的设计出现在的设计效果(比如说使用分栏)。

极力推荐《CSS设计彻底研究》

第1章 (X)HTML与CSS核心基础

1.1 HTML与XHTML

1.1.1 追根溯源

1.1.2 DOCTYPE(文档类型)的含义与选择

1.1.3 XHTML与HTML的重要区别

1.2 (X)HTML与CSS

1.2.1 CSS标准简介

1.2.2 在HTML中引入CSS的方法

1.3 基本CSS选择器

1.3.1 标记选择器

1.3.2 类别选择器

1.3.3 ID选择器

1.4 复合选择器

1.4.1 “交集”选择器

1.4.2 “并集”选择器

1.4.3 后代选择器

1.5 CSS的继承特性

1.5.1 继承关系

1.5.2 CSS继承的运用

1.6 CSS的层叠特性

1.7 本章小结

第2章 “CSS禅意花园”作品鉴赏

2.1 “CSS禅意花园”简介

2.2 郊野——两列布局

2.3 像素画——三列布局

2.4 百合池塘——三列布局变体

2.5 郁金香——多列布局

2.6 日与夜——包含圆角的设计

2.7 Si6—— 包含倾斜的设计

2.8 清茶时光——装饰性设计

2.9 爱之空气——流体布局

2.10 谷香——食品主题设计

2.11 城市——建筑主题设计

2.12 “卡通版”禅意花园——特色效果

2.13 收音机——特色效果

2.14 杀手风格——特色效果

2.15 海底世界——特色效果

2.16 博物馆——特色设计

2.17 剧院效果——特色效果

2.18 本章小结

第3章 深入理解盒子模型

3.1 盒子的内部结构

3.2 边框(border)

3.2.1 实验1——border-style

3.2.2 属性值的简写形式

3.2.3 实验2——属性的缩写形式

3.2.4 实验3——边框与背景

3.3 内边距(padding)

3.4 外边距(margin)

3.5 盒子之间的关系

3.5.1 HTML与DOM

3.5.2 标准文档流

3.5.3 div 标记与 span 标记

3.6 盒子在标准流中的定位原则

3.6.1 实验1——行内元素之间的水平margin

3.6.2 实验 2——块级元素之间的竖直margin

3.6.3 实验3——嵌套盒子之间的margin

3.6.4 实验4——将 margin设置为负值

3.7 CSS中的几何题

3.8 本章小结

第4章 盒子的浮动与定位

4.1 盒子的浮动

4.1.1 准备代码

4.1.2 实验1——设置第1个浮动的div

4.1.3 实验2——设置第2个浮动的div

4.1.4 实验3——设置第3个浮动的div

4.1.5 实验4——改变浮动的方向

4.1.6 实验5——再次改变浮动的方向

4.1.7 实验6——全部向左浮动

4.1.8 实验7——使用clear属性清除浮动的影响

4.1.9 实验8——扩展盒子的高度

4.2 盒子的定位

4.2.1 static(静态定位)

4.2.2 relative(相对定位)

4.2.3 absolute(绝对定位)

4.2.4 fixed(固定定位)

4.3 z-index空间位置

4.4 盒子的display属性

4.5 本章小结

第5章 文字与图像

……

第 6章 链接与导航

第7章 竖直排列的导航菜单

第8章 水平导航菜单

第9章 下拉菜单

第10章 表格也精彩

第 11章 圆角设计

第12章 应用Spry制作高级网页组件

第13章 固定宽度布局剖析与制作

第14章 变宽度网页布局剖析与制作

第15章 “CSS禅意花园”作品研究

第16章 综合案例研究

第17章 从学习到创作

附录 CSS英文小字典