CSS的三種使用方式以及常用的選擇器

2022-09-11 21:12:28 字數 1388 閱讀 1151

一、css的三種使用方式:

1. 內聯樣式

* 在標籤內使用style屬性指定css**

* 如:hello css

2. 內部樣式

* 在head標籤內,定義style標籤,style標籤的標籤體內容就是css**

* 如:

hello css

3. 外部樣式

1. 定義css資源檔案。

2. 在head標籤內,定義link標籤,引入外部的資源檔案

* 如:

* a.css檔案:

div

hello css

hello css

二、css的常用選擇器:

1. 基礎選擇器

1.id選擇器:選擇具體的id屬性值的元素.建議在乙個html頁面中id值唯一

* 語法:#id屬性值{}

2.元素選擇器:選擇具有相同標籤名稱的元素

* 語法: 標籤名稱{}

* 注意:id選擇器優先順序高於元素選擇器

3.類選擇器:選擇具有相同的class屬性值的元素。

* 語法:.class屬性值{}

* 注意:類選擇器選擇器優先順序高於元素選擇器

2. 擴充套件選擇器:

1. 選擇所有元素:

* 語法:*{}

2. 並集選擇器:

* 選擇器1,選擇器2{}

3. 子選擇器:篩選選擇器1元素下的選擇器2元素

* 語法:  選擇器1 選擇器2{}

4. 父選擇器:篩選選擇器2的父元素選擇器1

* 語法:  選擇器1 > 選擇器2{}

5. 屬性選擇器:選擇元素名稱,屬性名=屬性值的元素

* 語法:  元素名稱[屬性名="屬性值"]{}

6. 偽類選擇器:選擇一些元素具有的狀態

* 語法: 元素:狀態{}

* 如:

* 狀態:

* link:初始化的狀態

* visited:被訪問過的狀態

* active:正在訪問狀態

* hover:滑鼠懸浮狀態

CSS的三種使用方式

一 行間樣式表 行間樣式表是指將css樣式編碼寫在html標籤中,格式如下 行間樣式表由html元素的html元素的style支援,只需將css 用分號隔開寫在style 之中。這是最基本的形式,但是它沒有實現表現與內容分離且不能靈活的控制多個頁面所以我們只是在除錯css 的時候使用。二 內部樣式表...

CSS三 CSS的三種引入方式

css的引入方式共有三種 行內樣式 內部樣式表 外部樣式表。一 行內樣式 使用style屬性引入css樣式。示例 直接在html標籤中設定的樣式 實際在寫頁面時不提倡使用,在測試的時候可以使用。例如 我是p標籤 二 內部樣式表 在style標籤中書寫css style標籤寫在head標籤中。示例 例...

CSS三 CSS的三種引入方式

css的引入方式共有三種 行內樣式 內部樣式表 外部樣式表。一 行內樣式 使用style屬性引入css樣式。示例 直接在html標籤中設定的樣式 實際在寫頁面時不提倡使用,在測試的時候可以使用。例如 我是p標籤 二 內部樣式表 在style標籤中書寫css style標籤寫在head標籤中。示例 例...