詳述html選擇器

2021-09-27 11:42:57 字數 4419 閱讀 4207

css 指層疊樣式表(cascading style sheets),用於設定網頁中元素的顯示方式。

css的語法結構:

第一種:

選擇器

1、該種樣式表由選擇器以及一條或多條宣告兩個部分組成;

2、該種樣式表只能定義在style標籤或css檔案中,每個style標籤或css檔案可定義多個css樣式表;

第二種:標籤內屬性:

style= " declaration1; declaration2;…"

1、該種樣式表只由一條或多條宣告組成;

2、該種樣式表只能定義在style標籤屬性;

3、html文件中每個標籤都有乙個style標籤屬性。

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

注意事項:

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

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

3、如果屬性值由多個單詞組成,則建議使用引號引起來——如果用在style標籤屬性中,則使用單引號,否則使用雙引號;

按照css樣式定義位置可分為3種:外部樣式表,內部樣式表,內聯樣式

1、外部樣式表

如何實現:將css樣式寫在css樣式檔案中,使用link標籤將該css檔案引入到html文件中。

什麼時候用:當多個html文件中某些標籤的樣式規則相同時,為了實現這些樣式表的重用,同時也為了方便管理樣式表,則需要將其宣告在乙個css樣式表檔案中。

link標籤還用於設定html文件頭部小圖示,語法結構:或

2、內部樣式表

如何實現:將css樣式直接寫在html文件中的style標籤內。

什麼時候用:當乙個html文件中的樣式在其它html文件中不具有共性,但是本html文件中的多個標籤的樣式相同,這時為了實現這些樣式規則的重用,同時也為了方便管理樣式規則,則需要將其宣告在內部樣式表中。

3、內聯樣式(標籤內部新增的屬性)

如何實現:將css樣式寫在html文件某個標籤的style標籤屬性的屬性值中。

什麼時候用:當乙個html文件中的某個標籤樣式與其他標籤樣式不相同,或者該文件中的標籤樣式與父標籤樣式不統一,則此時就需要宣告內聯樣式。

總結:外部樣式表和內部樣式表中的每個樣式表都需要使用{},只有內聯樣式(標籤內部的屬性)不允許使用大括號,比如:p標籤

css定義位置優先順序:

1、如果按照一般插入css樣式的順序(即先使用link插入外部樣式表,再使用style標籤插入內部樣式表,最後再在style標籤屬性中插入內聯樣式)來說,內聯樣式優先順序最高,外部樣式表優先順序最低,如下所示:內聯樣式 > 內部樣式表 > 外部樣式表。(由內到外,優先順序由高到低)

css選擇器:

選擇器:瀏覽器通過選擇器為滿足條件的html元素新增css樣式:

體育

標籤選擇器:瀏覽器為html文件內標籤名與標籤選擇器名相同的標籤元素新增css樣式,其語法如下:

標籤選擇器名

體育

類選擇器:瀏覽器為class標籤屬性的屬性值與類選擇器名相同的標籤元素新增css樣式,其語法如下:

類選擇器名

鄭州大學

zzuqq白日依山近

黃河入海流

注意:

1、class標籤屬性的屬性值不能以數字開頭;

2、class標籤屬性的屬性值可以有多個,每個值之間用空格間隔;

id選擇器:瀏覽器為id標籤屬性的屬性值與id選擇器名相同的標籤元素新增css樣式,其語法如下:

# id選擇器名

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

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

3、id標籤的優先順序要高於類標籤即class標籤

後代選擇器(descendant selector)又稱為包含選擇器,用於為特定的html子元素新增css樣式,語法如下:

父代選擇器1 子父代選擇器2 子父代選擇器3 ….子代選擇器 選擇器之間用空格間隔;

鄭州大學

zzuqq白日依山近

黃河入海流

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

選擇器1,選擇器2,選擇器3…

鄭州大學

zzuqq白日依山近

黃河入海流

萬用字元選擇器匹配html文件中的任何html元素,其語法如下:

*

鄭州大學

zzuqq白日依山近

黃河入海流

