內(nèi)聯(lián)式CSS樣式
其實(shí)就是用html中style屬性
<p style="color:blue">示例</p>
嵌入式CSS樣式
嵌入式css樣式，就是可以把css樣式代碼寫在<style type=“text/css”></style>標(biāo)簽之間。
(樣式一多，內(nèi)聯(lián)式就很繁雜，不易于閱讀和維護(hù)，這沒法發(fā)揮CSS的優(yōu)勢了)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>嵌入式css</title>
<style type="text/css"> /*嵌入式css是在head里面的*/
span{
color:blue;
/*注意看，color后面跟的是冒號，blue沒有雙引號，最后有一個(gè)分號*/
font-weight:bold;
}
</style>
</head>
<body>
<p><span>《溫泉》</span>這首歌好好聽！</p>
</body>
</html>
外部式CSS樣式
基礎(chǔ)語法
外部式css樣式(也可稱為外聯(lián)式)就是把css代碼寫一個(gè)單獨(dú)的外部文件中，這個(gè)css樣式文件以“.css”為擴(kuò)展名，在<head>內(nèi)（不是在<style>標(biāo)簽內(nèi)）使用<link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)
<link href="example.css" rel="stylesheet" type="text/css" />
- href 規(guī)定被連接文檔的位置
- rel="stylesheet"表示鏈接文檔為當(dāng)前文檔的外部樣式表
- type=“text/css"描述鏈接的是樣式表類型
HTML<link>標(biāo)簽
<link> 標(biāo)簽定義文檔與外部資源的關(guān)系，最常見的用途是鏈接樣式表。
link 元素是空元素，它僅包含屬性。只能存在于 head 部分，不過它可出現(xiàn)任何次數(shù)。
(上圖來自w3school，侵刪)
代碼示例
/*這是一個(gè)css文件，命名為try.css*/
span {
color: blue;
font-weight: bold;
}
<!DOCTYPE html>
<!--這是一個(gè)HTML文件-->
<html>
<head>
<meta charset="UTF-8">
<title>外部式css</title>
<link href="try.css" rel="stylesheet" type="text/css" />
<!--此處url這樣寫是因?yàn)槲野裻ry.css和這個(gè)html放在同一目錄下了-->
</head>
<body>
<p><span>《溫泉》</span>這首歌好好聽！</p>
</body>
</html>
文章來源：http://www.zghlxwxcb.cn/news/detail-462435.html
三種鏈接方式的優(yōu)先級
就近原則文章來源地址http://www.zghlxwxcb.cn/news/detail-462435.html
后記
- 堅(jiān)持打卡第8天了，開始css
- 學(xué)的時(shí)候發(fā)現(xiàn)以前以為是html知識(shí)的東西原來嚴(yán)格上是css的，但是實(shí)際應(yīng)用不必太過于糾結(jié)吧
- 歡迎關(guān)注我加入每日打卡~
- 《溫泉》是許嵩的歌
到了這里，關(guān)于CSS的三種鏈接方式（內(nèi)聯(lián)式、嵌入式、外部式）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
