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