1、樣式倒入模式css
1 行內樣式
在標籤中添加一個style屬性,屬性值寫要設置的樣式
2 內接樣式
添加一個style標籤,在標籤中寫要設置的樣式
3 外界樣式
添加一個link標籤,在href中指定要導入的css樣式文件的路徑
在css樣式文件中寫樣式
2、基本選擇器
1 標籤選擇器
直接寫標籤名
2 id選擇器
#id
3 class類選擇器
.類名
3、高級選擇器
1 子類選擇器
用 大於號
選擇的是前一級標籤的子標籤spa
div>p_pid{ }
2 後代選擇器
用 空格
選擇的是前一級標籤的後代標籤繼承
.cls p{ }
3 並集選擇器
用 逗號
選擇全部符合條件的標籤字符串
p,div,a{ }
4 交集選擇器
開頭是標籤名 後邊跟id或類選擇器(注意,沒有空格)
div.cls{ } 或者div#id{ }
5 通用選擇器
* 選擇全部的標籤
6 屬性選擇器
1 [屬性名] 帶這個屬性名的標籤
2 [屬性名='要匹配的屬性值'] 帶有屬性,屬性的名符合匹配要求
3 [屬性名^='屬性值的開頭字符串']
4 [屬性名$='屬性值的結尾字符串']
5 [屬性名*='屬性值包含的字符串']
7 僞類選擇器
a: LoVe HAte
四種狀態: 未被訪問的連接 link
訪問過的連接 visited
鼠標懸停的樣式 hover
鼠標按下時的樣式 active
選擇第一個孩子:
:first-child=>修改相同元素的第一個。
選擇最後一個孩子:
:last-child=>修改相同元素的最後一個。
選擇指定的孩子:
nth-child(n)=>修改相同元素中指定的那個。
p:first-letter :選擇第一個字符
p:before在標籤前邊添加一個標籤內容=>適用於全部相同元素
p:after在標籤後邊添加一個標籤內容=>適用於全部相同元素
8 繼承性
子標籤能夠繼承父標籤的樣式: color, font-, text- line-
9 層疊性
(選擇器權重同樣的時候)後邊添加的樣式會覆蓋前邊的樣式
10 權重
id 權重100
類 權重10
標籤 權重 1
!important 權重無限大
都有!important 的時候,比較權重it