理解CSS

什麼是 CSS?

CSS是一種用於向用戶指定文檔如何呈現的語言 — 它們如何被指定樣式、佈局等。

CSS如何影響HTML？

Web瀏覽器將CSS規則應用於文檔以影響它們的顯示方式。一個CSS規則由以下組成：

• 一組 屬性 ，屬性的值更新了 HTML 的內容的顯示方式。比如，我想讓元素的寬度是其父元素的50％，或者元素背景變爲紅色。
• 一個 選擇器，它選擇元素，這（些）元素是你想應用這些最新的屬性值於其上的元素。比如，我想將我的CSS規則應用到我HTML文檔中的所有段落上。

樣式表中的一組CSS規則確定了網頁如何顯示，你將在下一篇文章中瞭解更多關於CSS語法的內容 — CSS 語法。

CSS 實際上如何工作？

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

1. 瀏覽器將 HTML 和 CSS 轉化成 DOM （文檔對象模型）。DOM在計算機內存中表示文檔。它把文檔內容和其樣式結合在一起。
2. 瀏覽器顯示 DOM 的內容。

如何將你的 CSS 應用到你的 HTML 上

外部樣式表

<link rel="stylesheet" href="style.css">

內部樣式表

<style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>

內聯樣式

<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>

引用自：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works