在HTML文檔中嵌入CSS的三種常用方式
發(fā)布時(shí)間：2014-06-04 15:12:38 作者：佚名 
我要評論
我要評論在HTML中定義CSS的方式有：Embedding（嵌入式）、Linking（引用式）、Inline（內(nèi)聯(lián)式），下面通過實(shí)例為大家詳細(xì)介紹下它們的特點(diǎn)
在HTML中常用以下3種方式定義CSS：Embedding（嵌入式）、Linking（引用式）、Inline（內(nèi)聯(lián)式）
一、嵌入式
使用HTML的style元素，在文檔中定義CSS樣式。
<head>
<style type="text/css">
h1{color:red}
p{color:blue}
</style>
<head>
二、內(nèi)聯(lián)式
每一個(gè)HTML元素都包含一個(gè)style屬性，可以直接定義樣式。該樣式僅能用于該元素的內(nèi)容，對于另一個(gè)同名的元素則不起作用。
<p style="color:#FFF;font-weight:bold;">內(nèi)聯(lián)樣式</p>
三、外部引用式
外部引用指HTML文檔本身不含有CSS樣式，而是動(dòng)態(tài)引用外部的CSS文件定義文檔的表現(xiàn)形式。
1、使用樣式表的處理指令語句
在HTML文檔的開頭部分寫一個(gè)關(guān)于樣式表的指令處理語句
<?xml-stylesheet type="text/css" href="mystyle.css" ?>
<html>
指令語句
</html>
不過只有使用xml語法格式編寫的html文檔才支持使用該指令，大多數(shù)瀏覽器僅當(dāng)被保存為xhtml或xml格式才有效，且JS不能處理這種CSS，所以不建議使用。
2、使用@import命令
在style元素之間使用@import命令導(dǎo)入外部的css文件
<head>
<style type="text/css">
<!--下面兩行代碼效果一樣
@import "mystyle.css";
@import url("mystyle.css");
-->
</style>
</head>
任何@import規(guī)則必須出現(xiàn)在所有規(guī)則之前。參數(shù)是一個(gè)css文件的URL地址。在一個(gè)css文件中也可以用@import指令將另一個(gè)css文件導(dǎo)入。
3、使用link元素
<head>
<link rel="stylesheet" href="css的url" type="text/css" >
</head>
這也是最常用的方式。
4、使用HTTP消息報(bào)頭鏈接到樣式表
可以使用HTTP消息報(bào)頭的link字段鏈接一個(gè)外部樣式表。
link:<mystyle.css>;rel=stylesheet;
//等同于<link rel="stylesheet" href="css的url" type="text/css" >
HTTP報(bào)頭中可以使用多個(gè)link，從而鏈接多個(gè)樣式表，且HTTP報(bào)頭中的link比HTML文檔中的link（head元素中）具有優(yōu)先級。
一、嵌入式
使用HTML的style元素，在文檔中定義CSS樣式。
復(fù)制代碼
代碼如下:<head>
<style type="text/css">
h1{color:red}
p{color:blue}
</style>
<head>
二、內(nèi)聯(lián)式
每一個(gè)HTML元素都包含一個(gè)style屬性，可以直接定義樣式。該樣式僅能用于該元素的內(nèi)容，對于另一個(gè)同名的元素則不起作用。
復(fù)制代碼
代碼如下:<p style="color:#FFF;font-weight:bold;">內(nèi)聯(lián)樣式</p>
三、外部引用式
外部引用指HTML文檔本身不含有CSS樣式，而是動(dòng)態(tài)引用外部的CSS文件定義文檔的表現(xiàn)形式。
1、使用樣式表的處理指令語句
在HTML文檔的開頭部分寫一個(gè)關(guān)于樣式表的指令處理語句
復(fù)制代碼
代碼如下:<?xml-stylesheet type="text/css" href="mystyle.css" ?>
<html>
指令語句
</html>
不過只有使用xml語法格式編寫的html文檔才支持使用該指令，大多數(shù)瀏覽器僅當(dāng)被保存為xhtml或xml格式才有效，且JS不能處理這種CSS，所以不建議使用。
2、使用@import命令
在style元素之間使用@import命令導(dǎo)入外部的css文件
復(fù)制代碼
代碼如下:<head>
<style type="text/css">
<!--下面兩行代碼效果一樣
@import "mystyle.css";
@import url("mystyle.css");
-->
</style>
</head>
任何@import規(guī)則必須出現(xiàn)在所有規(guī)則之前。參數(shù)是一個(gè)css文件的URL地址。在一個(gè)css文件中也可以用@import指令將另一個(gè)css文件導(dǎo)入。
3、使用link元素
復(fù)制代碼
代碼如下:<head>
<link rel="stylesheet" href="css的url" type="text/css" >
</head>
這也是最常用的方式。
4、使用HTTP消息報(bào)頭鏈接到樣式表
可以使用HTTP消息報(bào)頭的link字段鏈接一個(gè)外部樣式表。
復(fù)制代碼
代碼如下:link:<mystyle.css>;rel=stylesheet;
//等同于<link rel="stylesheet" href="css的url" type="text/css" >
HTTP報(bào)頭中可以使用多個(gè)link，從而鏈接多個(gè)樣式表，且HTTP報(bào)頭中的link比HTML文檔中的link（head元素中）具有優(yōu)先級。
相關(guān)文章
HTML5的文檔結(jié)構(gòu)和新增標(biāo)簽完全解析
這篇文章主要介紹了HTML5的文檔結(jié)構(gòu)和新增標(biāo)簽完全解析,需要的朋友可以參考下2017-04-21- 這篇文章給大家介紹了html5文檔結(jié)構(gòu)標(biāo)簽的相關(guān)知識，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-04-21
如何在Dreamweaver cs6 中設(shè)置默認(rèn)文檔格式為html5
怎么設(shè)置Dreamweaver cs6 中默認(rèn)文檔格式為html5，很簡單，在編輯->首選參數(shù)中便可設(shè)置，如截圖，有需求的朋友可以參考下，希望對大家有所幫助2013-07-28- 想實(shí)現(xiàn)跨文檔消息傳輸首先要對窗口對象的message事件進(jìn)行監(jiān)聽，然后使用window對象的postMessage()方法向其他窗口發(fā)送消息，接下來為大家詳細(xì)介紹下，感興趣的朋友可以參考2013-04-01
HTML5之SVG 2D入門8—文檔結(jié)構(gòu)及相關(guān)元素總結(jié)
前面介紹了很多的基本元素，包括結(jié)構(gòu)相關(guān)的組合和重用元素，這里主要是對SVG的文檔結(jié)構(gòu)中剩下的相關(guān)元素簡單總結(jié)一下，感興趣的朋友可不要錯(cuò)過哦，然后繼續(xù)向前領(lǐng)略SVG的其2013-01-30- 多數(shù)人使用 HTML 4 和 XHTML 1 編寫網(wǎng)頁。相對較少的 HTML 狂熱者了解語義 HTML 的概念、驗(yàn)證 HTML 結(jié)構(gòu)和改進(jìn)文檔的可訪問性。高質(zhì)量的 HTML 文檔是反復(fù)權(quán)衡、設(shè)計(jì)優(yōu)選和2008-10-17
詳解HTML編程的標(biāo)記與文檔結(jié)構(gòu)
這篇文章主要介紹了詳解HTML編程的標(biāo)記與文檔結(jié)構(gòu),是HTML入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-08-01- 能在html文檔中遇到極大的ol列表可能性不大，本文只是純粹技術(shù)探討，感興趣的朋友可以了解下2013-10-14
- 昨天給添加了在線測試效果！打開后發(fā)現(xiàn)JS彈出框位置和效果不對！但是我在我本地測試是沒問題的！仔細(xì)檢查后發(fā)現(xiàn)原來是由于博客園的HTML文檔類型和我的不一樣。2010-10-29
- 網(wǎng)頁制作Webjx文章簡介：CSS通過與(X)HTML的文檔結(jié)構(gòu)相對應(yīng)的選擇器（selector）來達(dá)到控制頁面表現(xiàn)的目的，而文檔結(jié)構(gòu)不僅僅在CSS的應(yīng)用上非常重要，對于行為層（例如使用2009-04-02