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