CSS：外部樣式表/內部樣式表/內聯樣式
阿新 • • 發佈：2019-01-26
在html中，引用CSS樣式有3中方式：外部樣式表，內部樣式表，內聯樣式。
本文程式碼整理自w3school：http://www.w3school.com.cn
（1）外部樣式表，指在html檔案的head標籤中，使用link引用另一個css檔案中定義的樣式。如果某個樣式表需要被使用許多次，使用外部樣式表是最好的選擇。
html檔案:
CSS樣式，baseStyle.css:<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>引用外部css樣式</title> <!--外部樣式表--> <head> <link rel="stylesheet" type="text/css" href="css/baseStyle.css"> </head> <body> <h1>h1級別的標題：紅色</h1> <h2>h2級別的標題：綠色</h2> <h3>h3級別的標題：藍色</h3> <p>這是一個段落：灰色</p> </body> </html>
h1 {color:red}
h2 {color:green}
h3 {color:blue}
p {color:gray}
（2）內部樣式表，指在html檔案的head標籤內宣告樣式。當單個文件需要特殊的樣式時，就應該使用內部樣式表。
（3）內聯樣式（一般不建議使用），指在某個html內指定改標籤內容的樣式。由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>內部樣式表</title> <!--內部樣式表--> <head> <style type="text/css"> h1 {color:red} h2 {color:green} h3 {color:blue} p{color:gray} </style> </head> <body> <h1>h1級別的標題：紅色</h1> <h2>h2級別的標題：綠色</h2> <h3>h3級別的標題：藍色</h3> <p>這是一個段落：灰色</p> <br/><br/> </body> </html>
<!--內聯樣式-->
<!--不帶下劃線的連結-->
<a href="http://www.baidu.com" style="text-decoration:none" target="_blank">
這是一個不帶下劃線的連結
</a>