在HTML中引入CSS共有3種方式：
下面我們詳細為大家介紹這3種CSS引入方式。
外部樣式表是最理想的CSS引用方式，在實際開發當中，為了提升網站的性能和維護性，一般都是使用外部樣式表。所謂的“外部樣式表”，就是把CSS代碼和HTML代碼都單獨放在不同文件中，然後在HTML文檔中使用link標簽來引用CSS樣式表。
當樣式需要被應用到多個頁面時，外部樣式表是最理想的選擇。使用樣式表，你就可以通過更改一個CSS文件來改變整個網站的外觀。
外部樣式表在單獨文件中定義，並且在<head></head>標簽對中使用link標簽來引用。
舉例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--在HTML頁面中引用文件名為index的css文件-->
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div></div>
</body>
</html>
說明：
外部樣式表都是在head標簽內使用link標簽來引用的。
內部樣式，指的就是把CSS代碼和HTML代碼放在同一個文件中，其中CSS代碼放在<style></style>標簽對內，並且<style></style>標簽對是放在<head></head>標簽對內的。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--這是內部樣式表，CSS樣式在style標簽中定義-->
<style type="text/css">
p{color:Red;}
</style>
</head>
<body>
<p> 學習網</p>
<p> 學習網</p>
<p> 學習網</p>
</body>
</html>
在浏覽器預覽效果如下：
說明：
對於內部樣式表，CSS樣式在<style>標簽內定義，而<style>標簽必須放在<head>標簽內。
內聯樣式表，也是把CSS代碼和HTML代碼放在同一個文件中，但是跟內部樣式表不同，CSS樣式不是在<style></style>標簽對中定義，而是在標簽的style屬性中定義。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p style="color:Red; "> 學習網</p>
<p style="color:Red; "> 學習網</p>
<p style="color:Red; "> 學習網</p>
</body>
</html>
在浏覽器預覽效果如下：
說明：
大家仔細對比一下這個例子和內部樣式表中的例子，其實這兩段代碼實現的是同一個效果。三個p元素都定義了color屬性，那麼如果采用以下內部樣式表，樣式只需要寫一遍；而如果采用內聯樣式表，則三個p元素都要單獨寫一遍。
內聯樣式是在單個元素內定義的，對於網站來說，冗余代碼很多，而且由於冗余代碼多，每次改動CSS樣式都要到具體的標簽內修改，這樣使得網站的維護性也非常差。
在“HTML入門教程”中為什麼強烈不推薦使用Dreamweaver那種“點點點”的方式來制作網頁，就是因為在那種方式產生的代碼中，CSS樣式全部都是使用內聯樣式，導致冗余代碼非常多，網站的維護性也非常差。
在實際開發中，我們一般使用外部樣式表，而在在線代碼測試工具和CSS入門的過程中，我們使用的是內部樣式表，因為代碼量不是很多，HTML代碼和CSS代碼放在同一個文件，這樣也方便我們修改和測試。不管是在測試或者實際開發中，我們都不建議使用內聯樣式表。不過呢，我們可以使用內聯樣式表進行細節的微調，這個技巧我們在“CSS進階教程”再給大家介紹，敬請關注。