前端學習 Css 樣式的繼承

2021-09-09 02:28:33 字數 899 閱讀 4164

像兒子可以繼承父親的遺產一樣,在css中,祖先元素上的樣式,也會被他的後代元素所繼承,

利用繼承,可以將一些基本的樣式設定給祖先元素,這樣所有的後代元素將會自動繼承這些樣式。

但是並不是所有的樣式都會被子元素所繼承,比如:背景相關的樣式都不會被繼承 邊框相關的樣式 定位相關的

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>

title

>

<

style

type

="text/css"

>

body

style

>

head

>

<

body

>

<

div

style

="background-color: yellow;"

>

<

p>

我是p標籤中的文字

<

span

>我是span中的文字

span

>

p>

div>

<

span

>我是p元素外的span

span

>

body

>

html

>

效果:

CSS可繼承的樣式

1 color 2 font family 3 font weight 4 font size 百分數根據父元素的字型大小來計算 5 font style 6 font variant 字型變形 7 line hieght 百分數根據當前元素的font size計算 8 font 值順序 font ...

css樣式繼承體現

css樣式繼承體現 選擇器再講解 4 3 3 四個基本選擇器 通用選擇器 標籤選擇器 標籤名 id選擇器 id名 類名選擇器 類名 類就是被重用的,乙個標籤可以有多個類,乙個類可以用在多個標籤上 ps 掛類法編寫樣式 三套複雜選擇器格式 e f為基本選擇器 後代選擇器 e 有空格 f 空格表示後代,...

前端基礎 CSS樣式

css樣式分為3種 優先順序 行內樣式 內嵌樣式 外部樣式 1.行內樣式 width 300px height 300px background green 2.內嵌樣式 head中間新增樣式 3.外部樣式 lesson.css樣式檔案 div 引用方式 stylesheet href lesson...