CSS 樣式既可以作為單獨的文件（ .css類型的文件）引入到HTML 文件中，也可以直接寫在HTML 文件中，大致分為以下四種方法：
第1種和第2種方法都是將CSS 樣式寫到目前HTML 文件中，第3種和第4種方法都是將CSS 樣式放在外部文件中，然後再匯入到目前HTML 文件中。
行內樣式就是把CSS 樣式直接放在程式碼行內的標籤中，通常都是放入標籤的style屬性中，由於行內樣式直接插入標籤中，故是最直接的一種方式，同時也是修改最不方便的樣式。
【範例1】針對段落、<h2> 標籤、<em> 標籤、<strong>標籤以及<div> 標籤，分別套用CSS 行內樣式。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>行內樣式</title>
</head>
<body>
<p style="background-color: #999900">行內元素，控制段落-1</p>
<h2 style="background-color: #FF6633">行內元素，h2 標題元素</h2>
<p style="background-color: #999900">行內元素，控制段落-2</p>
<strong style="font-size:30px;">行內元素，strong 比em 效果強</strong>
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行內元素，div 區塊級元素</div>
<em style="font-size:2em;">行內元素，em 強調</em>
</body>
</html>頁面示範效果如下圖所示：
在上面範例中，行內樣式由HTML 元素的style 屬性嵌入，即將CSS 程式碼放入style=""引號內即可，多個CSS 屬性值則透過分號;間隔。例如範例中的<div> 標籤：
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行內元素，div 區塊級元素</div>
段落<p> 標籤設定背景色為褐色（background-color: #999900），標題<h2> 標籤設定背景色為紅色（background-color: #FF6633）。
<strong> 標籤設定字體為30 像素（font-size:30px;），<div> 標籤設定高度和行高為30 像素以及進行背景色、顏色的設定（background-color:#66CC99; color:#993300 ; height:30px; line-height:30px;），<em> 標籤設定字體大小為相對單位（font-size: 2em;）。
兩個段落<p> 標籤，雖內容不同，但使用一樣的背景色設置，卻添加兩次CSS 行內屬性設置背景色background-color: #999900。
行內元素雖然編寫簡單，但透過範例可以發現存在以下缺陷：
每一個標籤要設定樣式都需要加入style 屬性。與過去網頁製作者將HTML 的標籤和樣式糅雜在一起的效果不同的是，現在是透過CSS 編寫行內樣式，過去釆用的是HTML 標籤屬性實現的樣式效果。雖方式不同，但導致的後果是一樣的：後期維護成本高，即當修改頁面時需要逐一打開網站每個頁面一一修改，根本看不到CSS 所起到的作用。添加如此多的行內樣式，頁面體積大，門戶網站若釆用這種方式編寫，那將浪費伺服器頻寬和流量。網路上有些網頁透過查看原始檔案可以看到這種編寫方式，雖然一個網頁只有一部分是如此做的， 但需要分情況：
若網頁製作者編寫這樣的行內樣式，可以快速更改當前樣式，不必考慮以前編寫的樣式衝突問題；網頁中若存在這種情況則是後台編輯時，通過編輯器生成的樣式，或後台未開發完整，需為編輯人員開發可選擇樣式的選項而非透過編輯器直接改變顏色、粗細、背景色、傾斜等效果。內嵌樣式透過將CSS 寫在網頁原始檔的頭部，即在<head> 和<head> 之間，透過使用HTML 標籤中的<style> 標籤將其包圍，其特點是該樣式只能在此頁使用，解決行內樣式多次書寫的弊端。
【範例2】為段落設定內嵌式樣式書寫方法，減少程式碼量。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>內嵌式</title>
<style type="text/css">
p{
text-align: left; /*文字左對齊*/
font-size: 18px; /*字體大小18 像素*/
line-height: 25px; /*行高25 像素*/
text-indent: 2em; /*首行縮排2個文字大小空間*/
width: 500px; /*段落寬度500 像素*/
margin: 0 auto; /*瀏覽器下置中*/
margin-bottom: 20px; /*段落下邊距20 像素*/
}
</style>
</head>
<body>
<p>「百度」這一公司名稱便來自宋詞「眾裡尋他千百度」。 （百度公司會議室名為青玉案，也就是這首字的詞牌）。而「熊掌」圖示的想法來自「獵人巡跡熊爪」的刺激，與李博士的「分析搜尋技術」非常相似，從而構成百度的搜尋概念，也最終成為了百度的圖標形象。在這之後，由於在搜尋引擎中，大都有動物形象來形象，如SOHU 的狐，如GOOGLE 的狗，而百度也便順理成章稱作了熊。百度熊也便成了百度公司的形象物。 </p>
<p>在百度那次更換LOGO 的計畫中，百度給出的3 個新LOGO 設計方案在網友的投票下，全部被否決，更多的網民將選票投給了原有的熊掌標誌。 </p>
<p>此次更換LOGO 的行動共進行了3 輪投票，直到第2 輪投票結束，新的笑臉LOGO 都佔據了絕對優勢。但到最後一輪投票時，原有的熊掌標誌卻戲劇性地獲得了最多的網友選票，從而把3 個新LOGO 方案徹底否決。 </p>
</body>
</html>頁面示範效果如下圖所示：
在上面範例中，段落進行如下設定：文字左對齊、字體為14 號、行高25 像素、寬度500 像素、下邊距20 像素、瀏覽器下居中、首行縮排兩個文字大小空間。首行縮排使用相對單位，此設定的作用是當字體大小改變時（如font-size: 18px; ）依然能夠實現縮排兩個文字大小空間。
行內樣式帶來了樣式修改的不方便，例如上個範例中兩個段落都使用相同的樣式，但需要編寫兩遍；而使用內嵌式樣式後，就可以將所有的段落樣式放在一起。
style 不僅可定義CSS 樣式，還可以定義JavaScript 腳本，故使用style 時需要注意。當style 的type 值為text/css時，內部編寫CSS 樣式；若style 的type 值為text/javascript時，內部會編寫JavaScript 腳本。
style 標籤的title 屬性
style 中有一個比較特殊的屬性title，使用title 可以為不同的樣式設定一個標題，瀏覽者就可以根據標題選擇不同的樣式達到瀏覽器中切換的效果，但IE 瀏覽器不支持，Firefox 瀏覽器支持此效果。
【範例3】分別為火狐瀏覽器設定兩種字體大小樣式，並透過火狐「檢視」選單進行修改。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css" title="字體14號">
p{
text-align: left; /*文字左對齊*/
font-size: 14px; /*字體大小14 像素*/
line-height: 25px; /*行高25 像素*/
text-indent: 2em; /*首行縮排兩個文字大小空間*/
width: 500px; /*段落寬度500 像素*/
margin: 0 auto; /*瀏覽器下置中*/
}
</style>
<style type="text/css" title="字體18 號">
p{
text-align: left; /*文字左對齊*/
font-size: 18px; /*字體大小18 像素*/
line-height: 25px; /*行高25 像素*/
text-indent: 2em; /*首行縮排兩個文字大小空間*/
width: 500px; /*段落寬度500 像素*/
margin: 0 auto; /*瀏覽器下置中*/
color: #6699FF; /*字型顏色的改變*/
}
</style>
</head>
<body>
<p>「百度」這一公司名稱便來自宋詞「眾裡尋他千百度」。 （百度公司會議室名為青玉案，也就是這首字的詞牌）。而「熊掌」圖示的想法來自「獵人巡跡熊爪」的刺激，與李博士的「分析搜尋技術」非常相似，從而構成百度的搜尋概念，也最終成為了百度的圖標形象。 </p>
</body>
</html>頁面示範效果如下圖所示。
在上面不例中，透過<style type="text/css" title="名称">定義了兩種字體大小，透過火狐瀏覽器「檢視」選單下的「頁面樣式」子選單中有兩個選項：字體14號、字體18號，預設顯示的是第一次書寫的<style type="text/css" title="名称"> ，透過選單可以改變該頁面樣式。
連結式透過HTML 的<link> 標籤，將外部樣式表檔案連結到HTML 文件中，也是網路上網站應用最多的方式，同時也是最實用的方式。這種方法將HTML 文件和CSS 文件完全分離，實現結構層和表示層的徹底分離，增強網頁結構的擴展性和CSS 樣式的可維護性。
【範例4】使用連結式為HTML 程式碼套用樣式，書寫、變更方便。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="lianjie.css" type="text/css" rel="stylesheet" />
<link href="lianjie-2.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>我是被lianjie-2.css 文件控制的，樓下的你呢？ ？ </p>
<h3>樓上的，<span>lianjie.css</span> 文件幫我穿的花衣服。 </h3>
</body>
</html>頁面示範效果如下圖所示：
在上面範例中，透過link 連結兩個CSS 文件，而且都有效，這也是網站製作者將公共部分放入一個CSS 文件，目前頁面樣式編寫新的樣式文件。
lianjie.css 文件代碼：
h3{
font-weight: normal; /*取消標題預設加粗效果*/
background-color: #66CC99; /* 設定背景色*/
height: 50px; /*設定標籤的高度*/
line-height:50px; /* 設定標籤的行高*/
}
span{
color: #FFOOOO; /* 字型顏色*/
font-weight:bold; /* 字體加粗*/
}lianjie-2.css 文件代碼：
p{
color: #FF3333; /*字型顏色設定*/
font-weight: bold; /* 字體加粗*/
border-bottom: 3px dashed #009933; /* 設定下邊框線*/
line-height: 30px; /* 設定行高*/
}連結式樣式使CSS 程式碼和HTML 程式碼完全分離，達到結構與樣式的分開，使HTML 程式碼專門建立頁面結構，而美化工作則由CSS 完成。
連結式匯入CSS 樣式的好處：
CSS 檔案可以放在不同的HTML 檔案中，使網站所有頁面樣式統一；再者將CSS 程式碼放入一個CSS 檔案中便於管理、減少程式碼以及維護時間；當修改CSS 檔案時，所有應用此CSS 檔案的HTML 檔案都會更新，而不必從伺服器上將所有的頁面取回再修改完畢後上傳。導入樣式使用@import 指令導入外部樣式表。導入樣式有6 種書寫方式：
@import daoru.css;
@import 'daomxss';
@import "daoru.css";
@import url(daoru.css);
@import url('daoru.css');
@import url("daoru.css");【範例5】匯入樣式表lianjie.css 和daoru.css 以及書寫<body> 標籤的背景色，注意匯入樣式表和<body> 標籤樣式的前後不可顛倒。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@import url(lianjie.css);
@import url(daoru.css);
body { background-color: #e4e929; }
</style>
</head>
<body>
<div>
<p>我是被lianjie-2.css 文件控制的，樓下的你呢？ ？ </p>
<h3>襤褸的，<span>lianjie.css</span>文件給我穿的花衣服。 </h3>
</div>
</body>
</html>頁面示範效果如下圖所示。
在上述範例中，必須是@import url("lianjie-2.css"); p{text-indent: 3em;} ，而不能是p{text-indent:3em;} @import url("lianjie-2.css"); ，否則將導入效果無效。在CSS 檔案中也需要將@import 放在前面，後面加入CSS 樣式，否則也是無效。
lianjie.css 檔案程式碼，同上一個範例即連結式。
daoru.css 檔案代碼：
@import url("lianjie-2.css");
p { text-indent: 3em; }到此這篇關於HTML嵌入CSS樣式的四種實現方法的文章就介紹到這了,更多相關HTML嵌入CSS樣式內容請搜索downcodes.com以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支援downcodes.com！