CSS 繼承與層疊

2021-08-14 07:17:11 字數 959 閱讀 4314

css 繼承

即,從父元素那繼承部分css屬性

好處:1. 父元素設定樣式,子元素可以繼承部分屬性

2. 減少css**

注意:當元素本身的樣式與繼承而來的樣式有衝突時,將忽略繼承來的樣式,如下:

- chrom瀏覽器預設字型大小是16px

- h1 預設字型大小font-size 是2em(正常字型的兩倍)

- 因此,在chrome中h1字型大小是32px

css層疊

就是樣式重複定義的層疊

前面,引用css樣式,有優先順序。

下面將說,css選擇器的優先順序。

css 選擇器主要:標籤選擇器,類選擇器,id選擇器。

1. id選擇器 >> 類選擇器 >>  標籤選擇器

2. 使用相同型別選擇器(class)定義乙個元素時,在style中後定義的衝突樣式會覆蓋先定義的樣式

css優先順序規格

同一樣式表中:(同乙個style中)

1. 權值相同

就近原則

2. 權值不同

根據權值來判斷css樣式優先順序

選擇器權值:

- 標籤選擇器:權值為1

- 類選擇器和偽類:權值為10

- id選擇器:權值為100

- 萬用字元選擇器:權值為0

- 行內樣式:權值為1000

調整優先順序(調到最高)

CSS繼承與層疊

層疊優先順序 盒模型定位體系 常規流首先,css被稱為層疊樣式表,css有兩大特性 繼承性和層疊性 繼承 是給父級設定了一些屬性。子級繼承了父級的該屬性,這就是我們css的繼承。但是不是每個屬性都能繼承的。這裡我列舉一些 color font text line 像一些盒子元素,定位元素 浮動 絕對...

CSS 繼承與層疊

一 html 的文件結構 是乙個文件樹。有祖先後代關係 父子關係 兄弟關係 二 css 繼承 1.從父元素繼承部分 css 屬性。例如,p css span 繼承 span p pspan 元素就是 p 元素的子元素,那麼 span 元素會繼承 p 元素的部分樣式,效果如下 2.不是所有的樣式都可以...

CSS 層疊和繼承

我們知道文件中的乙個元素可能同時被多個css選擇器選中,每個選擇器都有一些css規則,這就是層疊。這些規則有可能不矛盾的,自然這些規則將會同時起效,然而有些規則是相互衝突的,例如 html xmlns head title css cascade title style type text css ...