CSS選擇器的基本樣式

2021-08-25 02:22:33 字數 1768 閱讀 2195

作用是什麼:設定如何顯示 html 標籤。

語法結構是什麼:

第一種:

選擇器

說明: 這種方式的css樣式表由選擇器以及一條或多條宣告兩個部分組成;該種樣式表只能定義在style

標籤css

檔案中,每個style標籤或css檔案可定義多個css樣式表;

第二種:

style=

" declaration1; declaration2;…"

說明: 這種方式的css樣式表只由一條或多條宣告組成;該種樣式表只能定義在style標籤屬性;html文件中每個標籤都有乙個style標籤屬性。

無論使用哪一種方式定義css樣式表,樣式表中的declaration都由乙個樣式屬性(非標籤屬性,即樣式屬性不能當標籤屬性直接用在標籤中)和乙個樣式屬性值組成,樣式屬性和樣式屬性值使用冒號分開;宣告之間使用分號間隔;

注意:1、如果乙個樣式屬性有多個樣式屬性值,則樣式屬性值之間使用逗號間隔;

2、在css中樣式屬性及其樣式屬性值對大小寫不敏感,且不忽略空格;

3、如果屬性值由多個單詞組成,則建議使用單引號引起來;

1、標籤選擇器

標籤選擇器以html文件中定義的標籤名為選擇器名,例如:a

作用物件: class標籤屬性的屬性值與類選擇器.後相同的所有標籤都受影響。

注意:class標籤屬性的屬性值不能以數字開頭;

類選擇器可以有多個值,每個值之間用空格間隔。

例如:.srrows

定義了乙個名為srrows的類選擇器。

3、id選擇器

id選擇器以標籤中id標籤屬性的屬性值為選擇器名,其語法如下:

# id

標籤屬性的屬性值

作用物件:只有id標籤屬性的屬性值與id選擇器#後相同的標籤才受影響。

注意:1、id標籤屬性的屬性值不能以數字開頭;

2、id標籤屬性的屬性值在html文件中必須唯一;class標籤屬性的屬性值可以不唯一;

4、後代選擇器

其語法如下:

父代選擇器1

子父代選擇器2

子父代選擇器3 ….

子代選擇器

注意:選擇器之間用空格間隔;

例如如下寫的乙個後代選擇器例項:

#header #logo

也可以混合使用,如:

#container #container-on .step-index

id選擇器和類選擇器組合的後代選擇器。

5、分組選擇器

如果html文件多個css樣式表內的部分樣式相同,則可以通過定義乙個分組選擇器抽取出來以簡化css樣式**,   該類選擇器的選擇器名由多個選擇器組成,使用逗號分隔,在其語法如下

選擇器1,

選擇器2,

選擇器3…

6、萬用字元選擇器

萬用字元選擇器等價於列出了html文件中所有標籤的乙個分組選擇器,其語法如下*

例如:幾乎每乙個網頁頁面都會使用的選擇器萬用字元如下:

*

CSS樣式選擇器

1.css 選擇器 1 標記選擇器 選擇器 用來指定確定標記的樣式 如 類別選擇器 class 類別名稱 如 對應的 class 選擇器 id選擇器 id id選擇器 如 對應的 id選擇器1id 選擇器2 2.集體宣告 對應的 集體宣告 h4集體宣告 h5集體宣告 p1集體宣告 p2集體宣告 p3...

CSS樣式選擇器

樣式選擇器 每一條css樣式宣告 定義 由兩部分組成,形式如下 選擇器類選擇器 以英文圓點開頭,不可以使用數字或中文起名 使用方法 1.使用class 類選擇器名 為標籤設定乙個類,如下 膽小如鼠 2.設定類選擇器css樣式,如下 stress id選擇器 id選擇器類似於類選擇器 1.為標籤設定i...

CSS樣式 選擇器

css的選擇器 1 標籤選擇器 div p a input span h1 divp我是段落 2 類選擇器 class 類選擇器樣式 class stylediv我是div容器 我是div中的段落 3 id選擇器 id id選擇器樣式 id stylep我是div容器 4 並列選擇器 並列選擇器樣式...