css基礎語法 本文主要內容 html導入css的三種方式 css的選擇器 參考文檔

本文主要內容

1.html導入css的三種方式

分爲內聯方式、嵌入方式、外聯方式。

2.css的選擇器

分爲id選擇器、class選擇器、屬性選擇器、僞類選擇器、標籤選擇器、僞元素選擇器、通配符選擇器。

html導入css的三種方式

1.內聯方式:直接在元素上面添加style屬性,就是內聯使用css樣式

2.嵌入方式: 在html中的head裏面引入style標籤,寫css的樣式,稱爲嵌入方式引入css樣式。

3.外聯方式:通過在head中使用link引入外部樣式。

css的選擇器

選擇器是有優先級的,選擇器優先級的順序是:

!important > id選擇器 > class選擇器 = 僞類選擇器 = 屬性選擇器 > 標籤選擇器 = 僞元素選擇器 > 通配符

1000        > 100          >  10                = 10              = 10              > 1                  = 1                    > 0

1.id選擇器:元素上聲明爲:id="id_name", css中使用#id_name

2. class 選擇器:元素上聲明爲:class="class_name", css中使用 .class_name

3.標籤選擇器: 實際上是對html標籤,填充css樣式,在css中直接使用標籤名,例如:span

4.分組選擇器:應用到這多個選擇器所引用的元素,例如,下圖中 h1,p 是對凡是這兩個標籤的元素都加上yellow.

5.後代選擇器:下圖的意思是 所聲明的樣式僅對h2下面的所有p生效。

6.屬性選擇器:是指樣式僅對持有特定屬性的元素生效。下圖的例子是指,對a標籤中,有href的元素,添加color樣式。

7.子元素選擇器:他和後代選擇器的主要區別是:後代選擇器是應用到所有的後代,而子元素選擇器隻影響直接後代。下圖中 h1 > strong  樣式只對h1中的第一個strong標籤生效。

8.相鄰選擇器:h3+p: 只對h3相鄰的第一個p標籤生效。

9.CSS 僞類用於向某些選擇器添加特殊的效果。

10.僞元素選擇器:僞元素用於向某些選擇器設置特殊效果

參考文檔

W3S, 本文GitHut代碼庫

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章