2、HTML嵌入CSS样式（四种方法）
CSS 樣式代碼必須保存在.css類型的文本文件中，或者放在網頁內 <style> 標簽中，或者插在網頁標簽的 style 屬性值中。
CSS 樣式應用的方法主要包括 4 種：行內樣式、內嵌式、鏈接式以及導入樣式
1. 行內樣式
行內樣式就是把 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> 標簽塊級元素
的編寫，我們拋棄過去 HTML 結構和樣式放在一起的寫法，即<body bgcolor="#33ffff">。
段落 <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。
<h2> 標簽、<p> 標簽、<div> 標簽為塊級元素，設置其 CSS 屬性，瀏覽器支持；<strong> 標簽、<em> 標簽為行內元素，設置其 CSS 屬性，瀏覽器支持；故無論行內元素、塊級元素，CSS 行內樣式都有效。
總之，行內元素雖然編寫簡單，但通過示例可以發現存在以下缺陷：
- 每一個標簽要設置樣式都需要添加 style 屬性。
- 與過去網頁制作者將 HTML 的標簽和樣式糅雜在一起的效果，不同的是現在是通過 CSS 編寫行內樣式，過去釆用的是 HTML標簽屬性實現的樣式效果，雖方式不同但結果是一致的：后期維護成本高，即當修改頁面時需要逐個打開網站每個頁面一一修改，根本看不到 CSS 所起到的作用。
- 添加如此多的行內樣式，頁面體積大，門戶網站若釆用這種方式編寫，那將浪費服務器帶寬和流量。
網絡上有些網頁通過查看源文件可以看到這種編寫方式，雖然一個網頁只有一部分是如此做的， 但需要分情況：
- 若網頁制作者編寫這樣的行內樣式，可以快速更改當前樣式，不必考慮以前編寫的樣式沖突問題；
- 網頁中若存在這種情況則是后臺編輯時，通過編輯器生成的樣式，或后臺未開發完整，需為編輯人員開發可選擇樣式的選項而非通過編輯器直接改變顏色、粗細、背景色、傾斜等效果。
2、內嵌式
內嵌式通過將 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="名稱">，通過菜單可以改變該頁面樣式。
3. 鏈接式
鏈接式通過 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 文件可以放在不同的 HTML 文件中，使網站所有頁面樣式統一；再者將 CSS 代碼放入一個 CSS 文件中便于管理、減少代碼以及維護時間；當修改 CSS 文件時，所有應用此 CSS 文件的 HTML 文件都將更新，而不必從服務器上將所有的頁面取回再修改完畢后上傳。
4. 導入樣式
導入樣式使用 @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 文件代碼：
@import url("lianjie-2.css"); p { text-indent: 3em; }總結
以上是生活随笔為你收集整理的2、HTML嵌入CSS样式（四种方法）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 1、CSS样式及其基本语法
- 下一篇： 3、HTML导入外部样式表（HTML导入