CSS标签详解
CSS3標(biāo)簽
Css3概述
從2010年開始,HTML5與CSS3就一直是互聯(lián)網(wǎng)技術(shù)中最受關(guān)注的兩個話題。從前端技術(shù)的角度可以把互聯(lián)網(wǎng)的發(fā)展分為三個階段：第一階段是web1.0以內(nèi)容為主的網(wǎng)絡(luò)，前端主流技術(shù)是HTML和CSS，第二階段是web2.0的Ajax應(yīng)用，熱門技術(shù)是javascrip/DOM/異步數(shù)據(jù)請求。第三階段是即將迎來的HTML5+CSS3時代，這兩者相輔相成，使互聯(lián)網(wǎng)又進入一個嶄新的時代。
什么是CSS
非常簡單，CSS代表“Casading Style Sheets”，就是樣式表，是一種替代并為網(wǎng)站添加樣式的標(biāo)記性語言。現(xiàn)在所使用的CSS基本是在1998年推出的CSS2的基礎(chǔ)上發(fā)展而來的。10年前在internet開始普及的時候，就能夠使用樣式表對網(wǎng)頁進行視覺效果的統(tǒng)一編輯，但是在10年間CSS基本沒有什么太大的變化，一直到2010年終于推出了一個全新的版本---CSS3 。CSS3只是表示下一代CSS，3只是版本號，css3在css2.1版本上加入了一些新特性。簡單的說，CSS3把很多以前需要使用圖片和腳本來實現(xiàn)的效果，只需要短短幾行代碼就能搞定。比如圓角，圖片邊框，文字陰影和盒陰影等。CSS3不僅能簡化前端開發(fā)工作人員的設(shè)計過程，還能加快頁面載入速度。
CSS3 的一些新特性
- 圓角效果
- 圖形化邊界
- 塊陰影與文字陰影
- 使用 RGBA 實現(xiàn)透明效果
- 漸變效果
- 使用 @Font-Face 實現(xiàn)定制字體
- 多背景圖
- 文字或圖像的變形處理（旋轉(zhuǎn)、縮放、傾斜、移動）
- 多欄布局
- 媒體查詢
瀏覽器支持
-
CSS3瀏覽器支持狀況
-
Firefox 3.05+…部分支持
-
Google Chrome 4+…較好支持
-
Internet Explorer IE9+部分支持
-
Opera 10+…部分支持
-
Safari (3.2.1+ windows… 較好支持)。
?
?
?
CSS選擇器
CSS選擇器是個難以置信地強大的工具：它們允許我們在標(biāo)簽中指定特定的HTML元素而不必使用多余的 class、 ID 或JavaScripts。而且它們中的大部分并不是CSS3中新添加的，而是沒有被得到應(yīng)有的廣泛應(yīng)用。如果你在嘗試實現(xiàn)一個干凈的、輕量級的標(biāo)簽以及結(jié)構(gòu)與表現(xiàn)更好的分離，高級選擇器是非常有用的。它們可以減少在標(biāo)簽中的class和ID的數(shù)量并讓設(shè)計師更方便的維護樣式表。
屬性選擇器
- [att=“value”] 匹配屬性等于某特定值的元素
- [att^="value"] 匹配屬性包含以特定的值開頭的元素
- [att$="value"] 匹配屬性包含以特定的值結(jié)尾的元素
- [att*=“value”] 匹配屬性包含含有特定的值的元素
?
偽類選擇器
偽類選擇器是css中已經(jīng)定義好的選擇器，不能隨便起名常用的偽類選擇器是使用在 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：”內(nèi)容”}
效果：
?
?
結(jié)構(gòu)性偽類選擇器
在css3中引入的結(jié)構(gòu)行偽類選擇器的共同特性是允許開發(fā)者根據(jù)文檔樹中的結(jié)構(gòu)來指 定元素樣式。
: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)
第一種： 簡單數(shù)字序號寫法（如圖1）
?
:nth-child(number)：直接匹配第number個元素。參數(shù)number必須為大于0的整數(shù)。例如：
li:nth-child(3){background:orange;} /*把第3個LI的背景設(shè)為橙色*/
:nth-last-child(n)與上個選擇器的思想同樣，但是從后面匹配元素
1. root
?:root 偽類選擇頁面的根元素。十有八九根節(jié)點是 <html> 元素，例如：
?:root { }
?
2. not
?:not 想對某個結(jié)構(gòu)元素使用樣式，但是想排除這個結(jié)構(gòu)元素下面的子結(jié)構(gòu)元素。例如：
?body *:not(h1) { }?
3.empty???????????????????????????????????????????????????????????????????????
?:empty 當(dāng)元素內(nèi)容為空時被選中。例如：?????????????????????
?:empty { }????????????????????????????
?<table>
?<tr><td>a</td><td>b</td></tr>
?<tr><td>c</td><td></td></tr>
?</table>
?
?
4.target
:target目標(biāo) 當(dāng)跳轉(zhuǎn)到目標(biāo)是進行改變
? 例如:?? :target h3{color:pink}
?
?
5.nth-child(n)和nth-last-child(n)
第一種： 簡單數(shù)字序號寫法
?:nth-child(number)：直接匹配第number個元素。參數(shù)number必須為大于0的整數(shù)。例如：
?li:nth-child(3){background:orange;} /*把第3個LI的背景設(shè)為橙色*/
?:nth-last-child(n)與上個選擇器的思想同樣，但是從后面匹配元素
?
?
第二種：倍數(shù)寫法（如圖2）
?
?
:nth-child(an):匹配所有倍數(shù)為a的元素。其中參數(shù)an中的字母n不可缺省，它是倍數(shù)寫法的標(biāo)志，如3n、5n。
例子：
li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍數(shù)的LI的背景設(shè)為橙色*/
第三種：倍數(shù)分組匹配（如圖3）
?
li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3個為一組的第1個LI*/
第四種：奇偶匹配
:nth-child(odd) 與 :nth-child(even) 分別匹配序號為奇數(shù)與偶數(shù)的元素。奇數(shù)(odd)與(2n+1)結(jié)果一樣；偶數(shù)(even)(2n)結(jié)果一樣。
第五種 nth-of-tyoe（）
為了解決在同一級別出現(xiàn)其他標(biāo)簽導(dǎo)致找不到想要的元素。
6.last-child 用于選擇父元素下的最后一個子節(jié)點。例如： li { border-bottom: 1px solid #ccc; } li:last-child { border-bottom: none; }
?
7.first-child 用法同last-child相同，用于選擇父元素下的第一個子節(jié)
?
?
?
?CSS3漸變效果
?
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue))
漸變的類型? (linear)?
漸變起頭的X Y 軸坐標(biāo)(0 0 – 或者left-top)?
漸變結(jié)束的X Y 軸坐標(biāo)(0 100% 或者left-bottom)?
起頭的顏色? (from(red))?
竣事的顏色? (to(blue))
background:-webkit-linear-gradient(top, red, blue);
請注重我們將漸變的類型——linear——放到了屬性前綴中了?
漸變從哪里起頭 ? (top – 我們也可以使費用數(shù)，好比 -45deg)?
起頭的顏色? (red)?
竣事的顏色? (blue)
?
?
?
?
?
?
?
?
簡單文字陰影：
?
轉(zhuǎn)載于:https://www.cnblogs.com/myhome-1/p/6268893.html
總結(jié)
- 上一篇： cenos 安装 phpredis 扩
- 下一篇： BZOJ 2668: [cqoi2012