CSS基礎 引入方法,選擇器,繼承

2021-09-06 06:56:46 字數 2857 閱讀 8185

一.css引入方法:行內式、嵌入式、匯入式、鏈結式。

1、行內式。

即:在標籤的style屬性中設定css樣式。

例子:行內式

2、嵌入式

即:將頁面各種元素的設定集中寫在標籤裡。

例子:

3、匯入式

即:將乙個外部css檔案引入css檔案或html檔案,注意此方法既能在css檔案裡使用也能夠在html的標籤之間使用。

4、鏈結式

即:將乙個外部css檔案引入html檔案

例子:

二、選擇器

1、id選擇器

根據html元素的id屬性選擇元素。

例子:css:     #div1     /* 選中id為div1的html元素 */

html:   我是id為div1的div元素

2、class選擇器

根據html的class屬性選擇元素。

例子:css:     .left

html     我是class="left"的div元素

3、標籤選擇器

根據html標籤選擇元素

例子:css:     div

html:    我是乙個div元素

4、復合選擇器

4.1   交集選擇器

例子:css:    p.special    /* 選中class="special"的p元素 */

html:  

我是乙個p

/* 不會被選中 */

我是乙個class="special"的元素

/* 選中該行 */

4.2   並集選擇器

例子:css:   .special,div,p

html:   

我是乙個class屬性為span的元素

我是乙個div元素

我是乙個p元素

以上三行html**都會被選中。

4.3  後代選擇器

後代選擇器:選中所有後代元素

例子:css:    .special p

html:  

我是.special裡的p元素

/* 會被選中 */

我是.special裡的p元素

/* 會被選中 */

我也是乙個p

/* 不會被選中 */

直接後代選擇器

即:選擇直接子後代

css:   .special>p

我是.special裡的p元素

/* 會被選中 */

我是.special裡的p元素

/* 不會被選中,因為不是直接子元素,是孫子元素了 */

我也是乙個p

/* 不會被選中,非子元素 */

五、屬性選擇器

css:    a[title]    //選中含有title屬性的a元素

我是第乙個a標籤   //會被選中,含有title屬性

我是第二個a標籤                //不會被選中,沒有title屬性

a[title="a1"]  //選中title屬性=a1的元素

我是第乙個a標籤   //會被選中,含有title,並且title=a1

我是第二個a標籤                //不會被選中,沒有title屬性

我是第乙個a標籤   //不會被選中,title不=a1

其他屬性符號:a[title~='a1']   選中  選中title屬性中包含a1的元素,注意a與其他值要有空格

a[title^='a1']   選中 選中title屬性以a1開頭的元素

a[title$='a1']    選中  選中title屬性以a1結束的元素

a[title*='a1']    選中選中title屬性中包含a1的元素

a[title|='a1']     選中或 選中title屬性中包含"a1-"開頭或等於"a1"的元素,常用於選擇src="logo-1","logo-2"等屬性。

六、相鄰兄弟選擇器"+"

css:   span + p

html:

我是乙個span

我是乙個p

我也是乙個p

六、css的繼承特性

子元素會繼承父元素中的樣式

css:    p

bhtml:  我是p元素

顯示結果為:我是p元素

可以看到b繼承了下劃線樣式,同時改變了顏色。(注:下劃線仍然是紅色)  這樣就可以實現css樣式的共用。

六、css層疊特性

各個選擇器優先順序排行:

行內樣式》id選擇器》class選擇器》標籤選擇器

當連個選擇器優先順序相同時,寫在前面》寫在後面。如:此時p1樣式優先

七、偽類

a:link /* 未訪問的鏈結 */

a:visited /* 已訪問的鏈結 */

a:hover /* 滑鼠移動到鏈結上 */

a:active /* 選定的鏈結 */

p:first-child

:active 向被啟用的元素新增樣式。

:focus 向擁有鍵盤輸入焦點的元素新增樣式。

:hover 當滑鼠懸浮在元素上方時,向元素新增樣式。

:link 向未被訪問的鏈結新增樣式。

:visited 向已被訪問的鏈結新增樣式。

:first-child 向元素的第乙個子元素新增樣式。

:lang 向帶有指定 lang 屬性的元素新增樣式。

八、偽元素

:first-letter 向文字的第乙個字母新增特殊樣式。

:first-line 向文字的首行新增特殊樣式。 此偽類只能用於塊級元素。

:before 在元素之前新增內容。

:after 在元素之後新增內容。

前端基礎(二 CSS 引入方式 CSS選擇器)

css選擇器 使用內聯樣式時,將樣式寫在中,放在.html檔案的中。div style 使用外部樣式時,將樣式寫在單獨的.css檔案中,將該檔案引入至.html檔案中,將引入語句寫在.html檔案的中。stylesheet href test.css test.css div假設有如下html di...

CSS概念,引入,選擇器

層疊樣式表,定義如何顯示html元素.不推薦使用此方式 結構 和 樣式的 雜糅會影響後期的維護 style color red hello world.將css樣式集中寫在網頁的標籤對的標籤對中 head meta charset utf 8 title title title style p st...

CSS選擇器之基礎選擇器

選擇器 選擇符 就是根據不同需求把不同的標籤選出來這就是選擇器的作用。簡單來說,就是選擇標籤用的。標籤選擇器 又稱元素選擇器,指用html標籤作為選擇器,為頁面中某類標籤設定css樣式。缺點 不能差異化設定樣式,只能選擇全部的當前標籤。語法 基礎選擇器之標籤選擇器title 標籤選擇器 寫上標籤名 ...