css代碼要寫在哪里呢？一共有4種編寫位置。
1 內(nèi)嵌式
顧名思義，內(nèi)嵌式就是直接嵌在html文件中。
就是在<head></head>標(biāo)簽對(duì)中，寫<style></style>標(biāo)簽對(duì)，然后在<style></style>標(biāo)簽對(duì)中寫CSS語句。
比如我在項(xiàng)目文件夾中，創(chuàng)建一個(gè)"內(nèi)嵌式.html"文件，里面寫如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>內(nèi)嵌式</title>
<style>
h1{color:red;}
</style>
</head>
<body>
<h1>我是一個(gè)主標(biāo)題</h1>
</body>
</html>
這就是內(nèi)嵌式的寫法。
這里是把h1標(biāo)簽的文字設(shè)置成紅色，瀏覽器中效果如下：
2 外鏈?zhǔn)?/strong>
所謂外鏈?zhǔn)剑褪前袰SS代碼保存在單獨(dú)的.css文件中，然后用<link>標(biāo)簽引入這個(gè)文件。
<link>標(biāo)簽語法如下：
<link>標(biāo)簽上的rel屬性，是英文單詞relationship的前三個(gè)字母，它的值是樣式表，這個(gè)屬性就表示你要引入的文件，和當(dāng)前這個(gè)HTML文件的關(guān)系是"stylesheet"，也就是說你要引入的文件是個(gè)樣式表。
<link>標(biāo)簽上的href屬性，表示引入文件的路徑和文件名。跟<a>標(biāo)簽的href屬性類似。
外鏈?zhǔn)降膬?yōu)點(diǎn)：多個(gè)HTML文件，可以共用一個(gè)CSS樣式表文件。
比如，
我在項(xiàng)目文件夾中，創(chuàng)建一個(gè)"外鏈?zhǔn)?html"文件，再在css文件夾中創(chuàng)建一個(gè)"css.css"文件。
然后在"css.css"這個(gè)文件中寫css代碼，在.css文件中寫css代碼，就不需要寫style標(biāo)簽了，直接寫css語句就行了。
比如我給p標(biāo)簽的文字設(shè)置成黃色。
然后我打開"外鏈?zhǔn)?html"文件，在<body>中寫幾個(gè)p標(biāo)簽，然后在<head></head>標(biāo)簽對(duì)中寫<link>標(biāo)簽，引入css文件，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外鏈?zhǔn)?lt;/title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<p>上天不給我的，無論我怎么十指緊扣，都會(huì)漏走，上天給我的，無論我怎么失手，都會(huì)擁有。</p>
</body>
</html>
通過<link>標(biāo)簽，就讓當(dāng)前的網(wǎng)頁文件，和<link>引入的css文件產(chǎn)生了綁定關(guān)系。
此網(wǎng)頁在瀏覽器中效果如下：
采用外鏈?zhǔn)剑偃缒阌卸鄠€(gè)網(wǎng)頁文件，那么你就可以在這些網(wǎng)頁文件中引入同一個(gè)css文件，這樣一份css代碼可以在多個(gè)HTML文件中起作用。也就是說，多個(gè)網(wǎng)頁文件可以共用一個(gè)樣式表。
3 導(dǎo)入式
導(dǎo)入式是在<style></style>標(biāo)簽對(duì)中寫一個(gè)@，然后緊跟import，然后一個(gè)空格，再寫url(css文件路徑/css文件名)。
即：
import這個(gè)單詞就表示導(dǎo)入的意思。
但是，導(dǎo)入式是最不常見的樣式表導(dǎo)入方法。
為什么呢？
因?yàn)椴捎脤?dǎo)入式方法引入樣式表，HTML結(jié)構(gòu)加載好了，但是css文件是單獨(dú)寫的，它還沒加載好，這時(shí)不會(huì)等css文件加載好，而是立即就渲染HTML結(jié)構(gòu)，這樣的話，用戶并不是直接看到有樣式的網(wǎng)頁，而是首先看到的就是白底黑字的網(wǎng)頁，然后等幾秒鐘之后，網(wǎng)頁才會(huì)顯示css文件中寫好的樣式。
所以這種方式，在工作中幾乎不用。但是為了知識(shí)更全面一些，還得知道它。
現(xiàn)在我再創(chuàng)建一個(gè)"導(dǎo)入式.html"，演示代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>導(dǎo)入式</title>
<style>
@import url(css/css.css);
</style>
</head>
<body>
<p>成熟和成長的過程，就是分清了什么樣的人能信任，什么樣的人不能信任。</p>
</body>
</html>
導(dǎo)入式，導(dǎo)入的也是單獨(dú)寫的css文件，所以我導(dǎo)入的是前面寫好的css.css這個(gè)文件。
瀏覽器中效果如下：
當(dāng)然現(xiàn)在我這個(gè)演示代碼寫的很簡(jiǎn)單，采用導(dǎo)入式，網(wǎng)頁的樣式也瞬間顯示了，但是假如說網(wǎng)頁比較復(fù)雜，或者說網(wǎng)速比較慢的情況下，很可能你首先看到的就是黑色的字，然后幾秒鐘之后，才變成黃色。
4 行內(nèi)式
所謂行內(nèi)式，就是直接在標(biāo)簽上面寫style屬性，然后style屬性的值就是css語句。
比如：
這就是行內(nèi)式的寫法。
行內(nèi)式也不常用。
為什么呢？
因?yàn)椴捎眯袃?nèi)式，既然是在標(biāo)簽上寫css語句，那么在哪個(gè)標(biāo)簽上寫css語句，就只能給哪個(gè)標(biāo)簽設(shè)置樣式。這就犧牲了樣式表批量設(shè)置樣式的能力。
但是后端工程師，為了省事，經(jīng)常使用行內(nèi)式。
現(xiàn)在我創(chuàng)建一個(gè)"行內(nèi)式.html"文件，演示一下行內(nèi)式。代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行內(nèi)式</title>
</head>
<body>
<p style="color:green">大處著眼</p>
<p style="color:green">小處著手</p>
<p style="color:green">群居守口</p>
<p style="color:green">獨(dú)居守心</p>
</body>
</html>
在瀏覽器顯示效果如下：
我們看到，我要把這4個(gè)p標(biāo)簽的文字都設(shè)置成綠色，就需要在每一個(gè)p標(biāo)簽上都寫style屬性。如果采用內(nèi)嵌式或者外鏈?zhǔn)降脑挘透?jiǎn)單，不用寫這么多重復(fù)的代碼。
感謝閱讀！知識(shí)總結(jié)不易，請(qǐng)點(diǎn)個(gè)贊或轉(zhuǎn)發(fā)鼓勵(lì)一下唄！想系統(tǒng)性學(xué)習(xí)前端的小伙伴可以關(guān)注我！
