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 內部樣式 當單個文件需要特殊的樣式時，就應該使用...