編輯章節｜學呀 - 學什麼都好

章節名稱

章節類別

章節標籤

或者建立新標籤

全螢幕編輯與預覽

# 什麼是CSS？

## CSS 讓 HTML 變漂亮

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

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

![](https://www.w3docs.com/uploads/media/default/0001/05/6d07a36ebe6d55273b39440f2391f1d7e6d4092a.png)

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

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

## 所以 CSS 究竟如何運作？

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

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

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

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

![](https://www.zetria.org/content_img/9chatygty.jpg)
::: suggestion
詳細的操作方法將會在之後的章節介紹。此章節僅提供 CSS 的簡單介紹。

:::

儲存章節