css層疊樣式表 基本選擇器

2022-09-13 20:33:17 字數 2895 閱讀 2966

css: 層疊樣式表 style:樣式

修飾和美化整個網頁,實現各種不同的網頁布局風格

行內樣式的優先順序最高 內部樣式和外部樣式並沒有明確的優先順序,看先後書寫順序,後寫的會覆蓋先寫的

行內樣式:將css樣式直接加到html每乙個標籤上,在頭部標籤書寫 類似於寫html的屬性 使用style="樣式名:樣式內容;" 來設定

例: 文字顏色是紅色

內部樣式:需要使用一對style標籤,一般寫在html的head標籤中

外部樣式:需要使用link標籤來引入乙個css檔案 rel屬性表示引入檔案的型別 href屬性表示引入檔案的路徑

匯入樣式和外部樣式的區別:

匯入樣式:載入順序是先載入html頁面,當所有頁面內容載入完之後,才會開始載入css,

會導致頁面剛開啟的前一兩秒有短暫的沒有css效果的網頁

外部樣式:載入html頁面的同時一起載入css樣式

關於程式語言 命名要求:不能以數字開頭,不能使用特殊符號 可以使用的有 字母 數字 下劃線 _ 美元符號 $

css的選擇器:

基本選擇器(元素選擇符): 優先順序:

id > 類 > 標籤 > 萬用字元

優先順序的計算: 採用權重值計算

id 權重值 100

類 10

標籤 1

通配 0

通配選擇符: * 表示 代表匹配頁面中所有的html標籤,設定統一的樣式

注意:該選擇符盡量避免使用,對頁面的效能有影響

例: * 將頁面所有的文字顏色設定成紅色

標籤選擇符(型別選擇符):

通過標籤名來選擇對應的html標籤,設定統一樣式

例: p 將頁面中所有的p標籤文字顏色設定成紅色

類選擇符:class屬性 每乙個標籤都可以新增乙個class屬性,該屬性代表類名

在css中 使用 . 來表示類選擇符

例: .co 將所有class名字是co的標籤設定文字顏色是綠色

id選擇符:id屬性 每乙個標籤都可以加乙個id屬性,但是該屬性具有唯一性,同乙個id名只允許出現一次

在css中 使用 # 來代表id選擇符

例: #lis 將id名為lis的標籤設定文字顏色是紅色

關係選擇符:

包含選擇符(後代選擇器) 語法: 選擇器1 選擇器2

例: ul .lis 表示獲取到ul中所有後代標籤class屬性是lis的標籤,設定顏色是紅色

子選擇符 語法: 選擇器1>選擇器2

例: ul>li 表示獲取到ul中所有子元素是li的標籤,設定顏色是紅色

相鄰選擇符 語法: 選擇器1+選擇器2

相鄰選擇符只會選擇到下乙個相鄰的兄弟標籤,不會選擇之前的兄弟標籤

例: #li3+li 表示選擇id是li3的標籤的下乙個兄弟元素是li的標籤,設定顏色是紅色

兄弟選擇符 語法: 選擇器1~選擇器2

兄弟選擇符只會選擇當前標籤之後的所有兄弟標籤,不會選擇到前面的兄弟標籤

例: #li3~li 表示選擇id是li3的標籤的後面所有兄弟元素是li的標籤,設定顏色是紅色

我們把標籤 元素 節點 可以看成是乙個東西就是html上面的標籤

屬性選擇器:

選擇器[屬性名]{} 選擇具有某乙個屬性的一類標籤

例: p[class] 表示選擇具有class屬性的p標籤,設定文字顏色是紅色

選擇器[屬性名=屬性值]{} 選擇具有某一屬性,並且規定了屬性值的一類標籤

例: p[class=a1] 表示選擇具有class屬性並且屬性值是a1的所有p標籤,設定文字顏色是藍色

選擇器[屬性名^=值] 選擇具有某一屬性,並且屬性值以什麼值作為開頭

例: p[class^=a] 表示選擇具有class屬性,並且屬性值以a開頭的所有p標籤,設定顏色為綠色

選擇器[屬性名$=值] 選擇具有某一屬性,並且屬性值以什麼值作為結尾

例: p[class$=a] 表示選擇具有class屬性,並且屬性值以a結尾的所有p標籤,設定顏色為綠色

選擇器[屬性名*=值] 選擇具有某一屬性,並且屬性值包含某乙個內容

例: p[class*=a] 表示選擇具有class屬性,並且屬性值中帶有a的所有p標籤,設定顏色為綠色

偽類選擇器:

a:link 表示超連結沒有被訪問前的狀態

a:visited 表示超連結被訪問後的狀態

a:hover 表示滑鼠懸浮在超連結上的狀態

a:active 表示滑鼠按下但並沒有釋放是的狀態

注意 a:hover 必須位於 a:link 和 a:visited 之後,a:active 必須位於 a:hover 之後

可靠的順序是:l(link)ov(visited)e h(hover)a(active)te, 即用喜歡(love)和討厭(hate)兩個詞來概括

li:first-child 表示選擇父元素下的第乙個子元素,並且該元素是li

li:last-child 表示選擇父元素下的最後乙個子元素,並且該元素是li

li:nth-child(n) 表示選擇父元素下的第n個元素,並且該元素是li

li:first-of-type 表示選擇父元素下出現的第乙個li標籤

li:last-of-type 表示選擇父元素下出現的最後乙個li標籤

li:nth-of-type(n) 表示選擇父元素下的第n個li標籤

odd 代表奇數

even 代表偶數

2n 代表偶數

2n+1 代表奇數

3n+1 代表隔兩行

css層疊樣式表及選擇器

六 css層疊樣式表 由網頁組成 網頁的結構由html組成 網頁的樣式由css組成 1.css概念 cascading style sheets 層疊 樣式 表 css是定義html表現形式的描述性語言 2.如何設定標題文字顏色 對齊方式 背景色 h3 北京 h3 文字顏色 巢狀 font font...

css樣式表 樣式表分類 選擇器

一 樣式表分三類 1.內聯樣式表。放在元素的開始標記中。只對當前元素起作用。例 結果 2.內嵌樣式表。放在頁面的中間。可以對整個頁面。你好 執行結果 3.外部樣式表。放在乙個單獨的.css樣式表檔案中。可以對整個 操作 新建乙個css檔案,用來存放樣式表 在html中呼叫樣式表,要在html中右鍵 ...

css層疊樣式 選擇器

1.內聯 在標籤中設定style屬性 標籤名 style 樣式1 樣式值 3.外部引入 新建。css檔案,在css檔案中寫樣式 選擇器1 在html檔案的head標籤中用 選擇器 1.id選擇器 在標籤中加入id屬性 標籤名 id id值 2.class 在標籤中加入class屬性 class值 3...