移動Web界面樣式-CSS3

CSS2.1發佈至今已經有7年的歷史，在這7年裏，互聯網的發展 已經發生了翻天覆地的變化。CSS2.1有時候難以知足快速提升性能、提高用戶體驗的Web應用的需求。CSS3標準的出現就是加強CSS2.1的功能， 減小圖片的使用次數以及解決HTML頁面上的特殊效果。

在HTML5逐漸成爲IT界最熱門話題的同時，CSS3也開始慢慢地普及起來。目前， 不少瀏覽器都開始支持CSS3部分特性，特別是基於Webkit內核的瀏覽器，其支持力度很是大。在Android和iOS等移動平臺下，正是因爲 Apple和Google兩家公司大力推廣HTML5以及各自的Web瀏覽器的迅速發展，CSS3在移動Web瀏覽器下都能到很好的支持和應用。

CSS3做爲在HTML頁面擔任頁面佈局和頁面裝飾的技術，能夠更加有效地對頁面佈局、字體、顏色、背景或其餘動畫效果實現精確的控制。

目前，CSS3是移動Web開發的主要技術之一，它在界面修飾方面佔有重要的地位。因爲移動設備的Web瀏覽器都支持CSS3，對於不一樣瀏覽器之間的兼容性問題，它們之間的差別很是小。不過對於移動Web瀏覽器的某些CSS特性，仍然須要作一些兼容性的工做。

當前，CSS3技術最適合在移動Web開發中使用的特性包括：

• 加強的選擇器
• 陰影
• 強大的背景設置
• 圓角邊框

接下來咱們將會重點介紹如何使用這些CSS3特性來實現移動Web界面。

選擇器

選擇器是CSS3中一個重要的部分，經過使用CSS3的選擇器，能夠提升開發人員的工做效率。咱們將爲讀者介紹屬性選擇器和僞類選擇器的基本用法。

屬性選擇器

在CSS3中，咱們可使用HTML元素的屬性名稱選擇性地定義CSS樣式。其實，屬性選擇器早在CSS2中就被引入了，其主要做用就是爲帶有指定屬性的HTML 元素設置樣式。例如，經過指定div元素的id屬性，設定相關樣式。屬性選擇器一共分爲4種匹配模式選擇器：

• 徹底匹配屬性選擇器
• 包含匹配選擇器
• 首字符匹配選擇器
• 尾字符匹配選擇器

1．徹底匹配屬性選擇器

其含義就是徹底匹配字符串。當div元素的id屬性值爲test時，利用徹底匹配選擇器選擇任何id值爲test的元素都使用該樣式。以下代碼經過指定id值將屬性設定爲紅色字體：

<div id=」article」>測試徹底匹配屬性選擇器</div>

<style type=」text/css」>

[id=article]{

color:red;

}

</style>

2．包含匹配選擇器

包含匹配比徹底匹配範圍更廣。只要元素中的屬性包含有指定的字符串，元素就使用該樣式。其語法是：[attribute*=value]。其中attribute指的是屬性名，value指的是屬性值，包含匹配採用「*=」符號。

例以下面三個div元素都符合匹配選擇器的選擇，並將div元素內的字體設置爲紅色字體：

<div id=」article」>測試徹底匹配屬性選擇器</div>

<div id=」subarticle」>測試徹底匹配屬性選擇器</div>

<div id=」article1″>測試徹底匹配屬性選擇器</div>

<style type=」text/css」>

[id*=article]{

color:red;

}

</style>

3．首字符匹配選擇器

首字符匹配就是匹配屬性值開頭字符，只要開頭字符符合匹配，則元素使用該樣式。其語法是：[attribute^=value]。其中 attribute指的是屬性名，value指的是屬性值，首字符匹配採用「^=」符號。例以下面三個div元素使用首字符匹配選擇器後，只有id爲 article和article1的元素才被設置爲紅色字體。

<div id=」article」>測試徹底匹配屬性選擇器</div>

<div id=」subarticle」>測試徹底匹配屬性選擇器</div>

<div id=」article1″>測試徹底匹配屬性選擇器</div>

<style type=」text/css」>

[id^=article]{

color:red;

}

</style>

4．尾字符匹配選擇器

尾字符匹配跟首字符匹配原理同樣。尾字符只匹配結尾的字符串，只要結尾字符串符合匹配，則元素使用該樣式。其語法是： [attribute$=value]。其中attribute指的是屬性名，value指的是屬性值，尾字符匹配採用「$=」符號。例以下面三個div 元素使用尾字符匹配選擇器時，只有id爲subarticle的元素才被設置爲紅色字體。

<div id=」article」>測試徹底匹配屬性選擇器</div>

<div id=」subarticle」>測試徹底匹配屬性選擇器</div>

<div id=」article1″>測試徹底匹配屬性選擇器</div>

<style type=」text/css」>

[id$=article]{

color:red;

}

</style>

僞類選擇器

在CSS3選擇器中，僞類選擇器種類很是多。而後在CSS2.1時代，僞類選擇器就已經存在，例如超連接的四個狀態選擇器：a:link、a:visited、a:hover、a:active。CSS3增長了很是多的選擇器，其中包括:

• first-line僞元素選擇器
• first-letter僞元素選擇器
• root選擇器
• not選擇器
• empty選擇器
• target選擇器

這些僞類選擇器是CSS3新增的選擇器，它們都能獲得在Android和iOS平臺下Web瀏覽器的支持。如今咱們就爲你介紹這部分的選擇器。

1．before

before僞類元素選擇器主要的做用是在選擇某個元素以前插入內容，通常用於清除浮動。目前，before選擇器獲得支持的瀏覽器包括：IE8+、Firefox、Chrome、Safari、Opera、Android Browser和iOS Safari。

before選擇器的語法是：

元素標籤:before{

content:」插入的內容」

}

例如，在p元素以前插入「文字」：

p.before{

content:」文字」

}

2．after

after僞類元素選擇器和before僞類元素選擇器原理同樣，但after是在選擇某個元素以後插入內容。

目前，before選擇器獲得支持的瀏覽器包括：IE8+、Firefox、Chrome、Safari、Opera、Android Browser和iOS Safari。

after選擇器的語法是：

元素標籤:after{

content:」插入的內容」

}

3．first-child

指定元素列表中第一個元素的樣式。語法以下：

li:first-child{

color:red;

}

4．last-child

和first-child是同類型的選擇器。last-child指定元素列表中最後一個元素的樣式。語法以下：

li:last-child{

color:red;

}

5．nth-child和nth-last-child

nth-child和nth-last-child能夠指定某個元素的樣式或從後數起某個元素的樣式。例如：

//指定第2個li元素

li:nth-child(2){}

//指定倒數第2個li元素

li:nth-last-child{}

//指定偶數個li元素

li:nth-child(even){}

//指定奇數個li元素

li:nth-child(odd){}

在此咱們只介紹了部分經常使用的CSS選擇器，實際上選擇器並不止這幾種，其他的選擇器再也不詳細介紹，有興趣的讀者能夠閱讀CSS3相關資料。

本文節選自《HTML5移動Web開發指南》一書，本書由唐俊開著，由電子工業出版社正式出版。

 

來自 <http://www.programmer.com.cn/12496/>