在HTMl文件中使用CSS
阿新 • • 發佈：2019-01-30
內聯樣式
<!DOCTYPE html>
<html>
<!--
CSS建立(讓CSS樣式表作用於文件)
外部樣式表：
當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，可以通過改變一個檔案來改變整個站點的外觀。每個頁面使用 <link> 標籤連結到樣式表。<link> 標籤在（文件的）頭部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
內部樣式表：
當單個文件需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標籤在文件頭部定義內部樣式表，就像這樣:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
</style>
</head>
內聯樣式：
由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
當多種型別的樣式表存在的時候，三種但是引入的CSS樣式的優先順序：
內聯樣式>內部樣式表>外部樣式表
--> 內部樣式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 有些瀏覽器不支援style標籤
* 因為有些老的瀏覽器不支援CSS，所以當讀取到CSS程式碼的時候就會把CSS程式碼當文字給讀出來，
* 這樣就把CSS程式碼顯示到網頁中了，而瀏覽器總是會認識HTML語言的，所以當瀏覽器讀取到HTML
* 註釋的時候就把CSS程式碼當成了註釋，而並不會顯示在網頁中了
*/ 外部樣式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用link標籤引入外部樣式表</title>
<link href="css/9css使用方式.css" rel="stylesheet" type="text/css" />
</head>
<a>我是超級連結</a>
<hr />
<div>我是div</div>
<hr />
<p>我是段落</p>
<body>
</body>
</html>9css使用方式.css：
a {
font-size: 10pt;
color: green;
}
div {
font-size: 20pt;
color: red;
}
p {
font-size: 30pt;
color: blue;
}@import引入css
<!DOCTYPE html>
<html>
<!--
使用link和@import引入css的區別：
兩者都是外部引用CSS的方式，但是存在一定的區別：
區別1：link是XHTML標籤，除了載入CSS外，還可以定義RSS等其他事務；@import屬於CSS範疇，只能載入CSS。
區別2：link引用CSS時，在頁面載入時同時載入；@import需要頁面網頁完全載入以後載入。
區別3：link是XHTML標籤，無相容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支援。
區別4：link支援使用Javascript控制DOM去改變樣式；而@import不支援。
-->
<head>
<meta charset="UTF-8">
<title>使用@import引入css</title>
<style type="text/css">
@import url("css/9css使用方式.css");
</style>
</head>
<body>
<a>我是超級連結</a>
<hr />
<div>我是div</div>
<hr />
<p>我是段落</p>
</body>
</html>