# CSS

### CSS 是什麼

階層式樣式表，Cascading Style Sheets，縮寫 CSS，設定網頁的樣式及佈局。\
簡單說，就是讓 HTML 的外觀變得更符合人觀看的視覺呈現，也是在 1994 年發明的最原始動機。最早支持 CSS 的瀏覽器是 IE3 ，當商業化之後就會有人跟進，緊接著當然就會需要統一格式，於是 CSS level 1 於 1996 年 12 月成為了推薦標準，由 W3C （World Wide Web Foundation） 所制定。

[CSS Timeline](https://css-timeline.vercel.app/)

\
我們直接來看看使用了 CSS 的效果，這樣可以讓您更能體會 CSS 的魔力，上個章節 HTML 裡的表格，在沒有 CSS 之下原始的呈現樣貌：

{% embed url="<https://codepen.io/neillin1023/pen/dyKRvWq>" %}
HTML 表格原始外觀 - Blueplanet 教育訓練 - CSS
{% endembed %}

{% hint style="info" %}
您可能會注意到不同瀏覽器預設的 HTML 外觀可能不盡相同，例如在 Firefox 或是 Chrome 看到的外觀可能不一樣，在稍後的「Reset」章節我們將學會如何消除瀏覽器間的預設外觀樣式。&#x20;
{% endhint %}

現在，我們來看看使用 CSS 裝飾後的效果：

{% embed url="<https://codepen.io/neillin1023/pen/YzvQZeB>" %}

透過 CSS 的修飾，我們可以更容易理解網頁想要傳遞的資訊。

{% hint style="info" %}
簡單來說，HTML 就好像是我們的身體，CSS 就好像是我們穿的衣服。
{% endhint %}

### 瀏覽器與 CSS 如何呈現網頁

瀏覽器將網頁呈現的簡易流程如下：

* 瀏覽器載入文件。
* HTML 轉換成 DOM（Document Object Model，文件物件模型）。
* 瀏覽器蒐集所有 HTML 文件連到的資源，例如 CSS、Javascript
* 瀏覽器解析 (parse) CSS。
  * Style：根據選擇器計算最終結果。
  * Layout：計算空間與位置。
  * Painting：繪製視覺。
  * Composite：調整圖層順序。

<figure><img src="https://3433349642-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfNa3cQXA0JgS2aeBbzYg%2Fuploads%2FDCKFzITqFvgYq43rVyrD%2F%E6%88%AA%E5%9C%96%202022-11-15%20%E4%B8%8A%E5%8D%889.58.43.png?alt=media&#x26;token=2b0cf688-023e-4cfd-8354-f7142e8a8689" alt=""><figcaption><p><a href="https://developer.mozilla.org/zh-TW/docs/Learn/CSS/First_steps/How_CSS_works/rendering.svg">https://developer.mozilla.org/zh-TW/docs/Learn/CSS/First_steps/How_CSS_works/rendering.svg</a></p></figcaption></figure>

<figure><img src="https://www.w3schools.com/js/pic_htmltree.gif" alt=""><figcaption><p><a href="https://www.w3schools.com/js/pic_htmltree.gif">https://www.w3schools.com/js/pic_htmltree.gif</a></p></figcaption></figure>

<figure><img src="https://web-dev.imgix.net/image/T4FyVKpzu4WKF1kBNvXepbi08t52/gfQC4uOnIbLVtkdvbSY4.jpg?auto=format&#x26;w=845" alt=""><figcaption><p><a href="https://web-dev.imgix.net/image/T4FyVKpzu4WKF1kBNvXepbi08t52/gfQC4uOnIbLVtkdvbSY4.jpg?auto=format&#x26;w=845">https://web-dev.imgix.net/image/T4FyVKpzu4WKF1kBNvXepbi08t52/gfQC4uOnIbLVtkdvbSY4.jpg?auto=format&#x26;w=845</a></p></figcaption></figure>

### DOM 與 CSS

每個標記語言都有稱作節點，眾多的節點行程樹狀結構，這個樹狀結構便稱為 Document Object Model ，簡稱 DOM。 可以使用瀏覽器透過 DOM 的檢視來檢驗 CSS 的計算過程與結果。

您可以使用瀏覽器內建的偵錯工具檢查 DOM 結構，以 Chrome 來說，可以使用以下方式觀看：

* 在網頁空白處按滑鼠右鍵，選擇「檢查」，選取「element」頁籤。
* 瀏覽器右上角的「...」->「更多工具」->「開發人員工具」->選取「element」頁籤。
* Windows 系統使用「F12」快捷按鈕開啟。(一些筆電可能需要使用「fn」＋「F12」)<br>

更多細節會在 [DevTool CSS 檢查技巧](https://bpio.gitbook.io/docs/edu-css/chapter6-others/devtool) 篇幅中提及。

{% hint style="info" %}
從章節二開始，我們將會進入鑽研 CSS 的世界，\
[請再一次確認您所需要的設備](https://bpio.gitbook.io/docs/edu-css/getting-start#zhun-bei-gong-ju)，以確保學習的順暢度。
{% endhint %}

### 小結

多暸解、培養對 DOM 的概念，將有助於日後 CSS 除錯時節省時間。

### 作業

請在網路上搜尋關於 CSS 與瀏覽器的關係，找到一篇文章是你覺得你容易懂的教學，然後分享給大家。

### 參考來源

* [CSS 入門](https://developer.mozilla.org/zh-TW/docs/Learn/CSS/First_steps)
* [先來說點 CSS 誕生的前情提要～（上）](https://ithelp.ithome.com.tw/articles/10215717)
* [先來說點 CSS 誕生的前情提要～（下）](https://ithelp.ithome.com.tw/articles/10216365)
* [How CSS works](https://developer.mozilla.org/zh-TW/docs/Learn/CSS/First_steps/How_CSS_works)
* [Rendering Performance](https://web.dev/rendering-performance/)
