有4種方式，行內方式、內嵌方式、連結方式、匯入方式
1、行內方式
行內方式是4種樣式中最直接最簡單的一種，直接對HTML標籤適用style=""，例如：
<p></p>
雖然這種方法比較直接，在製作頁面的時候需要為很多的標籤設定style屬性，所以會導致HTML頁面不夠純淨，檔案體積過大，不利於搜尋蜘蛛爬行，從而導致後期維護成本高。
2、內嵌方式
內嵌方式就是將CSS程式碼寫在<head></head>之間，並且用<style></style>進行宣告，例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文件</title>
<style type="text/css">
#div1{width:64px; height:64px; float:left;}
#div1 img{width:64px; height:64px;}
-->
</style>
</head>
<body>
<div><img src="https://www.jb51.net/images/logo.gif" /></div>
</body>
</html>
執行程式碼 複製程式碼 另存程式碼 <script language="JavaScript">ffcod = delpost.runcode7 .value; ffcod = ffcod.replace(/
/g,""); delpost.runcode7 .value = ffcod;</script> 提示：您可以先修改部分程式碼再執行
內嵌方式，大家應該也能意識到，即使有公共CSS程式碼，也是每個頁面都要定義的，如果一個網站有很多頁面，每個檔案都會變大，後期維護也大，如果檔案很少，CSS程式碼也不多，這種方式還是很不錯的。
3、連結方式
連結方式是使用頻率最高，最實用的方式，只需要在<head></head>之間加上
複製程式碼
程式碼如下:
，就可以了，這種方式將HTML檔案和CSS檔案徹底分成兩個
或者多個檔案，實現了頁面框架HTML程式碼與美工CSS程式碼的完全分離，使得前期製作和後期維護都十分方便，並且如果要保持頁面風格統一，只需要把這些公共的CSS檔案單獨儲存成一個檔案，其他的頁
面就可以分別呼叫自身的CSS檔案，如果需要改變網站風格，只需要修改公共CSS檔案就OK了，相當的方便，這才是我們xHTML+CSS製作頁面提倡的方式。
HTML程式碼
CSS程式碼
4、匯入方式
匯入樣式和連結樣式比較相似，採用import方式匯入CSS樣式表，在HTML初始化時，會被匯入到HTML檔案中，成為檔案的一部分，類似第二種內嵌方式。
具體匯入樣式和連結樣式有什麼區別，可以參看這篇文章《CSS:@import與link的具體區別》，不過我還是建議大家用連結方式！
四種樣式的優先順序 ：
如果這上面的四種方式中的兩種用於同一個頁面後，就會出現優先順序的問題，這裡我就不再舉例子來說明了，大家在下面自己證明一下下面的結論
四種樣式的優先級別是(從高至低)：行內樣式、內嵌樣式、連結樣式、匯入樣式。
拓展資料
css是層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言。
CSS不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化。
CSS為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。
有4種方式，行內方式、內嵌方式、連結方式、匯入方式
1、行內方式
行內方式是4種樣式中最直接最簡單的一種，直接對HTML標籤適用style=""，例如：
<p></p>
雖然這種方法比較直接，在製作頁面的時候需要為很多的標籤設定style屬性，所以會導致HTML頁面不夠純淨，檔案體積過大，不利於搜尋蜘蛛爬行，從而導致後期維護成本高。
2、內嵌方式
內嵌方式就是將CSS程式碼寫在<head></head>之間，並且用<style></style>進行宣告，例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文件</title>
<style type="text/css">
#div1{width:64px; height:64px; float:left;}
#div1 img{width:64px; height:64px;}
-->
</style>
</head>
<body>
<div><img src="https://www.jb51.net/images/logo.gif" /></div>
</body>
</html>
執行程式碼 複製程式碼 另存程式碼 <script language="JavaScript">ffcod = delpost.runcode7 .value; ffcod = ffcod.replace(/
/g,""); delpost.runcode7 .value = ffcod;</script> 提示：您可以先修改部分程式碼再執行
內嵌方式，大家應該也能意識到，即使有公共CSS程式碼，也是每個頁面都要定義的，如果一個網站有很多頁面，每個檔案都會變大，後期維護也大，如果檔案很少，CSS程式碼也不多，這種方式還是很不錯的。
3、連結方式
連結方式是使用頻率最高，最實用的方式，只需要在<head></head>之間加上
複製程式碼
程式碼如下:
，就可以了，這種方式將HTML檔案和CSS檔案徹底分成兩個
或者多個檔案，實現了頁面框架HTML程式碼與美工CSS程式碼的完全分離，使得前期製作和後期維護都十分方便，並且如果要保持頁面風格統一，只需要把這些公共的CSS檔案單獨儲存成一個檔案，其他的頁
面就可以分別呼叫自身的CSS檔案，如果需要改變網站風格，只需要修改公共CSS檔案就OK了，相當的方便，這才是我們xHTML+CSS製作頁面提倡的方式。
HTML程式碼
複製程式碼
程式碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文件</title>
</head>
<body>
<div><img src="https://www.jb51.net/images/logo.gif" /></div>
</body>
</html>
CSS程式碼
複製程式碼
程式碼如下:
#div1{width:64px; height:64px; float:left;}
#div1 img{width:64px; height:64px;}
4、匯入方式
匯入樣式和連結樣式比較相似，採用import方式匯入CSS樣式表，在HTML初始化時，會被匯入到HTML檔案中，成為檔案的一部分，類似第二種內嵌方式。
具體匯入樣式和連結樣式有什麼區別，可以參看這篇文章《CSS:@import與link的具體區別》，不過我還是建議大家用連結方式！
四種樣式的優先順序 ：
如果這上面的四種方式中的兩種用於同一個頁面後，就會出現優先順序的問題，這裡我就不再舉例子來說明了，大家在下面自己證明一下下面的結論
四種樣式的優先級別是(從高至低)：行內樣式、內嵌樣式、連結樣式、匯入樣式。
拓展資料
css是層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言。
CSS不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化。
CSS為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。