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

网页中HTML5与CSS3的应用

下面是我为大家搜索整理的关于网页中HTML5与CSS3的应用，欢迎参考阅读，希望对大家有所帮助!想了解更多相关信息请持续关注我们应届毕业生培训网!

网页技术的发展和进步，使得网页的功能朝着越来越丰富的方向发展，网页计算机设计技术也在这样的情况下得以不断融合。比如HTML5与CSS3两者之间的融合，为网页设计打开了全新的局面，有利于提升网页设计的效益。因此，积极探究HTML5与CSS3的在网页设计中的应用，显得尤为必要。

1 HTML的发展，特性和应用

1.1 HTML的发展历程

HTML英文翻译全称为超文本标记语言，是用来描述网页文档的标记语言。1991年Tim Berners-Le编写了名称为HTML标签的文档，里面涉及到20多个标记网页的HTML标签，他在借用SGML标记格式之后，形成了HTML的标记格式，由此打开了HTML的发展历史：(1)从IETF到W3C的转变。实际上HTML的第一个官方版本是有IETF推出的HTML2.0。早在1994年的时候，有浏览器就在这样的超文本语言标准下实现了文档嵌入图片，并且以img的标签纳入到HTML2.0体系中去。随后W3C渐渐成为HTML的标准组织，在对于HTML多数的修改之后，终于在1999年的时候推出了HTML4.0。(2)XHTML1，具备XML风格的HTML。继HTML4.0之后，出现了第一次修订的版本，那就是XHTML1.0，其关注于其扩展方面的效能，因为其对于语法方面的严格要求，并没有在使用方面表现出随意性，影响到此版本的使用效益。但是此时CSS的不断崛起，也使得网页设计者意识到XHTML的应用前景。(3)W3C推出XGTML1.1，XHTML1.1再也无法使用直接输出，即使此时网页设计者使用此版本的语言，但是由于主流浏览器的不支持，就使得其陷入到被架空的地步。(4)W3C推出了XHTML2，但是由于其在兼容方面的问题，难以发挥其效能，接着越来越多的主流浏览器开始对于W3C的开发行为提出反对，并且要求在HTML的基础上实现新的拓展，在没有达成共识之后，主流浏览器自发组织成立了超文本应用技术小组，那就是WHATWG，他们关注于Web Forms2和Web Appsl，并且将其融合在一起，形成了全新的HTML5的规范。

1.2 HTML的特性

从本质上来讲，HTML文档制作的过程并不是很复杂，很多时候都可以依靠其强大的功能去进行处理，甚至支持不同数据格式文本的嵌入。具体来讲其特性主要体现在以下几个方面：(1)简易性，基于超集方式可以使得其升级变得更加灵活和方便(2)扩展性，有着较强的扩展性(3)平台无关性，对于应用平台没有过多的要求。

1.3 HTML的应用

HTML技术体系不断完善，功能越发强大，在网页设计过程的应用也越来越频繁。一般情况下，HTML作为基本标记语言，主要在以下几个方面发挥效能(1)实现静态网页的编写，多数情况下以.html为结尾的网址就是在HTML的基础上诞生的，通常看到的网页源代码就是标记语言(2)实现动态网页的编写，主要会以PHP或者ASP等语言方式去呈现网页的动态效果。

2 CSS的发展、特性和应用

2.1 CSS的发展历程

1994年哈坤利提出构建CSS的提议，当时正在设计一款浏览器的伯特・波斯与其实现合作，开展了CSS的设计工作。在当时CSS作为第一个含有层叠意识的语言，给予读者和作者更多的自由行，以实现设计效益的提升。随后他们在1994年芝加哥的一次会议上展示了CSS，随后两人就组织成立了技术小组，终于在1996年完成了CSS，次年12月份第一本公开版本被出版。1997年初，W3C内组织了专管CSS的工作组，并且在1998年推出了第二个版本CSS2.1。CSS3现在还处于开发中，CSS 3在包含了所有CSS 2所支持的基础上更有所改进。

2.2 CSS的特性与应用

CSS中文翻译为层叠样式表单，其可以很方便的运用到网页外观控制上去。具体来讲，其特性主要体现在以下几个方面：(1)可以同时实现多个网页样式的更新(2)使得网页的表示层和结构层处于分离的状态，不至于受到彼此的影响(3)使得网页文件的大小得到了缩减(4)对于提升网页加载速度来讲，有着积极作用。因此，CSS样式表被大量运用到网页设计实践工作中去。

