CSS的繼承和使用方式

2021-10-03 08:19:32 字數 2642 閱讀 9785

css的繼承

css的繼承指的是當標籤具有巢狀關係時,內部標籤自動擁有外部標籤的不衝突的樣式的性質。

在css中有些屬性不允許繼承,例如,border屬性沒有繼承性。多邊框類的屬性都沒有繼承 ,例如,padding 、 margin 、 background等。

示例:

doctype html public "-//w3c//dtd html 4.01 transitional//en"

"">

<

html

>

<

head

>

<

meta

content

="text/css"

charset

="gb2312"

>

<

title

>css使用例項

title

>

<

style

type

="text/css"

>

divp

emstyle

>

head

>

<

body

>

<

p>這是藍色,12pt,斜體,預設宋體

p>

<

div>

<

p>這是藍色,12pt,斜體加粗,黑體

p>

div>

<

br>

<

div>這是紅色,10pt,加粗,黑體,有邊框

div><

br>

<

div>

這是紅色,10pt,黑體

<

br>

<

em>我是em元素的文字,綠色文字周邊無邊框

em>

div>

body

>

html

>

css的使用方式

1.內嵌方式(是將css**寫在html的標籤裡。)

示例:

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

/>

<

title

>內嵌方式

title

>

head

>

<

body

>

<

p align

="center"

style

="color: red;"

>內嵌方式

p>

body

>

html

>

2.內部樣式表

與行間樣式表類似,都是將css**寫在html文件中; 不同的是內部樣式表不是寫在標籤中,而且有一定的格式。

示例:

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

/>

<

title

>內部樣式表示例

title

>

<

style

type

="text/css"

>

divstyle

>

head

>

<

body

>

<

div>內部樣式表

div>

body

>

html

>

3.使用標籤鏈結外部樣式表

與內部樣式表的相同之處在於都有一定的格式; 不同的是他的css**是寫在html文件外的.css檔案中,而且使用時需要引用。

例項:html1.html

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

/>

<

title

>外部樣式表示例

title

>

<

link

rel="stylesheet"

href

="css/css1.css"

/>

head

>

<

body

>

<

div>外部樣式表

div>

body

>

html

>

css1.css

div

CSS 的使用方式

1 內聯式 樣式宣告 常用屬性和值屬性值 說明font size 數字設定文字大小,以px為單位 color 顏色英文單詞 設定文字顏色 background color 顏色英文單詞 設定背景顏色 style font size 24px color red background color gr...

CSS的使用方式

css全名 cascading style sheet 層疊樣式表 前端開發者寫的標籤的樣式 一定是樣式庫定義的樣式!css有三種樣式 1.行內樣式 2.內部樣式 3.外部樣式 以下為這三種樣式的詳細敘述 1.行內樣式 html標籤中指定style屬性 其基本格式 style css樣式屬性1 屬性...

css的繼承和層疊

important 行內式 id選擇器 類選擇器 標籤選擇器 權重值 無窮大 1000 100 10 1 同一選擇器,靠後者生效 繼承的權重值為零,所以繼承的樣式可以被任何選擇器修改的屬性對應的屬性值所覆蓋。例 如上所示,案例一和案例二兩個h1標籤繼承了來自父元素的id選擇器所賦予的color屬性值...