CSS引入方式 隨學筆記
阿新 • • 發佈：2021-10-24
CSS有三種引入樣式：內部樣式表、行內樣式表、外部樣式表
1.內部樣式表： 所謂內部樣式表，就是在html頁面內部寫樣式，但是是單獨寫道<style>標籤內部。 理論上style標籤可以放到任何一個地方，但一般放在head標籤內， 特性： 此種方式可以方便控制整個頁面的元素樣式設定； 程式碼結構非常清晰，但是並沒有實現結構與樣式完全分離。 使用內部樣式表設定CSS，通常也被稱為嵌入式引入，這種方式是我們練習時常用的方式。 <style>
div {
color: deeppink;
}
</style>
</head>
<body>
<div>泰戈爾經典語錄</div>
</body>
2.行內樣式表:
行內樣式表（內聯樣式表）是在元素標籤內部的style屬性中設定CSS樣式，適合於修改簡單樣式。 例如：<p style="color: deeppink; font-size: 18px;" >寂靜在喧囂裡低頭不語，沉默在黑夜裡與目光結交，於是，我們看錯了世界，卻說世界欺騙了我們。</p>
style其實就是標籤屬性， 注意： 在雙引號中間，寫法要符合CSS規範； 可以控制當前的標籤設定樣式； 由於書寫繁瑣，並且沒有體現出結構與樣式相分離的思想，所以不推薦大量使用，只有對當前元素新增簡單樣式的時候，可以考慮使用。 使用行內樣式表設定CSS，也被稱為行內式引入。 3.外部樣式表： 實際開發都是外部樣式表，適合於樣式比較多的情況，核心是：樣式單獨寫到CSS檔案中，之後吧CSS檔案引入到HTML頁面中使用，完全實現了結構與樣式相分離，可以控制多個頁面。 引入外部樣式表分為兩步： 1.新建一個字尾名為.css的樣式檔案，把所有CSS程式碼都放入此檔案中； 2.在HTML頁面中，使用<link>標籤引入這個檔案。 語法：<link rel="stylesheet" href="css檔案路徑" rel：定義當前檔案與被連結文件之間的關係，在這裡需要指定為"stylesheet",表示被連結的文件是一個樣式表文件； href：定義所連結外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。 使用外部樣式表設定CSS，通常也被稱為外鏈式或連結式引入，這種方式是開發中常用的方式。 html檔案：
<link rel="stylesheet" href="CSS檔案/style.css">
</head>
<body>
<div>泰戈爾經典語錄</div>
</body>/* CSS檔案裡只有樣式，沒有標籤 */
div {
color: aquamarine;
}