CSS學習摘要引入樣式

當瀏覽器顯示文件時，它必須將文件的內容與其樣式資訊結合。它分兩個階段處理文件：

瀏覽器將 html和 css轉化成 dom（文件物件模型）。dom在計算機記憶體中表示文件。它把文件內容和其樣式結合在一起。

瀏覽器顯示 dom 的內容。

這有你常見的三種不同方式將 css 應用到 html 文件上，有的方式比其他方式更有用。在這裡，我們將簡要回顧一下每一種方式：

你已經在這篇文章看到了外部樣式表，但是並不知道它的名字。外部樣式表是指：當你將你的 css 儲存在乙個獨立的擴充套件名為 .css 的檔案中，並從html的元素中引用它。

html 中元素指定了外部資源與當前文件的關係。

這個元素的用途包括為導航定義乙個關係框架。這個元素經常用來鏈結樣式表（如css檔案）。

此時 html 檔案看起來像這樣：

this is my first css example

以及下面的 css 檔案

h1

p

這種方法可以說是最好的，因為你可以使用乙個樣式表來設定多個文件的樣式，並且需要更新 css 的時候只要在乙個地方更新。

另：外部樣式表-匯入式

和link有一點點不同，使用的是@import url外接樣式表。

內部樣式表是指不使用外部 css 檔案，而是將你的 css 放置在元素中，(html的元素包含了文件的樣式化資訊或者文件的一部分，該標籤的樣式資訊通常是css的格式。) 該元素包含在html head內。

此時html看起來像這樣：

this is my first css example

這在某些情況下很有用（也許你正在使用乙個內容管理系統，不能直接修改 css 檔案），但它不如外部樣式表高效 —— 在**中，css 將需要在每個頁面重複，並且需要更新時要更改多個位置。

內聯樣式是僅影響乙個元素的css宣告，被style屬性包括著:

this is my first css example

除非有必要，否則不要這麼做！這很難維護（你可能不得不在每份文件裡更新多次同樣的資訊），並且它還混合了 css 表示的樣式資訊和 html 的結構資訊，使 css 難以閱讀和理解。保持不同型別**的分離和純淨使處理該**的任何人工作更為容易。

您唯一可能需要使用內聯樣式是當您的工作環境真的非常受限（也許您的cms只允許您編輯 html 的 body）。

在html中引入css方式總共有三種：

行內樣式style

內接樣式

end2018-05-30

CSS學習摘要 引入樣式