CSS3技术初探

 

CSS3的发展

1996年12月17日，CSS1作为一项 W3C推荐被发布。而后于1999年1月11日被重新修订。其中包含非常基本的属性，比如字体，颜色、空白边。

1999年1月11日，CSS2作为一项 W3C推荐被发布。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。CSS2 在CSS1基础上添加了高级概念（比如浮动和定位）以及高级的选择器（比如子选择器、相邻同胞选择器和通用选择器）。

CSS3计划将 CSS划分为模块，并以模块为单位来发展。CSS3把很多以前需要使用图片和脚本来实现的效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影等。CSS3不仅能简化前端开发工作人员的设计过程，还能加快页面载入速度。CSS3 早于1999年已开始制订。直到2011年6月7日， CSS 3 Color Module 终于发布为 W3C Recommendation。除了Color Module外，还有Selector、NameSpace Module、Media Queries、Style Attributes发布为W3C Recommendation。

 CSS 模块稳定并满足了 CSSWG 规定的三个推荐级别之一：Candidate Recommendation(候选推荐)， Proposed Recommendation(建议推荐) 或 Recommendation(推荐)。 表明这些模块已经十分稳定，使用时也不必添加浏览器前缀， 但是一些特性还是有可能在 Candidate Recommendation 阶段被放弃。

CSS3新特点

CSS3的功能是在CSS2的基础上发展而来的，并且完全向后兼容。根据CSS内的功能不同，将其划分成了不同的模块。

一些最重要CSS3模块如下：

l 选择器

l 盒模型

l 背景和边框

l 文字特效

l 2D/3D转换

l 动画

l 多列布局

l 用户界面（草稿）

l 媒体查询

选择器

CSS3中增加了一些常用的选择器，以前这些元素只能用JavaScript来选择，现在可以比较方便的解决更多的样式问题。N可以是数字、关键字或公式。例如：

E:nth-child(even), nth-child(odd)

E:nth-child(3n+1)

E:nth-last-child(n) 

E:nth-of-type(n) 

E:nth-last-of-type(n) 

E:last-child 

E:first-of-type 

E:only-child 

E:only-of-type 

E:empty 

E:checked 

E:enabled 

E:disabled 

E::selection 

E:not(s)

盒模型

盒模型在CSS2是一种思维模型。通常所说的盒模型包括元素样式中的内容(content)、填充(padding)、边框(border)、边界(margin)。Webkit内核和gecko内容的浏览器的盒模型是一样的，IE的盒模型与前两者略有不同。

CSS3中盒模型不在只是抽象的思维模型，而是增加了针对盒模型本身的一些属性。使用这些属性可以以盒模型为单位在页面上进行排列组合，实现诸如水平排列、垂直排列、反序排列和弹性排列等。

box-align，定义子元素在盒子内垂直方向上的空间分配方式。

box-pack，定义子元素在盒子内水平方向上的空间分配方式。

box-direction，定义盒子的布局顺序。

box-orient，定义盒子的布局取向。

box-ordinal-group，定义盒子布局的位置。

box-flex，定义盒子的弹性空间。

box-lines，空间溢出管理。

详细解释：

box-align，他的值可以是start：沿着盒子的上边缘排序；end：沿盒子的下边缘排序；center：上面一半，下面一半；baseline：所有盒子沿着他们的基线排列，富余空间可前可后显示；stretch：每个子元素的高度被调整到适合盒子的高度显示。

box-pack，他的值可以是start：显示在盒子的左侧，富余空间显示在右侧；end：显示在盒子的右侧，富余空间显示在左侧；center：平均分配；justify：富余的空间在子元素之间平均分配。

box-direction，改变盒子元素中内部元素的流动顺序，其值可以是normal:正常顺序显示；reverse：反向显示；inherit：继承上级元素的显示顺序。

box-orient，定义盒子元素内部的流动布局方向，父容器的display设置为box或者inline-box。其值可以是horizontal:盒子元素从左到右在一条水平线上显示他的子元素；vertical:盒子元素从上到下在一条垂直线上显示他的子元素；inline-axis：盒子元素沿着内联轴显示他的子元素；block-axis:盒子元素沿着块轴显示他的子元素。

box-ordinal-group，可以设置每一个子元素在盒子中的具体显示位置，他的值是自然数，从1开始，根据该值的大小进行排序。

box-flex，该属性在弹性布局中非常好用，它的取值是一个整数或者小数，当盒子中定义了多个box-flex时，浏览器将会把这些子元素的box-flex值相加，然后计算他们各自所占的比例来分配空间，但是他只能在盒子拥有固定的空间大小之后才能够正确解析。

box-lines，其取值可以使single：所有子元素都单行或者单列显示；multiple：所有子元素可以多列或者多行显示。不过目前并没有浏览器支持这一属性。

背景和边框

CSS3中对于背景提供了更多的属性，可以对背景进行多样化的配置。新增的属性有：

