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)；