3 HTML与CSS在网页设计中的应用

从理论上来讲，HTML和CSS3有着自己的优势和特点，关注的方向也存在差异性，运用的领域也展现出很多的不同之处。但是随着近几年网页设计理念的革新，网页设计的范围被延展，移动终端的不断出现，越来越多的设计人员开始意识到其两者的融合，可以在促进网页设计工作质量提升方面发挥着巨大的作用。当HTML5与CSS3在网页设计方面的融合效益被展现出来之后，就有越来越多的网页设计人员开始参与到探索和尝试中去，遵循两者之间的不同之处，充分发挥各自的优势，解决当前各种困难，已经成为当前网页设计人员的公司。笔者结合自身从事网页设计的工作经验，认为两者之间的融合运用可以在以下几个方面发挥积极效能。

3.1 在移动上网平台中的设计运用

从当前网页设计的工作来看，HTML5与CSS3是使用率比较高的技术模式，尤其在移动网页设计，网页表单制作的过程中发挥着越来越重要的作用。我们知道，传统的移动上网设备由于配置方面的问题，其网页浏览的功能往往受到局限，或者不能看视频，或者不能获得高清的效果，为了解决这样的问题很多网站都在创建移动互联网版本，往往消耗大量的人力和物力。但是如果在此网格设计的过程跟踪，充分利用HTML5与CSS3的话，不仅仅可以实现跨平台操作，还能够使得用户获得最佳的用户体验。以网页界面大量图片插入为例，传统模式下不仅仅会使得网页运行速度受到制约，还会使得客户的.体验度不断降低。此时利用HTML5和CSS3技术，设计出有效的网页表单交互设计模型，如此一来就可以避免网页运行速度缓慢的问题。

3.2 在跨浏览器调整方面的设计应用

不得不承认的是在HTML5和CSS3技术帮助下，的确可以使得设计者获得更多的设计工具和方法，但是难以实现在跨浏览器的调整，如果出现特殊版本的因特网搜索引擎的话，就需要对于附加设置和帮助进行识别。为了能够解决这样的难题，可以尝试以HTML5SHIM的开放的JAVASCRIPT文件对于网络搜索引擎进行识别。当然此项功能不能仅仅依靠搜索引擎本身。另外还可以对于页面结构进行调整和编辑，在网页可编辑的区域，利用Ajax实现更新内容的保存，并且将其纳入到数据库中去，以便在任何时候都可以对于对应的数据信息进行访问。当然HTML5与CSS3的功能的确强大，但是还难以进行跨浏览器的操作，但是这将是未来两者实现更好融合的切入点，也是网页设计的发展趋势。

综上所述，HTML5与CSS3的发展和进步，是无数网页设计人员艰苦奋斗的结果，其在提升网页设计效果，增强其用户体验度方面发挥着越来越重要的作用。尤其在当前各种语言技术相互融合，彼此之间的交叉不断出现，统一的标准和规范，可供扩展的接口，都为实现技术的融合和发展营造了良好的外在环境。人们需要看到的是HTML5与CSS3之间的关系也是不容忽视的，两者之间存在的各种异同点都会为两者的融合效益发挥打下基础。作为网页设计人员应该树立发展的理念，正确认识这两者之间的关系，不断将两者运用到网页设计的工作中去，以发挥两者的融合效应。

1.静态布局

——最传统的布局方式，网页中所有尺寸都是由px作为单位，设置了min-width,如果宽度小于就会出现滚动条，如果大于这个宽度则内容居中外加背景

实现方式：PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；

移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。

优点：采用之前的css2的布局·方式，布局简单，没有兼容性问题。

缺点: 在手机端不能合理的显示，移动端不能使用pc端页面，需要再写一个布局来呈现。

实践案例：Float 布局、绝对布局

2.自适应布局

——可以看成是不同屏幕下由多个静态布局组成的。自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局（页面元素位置可能发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。自适应布局页面里面元素的位置会变化，很好的解决了流式布局中的大屏空间利用率不高弊端。

注：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

3.流失布局（百分比布局 %）

网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用),分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。可以看成是不同屏幕下由多个静态布局组成的。

而流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”

注：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。

主要实践案例：左侧固定+右侧自适应、左右固定宽度+中间自适应、圣杯布局、双飞翼布局

4.响应式布局（媒体查询）

——通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。主要依靠是css的媒体查询。

注：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

5.弹性布局

——rem/em、flex布局

---