查看: 683|回復: 0
打印 上一主題 下一主題

[HTML/CSS] CSS3構成移動Web界面樣式

[復制鏈接]
跳轉到指定樓層
樓主
大話設計 發表于 2018-3-23 19:04:24 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式
生活圈制作
  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值將屬性設定為紅色字體:

  1. <div id=”article”>測試完全匹配屬性選擇器</div>
  2. <style type=”text/css”>
  3. [id=article]{
  4. color:red;
  5. }
  6. </style>
復制代碼
  2.包含匹配選擇器

  包含匹配比完全匹配范圍更廣。只要元素中的屬性包含有指定的字符串,元素就使用該樣式。其語法是:[attribute*=value]。其中attribute指的是屬性名,value指的是屬性值,包含匹配采用“*=”符號。

  例如下面三個div元素都符合匹配選擇器的選擇,并將div元素內的字體設置為紅色字體:

  1. <div id=”article”>測試完全匹配屬性選擇器</div>
  2. <div id=”subarticle”>測試完全匹配屬性選擇器</div>
  3. <div id=”article1″>測試完全匹配屬性選擇器</div>
  4. <style type=”text/css”>
  5. [id*=article]{
  6. color:red;
  7. }
  8. </style>
復制代碼
  3.首字符匹配選擇器

  首字符匹配就是匹配屬性值開頭字符,只要開頭字符符合匹配,則元素使用該樣式。其語法是:[attribute^=value]。其中attribute指的是屬性名,value指的是屬性值,首字符匹配采用“^=”符號。例如下面三個div元素使用首字符匹配選擇器后,只有id為article和article1的元素才被設置為紅色字體。

  1. <div id=”article”>測試完全匹配屬性選擇器</div>
  2. <div id=”subarticle”>測試完全匹配屬性選擇器</div>
  3. <div id=”article1″>測試完全匹配屬性選擇器</div>
  4. <style type=”text/css”>
  5. [id^=article]{
  6. color:red;
  7. }
  8. </style>
復制代碼
  4.尾字符匹配選擇器

  尾字符匹配跟首字符匹配原理一樣。尾字符只匹配結尾的字符串,只要結尾字符串符合匹配,則元素使用該樣式。其語法是:[attribute$=value]。其中attribute指的是屬性名,value指的是屬性值,尾字符匹配采用“$=”符號。例如下面三個div元素使用尾字符匹配選擇器時,只有id為subarticle的元素才被設置為紅色字體。

  1. <div id=”article”>測試完全匹配屬性選擇器</div>
  2. <div id=”subarticle”>測試完全匹配屬性選擇器</div>
  3. <div id=”article1″>測試完全匹配屬性選擇器</div>
  4. <style type=”text/css”>
  5. [id$=article]{
  6. color:red;
  7. }
  8. </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。

  1. before選擇器的語法是:

  2. 元素標簽:before{

  3. content:”插入的內容”
  4. }

  5. 例如,在p元素之前插入“文字”:

  6. p.before{

  7. content:”文字”
  8. }
復制代碼
  2.after

  after偽類元素選擇器和before偽類元素選擇器原理一樣,但after是在選擇某個元素之后插入內容。

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

  1. after選擇器的語法是:

  2. 元素標簽:after{

  3. content:”插入的內容”

  4. <span style="background-color: white;">}</span>
復制代碼
  3.first-child

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

  1. li:first-child{

  2. color:red;

  3. }
復制代碼
  4.last-child

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

  1. li:last-child{

  2. color:red;

  3. }
復制代碼
  5.nth-child和nth-last-child

  nth-child和nth-last-child可以指定某個元素的樣式或從后數起某個元素的樣式。例如:

  1. //指定第2個li元素

  2. li:nth-child(2){}

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

  4. li:nth-last-child{}

  5. //指定偶數個li元素

  6. li:nth-child(even){}

  7. //指定奇數個li元素

  8. li:nth-child(odd){}
復制代碼


最近訪問 頭像模式 列表模式
您需要登錄后才可以回帖 登錄 | 立即注冊

本版積分規則

快速回復 返回頂部 返回列表
大乐透和双色球哪个更容易中奖