CSS學習摘要-引入樣式
CSS學習摘要-引入樣式
註：主要是摘錄自MDN 網絡開發者這個網站的。
CSS 實際上如何工作？
當瀏覽器顯示文檔時，它必須將文檔的內容與其樣式信息結合。它分兩個階段處理文檔：
- 瀏覽器將 HTML和 CSS轉化成 DOM（文檔對象模型）。DOM在計算機內存中表示文檔。它把文檔內容和其樣式結合在一起。
- 瀏覽器顯示 DOM 的內容。
如何將你的 CSS 應用到你的 HTML 上
這有你常見的三種不同方式將 CSS 應用到 HTML 文檔上，有的方式比其他方式更有用。在這裏，我們將簡要回顧一下每一種方式：
外部樣式表 (推薦)
你已經在這篇文章看到了外部樣式表，但是並不知道它的名字。外部樣式表是指：當你將你的 CSS 保存在一個獨立的擴展名為 .css 的文件中，並從HTML的 <link>
<link rel="stylesheet" href="style.css">HTML 中元素指定了外部資源與當前文檔的關系。
這個元素的用途包括為導航定義一個關系框架。這個元素經常用來鏈接樣式表（如CSS文件）。
此時 HTML 文件看起來像這樣：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<link rel="stylesheet" 以及下面的 CSS 文件
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}這種方法可以說是最好的，因為你可以使用一個樣式表來設置多個文檔的樣式，並且需要更新 CSS 的時候只要在一個地方更新。
另：外部樣式表-導入式
和link有一點點 不同，使用的是@import url外接樣式表。
<style type="text/css">
@import url(‘./index.css‘);
</style>內部樣式表
內部樣式表是指不使用外部 CSS 文件，而是將你的 CSS 放置在<style>元素中，(HTML的<style>元素包含了文檔的樣式化信息或者文檔的一部分，該標簽的樣式信息通常是CSS的格式。) 該元素包含在 HTML head 內。
此時HTML看起來像這樣：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>這在某些情況下很有用（也許你正在使用一個內容管理系統，不能直接修改 CSS 文件），但它不如外部樣式表高效 —— 在網站中，CSS 將需要在每個頁面重復，並且需要更新時要更改多個位置。
內聯樣式
內聯樣式是僅影響一個元素的CSS聲明，被 style屬性包括著:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
</head>
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
<p style="color:red;">This is my first CSS example</p>
</body>
</html>除非有必要，否則不要這麽做！這很難維護（你可能不得不在每份文檔裏更新多次同樣的信息），並且它還混合了 CSS 表示的樣式信息和 HTML 的結構信息，使 CSS 難以閱讀和理解。保持不同類型代碼的分離和純凈使處理該代碼的任何人工作更為容易。
您唯一可能需要使用內聯樣式是當您的工作環境真的非常受限（也許您的CMS只允許您編輯 HTML 的 body）。
總結
在HTML中引入css方式總共有三種：
- 行內樣式
style - 內接樣式
<style> - 外接樣式 (推薦規範）
3.1 鏈接式（link）
3.2 導入式（@import url）
end
2018-05-30
CSS學習摘要-引入樣式