《图解CSS3：核心技术与案例实战》——1.1节什么是CSS3

本节书摘来自华章社区《图解CSS3：核心技术与案例实战》一书中的第1章，第1.1节什么是CSS3，作者 大漠，更多章节内容可以访问云栖社区“华章社区”公众号查看

1.1　什么是CSS3
CSS3并不是一门新的语言。如果接触过CSS就知道，CSS是创建网页的另一个独立但并非不重要的一部分。CSS是种层叠样式表，是一种样式语言，用来告诉浏览器如何渲染你的Web页面。
CSS3是CSS规范的最新版本，在CSS2.1的基础上增加了很多强大的新功能，以帮助开发人员解决一些问题，并且不再需要非语义标签、复杂的JavaScript脚本以及图片，例如圆角功能、多背景、透明度、阴影等功能等。CSS2.1是单一的规范，而CSS3被划分成几个模块组，每个模块组都有自己的规范。这样的好处是整个CSS3的规范发布不会因为部分难缠的部分而影响其他模块的推进。
现在先来看看CSS3激动人心的新特性。
1.1.1　CSS3的新特性
CSS3规范并不是独立的，它重复了CSS的部分内容，但在其基础上进行了很多的增补与修改。CSS3与之前的几个版本相比，其变化是革命性的，虽然它的部分属性还不能够被浏览器完美的支持，但却让我们看到网页样式发展的前景，让我们更具有方向感、使命感。
CSS3新特性非常多，这里挑选一些被浏览器支持较为完美、更具实用性的新特性。
1．强大的CSS3选择器
使用过jQuery的人都知道，jQuery的选择器功能强大，使用方便，CSS3选择器和jQuery选择器非常类似。允许设计师通过选择器直接指定需要的HTML元素，而不需要在HTML中添加不必要的类名、ID等。使用CSS3选择器，能在Web的制作中更完美地做到结构与表现分离，设计师能轻松地设计出简洁、轻量级的Web页面，并且能更好地维护和修改样式。
2．抛弃图片的视觉效果
Web中最常见的效果包括圆角、阴影、渐变背景、半透明、图片边框等。而这样的视觉效果在CSS中都是依赖于设计师制作图片或者JavaScript脚本来实现的。CSS3的一些新特性可以用来创建一些特殊的视觉效果，后面的章节将为大家展现这些新特性是如何实现这些视觉效果。
3．背景的变革
如果说CSS中的背景给你带来太多的限制，那么CSS3将带来革命性的变化。CSS3不再局限于背景色、背景图像的运用，新特性中添加了多个新的属性值，例如background-origin、background-clip、background-size，此外，还可以在一个元素上设置多个背景图片。这样，如果要设计比较复杂的Web页面效果，就不再需要使用一些多余标签来辅助实现了。举个例子，要实现CSS中的滑动门效果，在CSS中基本上要添加2～3个额外的标签来辅助实现，那么CSS3中的这些新特性能够在一个标签中完成同等的效果。
4．盒模型变化
盒模型在CSS中是重中之重，CSS中的盒模型只能实现一些基本的功能，对于一些特殊的功能需要基于JavaScript来实现。而在CSS3中这一点得到了很大的改善，设计师可以直接通过CSS3来实现。例如，CSS3中的弹性盒子，这个属性将给大家引入一种全新的布局概念，能轻而易举实现各种布局，特别是在移动端的布局，它的功能更是强大。大家将在第7章、第8章见识它的神功。
5．阴影效果
阴影主要为分两种：文本阴影（text-shadow）和盒子阴影（box-shadow）。文本阴影在CSS中已经存在，但没有得到广泛的运用。CSS3延续了这个特性，并进行了新的定义，该属性提供了一种新的跨浏览器方案，使文本看起来更醒目。盒子阴影的实现在CSS中就有点苦不堪言，为了实现这样的效果，需要新增标签、图片，而且效果还不一定完美。CSS3的box-shadow将打破这种局面，可以轻易地为任何元素添加盒子阴影。
6．多列布局与弹性盒模型布局
CSS3引入了几个新的模块用于更方便地创建多列布局。
“多列布局”（Multi-column Layout）模块描述了如何像报纸、杂志那样，把一个简单的区块拆分成多列，第9章为大家介绍这个模块的运用。“弹性盒模型布局”（Flexible Box Layout）模块能让区块在水平、垂直方向对齐，能让区块自适应屏幕大小，相对于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章体验这些新特性。
11．CSS3过渡与动画交互效果
CSS3的“过渡”（transition）特性能在Web制作中实现一些简单的动画效果，让某些效果变得更具流线性、平滑性。而CSS3“动画”（animation）特性能够实现更复杂的样式变化，以及一些交互效果，而不需要使用任何Flash或JavaScript脚本代码。
12．媒体特性与Responsive布局
CSS3的媒体特性可以实现一种响应式（Responsive）布局，使布局可以根据用户的显示终端或设备特征选择对应的样式文件，从而在不同的显示分辨率或设备下具有不同的布局渲染效果，特别是在移动端上的实现更是一种理想的做法。
1.1.2　CSS3的发展状况
通过对CSS3新特性的简单介绍，大家可能要问，这些超炫的特性什么时候才能成为标准并最终发布呢？其实CSS3的每一个模块都有它自己的更新（进度表）时间，如图1-1所示，大家可以从这个图上看到CSS3的当前发展的详细进度。

