前端CSS的引入方式和幾種選擇器

引入css（css三種引入方式）

行內樣式

<標籤 style=“屬性：屬性值；”>

內部樣式

選擇器{屬性：屬性值；屬性：屬性值}

外部樣式

透過link引入外部css檔案

href與src href 是引用 src下載資源到當前頁面

外部樣式

實現結構與樣式的分離

實現模組化 實現公用

減少不必要的程式碼。

注意：

1。屬性：屬性值

2。每個屬性值結束加分號（；英文狀態下）

3。屬性與屬性值以鍵值對的形式存在

選擇器

基礎選擇器

標籤選擇器 標籤名 { 屬性：“屬性值”}

類選擇器 。 類名{屬性：“屬性值”} class=“類名”呼叫

ID 選擇器 #名字{屬性：“屬性值”} id=“名字” 一週用只能用一次

萬用字元 *{屬性：“屬性值” } 清除原始樣式用 *{m0+p0}

複合選擇器

後代選擇器

元素1 元素2 { 樣式宣告}

用空格隔開

子代選擇器

元素1>元素2 {樣式宣告}

用小於號（親兒子）

並集選擇器

元素1，元素2 {樣式宣告}

用英文逗號（ 一般豎著寫）

交集選擇器

元素1元素2 {樣式宣告}

緊挨著（例如 p。red 標籤在前，類名在後）

連結偽類選擇器

a：link 選擇所有未被訪問的

a：visited 選擇已被訪問

a：hover 滑鼠指標位於其上的連結，懸停時顯示

a：active 活動連結，滑鼠按下未彈起的連結

:focus 偽類選擇器

用於選取獲得焦點的表單元素

input：focus{

background-color：yellow；}

textarea：focus 也可以

注意：順序不能亂， “lv hao”口訣，其他標籤也可用

總結: css是前端開發必備的技能之一,是我們必須掌握,我們一起學習吧.