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.针对IE六、IE七、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)；