1.內聯樣式表
<p style="font-size:1cm;color:red;border:1px solid blue;background:yellow;">這是一個段落</p>
特點:內聯的樣式比其他方法更加靈活,但需要展示的內容混淆在一起,內聯樣式表會失去一些樣式表的優點。2.內嵌樣式表
<html>
<head>
<style>
/*
這裏面是CSS的語法
只能寫CSS語法
不能使用HTML的註釋,以及任何HTML標記 */
p{
font-size:1cm;
color:red;
border:1px solid blue;
background:yellow;
}
</style>
</head>
<body>
<p>這是一個段落</p>
</body>
</html>
3.外部鏈接樣式表
/* 直接寫CSS語法*/
p{
font-size:2cm;
color:blue;
}
HTML文件:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<p>這是一個段落</p>
</body>
</html>
4.輸入樣式表
@import:url(demo.css);
5.多重樣式表的疊加
- 如果在同一個選擇器上使用幾個不同的樣式表時,這個屬性值將會疊加幾個樣式表,遇到衝突的地方會以最後定義的爲準;
- 依照後定義的優先,所以優先級最高的是內聯樣式,內嵌樣式表高於輸入樣式表,鏈入的外部樣式表和內嵌樣式表之間是最後定義的優先級高。