引入CSS的方法
2020/11/9 9:00:12 閱讀：9054
發(fā)布者：9054
【外部樣式表】
在link標(biāo)記中rel和href屬性是必須的，type屬性和media屬性可省略
<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />
若CSS文件中存在除了CSS樣式和CSS注釋的其他標(biāo)記，則會導(dǎo)致在該標(biāo)記后面的CSS樣式將無法被識別,CSS注釋只支持/**/的寫法，不支持//的寫法
多個(gè)樣式表
一個(gè)文檔可能關(guān)聯(lián)多個(gè)樣式表，如果是這樣，文檔最初顯示時(shí)只會使用rel為stylesheet的link標(biāo)記
候選樣式表
將rel屬性的設(shè)置為alternate stylesheet可以定義候選樣式表，只有在用戶選擇這個(gè)樣式表時(shí)才會用于文檔表現(xiàn)。如果瀏覽器能使用候選樣式表，它會使用link元素的title屬性值生成一個(gè)候選樣式列表，可在菜單欄中查看->樣式中進(jìn)行選擇。(IE和firefox支持)
[注意]若一個(gè)候選樣式表沒有設(shè)置title，那么它將無法在候選樣式列表中出現(xiàn)，則無法被引用
<link rel="stylesheet" type="text/css" href="sheet1.css" />
<link rel="alternate stylesheet" type="text/css" href="sheet2.css" title="sheet2"/>
【內(nèi)部樣式表】
使用style元素
內(nèi)部樣式表需要使用<style>元素包含樣式表，它在文檔中單獨(dú)出現(xiàn)。
<style>
body{
background-color: red;
}
</style>
多個(gè)style標(biāo)簽
文檔中可出現(xiàn)多個(gè)style標(biāo)簽，且樣式規(guī)則與層疊樣式規(guī)則一致
<style>
body{
background-color: red;
}
</style>
<style>
body{
background-color: blue;
height: 100px;
border: 10px solid black;
}
</style>
【使用@import指令】
與link類似，@import指令用于指示W(wǎng)eb瀏覽器加載一個(gè)外部樣式表，并在表現(xiàn)HTML文檔時(shí)使用其樣式。唯一的區(qū)別在于命令的具體語法和位置。@import指令常用于樣式表需要使用另一個(gè)樣式表中的樣式的情況。
<style>
@import url(sheet2.css);
body{
background-color: red;
}
</style>
[注意]@import必須出現(xiàn)在style元素中，且要放在其他CSS規(guī)則之前，否則將根本不起作用。
多個(gè)@import指令
可以使用@import指令導(dǎo)入多個(gè)CSS樣式表，且可以使用media來限制應(yīng)用場景。
<style>
@import url(sheet1.css) all;
@import url(sheet2.css);
</style>
【行間樣式】
如果只是想為單個(gè)元素指定一些樣式，可以使用HTML的style屬性來設(shè)置一個(gè)行間樣式。
<body style="background-color: red; height: 100px; border: 10px solid black;" style="background-color: red;">
[注意]行間樣式若存在多個(gè)style屬性，只能識別第一個(gè)
<!-- 只能識別第一個(gè)style屬性的值，所以頁面顯示為紅色-->
<body style="background-color: red; height: 100px; border: 10px solid black;" style="background-color: blue;">
