接下來我們說下如何編寫我們的CSS樣式。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
</head>
<body>
<p style="color: red;font-size: 40px;">鋤禾日當(dāng)午，汗滴禾下土益涧。</p>
<p>誰知盤中餐锈锤，粒粒皆辛苦驯鳖。</p>
</body>
</html>=
1
2
3
4
5
6
7
8
9
10
11
12
內(nèi)聯(lián)樣式（可以將css樣式編寫到元素的style屬性當(dāng)中）：< p style=“color: red;font-size: 40px;” > 鋤禾日當(dāng)午，汗滴禾下土久免。< /p >這樣編寫在p標(biāo)簽內(nèi)部就是內(nèi)聯(lián)樣式浅辙，簡單說來內(nèi)聯(lián)樣式就是將我們的樣式直接編寫到我們的style屬性當(dāng)中，這種樣式我們稱之為內(nèi)聯(lián)樣式阎姥，內(nèi)聯(lián)樣式只對當(dāng)前元素內(nèi)容起作用记舆。內(nèi)聯(lián)樣式不方便我們重復(fù)使用。
但是此時我們的css和html都寫在一起了呼巴，這其中的color: red;font-size: 40px;就是css泽腮，我們說一個優(yōu)秀的頁面要求我們的結(jié)構(gòu)、表現(xiàn)衣赶、行為分離Ｕ锷蕖！府瞄！但是現(xiàn)在很明顯不滿足要求碧磅。所以內(nèi)斂樣式屬于結(jié)構(gòu)與表現(xiàn)的耦合，不方便后期維護(hù)，不推薦使用＞ń肌丰榴！
那說了這么多，不讓我們用秆撮，我們到底要怎么寫我們的CSS呢四濒？讓我們看看。
2像吻、內(nèi)部樣式
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
p{
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<p>鋤禾日當(dāng)午峻黍，汗滴禾下土。</p>
<p>誰知盤中餐拨匆，粒粒皆辛苦姆涩。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
內(nèi)部樣式表：也可以將CSS編寫到head中的style標(biāo)簽中。將我們的樣式表編寫到我們的style標(biāo)簽中惭每，通過我們的CSS選擇器(上面代碼中p{}就是選擇我們的p標(biāo)簽)選中指定元素骨饿，然后可以同時為這些元素一起設(shè)置樣式，可以時樣式進(jìn)一步的復(fù)用台腥。將我們的樣式表編寫到style標(biāo)簽中宏赘，也可以使結(jié)構(gòu)和表現(xiàn)進(jìn)一步分離，這也是我們推薦的使用方式黎侈。
我們推薦使用的內(nèi)部樣式能在這一個頁面中使用察署，但是如果我們想在其他頁面使用應(yīng)該怎么辦呢？來看看第三種樣式吧＞骸Ｌ簟！
3休吠、外部樣式
除了以上兩種方式扳埂，還可以將我們的CSS寫到外面去×鼋福可以在文件夾中新建一個css文件阳懂，將我們之前內(nèi)部樣式表style中的內(nèi)容放進(jìn)去。然后我們只需要將style.css文件進(jìn)入到我們的頁面中柜思。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-SJ1YVbuq-1587297716968)(/Users/mac/Desktop/MarkDown /CSS（一）圖片/3新建css文件.png)]
那怎么引入呢岩调？通過link標(biāo)簽！Ｉ呐獭号枕！
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>鋤禾日當(dāng)午，汗滴禾下土亡脑。</p>
<p>誰知盤中餐堕澄，粒粒皆辛苦邀跃。</p>
<p>鋤禾日當(dāng)午，汗滴禾下土蛙紫。</p>
<p>誰知盤中餐拍屑，粒粒皆辛苦。</p>
</body>
</html>?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
link標(biāo)簽中的rel坑傅、type都是固定的照抄就完事僵驰，href寫一個相對路徑就可以了。這樣就能將我們上面的style.css文件引入到我們的網(wǎng)頁了唁毒。讓我們來看一下效果
