CSS常用 選擇器及樣式

2021-08-08 10:59:48 字數 3512 閱讀 9197

本章僅僅只是對css的乙個彙總,方便查詢使用

css 指層疊樣式表 (cascading style sheets),他的作用是為了顯示html元素,優點在於讓定義樣式更加簡單,讓網頁的內容和表現分離,使多個樣式可以層疊使用。
css的使用格式是選擇器+宣告

selector

p

在這裡臨時插入css的三個特點:

1.當給父元素設定一些屬性,子元素(所有後代)也可以使用

(這裡注意,

層疊是指當有多個選擇器給同乙個標籤設定了相同屬性的時候,會選擇優先權高的

優先順序是針對多選一時的解決方案,多選擇器對同一標籤同一屬性進行選擇時的解決。

即針對於層疊。

判斷方式

解釋繼承

誰最近聽誰的

同型別選擇器直接選中

誰在後面聽誰的

不同型別選擇器直接選中

按照選擇器優先順序:id>類》標籤》萬用字元》繼承》瀏覽器

(小知識:我們可以在屬性後面分號前面使用!important來提公升某個屬性的優先順序到最大,important只可以對直接選中有效)

例如:

根據指定的id找到對應的標籤,然後設定樣式
#id

//注意點:

//1.同乙個介面,id不可重複

//2.注意#號

不可是數字,不可使html標籤,只可是數字,字母,下劃線

一般給js使用

根據指定的類名找到對應的標籤
.類名

//注意點:

//1.每個標籤都可設定類名

//2.類名可重複

//3.注意加上點

//4.注意命名規範,和id一樣

//5.類名是專門針對css的

//6.每個標籤可以有多個類名,中間用空格分開

什麼是類,類就是帶有類似樣式的標籤,所以要學會抽取公共類,將乙個類繫結給標籤,類似於先想好類,再賦予標籤,這更符合樣式與**分離,更加簡單高效。

而id呢,就是先有標籤,然後專門為其賦予樣式

根據指定標籤的名稱,在當前頁面查詢所有該名稱的標籤,然後設定屬性
標籤名稱

//注意點:

//1.標籤選擇器選中的是所有標籤

//2.無論標籤多深都能選中

//3.任何html標籤均可以

下面以**列舉其他的選擇方式,其實就是一種組合
名稱

格式作用

後代選擇器

標籤1 標籤2

特點是1.中間使用空格,會查詢後面所有的

2.可以用空格一直延續下去

3.後代選擇器理解為在什麼下面查詢某個選擇器 ,所以後面的可以是標籤選擇器,也可以是其他選擇器

子元素選擇器

標籤1>標籤2

特點是:

1.只會查詢兒子,不會查詢其他,即下乙個

2.後面可以是其他選擇器

3.可以使用》一直延續

交集選擇器

選擇器1選擇器2

相交的標籤,可以是3種選擇器任何一種

並集選擇器

選擇器1,選擇器2

多個選擇器選擇的標籤同時設定,相當於兩個選擇器選中的都設定

相鄰兄弟選擇器

選擇器1+選擇器2{}

後面緊跟的那個

通用兄弟選擇器

選擇器1~選擇器1{}

後面所有的

序選擇器:同級別第幾個

選擇器:first/:last/:nth/:nth-last/:only-child{}

同級別第一,最後,第幾個,倒數第幾個,父元素中唯一的那個

序選擇器:同級別同型別第幾個

選擇器:first-of-type/:last-of-type/:nth-of-type/:nth-last-of-type/:only-child-of-type{}

同級別同型別第一,同型別最後,同型別第幾個,同型別倒數第幾個,同型別父元素中唯一的那個

序其他odd/even/xn+y

奇數標籤/偶數標籤/公式

屬性選擇器

選擇器 [屬性]{}

通過選擇器+屬性,所有帶某個屬性的元素,例如img[alt]{},所有帶alt屬性的img元素

選擇器[屬性][屬性]{}

所有帶有兩個屬性的元素

選擇器[屬性=值]{}

屬性等於某個值的元素

選擇器[屬性^=值]{}

屬性的取值以value開頭的元素

選擇器[屬性^=值]{}

屬性的取值以value開頭的元素

選擇器[屬性*=值]{}

屬性的取值包含value的元素

通配選擇器

*{}所有標籤

子元素選擇器和兄弟選擇器的區別在於:前者是裡面的,後者是後面的

css的使用可以理解為怎樣把css樣式放入網頁中

css插入樣式表的方式主要有三種

外部的嘛,就是與我們的html檔案想分離,然後再在html頁面中匯入的一種方式,優點在於可以實現了真正的分離,可以在多個頁面中使用聽乙個樣式表

rel=」stylesheet」

type=」text/css」 href=」acss.css」>

head>

內部,顧名思義,就是將我們的css樣式定義在html檔案中

h

style>

head>

內聯樣式可以理解為乙個臨時的只針對某乙個的樣式表
style=」color:red;font-size:20px;」>

p>

//注意,內聯樣式沒有大括號

怎麼理解呢?

比如乙個p標籤,當內部樣式定義了兩個

text-align

:left; font-size

:10pt;

外部樣式定義了三個:

color

:red;

text-align

:right; font-size

:18pt;

那麼p標籤採用的就會是:

color

:red;

text-align

:left;font-size

:10pt;

意味著相同的樣式定義優先選用了優先順序打的,而沒有的照搬了下來。

今天就先將這些列舉出來,有時間再整理後面的

css選擇器編寫及常用樣式

css就是在style中編寫樣式,有三種寫法 1 在body中的標籤中設定style屬性,再在style中設定樣式 div style background color 0e84b5 height 48px 自強不息 div 設定塊級標籤div背景色和高度 2 在head中寫上style標籤,並在其...

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...