1.2.1 標籤選擇器
html 標籤名 {屬性:值;} 常用的屬性: color 前景色(文字顏色) background-color 背景色 font-size 設置文字大小 width 設置寬度 height 設置高度 text-align:left|right|center 設置內容對齊方式(內容,圖片) text-indent 設置首行縮進
//舉例: <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ color:green; font-size: 25px; background-color: pink; width: 500px; height: 500px; } </style> </head> <body> <div> css學習css學習css學習css學習 </div> </body> </html>
1.2.1.1 單位介紹
px 像素 em 1em = 一個文字的大小
1.2.1.2 顏色的表示方式
用英文單詞直接設置顏色 red、green、pink......
16進製表示 #0-f
background-color: #D82F92; color: #0F0000;
使用三原色表示 rgb
將一個顏色，使用紅（R，red）， 綠（G，green）， 藍（B，blue）來表示。 這3個叫做“基本顏色”，都按0-255分爲256個層級。 形式：rgb(紅的配比， 綠的配比，藍的配比）； 舉例:background-color:rgb(23,25,65);
使用rgba , 實現半透明效果
A代表“透明度”，值從0到1的小數。0表示全透明。1表示不透明，此時就是RGB顏色 形式：rgba(紅的配比， 綠的配比，藍的配比，透明度）； background-color: rgba(25,5,35,0.5);
使用opacity實現半透明
background-color: #D82F92; opacity:0.3; //取值:0~1 注意:opacity會影響其中的文字也變化
1.2.2 類選擇器
語法: .自定義類名{屬性:值} 舉例: <style> .red{ color:red; } //類樣式的定義 </style> ... <body> <p class="red">文字顏色變紅</p> //調用類樣式 </body>
注意:
一個類樣式可以被多個標籤同時調用
<p class="red">..紅色..</p> <p class="red">..黃色..</p> <p class="red">..綠色..</p>
一個標籤可以同時調用多個類樣式
<p class="red public back">....</p>
類選擇器的命名規範
起名的時候儘量起一些有意義的名字 , 最好在之前添加註釋 , 以便自己查閱
不能使用純數字或者以數字開頭定義類名
不能使用特殊字符或者以特殊字符開頭定義類名, 如:% $ & @
不推薦使用漢字定義類名
不推薦使用標籤名定義類名
1.2.3 id選擇器
id選擇器的形式上是一個英文井號（#）後面緊跟一個id名。
id名是在標籤上通過id屬性而設定。我們可以自己設定id名。
如下所示：
<style> #p1{color: red; font-size: 18px; width: 500px; } </style> <p id="p1"> 這是一個信息化的時代</p>
特別注意：
一個網頁中的id不能 “重名”（但class名可以重複）。
1.2.4 通配符選擇器
通配符選擇器非常簡單，就一個星號(*)，表示“所有標籤”, 該選擇器會將頁面上的所有標籤都選中。
*{ 屬性:值 }
表示所有標籤都應用該css樣式的設定。
1.2.5 關係選擇器
關係選擇器是通過元素之間的“位置關係的特徵”來確定所選元素。
1.2.5.1. 子代選擇器：S1>S2
匹配S1中的下一級S2。下一級就是“子級”，或子代。
其中S1，S2都可以是獨立使用的選擇器（比如id選擇器，class選擇器，標籤選擇器等）。
比如 : S1爲div， S2爲p，即形式爲"div > p"，就表示找出div中的所有子級p標籤。
又比如：
#p1>a{ ... } ：表示找出id爲p1的標籤中的所有子代a標籤。
.cc>p{ ... } ：表示找出class爲cc的標籤中的所有子代p標籤。
#p2>.cc2>img{ ... } ：表示找出id爲p2中的子代的class爲cc2中的所有子代img標籤。
1.2.5.2 後代選擇器：S1 S2
匹配S1內部的所有後代S2。
此時就不僅僅侷限於子代標籤了，還包括孫代，曾孫代，等等。
簡單說，就是找出放在S1所選中的標籤中的所有S2所選中的標籤。
比如：
div p{ ... } ：匹配div中的所有後代p標籤，即凡是放在div中的p標籤都會找出來。
#p1 a{ ... } ：匹配id爲p1的標籤中的所有a標籤，即只要a標籤在#p1中就可以。
.cc p{ ... } ：匹配class爲cc的標籤中的所有p標籤，即只要p標籤在.cc中就可以。
#p2 .cc2 img{ ... } ：匹配id爲p2中的class爲cc2中的所有img標籤.
1.2.5.3 相鄰選擇器：S1+S2
匹配S1後面緊挨着的同級（兄弟）元素S2。
1.2.5.4 兄弟選擇器：S1~S2
匹配S1後面的所有同級（兄弟）元素S2。
1.2.6 屬性選擇器
屬性選擇器是通過元素的屬性的特徵信息來確定所選元素。
1.2.6.1 [attr]
匹配具有所給定屬性名稱的標籤。
其中attr是一個“示意性符號”，表示“屬性名”。
比如：
[style] { background: yellow; } //能選中具有color屬性的所有標籤。
[class] { border: 1px solid red; } //能選中具有width屬性的所有標籤。
1.2.6.2 [attr="val"]
匹配具有某個屬性且屬性值爲給定值的標籤。
比如：
[color="red"] { background: yellow; } //能選中具有color屬性且值爲”red”的所有標籤。
[width="100"] { border: 1px solid red; } //能選中具有width屬性且值爲”100”的所有標籤。
<hr color="red" /> <table width="100" >....</table>
1.2.6.3 [attr~="val"]
匹配具有某個屬性且屬性值包含所給定單詞的標籤。
注意：
1，必須是一個“單詞”形式，比如屬性值爲”a dog”，則使用”dog”可以匹配，而使用”do”不能匹配。
2，對於中文，除非有明確的空格，否則一句連續的句子（含中文標點符號）也只能算一個單詞。
<p title="a dog">...</p>
[title~="dog"]{ .... } //可以選中上面那個p標籤
[title~="do"]{ ..... } //選不上。。。
1.2.6.4 [attr*="val"]
匹配具有某個屬性且屬性值包含給定的字符的標籤。只要包含該字符就可以,不一定要是完整的詞.
1.2.6.5 [attr^="val"]
匹配具有某個屬性且屬性值以給定的字符開頭的標籤。
1.2.6.6 [attr$="val"]
匹配具有某個屬性且屬性值以給定的字符結尾的標籤。
1.2.7 僞類選擇器
僞類選擇器是通過單冒號（：）和特定的具有某種含義的單詞來確定所選元素。
所謂僞類選擇器，是相對於“類選擇器”來說的，對比如下：
類選擇器：
說明：類的名稱是由我們程序員來設定的，符合命名規範就行。
形式：.類名稱{ ... }
僞類選擇器：
說明：僞類的名稱是css標準中所預先設定的，我們不能自己設定。可用的僞類名不多。
形式：:僞類名稱{ ... }
1.2.7.1 :link, :visited, :hover, :active,
這4個僞類主要用於表示一個鏈接（也就是a標籤）的4種不同狀態。
它們可以設定一個鏈接在不同狀態下的外觀表現（樣式表現）。
:link ——表示一個鏈接初始時候的狀態。
:visited ——表示一個鏈接在訪問（點擊）過之後的狀態。
:hover ——表示一個鏈接在“鼠標移上去”（鼠標懸停）的時候的狀態。
:active ——表示一個鏈接在“活動狀態”的時候的狀態，通常就是點擊的瞬間（按住不放能看到）。
注意：
1，:hover可以用於其它標籤，並且經常用！
2，對於a鏈接的這4個狀態，他們有順序問題，必須按上述順序纔有合理效果（lvha，Lv哈）
1.2.7.1 E:focus
表示一個元素在成爲可輸入狀態（獲得焦點）的時候，主要用於表單元素。
其中“E”表示某個元素（或某個選擇器所選中的元素）。
這樣連着寫，即表示該元素在獲得焦點的時候，其樣式表現如何。後面的“E”也都是這個意思。
也可以不用前面寫“E”，而是直接用“:focus”，但實際應用中，一般會在前面有這個限定。
比如：
input:focus{ .... } //表示input元素在獲得焦點的時候
也可以不用input，如下所示：
:focus{ .... }
但此時其實所選擇的範圍擴大了（不僅僅針對input元素）。
1.2.7.3 E:first-child, E:last-child, E:only-child, E:nth-child(n)
這幾個僞類用於表示（或選中）“具有某種特徵的子元素E”。
E:first-child ——匹配作爲父元素的第一個子元素E。
E:last-child ——匹配作爲父元素的最後一個子元素E。
E:only-child ——匹配作爲父元素的唯一一個子元素E。
E:nth-child(n) ——匹配作爲父元素的第n個子元素E。括號中的n是一個具體數字
還可以這樣用：nth-child(2n+1）表示奇數項， nth-child(2n+2)表示偶數項
舉例：
li:first-child{ ... } //表示作爲第一個子元素的li標籤
td:last-child{ ... } //表示作爲最後一個子元素的td標籤
p:only-child{ ... } //表示作爲父元素中只有這一個子元素的p標籤
li:nth-child(2){ ... } //表示作爲第2個子元素的li標籤
注意：
上述也可以單用（不要冒號前面的部分），但一般較少這樣用。
1.2.7.4 E:empty，E:checked，E:enabled，E:disabled
E:empty
——匹配元素內部爲空（沒有內容）的元素。
“內容”指的是一個標籤內是否有其他html代碼或文字。顯然，單標籤內是不可能有內容的。
E:checked
——匹配被選中的元素（用於input且type爲radio或checkbox的時候）
E:enabled
——匹配“可用的/有效的元素”（用於表單元素）。
E:disabled
——匹配“不可用的/有效的元素”（用於表單元素）。
1.2.8 僞元素選擇器
僞元素選擇器是通過雙冒號（：：）和特定的具有某種含義的單詞來確定所選元素。
僞元素選擇器通常是“本沒有這個元素（標籤）”，但會創建出一個隱性元素並對其進行樣式設定。
僞元素選擇器又稱爲“僞對象選擇器”。
1.2.8.1 E::before
表示在元素E的內部的最前面創建一個元素（僞元素）。
其中必須寫上一個屬性：content:”內容”; //當然，內容可以爲空。
1.2.8.2 E::after
表示在元素E的內部的最後面創建一個元素（僞元素）。
其中必須寫上一個屬性：content:”內容”; //當然，內容可以爲空。
表示將元素E中“選中的文字”單獨作爲一個元素（僞元素）。
1.2.8.3 E::first-letter
表示元素E中的“第一個字符”可以單獨作爲一個元素（僞元素）。
1.2.8.4 E::first-line
表示元素E中的“第一行”可以單獨作爲一個元素（僞元素）。
1.2.9 常見選擇器的組合
1.2.9.1 E.className
舉例：
div.c1{ .... }
p.cc2{ .... }
注意：他們是“緊挨在一起的”！ 否則就成爲了後代選擇器了。
1.2.9.2 E#id
div#id1{ ... }
p#id2{ ... }
1.2.9.3 E[屬性選擇器]
[src] //找所有有src屬性的標籤
img[src] //找img標籤並且有src屬性
img[src*="dog"] 找img標籤並且有src屬性並且屬性中包含“dog”這個字符！
1.2.9.4 並集選擇器：S1, S2
兩個選擇器，可以使用一個英文逗號（,）連接起來。
表示這兩個選擇器，都使用同樣一個樣式設定（屬性設定）。
比如：
p, div{ ... }
#price, .addr{ ... }
p.cc, .cc, div .cc2{ ... }
1.2.9.5 更復雜的選擇器組合舉例
#main .container div { .... }
#main .box>p[align="center"] { .... }
table#m2 div .box2 p:nth-child(2) { .... }
div#m1 .box1 div input[type='text']:focus { .... }