CSS
將 HTML 穿上衣服化個妝
CSS 是什麼
階層式樣式表，Cascading Style Sheets，縮寫 CSS，設定網頁的樣式及佈局。 簡單說，就是讓 HTML 的外觀變得更符合人觀看的視覺呈現，也是在 1994 年發明的最原始動機。最早支持 CSS 的瀏覽器是 IE3 ，當商業化之後就會有人跟進，緊接著當然就會需要統一格式，於是 CSS level 1 於 1996 年 12 月成為了推薦標準，由 W3C （World Wide Web Foundation） 所制定。
我們直接來看看使用了 CSS 的效果，這樣可以讓您更能體會 CSS 的魔力，上個章節 HTML 裡的表格，在沒有 CSS 之下原始的呈現樣貌：
您可能會注意到不同瀏覽器預設的 HTML 外觀可能不盡相同，例如在 Firefox 或是 Chrome 看到的外觀可能不一樣，在稍後的「Reset」章節我們將學會如何消除瀏覽器間的預設外觀樣式。
現在，我們來看看使用 CSS 裝飾後的效果：
透過 CSS 的修飾，我們可以更容易理解網頁想要傳遞的資訊。
簡單來說，HTML 就好像是我們的身體，CSS 就好像是我們穿的衣服。
瀏覽器與 CSS 如何呈現網頁
瀏覽器將網頁呈現的簡易流程如下：
瀏覽器載入文件。
HTML 轉換成 DOM（Document Object Model，文件物件模型）。
瀏覽器蒐集所有 HTML 文件連到的資源，例如 CSS、Javascript
瀏覽器解析 (parse) CSS。
Style：根據選擇器計算最終結果。
Layout：計算空間與位置。
Painting：繪製視覺。
Composite：調整圖層順序。
DOM 與 CSS
每個標記語言都有稱作節點，眾多的節點行程樹狀結構，這個樹狀結構便稱為 Document Object Model ，簡稱 DOM。 可以使用瀏覽器透過 DOM 的檢視來檢驗 CSS 的計算過程與結果。
您可以使用瀏覽器內建的偵錯工具檢查 DOM 結構，以 Chrome 來說，可以使用以下方式觀看：
在網頁空白處按滑鼠右鍵，選擇「檢查」，選取「element」頁籤。
瀏覽器右上角的「...」->「更多工具」->「開發人員工具」->選取「element」頁籤。
Windows 系統使用「F12」快捷按鈕開啟。(一些筆電可能需要使用「fn」＋「F12」)
更多細節會在 DevTool CSS 檢查技巧 篇幅中提及。
從章節二開始，我們將會進入鑽研 CSS 的世界， 請再一次確認您所需要的設備，以確保學習的順暢度。
小結
多暸解、培養對 DOM 的概念，將有助於日後 CSS 除錯時節省時間。
作業
請在網路上搜尋關於 CSS 與瀏覽器的關係，找到一篇文章是你覺得你容易懂的教學，然後分享給大家。
參考來源
Last updated
