級聯樣式單與選擇器

2021-09-25 20:00:14 字數 1425 閱讀 9156

鏈結外部樣式檔案:這種方式將樣式檔案徹底與html文件分離,樣式檔案需要額外引入。在這種方式下,一批樣式可控制多份文件。(使用link元素來引入外部樣式檔案)

匯入外部樣式檔案:這種方式與上一種方式類似,只是使用@import來引入外部樣式單。(@import)

使用內部樣式定義:這種方式是通過在html文件頭定義樣式單不問來實現的。在這種方式下,每批css樣式只控制乙份文件。

使用行內樣式:這種方式將樣式行內定義到具體的html元素,通常用於精確控制乙個html元素的表現,在這種方式下,每份css樣式只控制單個html元素。

css選擇器

元素選擇器

語法格式:e/其中e代表有效的html元素名/

屬性選擇器

e:指定該css樣式對所有e元素起作用

e[attr]:指定該css樣式對具有attr屬性的e元素起作用

e[attr=value]:指定該css樣式對所有包含attr屬性,且attr屬性為value的e元素起作用

e[attr~=value]:指定該css樣式對所有包含attr屬性,且attr屬性的值為以空格隔開的系列值,其中某個值為value的e元素起作用。

id選擇器

語法格式:#idvalue

e#idvalue僅對指定元素起作用

class選擇器

語法格式:[e].classvalue 對具有指定class屬性的元素起作用

包含選擇器

語法格式:selector1 selector2 指定目標選擇器必須處於某個選擇器對應的元素內部

子選擇器

語法格式:selector1>selector2指定目標選擇器必須是某個選擇器對應的元素的子元素

兄弟選擇器

語法格式:selector1~selector2兄弟選擇器匹配與selector1對應的元素後面、能匹配selector2的兄弟節點。

選擇器組合

語法格式:selector1,selector2,selector3…{}中定義的css樣式將會對前面李虎的所有選擇器匹配的元素起作用。

偽類選擇器

結構性偽類選擇器指的是根據html元素之間的結構關鍵進行篩選的偽類選擇器

常用的結構行偽類選擇器

selector:first-child

selector:last-child

selector:nth-child

selector:nth-last-child

常用的ui狀態偽類選擇器

selector link

selector visited

selector active

selector hover

selector focus

selector disabled

使用級聯樣式表選擇器

存檔日期 2019年5月15日 首次發布 2002年9月1日 使用級聯樣式表 css 頁面作者可以更精確地控制內容的外觀。css規則由乙個選擇器組成,該選擇器確定規則適用的內容以及設定的屬性和值。雖然大多數開發人員習慣於使用基於標籤名稱的選擇器,但css實際上提供了幾個不同的選項,可以實現更大的控制...

CSS級聯樣式表 css選擇器

cascading style sheet 級聯樣式表 表現html或xhtml檔案樣式的計算機語言 包括對字型,顏色,邊距,高度,寬度,背景,網頁定位等設定 建議 把表示樣式的 從html中分離出來,並且建立一種規則來定義html標籤要顯示成什麼樣子。型別選擇器 不帶尖括號的標籤名。如給段落標籤加...

樣式表與選擇器

樣式表的分類 內聯樣式表 樣式寫在標籤裡 重用性差,但控制精確 內嵌樣式表 嵌在網頁的某個位置 重用性高一些,控制性不如內聯精確 外部樣式表 樣式是寫在乙個外部檔案裡面 重用性最高,控制精確度最低 文字 通過選擇器找元素 id 每個元素都可以加,id不能重複,以字母開頭 class 類名,每個元素都...