選擇器優先順序:

id選擇器優先順序最高,標籤選擇器優先順序最低,如下所示:id選擇器 > 類選擇器 > 標籤選擇器,如下**:

css偽類:

css 偽類用於向某些選擇器新增特殊的效果,語法結構如下:

選擇器:偽類

1、若:link、:visited、:hover和:active一起使用,:hover 必須被置於 :link 和 :visited 之後,:active 必須被置於 :hover 之後,即:link -> :visited -> :hover -> :active  。 

css偽類用乙個冒號來表示,而css偽元素則用兩個冒號來表示,但由於相容性問題,推薦一律使用乙個冒號。

常用css屬性:

1、邊框屬性:

用於為元素的所有邊框設定寬度,或者單獨地為4個邊框設定寬度, 該屬性有多個值:

border-style樣式屬性:

只有當border-style樣式屬性不是 none或者hidden 時邊框才可能出現;

border-color樣式屬性

邊框樣式屬性簡寫:

依次按照寬度、樣式和顏色的順序設定邊框樣式可以簡化邊框樣式屬性的設定。

1、邊框樣式屬性簡寫允許不設定其中某個值(比如border:solid #ff0000; );

2、使用border設定邊框屬性時,border-width、border-style和border-color的值只能取一種,例如:是有效的,但是、 或等等都是無效的。

輪廓線樣式屬性:

outline-color樣式屬性

outline-style樣式屬性

outline-width樣式屬性

outline樣式屬性

背景樣式屬性:

background-color樣式屬性

background-image樣式屬性(設定標籤背景,該樣式屬性有多個屬性值)

background-repeat樣式屬性

background-attachment樣式屬性

background-position樣式屬性(設定標籤背景位置,該樣式屬性有多個屬性值)

background-origin樣式屬性

background-clip樣式屬性()

字型樣式屬性:

font-style樣式屬性

font-variant樣式屬性

font-weight樣式屬性

font-size樣式屬性

font-family樣式屬性

font樣式屬性:

用於在乙個宣告中設定所有的字型樣式屬性(即font-style、font-variant、font-weight、font-size/line-height和font-family),且該樣式屬性設定屬性值時不需要設定所有字型樣式屬性所對應的屬性值,但需要按照font-style、font-variant、font-weight、font-size/line-height和font-family順序進行排列,中間用空格隔開。

1、注意 font樣式屬性至少要指定字型大小和字型系列;

2、沒有font-color樣式屬性,如果要設定字型的顏色需要使用color樣式屬性;

3、font樣式屬性的屬性值也可設定為inherit,但internet explorer瀏覽器不支援屬性值 "inherit「 如果樣式宣告列表中有line-height樣式屬性,又有font樣式屬性,則line-height無效,必須與font一起使用。

詳述CSS選擇器

我們在設計網頁時常常需要設計某一標籤的屬性,為了讓 看著整潔有序,就需要將其屬性寫在這是乙個span標籤 瀏覽器為 id標籤屬性的屬性值與 id選擇器名相同的標籤元素新增 css樣式,其語法如下 id選擇器名例項 這是乙個span標籤 瀏覽器 為class標籤屬性的屬性值與類選擇器名相同的標籤元素新...

html 選擇器之屬性選擇器

屬性選擇器的主要作用個人的理解就是對帶有指定屬性的元素設定css樣式。使用css3的屬性選擇器,可以指定元素的某個屬性,也可以指定某個屬性和這個屬性所對應的值。css3的屬性選擇器主要包括下面幾種 e attr 只使用屬性名,但沒有確定任何屬性值 e attr value 指定屬性名,並指定了該屬性...

html 選擇器之基礎選擇器

我把css選擇器分開成三部分,第一部分是我們常用的部分,我把他叫做基本選擇器 第二部分我把他稱作是屬性選擇器,第三部分我把他稱作偽類選擇器 一 基礎選擇器 1.萬用字元 選中所有的元素 2.元素選擇器 e 乙個元素作為乙個選擇器,div,ul,dd,span等等 3 類選擇器 class 定義cla...