正在播放：CSS3入门视频教程

【学习重点】

了解CSS基本概念

掌握CSS基本语法和用法

熟悉CSS基本属性，属性值和单位的用法

掌握CSS基本特性

2.1CSS3属性

CSS3是CSS规范的最新版本，在CSS2.1的基础上增加了很多强大的新功能，以帮手开发人员解决一些实际面临的问题，并且不再需要非语义标签、复杂的JavaScript脚本以及图片。例如，圆角、多背景、透明度、暗影等功能。

2.1.1 CSS的发展历史

在20世纪90年代初，HTML语言诞生。HTML语言诞生，早期的HTML只含有少量的显示属性，用来设置网页和字体效果，随着互联网的发展，为了满足日益丰富的网页设计需求，HTML不竭添加了各种显示标签和样式属性，于是就带来一个问题，网页结构和样式混用让网页代码变得混乱不胜，代码冗余增加了带宽负担，代码维护也变得苦不胜言。

1994年初，哈坤·利（Hakon Wium Lie）提出了CSS的最初建议，伯特·波斯（Bert Bos）当时正在设计一款Argo浏览器，于是他们一拍即合，决定共同开发css。

1994年底，哈坤在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。当时W3C（World Wide Web Consortium，万维网联盟）组织刚成立，W3C对CSS的前途很感兴趣，为此组织了一次讨论会，哈坤、波斯是这个项目的主要技术负责人。

1996年底，CSS语言正式完成，同年12月CSS的第一版本被正式发布（http：//www.w3.org/TR/CSS1/)。

1997年初，W3C组织专门负责CSS的工作组，负责人是克里斯·里雷，于是该工作组开始讨论第一个版本中没有涉及到的话题。

1998年5月，CSS2版本正式发布（http://www.w3.org/TR/CSS2/)。

尽管CSS3的开发工作在2000年之前就开始了，但是距离最终的发布还有相当长的路要走，为了提高开发速度，也为了便利各主流浏览器按照需要渐进式支持，CSS3按模块化进行全新设计，这些模块可以独立发布和实现，这也为日后的扩展奠定了基础。

考虑到从CSS2到CSS3的发布间隔时间会很长，2002年工作组启动了CSS2.1的开发，这是CSS2的修订版，它旨在纠正CSS2版本中的一些错误，并且更精确地描述CSS的浏览器实现，2004年CSS2.1正式发布，到2006年底得到完善。CSS2.1也成为了目前最流行、获得浏览器支持最完整的版本，它更准确地反映了CSS当前的状态。

2.1.2 CSS3新功能

CSS3规范并不是完全另起炉灶，继承了CSS2.1的部分内容，但在其基础上进行了很多的补充和修改。与CSS1、CSS2比力，CSS3进行了革命性升级，而不仅限于局部功能的修订和完善，尽管浏览器对CSS3诸多新特性支持还不是很完善，但是它依然让用户看到了未来网页样式的发展标的目的和使命。

CSS3新特性非常多，这里简单列举被浏览器支持的实用特性。

1、完善选择器

CSS3选择器在CSS2.1的基础上进行了增强，它允许设计师在标签中指定特定的HTML元素。而不必使用多余的类、ID或者JavaScript脚本。

如果希望设计干净、轻量级的网页标签，希望结构与表示更好地分离，高级选择器是非常有用的，他可以减少在标签中添加大量class和id属性的数量，并让设计师更便利地维护样式表。

2、完善视觉效果

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

3.完善盒模型

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

4.增强背景功能

CSS3允许背景属性设置多个属性值，如background-image、backgroundrepeat、background-size、background-position、background-clip等，这样就可以在一个元素上添加多层背景图片。如果要设计复杂的网页效果（如圆角、背景重叠等）时，就不消为HTML文档添加多个无用的标签，优化网页文档的结构。

5.增加暗影效果

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

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

CSS3引入了几个新的模块用于更便利地创建多列布局

多列布局（Multi-column Layout）模块描述如何像报纸、杂志那样，把一个简单的区块拆分成多列。弹性盒模型布局（Flexible box layout）模块能让区块在水平、垂直标的目的对齐，能让区块自适应屏幕大小，相对于CSS的浮动布局，inline-block布局，绝对定位布局来说，它显得更加便利与灵活，缺点是：这两个模块在一些浏览器中还不被支持，但随着技术的发展，各主流浏览器会主动支持的。

7.完善Web字体盒Web Font图标

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

8.增强颜色和透明度功能

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

9.新增圆角与边框功能

圆角是CSS3中使用最多的一个属性，原因很简单，圆角比直线更美不雅观，并且不会与设计产生任何冲突，与css制作圆角不同之处是，css3无需添加任何标签元素与图片，也不需要借用任何javascript脚本，一个属性就能搞定，对于边框，在css中仅局限于边框的线型、粗细、颜色的设置，如果需要特殊的边框效果只能使用背景图片来模仿。

css3的border-image属性是元素边框的样式变得丰富起来，还可以使用该属性实现类似background的效果，对于边框进行扭曲，拉伸、平铺等。

10.增加变形操作

在css2时代，让某个元素变形是一个可望而不成及的想法，为了实现这样的效果，需要些大量的jacascript代码，css3引进了一个变形属性，可以在2D或者3D空间里操作网页对象的位置和形状，例如，旋转、扭曲、缩放或者移位。

11.增加动画和交互效果

css3过度（transition）特性可以在网页制作中实现一些简单的动画效果，让某些效果变得更具流线性、平滑性。而css3动画（animation）特性能够实现更复杂的样式变化，以及一些交互效果，而不需要任何flash或javascript脚本代码。

12.完善媒体特性与responsive布局

css3 媒体特性可以实现一种响应式（responsive）布局，使布局可以按照用户的显示终端或设备特征选择对应的样式文件，从而在不同的显示分辨率或设备下具有不同的布局效果。特别是在移动端上的实现更是一种抱负的做法。

2.1.3 浏览器支持

css3带来众多全新的设计体验，但有一个问题值得考虑，浏览器对css3特性的支持情况如何？因为页面最终离不来浏览器的渲染，并不是所有浏览器都完全支持css3特性，有时候花时间写的效果只能在特定浏览器下有效，这意味着只有部分用户才能欣赏到，这样的工作变得没有什么意义，例如，使用css3制作背景仅在webkit内核的浏览器下有效果，想知道用户能够体验到哪些css3的新特性，必需了解当前浏览器对css3特性的支持程度如何。

幸运的是，css3特性大部分都已经有了很好的浏览器支持度，各主流浏览器对css3的支持越来越完善，曾经让多少前端开发人员心碎的IE也开始挺进css3标准行列，当然，即使css3标准制定完成，现代浏览器要普及到大部分用户也是一个相当漫长的过程，如果现在就要使用css3来美化你的站点，有必要对各大主流浏览器对齐新技术的支持情况有一个全面的了解。

本节别离在Mac和windows两个平台介绍chrome、firefox、safari、opera和IE5大主流浏览器对CSS3新特性和CSS3选择器的支持情况。