Web开发者希望在CSS3标准规范发布之前就能使用这些新特性，而它们的使用还受限于不同的浏览器，只有浏览器完全支持了，才能完全使用这些新特性。
目前，CSS3还不是最终的标准，有很多浏览器支持不够完美，那么现在可以使用CSS3吗？
1.1.3　现在能使用CSS3吗
从图1-1中可以看出，CSS3还在不断完善中，很多功能还处于草稿阶段，但部分模块进入了“候选推荐”状态，这说明在Web设计中完全可以使用这些模块。即使有一些模块还处于“工作草案状态”，也可以尝试着使用，只有不断将新的CSS技术运用到实际工作中，才能发现应用这些新技术所面临的真正挑战，以便W3C更好地完善它们，从而更好地、有效地促使它们成为真正的标准。
你应该了解哪些可用，哪些还不能使用。换句话说，在实际工作开发中可以先运用相对稳定的CSS3特性，并确保不会对尚不支持这些特性的浏览器造成影响。做到明智的使用，而不是盲目地滥用CSS3新特性。
1.1.4　使用CSS3有什么好处
与CSS相比，使用CSS3有什么好处呢？最明显的就是CSS3能让页面看起来非常炫、非常酷，使网站设计锦上添花，但它的好处远远不止这些。在大多数情况下，使用CSS3不仅有利于开发与维护，还能提高网站的性能。与此同时，还能增加网站的可访问性、可用性，使网站能适配更多的设备，甚至还可以优化网站SEO，提高网站的搜索排名结果。下面介绍CSS3特有的好处。
1．减少开发与维护成本
为什么说CSS3能减少开发与维护的成本呢？先来看一个实例。一个圆角效果，在CSS中需要添加额外的HTML标签，使用一个或者更多图片来完成，而使用CSS3只需要一个标签、一个border-radius属性就能完成。这样，CSS3技术能把你从绘图、切图和优化图片的工作中解救出来。
如果后续需要调整这个圆角的弧度或者圆角的颜色，使用CSS，要从头绘图、切图才能完成，而使用CSS3几秒就完成这些工作。
CSS3还能使你远离一大堆的JavaScript脚本代码或者Flash，你不再需要花大把时间去写脚本或者寻找合适的脚本插件并修改以适配你的网站特效。
最后，有些CSS3技术还能帮你对页面进行“减肥”，让结构更加“苗条”。你不用为了达到一个效果而嵌套很多DIV和类名，这样能有效地提高工作效率、减少开发时间、降低开发成本。例如，制作一个重叠的背景效果，在CSS中需要添加DIV标签和类名，在不同的DIV中放一张背景图，现在可以使用CSS3的多背景和背景尺寸等新特性，在一个DIV标签中完成这些工作。
2．提高页面性能
很多CSS3技术通过提供相同的视觉效果而成为图片的“替代品”，换句话说，在进行Web开发时，减少多余的标签嵌套，以及图片的使用数量，意味着用户要下载的内容将会更少，页面加载也会更快。另外，更少的图片、脚本和Flash文件让Web站点减少HTTP请求数，这是提升页面加载速度的最佳方法之一。而使用CSS3制作图形化网站无需任何图片，极大地减少HTTP的请求数量，并且提升页面的加载速度。当然，这取决于采用CSS3特性来代替什么技术，同样还要看如何使用CSS3特性。例如CSS3的动画效果，能够减少对JavaScript和Flash文件的HTTP请求，但可能要求浏览器执行很多的工作来完成这个动画效果的渲染，这有可能导致浏览器响应缓慢，致使用户流失。因此，在使用一些复杂的特效时，大家需要考虑清楚。不过这样的现象毕竟为数不多。其实很多CSS3技术能够在任何情况下都大幅提高页面的性能。就这一条足以让我们使用CSS3。