CSS3初步

時間 2019-11-12

標籤 css3 css 初步欄目 CSS 简体版

原文原文鏈接

什麼是CSS，什麼是CSS3？css

很是簡單，CSS表明「Casading Style Sheets」，就是樣式表，是一種替代併爲網站添加樣式的標記性語言。如今所使用的CSS基本是在1998年推出的CSS2的基礎上發展而來的。10年前在internet開始普及的時候，就可以使用樣式表對網頁進行視覺效果的統一編輯，可是在10年間CSS基本沒有什麼太大的變化，一直到2010年終於推出了一個全新的版本---CSS3 。CSS3只是表示下一代CSS，3只是版本號，css3在css2.1版本上加入了一些新特性。html

CSS3新特性css3

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

CSS3技術概述瀏覽器

CSS3選擇器
CSS3文字與文字相關樣式
CSS3盒相關樣式
CSS3背景與邊框相關樣式
CSS3中的變形處理
CSS3佈局相關樣式
CSS3媒體查詢（Media Queries）
CSS3顏色相關樣式
CSS3漸變安全

CSS3選擇器

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

1. 屬性選擇器
[att=「value」] 匹配屬性等於某特定值的元素
[att^="value"] 匹配屬性包含以特定的值開頭的元素
[att$="value"] 匹配屬性包含以特定的值結尾的元素
[att*=「value」] 匹配屬性包含含有特定的值的元素
實例：佈局

a[title$="tweetCC"] { 字體

position: absolute;
top: 0; 網站

right: 0;

display: block;

width: 140px;

height: 140px;

}
瀏覽器支持:
只有IE6不支持CSS的屬性選擇器。IE7和IE八、Opera、Webkit核心和Gecko核心的瀏覽器都支持。因此在你樣式中使用屬性選擇器是比較安全的

案例：

僞類選擇器
僞類選擇器是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
詳解：
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)與上個選擇器的思想一樣，可是從後面匹配元素

第二種：倍數寫法
:nth-child(an):匹配全部倍數爲a的元素。其中參數an中的字母n不可缺省，它是倍數寫法的標誌，如3n、5n。
例子：
li:nth-child(3n){background:orange;}/*把第三、第六、第九、…、全部3的倍數的LI的背景設爲橙色*/

第三種：倍數分組匹配
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相同，用於選擇父元素下的第一個子節

CSS3漸變效果

background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue))

漸變的類型? (linear)
漸變起頭的X Y 軸座標(0 0 – 或者left-top)
漸變結束的X Y 軸座標(0 100% 或者left-bottom)
起頭的顏色? (from(red))
竣事的顏色? (to(blue))

background:-webkit-linear-gradient(top, red, blue);

請注重咱們將漸變的類型——linear——放到了屬性前綴中了
漸變從哪裏起頭 ? (top – 咱們也可使費用數，比如 -45deg)
起頭的顏色? (red)
竣事的顏色? (blue)