CSS標籤詳解

時間 2019-12-01

標籤 css 標籤詳解欄目 CSS 简体版

原文原文鏈接

CSS3標籤

Css3概述css

從2010年開始,HTML5與CSS3就一直是互聯網技術中最受關注的兩個話題。從前端技術的角度能夠把互聯網的發展分爲三個階段：第一階段是web1.0之內容爲主的網絡，前端主流技術是HTML和CSS，第二階段是web2.0的Ajax應用，熱門技術是javascrip/DOM/異步數據請求。第三階段是即將迎來的HTML5+CSS3時代，這二者相輔相成，使互聯網又進入一個嶄新的時代。html

什麼是CSS前端

很是簡單，CSS表明「Casading Style Sheets」，就是樣式表，是一種替代併爲網站添加樣式的標記性語言。如今所使用的CSS基本是在1998年推出的CSS2的基礎上發展而來的。10年前在internet開始普及的時候，就可以使用樣式表對網頁進行視覺效果的統一編輯，可是在10年間CSS基本沒有什麼太大的變化，一直到2010年終於推出了一個全新的版本---CSS3 。CSS3只是表示下一代CSS，3只是版本號，css3在css2.1版本上加入了一些新特性。簡單的說，CSS3把不少之前須要使用圖片和腳原本實現的效果，只須要短短几行代碼就能搞定。好比圓角，圖片邊框，文字陰影和盒陰影等。CSS3不只能簡化前端開發工做人員的設計過程，還能加快頁面載入速度。java

CSS3 的一些新特性css3

圓角效果
圖形化邊界
塊陰影與文字陰影
使用 RGBA 實現透明效果
漸變效果
使用 @Font-Face 實現定製字體
多背景圖
文字或圖像的變形處理（旋轉、縮放、傾斜、移動）
多欄佈局
媒體查詢

瀏覽器支持web

CSS3瀏覽器支持情況windows
Firefox 3.05+…部分支持瀏覽器
Google Chrome 4+…較好支持網絡
Internet Explorer IE9+部分支持異步
Opera 10+…部分支持
Safari (3.2.1+ windows… 較好支持)。

CSS選擇器

CSS選擇器是個難以置信地強大的工具：它們容許咱們在標籤中指定特定的HTML元素而沒必要使用多餘的 class、 ID 或JavaScripts。並且它們中的大部分並非CSS3中新添加的，而是沒有被獲得應有的普遍應用。若是你在嘗試實現一個乾淨的、輕量級的標籤以及結構與表現更好的分離，高級選擇器是很是有用的。它們能夠減小在標籤中的class和ID的數量並讓設計師更方便的維護樣式表。

屬性選擇器

[att=「value」] 匹配屬性等於某特定值的元素
[att^="value"] 匹配屬性包含以特定的值開頭的元素
[att$="value"] 匹配屬性包含以特定的值結尾的元素
[att*=「value」] 匹配屬性包含含有特定的值的元素

僞類選擇器

僞類選擇器是css中已經定義好的選擇器，不能隨便起名經常使用的僞類選擇器是使用在 a元素上的幾種，如：a:link,a:visited,a:hover,a:active.

僞元素

僞元素選擇器不是針對真正的元素使用的選擇器，而是針對css中已定義好的僞元素使用的選擇器，css中有以下四種 first-line，first-letter，before，after 例如：p:first-line{color:red;},p:after{content：」內容」}

效果：

結構性僞類選擇器

在css3中引入的結構行僞類選擇器的共同特性是容許開發者根據文檔樹中的結構來指定元素樣式。

:root :not :empty :trget

:nth-child(n) :nth-last-child(n)

:only-child

:first-child :last-child

5.nth-child(n)和nth-last-child(n)

第一種：簡單數字序號寫法（如圖1）

:nth-child(number)：直接匹配第number個元素。參數number必須爲大於0的整數。例如：

li:nth-child(3){background:orange;} /*把第3個LI的背景設爲橙色*/

:nth-last-child(n)與上個選擇器的思想一樣，可是從後面匹配元素

1. root
:root 僞類選擇頁面的根元素。十有八九根節點是 <html> 元素，例如：
:root { }

2. not
:not 想對某個結構元素使用樣式，可是想排除這個結構元素下面的子結構元素。例如：
body *:not(h1) { }
3.empty
:empty 當元素內容爲空時被選中。例如：
:empty { }
<table>
<tr><td>a</td><td>b</td></tr>
<tr><td>c</td><td></td></tr>
</table>

4.target
:target目標當跳轉到目標是進行改變
例如: :target h3{color:pink}

5.nth-child(n)和nth-last-child(n)
第一種：簡單數字序號寫法
:nth-child(number)：直接匹配第number個元素。參數number必須爲大於0的整數。例如：
li:nth-child(3){background:orange;} /*把第3個LI的背景設爲橙色*/
:nth-last-child(n)與上個選擇器的思想一樣，可是從後面匹配元素

第二種：倍數寫法（如圖2）

:nth-child(an):匹配全部倍數爲a的元素。其中參數an中的字母n不可缺省，它是倍數寫法的標誌，如3n、5n。

例子：

li:nth-child(3n){background:orange;}/*把第三、第六、第九、…、全部3的倍數的LI的背景設爲橙色*/

第三種：倍數分組匹配（如圖3）

li:nth-child(3n+1){background:orange;}/*匹配第一、第四、第七、…、每3個爲一組的第1個LI*/

第四種：奇偶匹配

:nth-child(odd) 與 :nth-child(even) 分別匹配序號爲奇數與偶數的元素。奇數(odd)與(2n+1)結果同樣；偶數(even)(2n)結果同樣。

第五種 nth-of-tyoe（）

爲了解決在同一級別出現其餘標籤致使找不到想要的元素。

6.last-child 用於選擇父元素下的最後一個子節點。例如： li { border-bottom: 1px solid #ccc; } li:last-child { border-bottom: none; }

7.first-child 用法同last-child相同，用於選擇父元素下的第一個子節