css 樣式表的引入(內部 行內 外部)

2022-02-19 03:33:28 字數 3293 閱讀 7284

1、內部樣式表

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>css

title

>

<

style

type

="text/css"

>

.class1

.class2

.class3

style

>

head

>

<

body

bgcolor

="aquamarine"

>

<

center

>

<

div

id="style1"

>

<

p class

=class1

;align

="middle"

>將進酒

p>

<

p class

=class2

;align

="middle"

>唐.李白

p>

center

>

<

p class

=class3

>

君不見,黃河之水天上來,奔流到海不復回。 君不見,高堂明鏡悲白髮,朝如青絲暮成雪。 人生得意須盡歡,莫使金樽空對月。 天生我材必有用,千金散盡還復來。 烹羊宰牛且為樂,會須一飲三百杯。 岑夫子,丹丘生,將進酒,杯莫停。

p>

<

p class

=class3

>

與君歌一曲,請君為我傾耳聽。 鐘鼓饌玉不足貴,但願長醉不復醒。 古來聖賢皆寂寞,惟有飲者留其名。 陳王昔時宴平樂,斗酒十千恣歡謔。 主人何為言少錢,徑須沽取對君酌。 五花馬,千金裘,呼兒將出換美酒,與爾同銷萬古愁。

p>

body

>

html

>

在上面的程式中,樣式表直接定義在了head中,標題下面。這樣的定義方式雖然能夠實現功能,但是有乙個較大的缺陷,雖然在本頁面能夠實現樣式的呼叫,但是如果其他的頁面也想呼叫裡面的樣式是不可能的,因此,樣式表的**未得到復用,未實現**和樣式的分離,只能夠控制乙個頁面

2、行內樣式表(內聯樣式表)

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>

title

>

<

style

>

style

>

head

>

<

body

>

<

p style

="color: red; font-size: 20px; text-indent: 2em;"

>

君不見黃河之水天上來,奔流到海不復回。

君不見高堂明鏡悲白髮,朝如青絲暮成雪。

人生得意須盡歡,莫使金樽空對月。

天生我材必有用,千金散盡還復來。

烹羊宰牛且為樂,會須一飲三百杯。

岑夫子,丹丘生,將進酒,杯莫停。

在元素標籤的style屬性中設定css樣式,適合於簡單的樣式的書寫,只能控制當前標籤範圍較小

3、外部樣式表

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>css

title

>

<

style

type

="text/css"

>

@import url("001.css");

style

>

head

>

<

body

bgcolor

="aquamarine"

>

<

center

>

<

div

id="style1"

>

<

p class

=class1

;align

="middle"

>將進酒

p>

<

p class

=class2

;align

="middle"

>唐.李白

p>

center

>

<

p class

=class3

>

君不見,黃河之水天上來,奔流到海不復回。 君不見,高堂明鏡悲白髮,朝如青絲暮成雪。 人生得意須盡歡,莫使金樽空對月。 天生我材必有用,千金散盡還復來。 烹羊宰牛且為樂,會須一飲三百杯。 岑夫子,丹丘生,將進酒,杯莫停。

p>

<

div

id="style1"

>

<

p>

與君歌一曲,請君為我傾耳聽。 鐘鼓饌玉不足貴,但願長醉不復醒。 古來聖賢皆寂寞,惟有飲者留其名。 陳王昔時宴平樂,斗酒十千恣歡謔。 主人何為言少錢,徑須沽取對君酌。 五花馬,千金裘,呼兒將出換美酒,與爾同銷萬古愁。

p>

div>

body

>

html

>

@import url("css檔案");將外部的樣式表由私用變為公用,減少的**量,提高了**的復用率。

需要新建乙個字尾為.css的檔案,該檔案內部只有樣式沒有標籤,在html檔案中使用標籤引入css檔案,實現了結構和樣式相分離,可以控制多個頁面

CSS引入方式 內部樣式表 行內樣式表 外部樣式表

內部樣式表就是將css在寫html頁面內部。是將所有的css 抽取出來,單獨放到乙個標籤中。例如 divstyle 標籤理論上可以放在文件的任何地方,但是一般會放在文件的標籤中。通過此種方式,可以方便的控制整個頁面中的元素樣式設定,結構清晰,但是並沒有實現結構與樣式的完全分離。行內樣式表是在元素標籤...

css樣式表的引入方式

一般來說,css 有兩種樣式表的引入方式,在這裡我記錄一下,比較這兩種引入方式的區別 link rel stylesheet type text css href css檔案 import css檔案 顯然第一種方式似乎是更常見的。事實上,使用這兩種方式引入css檔案的效果都是一致的,區別在於是ht...

JSP頁面CSS樣式表的引入

1 外部樣式 當樣式需要應用於很多頁面時,外部樣式表將是理想的選擇。在使用外部樣式表的情況下,你可以通過改變乙個檔案來改變整個站點的外觀。每個頁面使用標籤鏈結到樣式表。標籤在 文件的 頭部 必須要有rel stylesheet 缺少時無法正常引入 2 內部樣式 當單個文件需要特殊的樣式時,就應該使用...