《冰汽時代》資源基礎知識講解
阿新 • • 發佈：2021-06-09
css引入方式
按照 CSS 樣式書寫的位置（或者引入的方式），CSS 樣式表可以分為三大類：
- 行內樣式表（行內式）
- 內部樣式表（嵌入式）
- 外部樣式表（連結式）
行內樣式表（行內式）
行內樣式表（內聯樣式表）是在元素標籤內部的 style 屬性中設定 CSS 樣式。適合於修改簡單樣式
<div style="color: red; font-size: 12px;">青春不常在，抓緊談戀愛</div>
style 其實就是標籤的屬性，在雙引號中間，寫法要符合 CSS 規範，可以控制當前的標籤設定樣式，使用行內樣式表設定 CSS，通常也被稱為行內式引入
由於書寫繁瑣，並且沒有體現出結構與樣式相分離的思想，所以不推薦大量使用，只有對當前元素新增簡單樣式的時候，可以考慮使用
內部樣式表
內部樣式表（內嵌樣式表）是寫到html頁面內部，是將所有的 CSS 程式碼抽取出來，單獨放到一個 <style> 標籤中。
<style>
div {
color: red;
font-size: 12px;
}
</style>
<style>標籤理論上可以放在HTML文件的任何地方，但一般會放在文件的<head>標籤中- 通過此種方式，可以方便控制當前整個頁面中的元素樣式設定
- 程式碼結構清晰，但是並沒有實現結構與樣式完全分離
- 使用內部樣式表設定 CSS，通常也被稱為嵌入式引入，這種方式是我們練習時常用的方式
外部樣式表
實際開發都是外部樣式表。
適合於樣式比較多的情況， 核心是：樣式單獨寫到CSS 檔案中，之後把CSS檔案引入到 HTML 頁面中使用。
引入外部樣式表分為兩步：
-
新建一個字尾名為
.css的樣式檔案，把所有 CSS 程式碼都放入此檔案中。 -
在 HTML 頁面中，使用
<link>標籤引入這個檔案。
<link rel="stylesheet" href="css檔案路徑">