Css3：选择器、字体和颜色样式
1.私有前缀及其用法
在CSS3模块标准尚未被W3C批准或者标准所提议的特性尚未被浏览器完全实现时，浏览器厂商会使用所谓的私有前缀来测试“试验性的”CSS特性。看看CSS3中实现圆角的代码：
.round{
-khtml-border-radius:10px; /* Konqueror */
-rim-border-radius:10px; /* RIM */
-ms-border-radius:10px; /* Microsoft */
-o-border-radius:10px; /* Opera */
-moz-border-radius:10px; /* Mozilla (如 Firefox) */
-webkit-border-radius:10px; /* Webkit (如 Safari 和 Chrome) */
border-radius:10px; /* W3C */
}
在实际开发中可以使用可以为CSS文件自动追加前缀的Javascript方案，网址：http://leaverou.github.com/prefixfree。
也可以只指定自己所期望的浏览器，例如，如果时间和预算都很紧张，你可能决定不对任何在你的网站上使用率小于3%的浏览器提供私有前缀支持。可以查看这个网站：http://caniuse.com，看当前浏览器对特定CSS3和HTML5特性的支持程度。还可以查看：http://gs.statcounter.com查看最近的全球浏览器器的使用率统计。
2.CSS3的多栏布局和文字换行
1.多栏布局
曾经有需要将一整段文本显示在多个栏位中，在CSS3出现以前，你必须将内容拆分到不同的标签中，然后分别设定样式。利用CSS3可以让我们将一段或多段内容分布到多列网格中。如下代码：
<div id="main" role="main">
<p>lloremipsimLoremipsum dolor sit amet,consectetur
//任意文字//
</p>
<p>lloremipsimLoremipsum dolor sit amet,consectetur
//任意文字//
</p>
</div>
具体CSS样式如下：
（1）可以通过设置栏位宽度（栏位宽度不变，栏位数量会根据浏览器自动调整）
#main{
column-width:12em;
}
(2)通过设置栏位数量（栏位数量不变，栏位宽度根据视口自动调整）
#main{
column-count:4;
}
(3)也可以增加栏位间隙和分割线让多列布局效果更好
#main{
column-gap:2em;
column-rule:thin dotted #999;
column-width:12em;
}
若想参阅CSS3多列布局模块的标准，请访问：http://www.w3.org/TR/css3-multicol.
目前，请切记你需要给多列布局声明使用私有前缀，以确保兼容最广泛的浏览器。
2.文字换行
解决内容过长超出了浏览器视口而不换行，导致出现横向滚轴。
word-wrap:break-word;
3.CSS3的新增选择器及其用法
1.CSS属性选择器
img[alt]{
border:3px dashed #e15f5f;
}
这个选择器会匹配页面标签中任意一个含有alt属性的图片标签。也可以通过设定属性值来缩小匹配范围。如下代码所示：
<img class="oscarMain" src="img/oscar.jpg" alt="atwi_oscar" />
img[alt="atwi_oscar"]{
border:3px dashed #el5f5f;
}
2.CSS3的子字符串匹配属性选择器
（1）“匹配开头”的属性选择器。语法如下：
Element[attribute^="value"]
在实际使用中，如果我想选择网站中所有alt属性值以film开头的图片，则对应代码如下：
img[alt^="film"]{
border:3px dashed #el5f5f;
}
(2)“匹配包含内容”的属性选择器。语法如下：
Element[attribute*="value"]
在实际使用中，如果我想选择网站中所有alt属性值中包含film字符串的图片，则对应代码如下：
img[alt*="film"]{
border:3px dashed #el5f5f;
}
(3)“匹配结尾”的属性选择器。语法如下：
Element[attribute$="value"]
在实际使用中，如果我想选择网站中所有alt属性值以film结尾的图片，则对应代码如下：
img[alt$="film"]{
border:3px dashed #el5f5f;
}
3.CSS3结构伪类
（1）:last-child选择器
CSS2.1已经有一个针对列表中第一项的选择器：li:first-child
CSS3又增加了一个选择器用以匹配最后一项：li:last-child
组合使用这两个选择器，当给li标签设置样式时，就不需要在代码中增加额外的类名了。
（2）nth-child选择器
*使用整数，如：nth-child(2)-这会选中列表中的第二个选项；
*使用数值表达式
a>：nth-child(3n+1)-这样会从第一个元素开始，然后每三个元素选一个。
b>：nth-child(3n-2)-这样会从倒数第2个开始选，然后每三个元素选择一个。
c>：nth-last-child(-n+3)-这样会从倒数第3个元素开始，向后选择之后的所有元素。
*使用奇数，如：nth-child(odd)-这样会选中li标签中的所有奇数元素
*使用偶数，如：nth-child(even)-这样会选中li标签中的所有偶数元素
*使用类型选择元素，如：nth-of-type(n)和nth-last-of-type(n)。如下代码
<ul>
<li class="internal"><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li class="internal"><a href="#">Stills/Photos</a></li>
<li class="internal"><a href="#">Videos/clips</a></li>
<li class="internal"><a href="#">Quotes</a></li>
<li class="internal"><a href="#">Quiz</a></li>
</ul>
注意上面的第二个列表项没有internal类。看看这个规则：
nav ul li.internal:nth-of-type(n+2) a{
color:#fe0208;
}
上面的代码告诉浏览器：“从第二个匹配元素开始，选择每一个类名为internal的列表项”。
注：CSS3的计数方式是从1开始的。
（3）.否定（:not）选择器
nav ul li:not(.internal) a{
color:#fe0208;
}
表示选择没有internal类的列表项。
完整的UI元素状态伪类列表（http://www.w3.org/TR/selectors/#UIstates）
4.对伪元素的修正
伪元素在CSS2中已经存在。CSS3标准对其语法做了一些细微的修正。举几个例子，p:fist-line会选中<p>标签的第一行内容，p:first-letter会选中其中的第一个字母。CSS3要求对伪元素使用两个冒号以便与伪类进行区别。因此刚才的例子应该改为p::first-letter.但注意Internet Explorer8及更低版本的IE无法识别两个冒号的语法，它们只识别一个冒号。
::first-line伪元素非常方便的一个特点是它会根据视口自动变化。
4.自定义网页字体
1.@font-face
在Font Squirrel:http://www.fontsquirrel.com/tools/webfont-generator这个网站下载@font-face(这些字体包括Bebas Neue、Bitstream Vera Sans和Collaborate Thin)，然后解压。将其放在一个专门的fonts文件夹，该文件夹与css文件夹平级，代码运用如下：
@font-face{
font-family:'BebasNeueRegular';
src:url('../fonts/BebasNeue-webfont.eot');
src:url('../fonts/BebasNeue-webfont.eot?#iefix');
format('embedded-opentype').
url('../fonts/BebasNeue-webfont.woff') format('woff'),
url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular')
format('svg');
font-weight:normal;
font-style:normal;
}
然后就可以给相关样式设置正确的字体和粗细了。例如，我想将导航链接文字的字体修改为Bebas Neue。代码如下：
nav ul li a{
font-family:'BebasNeueRegular';
}
替换字体后一般还需要修改字体大小。使用公式：目标元素尺寸÷上下文元素尺寸=百分比尺寸
但是，使用了@font-face设定网站字体后，有时候会引起字体模糊，导致该原因的是字体粗细。大多数浏览器都会为标题元素应用标准的font-weight(一般都是700)。因此，解决此方案就是始终为应用了@font-face字体的标题元素设定font-weight属性。（例如显示的将font-weight设置为400）.
5.新的CSS3颜色格式和透明度
CSS3允许我们使用新方法如RGB或HSL来声明颜色。另外，我们还能在这两个方法后边追加一个透明通道（分别是RGBA和HSLA）。
1.在CSS中被定义为一个十六进制值#fe0208:
nav ul li:nth-child(odd) a{
color:#fe0208;
}
在CSS3中，该值可以使用RGB值来描述：
nav ul li:nth-child(odd) a{
color:rgb(254,2,8);
}
2.HSL颜色
除了 RGB,CSS3还可使用HSL（色相、饱和度、亮度）模式来声明颜色。
HSL模式基于一个360º的色相环，如hsl(315,100%,60%)。第一个数字代表色相，60º为黄色，120º时为绿色，180º时为青色，240º时为蓝色，300º时为洋红色，360º时为红色。其后的两个值分别表示饱和度和亮度，值为百分比，用于改变基础的色相。如果想要更加饱满的颜色，则第二个值使用高一点的百分比即可。最后一个控制亮度，可在0%的全黑到100%的全白之间变化。
3.针对IE6、IE7、IE8提供备用颜色值
nav ul li:nth-child(odd) a{
color:#fe0208;
color:hsl(359,99%,50%);
}
4.透明通道
HSL和RGB支持透明通道。CSS3还允许通过opacity声明来设置元素的透明度。该透明度的值也是一个介于0和1之间的小数。但是这种方式设置的透明度会对整个元素产生影响（元素的内容都会透明）。反之，使用HSLA或者RGBA则可以仅让元素的某些部分有透明效果。这样，一个元素可以带有HSLA透明效果，但内部的文字仍然不透明。
使用语法如下：
background-color:hsla(0,0%,100%，0.8)；
