什麼是css,css選擇器簡介

什麼是CSS

css是 Cascading（層疊 ）Style（樣式） Sheet（表）的簡稱，及層疊樣式表，CSS技術用來美化html頁面，html相當於蓋房子，CSS相當於裝修，使用CSS可以把樣式代碼和html分離

什麼是css

html頁面中引入css的方式

1、內聯樣式：在標籤的style屬性中引入css，不推薦使用，不能復用

<div style="color: red; border: 1px solid blue">我是一個div</div>

2、內部樣式：通過style標籤引入CSS，可以在當前頁面復用，學習時經常使用，工作中不推薦使用，因為不能多頁面復用

<style type="text/css">h2{color: purple; background-color: green;}</style>

3、外部樣式：通過link標籤引入外部css樣式文件，可多頁面復用，推薦工作中使用，需要單獨創建樣式文件

<link rel="stylesheet" href="first.css">

優先級（多種引入方式操作同一個標籤，以哪個為準）

內聯優先級最高內部和外部同時存在，則就近原則標籤默認效果優先級最低選擇器

選擇器可以幫助我們選中需要添加樣式的標籤

1、標籤名選擇器：通過標籤的名稱找到指定標籤

格式：元素名{ }

2、類選擇器：通過標籤的class屬性值選中指定標籤,多個標籤可以有相同的class值

格式：.d1{ }

3、id選擇器：通過id找到標籤，一個html文件中id不能重複

格式： #id{}

4、派生選擇器（後代選擇器）：類似於路徑，找到符合要求的標籤，會匹配所有的後代標籤

格式： ul li a{} #id li a{}

5、子元素選擇器：和後代類似，但是只能獲得子元素

格式： ul>li>a{}

6、分組選擇器：可以將多種選擇器結合到一起使用，用來統一設定樣式

格式: h1,h2,#abc,.m{ }

7、偽元素選擇器：偽元素選擇器選擇的是元素的狀態，狀態分為以下幾種：

link 表示元素未被點擊時的狀態hover 表示滑鼠懸停時的狀態active 表示元素被點擊時的狀態visited 表示元素被點擊後的狀態格式： #id:hover{ }

總結選擇器：標籤名選擇器，類選擇器，id選擇器，派生選擇器，子元素選擇器，分組選擇器，偽元素選擇器