1.2 CSS样式简介

CSS样式是对HTML语言的有效补充，通过使用CSS样式，能够节省许多重复性的格式设置，如网页文字的大小和颜色等。通过CSS样式可以轻松地设置网页元素的显示位置和格式，还可以使用CSS样式在网页中实现动画效果，大大提升了网页的美观性。

1.2.1 CSS样式的发展

随着CSS应用得越来越广泛，CSS技术也越来越成熟。CSS现在有3个不同层次的标准，即CSS1、CSS2和CSS3。CSS1主要定义了网页的基本属性，如字体、颜色和空白边等。CSS2在此基础上添加了一些高级功能，如浮动和定位，以及一些高级选择器，如子选择器和相邻选择器等。CSS3开始遵循模块化开发，这将有助于理清模块化规范之间的不同关系，减少完整文件的大小。

● CSS1

CSS1是CSS的第一层次标准，它正式发布于1996年12月，在1999年1月进行了修改。该标准提供简单的CSS样式表机制，使网页的编写者可以通过附属的样式对HTML文档的表现进行描述。

● CSS2

CSS2于1998年5月正式作为标准发布，CSS2基于CSS1，包含了CSS1的所有特点和功能，并在多个领域进行完善，将样式文档与文档内容相分离。CSS2支持多媒体样式表，使网页设计师能够根据不同的输出设备为文档制定不同的表现形式。

● CSS3

随着互联网的发展，网页的表现方式更加多样化，需要新的CSS规则来适应网页的发展，所以从1999年开始，W3C就已经开始着手CSS3标准的制定，直到2011年才最终发布为W3C推荐规范。目前许多CSS3属性已经得到了高版本浏览器的广泛支持，让我们可以领略到CSS3的强大功能和效果。

1.2.2 CSS3的突出特性

CSS3规范并不是独立的，它重复了CSS的部分内容，但在其基础上进行了很多增补与修改。CSS3与之前的几个版本相比，其变化是革命性的，虽然它的部分属性还不能被浏览器完美地支持，但是却让我们看到网页样式发展的前景，让我们更具有方向感、使命感。

CSS3的新特性非常多，这里挑一些被浏览器支持得较为完美、更具有实用性的新特性进行简单介绍。

1.强大的CSS3选择器

使用过jQuery的人都知道，jQuery的选择器功能强大、使用方便，CSS3选择器和jQuery选择器非常类似。CSS3允许设计师通过选择器直接指定需要的HTML元素，而不需要在HTML中添加不必要的类名称、ID名称等。使用CSS3选择器，能够在网页制作中更完美地实现结构与表现分离，使设计师能够轻松地设计出简洁、轻量级的Web页面，并且能够更好地维护和修改样式。

2.抛弃图片的视觉效果

网页中最常见的效果有圆角、阴影、渐变背景、半透明、图片边框等。而这样的视觉效果在CSS3发布之前都是依赖于设计师制作图片或者JavaScript脚本来实现的。CSS3的一些新增属性可以用来创建这些特殊的视觉效果，在后面的章节中将为大家详细展现如何使用新增属性来实现这些特殊的视觉效果。

3.背景的变革

过去，CSS中的背景给设计师带来了太多限制，CSS3的出现则带来革命性的变化。CSS3不再局限于背景色、背景图像的运用，新增了许多有关背景设置的新属性，如background-origin、background-clip、backgroundsize。此外，还可以在一个元素上设置多个背景图像。这样，如果要设计比较复杂的Web页面效果，就不再需要使用一些多余的标签来辅助实现了。

4.盒模型变化

盒模型在CSS中是重中之重，CSS中的盒模型只能实现一些基本的功能，对于一些特殊的功能需要基于JavaScript来实现。而在CSS3中这一点得到了很大的改善，设计师可以直接通过CSS3来实现。例如，CSS3中的弹性盒子，这个属性引入了一种全新的布局概念，能够轻而易举地实现各种布局，特别是对于移动端的布局，它的功能更是强大。

5.阴影效果

阴影主要分为两种：文本阴影（text-shadow）和盒子阴影（box-shadow）。文本阴影在CSS中已经存在，但没有得到广泛应用。CSS3延续了这个特性，并进行了新的定义，该属性提供了一种新的跨浏览器方案，使文本看起来更加醒目。盒子阴影在CSS中实现起来较为困难，需要新增标签、图片，而且效果还不一定完美。CSS3中新增的box-shadow属性将打破这种局面，可以轻易地为任何元素添加盒子阴影。

6.多列布局与弹性盒模型布局

CSS3引入了几个新的模块，使在网页中创建多列布局更为方便。

“多列布局”模块描述了如何像报纸、杂志那样，把一个简单的区块拆分成多列，从而实现多列布局效果。“弹性盒模型布局”模块能够让区块在水平、垂直方向对齐，且能自适应屏幕大小，相对于CSS的浮动布局、inline-block布局、绝对定位布局来说，它显得更加方便、灵活。

7.Web字体和Web Font图标

浏览器对Web字体有诸多限制，Web Font图标对于设计师来说更是奢侈。CSS3重新引入@font-face规则，对于设计师来说无疑是件好事。@font-face规则是链接服器字体的一种方式，这些嵌入的字体能够变成浏览器的安全字体，不必再担心用户由于没有这些字体而无法正常显示的问题，从而告别用图片代替特殊字体的时代。

8.颜色与透明度

CSS3颜色模块的引入，实现了制作Web效果时不再局限于RGB和十六进制两种模式。CSS3新增了HSL、HSLA、RGBA几种新的颜色模式。在Web设计中，能够轻松地使某个颜色变亮或者变暗。其中HSLA和RGBA还增加了透明通道，能够轻松改变任何一个元素的透明度。另外，还可以使用opacity属性来设置元素的不透明度，从而使网页中的半透明效果不再依赖图片或者JavaScript脚本了。

9.圆角与边框的新方法

圆角是CSS3中使用最多的一个属性，原因很简单：圆角比直线更美观，而且不会与设计产生任何冲突。与CSS制作圆角不同之处在于，CSS3无须添加任何标签元素与图片，也不需借助任何JavaScript脚本，一个属性就能搞定。对于边框，在CSS中仅局限于边框的线型、粗细、颜色的设置，如果需要特殊的边框效果，只能使用背景图片来模仿。CSS3新增的border-image属性使元素边框的样式变得丰富起来，还可以使用该属性实现类似background的效果，对边框进行扭典、拉伸和平铺等。

10.盒容器的变形

在CSS时代，让某个元素变形是一个可望而不可即的想法，为了实现这样的效果，需要写大量的JavaScript代码。CSS3引进了一个变形属性，可以在2D或者3D空间里操作盒容器的位置和形状，如旋转、扭曲、缩放或者位移，我们可以将这些效果称之为“变形”。

11.CSS3过渡与动画交互效果

CSS3的过渡（transition）属性能够在网页中实现一些简单的动画效果，让某些效果变得更具流线性、平滑性。而CSS3的动画（animation）属性能够实现更加复杂的样式变化，以及一些交互效果，且不需要任何JavaScript脚本代码。

12.媒体特性与Reponsive布局

CSS3的媒体特性可以实现一种响应式（Responsive）布局，使布局可以根据用户的显示终端或设备特征选择对应的样式文件，从而在不同的显示分辨率或设备下具有不同的布局渲染效果，特别是在移动端上。