属性名	属性值	作用
background-clip：该属性用于确定画区	border-box	背景从 border 开始显示
	padding-box	背景从 padding 开始显示
	content-box	背景显 content 区域开始显示
	no-clip	默认属性，等同于 border-box
background-origin：用于确定背景的位置，它通常与 background-position 联合使用，您可以从 border、padding、content 来计算 background-position（就像 background-clip）	border-box	从 border开始计算 background-position
	padding-box	从 padding 开始计算 background-position
	content-box	从 content 开始计算 background-position
background-size：常用来调整背景图片的大小，注意别和 clip 弄混，这个主要用于设定图片本身。	contain	缩小图片以适合元素（维持像素长宽比）
	cover	扩展元素以填补元素（维持像素长宽比）
	100px 100px	缩小图片至指定的大小
	50% 100%	缩小图片至指定的大小，百分比是相对包 含元素的尺寸
Background Break：CSS3 中，元素可以被分成几个独立的盒子（如使内联元素 span 跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示	continuous	默认值。忽略盒之间的距离（也就是像元 素没有分成多个盒子，依然是一个整体一 样）
	bounding-box	把盒之间的距离计算在内
	each-box	为每个盒子单独重绘背景

在CSS3中，元素的背景还支持多图片，例如：

div {  background: url(src/zippy-plus.png) 10px center no-repeat,  url(src/gray_lines_bg.png) 10px center repeat-x;  }

CSS3中支持颜色的渐变和透明，这个在现在已经有很多人在使用了，也说明了这个功能的强大和实用。其中渐变分为线性渐变和径向渐变。线性渐变好理解，径向渐变是指从一个圆到另一个圆的渐变。

文字特效

 

1、字体

CSS3中的@font-face属性可以用来加载字体，而且可以加载服务器端的字体，让客户端显示客户端没有安装的字体。例如：

 @font-face {  font-family: Runic;  src:url(RUNICMT0.eot);  } 

2、文字渲染

CSS3中可以对文本进行更加复杂和细致的渲染，例如：

Text-fill-color: 文字内部填充颜色

Text-stroke-color: 文字边界填充颜色

Text-stroke-width: 文字边界宽度

2D/3D转换

通过CSS3中属性的定义，我们可以对元素进行移动、缩放、拉伸、旋转等等，可以通过定义transform属性来实现转换效果。

在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

动画

CSS3中增加的动画效果可谓开辟了CSS的新纪元，让CSS摆脱了静态显示的习俗。

首先演示下webkti下的动画：

@-webkit-keyframes anim1 {     0% {         Opacity: 0;  Font-size: 12px;     }     100% {         Opacity: 1;  Font-size: 24px;     }  }  .anim1Div {     -webkit-animation-name: anim1 ;     -webkit-animation-duration: 1.5s;     -webkit-animation-iteration-count: 4;     -webkit-animation-direction: alternate;     -webkit-animation-timing-function: ease-in-out;  }

CSS3的动画最起码需要定义初始状态和最终状态，然后定义动画的参数，如时间跨度和重复次数等。

CSS3动画支持几乎所有的Style变化，可以方便的定义各种各样的动画效果满足我们的要求。

多列布局

CSS2中是如何实现多列布局的？大多数是div的相对定位或者绝对定位实现的。在CSS3中增加了多列布局的属性，可以通过简单的配置实现内容的分栏效果。

这里还是以 webkit 内核浏览器为例：

Column-count：表示布局几列。

Column-rule：表示列与列之间的间隔条的样式

Column-gap：表示列于列之间的间隔

 

媒体查询

媒体查询这个模块目前也是Recommandation的状态，这个模块的内容在CSS2中也有，在CSS2对其进行了扩充并增加了许多新内容。

CSS3中对于媒体查询的使用方法：

<!-- link元素中的CSS媒体查询 --><link rel="stylesheet" media="(max-width: 800px)" href="example.css" /><!-- 样式表中的CSS媒体查询 --><style>@media (max-width: 600px) {  .facet_sidebar {    display: none;  }}</style>

下面列举了Media Queries的具体使用方式

一、最大宽度Max Width

  <link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" /> 

上面表示的是：当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面。

二、最小宽度Min Width

   <link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" /> 

上面表示的是：当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。

三、多个Media Queries使用

   <link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" /> 

Media Query可以结合多个媒体查询，换句话说，一个Media Query可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种Media Type。正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。

四、设备屏幕的输出宽度Device Width

   <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" /> 

上面的代码指的是iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率

 

参考

1、http://zh.wikipedia.org/wiki/层叠样式表

2、http://www.cnblogs.com/xiaobudiandian/archive/2011/12/18/2291657.html

3、http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/

4、http://www.cnblogs.com/lonzhe/p/3919955.html

5、IE中如何使用CSS3：http://www.ibm.com/developerworks/cn/web/1105_qinjian_css3_3/

6、CSS模块发展阶段：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS3

7、https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries