什麼是CSS？

CSS 讓 HTML 變漂亮

這十幾年裡，網際網路成為了我們日常生活中不可或缺的一部分。對於一位使用者而言，在使用網路時，最想要遇到的必定就是介面簡單、明瞭、易操作的網站了；而對於一位網頁設計師而言，如何將網頁設計得讓使用者覺得簡單，便是一大功課了！

在什麼是HTML？ 的章節中我們提到，每一個網站背後的基本架構，都是由 HTML 這個標籤程式語言所構成的。它提供基本的網頁版面切割，將一個網頁切割成不同的部分以供設計師編輯。

然而，因為它的功能只有切割版面，單單 HTML 本身，並沒有辦法為網站帶來特別的視覺效果。也就是說，網頁設計師無法單單用 HTML 來決定網站的細部設計——按鈕大小、字體顏色、響應式網頁，等。

這個時候，CSS 便派上用場了！CSS（全名：Cascading Style Sheets）的工作即為將切割完後的 HTML 網頁美化，讓設計師能夠將網頁中的每個細節都變得更完善。接下來，讓我們來看看 CSS 是如何將 HTML 變漂亮的吧！

所以 CSS 究竟如何運作？

讓我們假設，在一個很簡單的 HTML 檔案裡，有一個 h1 標籤，如下：

<h1>你好我是標題:我想變色</h1>  

接著，我們想要將 h1 標籤內的文字改為紅色，但是要怎麼做呢？沒錯！即是要使用 CSS 來修飾它。我們可以在檔案中加入像這樣的文字：

h1{color: red;}  

此行程式碼中，一開始先告訴電腦我們所欲選取的 HTML 標籤是 h1。接著，在大括號內，我們告訴電腦 color: red;，也就是將字體顏色設為紅色的意思！是不是相當的簡單呢？

讓我們來看看上述的程式碼在瀏覽器中所呈現出來的結果吧！下圖中的左側即為被更改成紅色後的標題文字，右側為瀏覽器的程式碼視窗（有興趣的話，可以對著這個頁面按下滑鼠右鍵，點擊選單中的檢視按鈕哦！）