HTML嵌入CSS樣式的四種實(shí)現(xiàn)方法
我要評(píng)論CSS 樣式既可以作為單獨(dú)的文件（.css類(lèi)型的文件）引入到 HTML 文檔中，也可以直接寫(xiě)在 HTML 文檔中，大致分為如下四種方法：
- 行內(nèi)樣式：使用 HTML 標(biāo)簽的 style 屬性定義 CSS 樣式；
- 內(nèi)嵌樣式：使用 <style> 標(biāo)簽在 HTML 文檔頭部（<head> 和 <head> 之間）定義 CSS 樣式；
- 鏈接式：使用 <link> 標(biāo)簽引入外部 CSS 樣式表文件。
- 導(dǎo)入式：使用 @import 命令導(dǎo)入外部 CSS 樣式表文件。
第1種和第2種方法都是將 CSS 樣式寫(xiě)到當(dāng)前 HTML 文檔中，第3種和第4種方法都是將 CSS 樣式放在外部文件中，然后再導(dǎo)入到當(dāng)前 HTML 文檔中。
1. 行內(nèi)樣式（內(nèi)聯(lián)樣式）
行內(nèi)樣式就是把 CSS 樣式直接放在代碼行內(nèi)的標(biāo)簽中，一般都是放入標(biāo)簽的style屬性中，由于行內(nèi)樣式直接插入標(biāo)簽中，故是最直接的一種方式，同時(shí)也是修改最不方便的樣式。
【示例1】針對(duì)段落、<h2> 標(biāo)簽、<em> 標(biāo)簽、<strong>標(biāo)簽以及 <div> 標(biāo)簽，分別應(yīng)用 CSS 行內(nèi)樣式。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>行內(nèi)樣式</title>
</head>
<body>
<p style="background-color: #999900">行內(nèi)元素，控制段落-1</p>
<h2 style="background-color: #FF6633">行內(nèi)元素，h2 標(biāo)題元素</h2>
<p style="background-color: #999900">行內(nèi)元素，控制段落-2</p>
<strong style="font-size:30px;">行內(nèi)元素，strong 比 em 效果要強(qiáng)</strong>
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行內(nèi)元素，div 塊級(jí)元素</div>
<em style="font-size:2em;">行內(nèi)元素，em 強(qiáng)調(diào)</em>
</body>
</html>頁(yè)面演示效果如下圖所示：
在上面示例中，行內(nèi)樣式由 HTML 元素的 style 屬性嵌入，即將 CSS 代碼放入style=""引號(hào)內(nèi)即可，多個(gè) CSS 屬性值則通過(guò)分號(hào);間隔。例如示例中的 <div> 標(biāo)簽：
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行內(nèi)元素，div 塊級(jí)元素 </div>
段落 <p> 標(biāo)簽設(shè)置背景色為褐色（background-color: #999900），標(biāo)題 <h2> 標(biāo)簽設(shè)置背景色為紅色（background-color: #FF6633）。
<strong> 標(biāo)簽設(shè)置字體為 30 像素（font-size:30px;），<div> 標(biāo)簽設(shè)置高度和行高為 30 像素以及進(jìn)行背景色、顏色的設(shè)置（background-color:#66CC99; color:#993300; height:30px; line-height:30px;），<em> 標(biāo)簽設(shè)置字體大小為相對(duì)單位（font-size: 2em;）。
兩個(gè)段落 <p> 標(biāo)簽，雖內(nèi)容不同，但使用一樣的背景色設(shè)置，卻添加兩次 CSS 行內(nèi)屬性設(shè)置背景色 background-color: #999900。
行內(nèi)元素雖然編寫(xiě)簡(jiǎn)單，但通過(guò)示例可以發(fā)現(xiàn)存在以下缺陷：
- 每一個(gè)標(biāo)簽要設(shè)置樣式都需要添加 style 屬性。
- 與過(guò)去網(wǎng)頁(yè)制作者將 HTML 的標(biāo)簽和樣式糅雜在一起的效果不同的是，現(xiàn)在是通過(guò) CSS 編寫(xiě)行內(nèi)樣式，過(guò)去釆用的是 HTML 標(biāo)簽屬性實(shí)現(xiàn)的樣式效果。雖方式不同，但導(dǎo)致的后果是一樣的：后期維護(hù)成本高，即當(dāng)修改頁(yè)面時(shí)需要逐個(gè)打開(kāi)網(wǎng)站每個(gè)頁(yè)面一一修改，根本看不到 CSS 所起到的作用。
- 添加如此多的行內(nèi)樣式，頁(yè)面體積大，門(mén)戶網(wǎng)站若釆用這種方式編寫(xiě)，那將浪費(fèi)服務(wù)器帶寬和流量。
網(wǎng)絡(luò)上有些網(wǎng)頁(yè)通過(guò)查看源文件可以看到這種編寫(xiě)方式，雖然一個(gè)網(wǎng)頁(yè)只有一部分是如此做的， 但需要分情況：
- 若網(wǎng)頁(yè)制作者編寫(xiě)這樣的行內(nèi)樣式，可以快速更改當(dāng)前樣式，不必考慮以前編寫(xiě)的樣式?jīng)_突問(wèn)題；
- 網(wǎng)頁(yè)中若存在這種情況則是后臺(tái)編輯時(shí)，通過(guò)編輯器生成的樣式，或后臺(tái)未開(kāi)發(fā)完整，需為編輯人員開(kāi)發(fā)可選擇樣式的選項(xiàng)而非通過(guò)編輯器直接改變顏色、粗細(xì)、背景色、傾斜等效果。
2. 內(nèi)嵌樣式
內(nèi)嵌樣式通過(guò)將 CSS 寫(xiě)在網(wǎng)頁(yè)源文件的頭部，即在 <head> 和 <head> 之間，通過(guò)使用 HTML 標(biāo)簽中的 <style> 標(biāo)簽將其包圍，其特點(diǎn)是該樣式只能在此頁(yè)使用，解決行內(nèi)樣式多次書(shū)寫(xiě)的弊端。
【示例2】為段落設(shè)置內(nèi)嵌式樣式書(shū)寫(xiě)方法，減少代碼量。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>內(nèi)嵌式</title>
<style type="text/css">
p{
text-align: left; /*文本左對(duì)齊*/
font-size: 18px; /*字體大小 18 像素*/
line-height: 25px; /*行高 25 像素*/
text-indent: 2em; /*首行縮進(jìn)2個(gè)文字大小空間*/
width: 500px; /*段落寬度 500 像素*/
margin: 0 auto; /*瀏覽器下居中*/
margin-bottom: 20px; /*段落下邊距 20 像素*/
}
</style>
</head>
<body>
<p>“百度”這一公司名稱便來(lái)自宋詞“眾里尋他千百度”。（百度公司會(huì)議室名為青玉案，即是這首詞的詞牌）。而“熊掌”圖標(biāo)的想法來(lái)源于“獵人巡跡熊爪”的刺激，與李博士的“分析搜索技術(shù)”非常相似，從而構(gòu)成百度的搜索概念，也最終成為了百度的圖標(biāo)形象。在這之后，由于在搜索引擎中，大都有動(dòng)物形象來(lái)形象，如 SOHU 的狐，如 GOOGLE 的狗，而百度也便順理成章稱作了熊。百度熊也便成了百度公司的形象物。</p>
<p>在百度那次更換 LOGO 的計(jì)劃中，百度給出的 3 個(gè)新 LOGO 設(shè)計(jì)方案在網(wǎng)民的投票下，全部被否決，更多的網(wǎng)民將選票投給了原有的熊掌標(biāo)志。</p>
<p>此次更換 LOGO 的行動(dòng)共進(jìn)行了 3 輪投票，直到第 2 輪投票結(jié)束，新的笑臉 LOGO 都占據(jù)了絕對(duì)優(yōu)勢(shì)。但到最后一輪投票時(shí)，原有的熊掌標(biāo)志卻戲劇性地獲得了最多的網(wǎng)民選票，從而把 3 個(gè)新 LOGO 方案徹底否決。</p>
</body>
</html>頁(yè)面演示效果如下圖所示：
在上面示例中，段落進(jìn)行如下設(shè)置：文本左對(duì)齊、字體為 14 號(hào)、行高 25 像素、寬度 500 像素、下邊距 20 像素、瀏覽器下居中、首行縮進(jìn)兩個(gè)文字大小空間。首行縮進(jìn)使用相對(duì)單位，此設(shè)置的作用是當(dāng)字體大小改變時(shí)（如font-size: 18px;）依然能夠?qū)崿F(xiàn)縮進(jìn)兩個(gè)文字大小空間。
行內(nèi)樣式帶來(lái)了樣式修改的不方便，例如上個(gè)示例中兩個(gè)段落都使用同樣的樣式，但需要編寫(xiě)兩遍；而使用內(nèi)嵌式樣式后，就可以將所有的段落樣式放在一起。
style 不僅可定義 CSS 樣式，還可以定義 JavaScript 腳本，故使用 style 時(shí)需要注意。當(dāng) style 的 type 值為text/css時(shí)，內(nèi)部編寫(xiě) CSS 樣式；若 style 的 type 值為text/javascript時(shí)，內(nèi)部編寫(xiě) JavaScript 腳本。
style 標(biāo)簽的 title 屬性
style 中有一個(gè)比較特殊的屬性 title，使用 title 可以為不同的樣式設(shè)置一個(gè)標(biāo)題，瀏覽者就可以根據(jù)標(biāo)題選擇不同的樣式達(dá)到瀏覽器中切換的效果，但 IE 瀏覽器不支持，F(xiàn)irefox 瀏覽器支持此效果。
【示例3】分別為火狐瀏覽器設(shè)置兩種字體大小樣式，通過(guò)火狐“查看”菜單進(jìn)行修改。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css" title="字體14號(hào)">
p{
text-align: left; /*文本左對(duì)齊*/
font-size: 14px; /*字體大小 14 像素*/
line-height: 25px; /*行高 25 像素*/
text-indent: 2em; /*首行縮進(jìn)兩個(gè)文字大小空間*/
width: 500px; /*段落寬度 500 像素*/
margin: 0 auto; /*瀏覽器下居中*/
}
</style>
<style type="text/css" title="字體 18 號(hào)">
p{
text-align: left; /*文本左對(duì)齊*/
font-size: 18px; /*字體大小 18 像素*/
line-height: 25px; /*行高 25 像素*/
text-indent: 2em; /*首行縮進(jìn)兩個(gè)文字大小空間*/
width: 500px; /*段落寬度 500 像素*/
margin: 0 auto; /*瀏覽器下居中*/
color: #6699FF; /*字體顏色的改變*/
}
</style>
</head>
<body>
<p>“百度”這一公司名稱便來(lái)自宋詞“眾里尋他千百度”。（百度公司會(huì)議室名為青玉案，即是這首詞的詞牌）。而“熊掌”圖標(biāo)的想法來(lái)源于“獵人巡跡熊爪”的刺激，與李博士的“分析搜索技術(shù)”非常相似，從而構(gòu)成百度的搜索概念，也最終成為了百度的圖標(biāo)形象。</p>
</body>
</html>頁(yè)面演示效果如下圖所示。
在上面不例中，通過(guò)<style type="text/css" title="名稱">定義了兩種字體大小，通過(guò)火狐瀏覽器“查看”菜單下的“頁(yè)面樣式”子菜單中有兩個(gè)選項(xiàng)：字體14號(hào)、字體18號(hào)，默認(rèn)情況下顯示的是第一次書(shū)寫(xiě)的<style type="text/css" title="名稱">，通過(guò)菜單可以改變?cè)擁?yè)面樣式。
3. 鏈接式
鏈接式通過(guò) HTML 的 <link> 標(biāo)簽，將外部樣式表文件鏈接到 HTML 文檔中，這也是網(wǎng)絡(luò)上網(wǎng)站應(yīng)用最多的方式，同時(shí)也是最實(shí)用的方式。這種方法將 HTML 文檔和 CSS 文件完全分離，實(shí)現(xiàn)結(jié)構(gòu)層和表示層的徹底分離，增強(qiáng)網(wǎng)頁(yè)結(jié)構(gòu)的擴(kuò)展性和 CSS 樣式的可維護(hù)性。
【示例4】使用鏈接式為 HTML 代碼應(yīng)用樣式，書(shū)寫(xiě)、更改方便。
<!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>頁(yè)面演示效果如下圖所示：
在上面示例中，通過(guò) link 鏈接兩個(gè) CSS 文件，且都有效，這也是網(wǎng)站制作者將公共部分放入一個(gè) CSS 文件，當(dāng)前頁(yè)面樣式編寫(xiě)新的樣式文件。
lianjie.css 文件代碼：
h3{
font-weight: normal; /*取消標(biāo)題默認(rèn)加粗效果*/
background-color: #66CC99; /* 設(shè)置背景色 */
height: 50px; /*設(shè)置標(biāo)簽的高度*/
line-height:50px; /* 設(shè)置標(biāo)簽的行高 */
}
span{
color: #FFOOOO; /* 字體顏色 */
font-weight:bold; /* 字體加粗 */
}lianjie-2.css 文件代碼：
p{
color: #FF3333; /*字體顏色設(shè)置*/
font-weight: bold; /* 字體加粗 */
border-bottom: 3px dashed #009933; /* 設(shè)置下邊框線 */
line-height: 30px; /* 設(shè)置行高 */
}鏈接式樣式使 CSS 代碼和 HTML 代碼完全分離，達(dá)到結(jié)構(gòu)與樣式的分開(kāi)，使 HTML 代碼專(zhuān)門(mén)構(gòu)建頁(yè)面結(jié)構(gòu)，而美化工作由 CSS 完成。
鏈接式導(dǎo)入 CSS 樣式的好處：
- CSS 文件可以放在不同的 HTML 文件中，使網(wǎng)站所有頁(yè)面樣式統(tǒng)一；
- 再者將 CSS 代碼放入一個(gè) CSS 文件中便于管理、減少代碼以及維護(hù)時(shí)間；
- 當(dāng)修改 CSS 文件時(shí)，所有應(yīng)用此 CSS 文件的 HTML 文件都將更新，而不必從服務(wù)器上將所有的頁(yè)面取回再修改完畢后上傳。
4. 導(dǎo)入樣式
導(dǎo)入樣式使用 @import 命令導(dǎo)入外部樣式表。導(dǎo)入樣式有 6 種書(shū)寫(xiě)方式：
@import daoru.css;
@import 'daomxss';
@import "daoru.css";
@import url(daoru.css);
@import url('daoru.css');
@import url("daoru.css");【示例5】導(dǎo)入樣式表 lianjie.css 和 daoru.css 以及書(shū)寫(xiě) <body> 標(biāo)簽的背景色，注意導(dǎo)入樣式表和 <body> 標(biāo)簽樣式的前后不可顛倒。
<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>頁(yè)面演示效果如下圖所示。
在上面示例中，必須是@import url("lianjie-2.css"); p{text-indent: 3em;}，而不能是p{text-indent:3em;} @import url("lianjie-2.css");，否則將導(dǎo)入效果無(wú)效。在 CSS 文件中也需要將 @import 放在前面，后面加入 CSS 樣式，否則也是無(wú)效。
lianjie.css 文件代碼，同上一個(gè)示例即鏈接式。
daoru.css 文件代碼：
@import url("lianjie-2.css");
p { text-indent: 3em; }到此這篇關(guān)于HTML嵌入CSS樣式的四種實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)HTML嵌入CSS樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了HTML外部樣式表如何引入CSS樣式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2020-12-10HTML基礎(chǔ)知識(shí)——css樣式表,樣式屬性,格式與布局詳解
下面小編就為大家?guī)?lái)一篇HTML基礎(chǔ)知識(shí)——css樣式表,樣式屬性,格式與布局詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-11- 下面小編就為大家?guī)?lái)一篇HTML基礎(chǔ)必看——全面了解css樣式表。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-11
- 下面小編就為大家?guī)?lái)一篇HTML (css樣式規(guī)范)必看篇。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-27
html動(dòng)態(tài)加載css樣式和js腳本示例
這篇文章主要介紹了html動(dòng)態(tài)加載css樣式和js腳本示例,需要的朋友可以參考下2014-04-16- 在布局過(guò)程中為了某些需求，將html標(biāo)簽在瀏覽器居中顯示是很常見(jiàn)的做法，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-04-15
通過(guò)CSS樣式實(shí)現(xiàn)的html背景色漸變效果
在html中可以輕松實(shí)現(xiàn)背景色漸變的下面是一個(gè)通過(guò)CSS實(shí)現(xiàn)的示例，大家若感興趣，可以參考下2014-03-24html 隱藏div HTML里隱藏表格TABLE或者DIV內(nèi)容的css樣式
突然想起幾年前用過(guò)的一個(gè)隱藏樣式代碼，有些時(shí)候用它非常方便，比如想讓某塊表格TABLE或者DIV里的內(nèi)容完全看不到，那就加上他，嘿嘿，就隱身了,需要的朋友可以了解下2012-12-21- html,address, blockquote, body,dd,div, dl,dt,fieldset,form, frame,frameset, h1,h2,h3,h4, h5,h6,noframes, ol,p,ul,center, dir,hr,menu,pre { display:block} li {2008-10-17