3分鐘：第 2 章 CSS
_04 什麼是 CSS？
樣式表（Style Sheet）是用來描述 HTML 所編寫的文件實際顯示方式的語言。假設你們用 HTML 畫了一隻小狗，那麼這隻小狗的尾巴有多長、頭有多小、身軀有多大，這種用來描述這些細節的語言就是 CSS。
換句話說，如果你畫好了骨架並幫它穿上衣服。到這裡為止如果是 HTML 的話，設定那件衣服的大小、是什麼顏色等屬性，就是 CSS 的工作。
那麼，來總結一下 HTML 和 CSS 各自扮演的角色如下：
HTML
- 幫骨架穿上衣服。
CSS
- 說明衣服長什麼樣子。
現在我們知道了 CSS 的作用，接著來學習 CSS 的基礎吧。
CSS 使用方法
- 撰寫 css 檔案後，在 HTML 檔案中引用來使用。
- 直接在 HTML 檔案中寫入 css 來使用。
- 利用 Javascript 來套用樣式。
當然，還有其他方法。不過，這裡介紹的是最常使用的方式。透過上述方法，你們可以讓 HTML 呈現出你們想要的樣子。
舉個例子。
請看以下的 HTML 程式碼。
<
html
>
<
head
>
</
head
>
<
body
>
<
p
>
Hello
</
p
>
</
body
>
</
html
>
在上述的 HTML 原始碼中，如果想讓「Hello」這個文字變成紅色，該怎麼表示呢？
只要加入以下的樣式代碼，你們就能看到紅色的「Hello」了。
<
html
>
<
head
>
<
style
>
.red_hello
{
color
:
red
;
}
</
style
>
</
head
>
<
body
>
<
p
class
=
"red_hello"
>
Hello
</
p
>
</
body
>
</
html
>
如果針對 CSS 詳細解釋的話，恐怕會超過 3 分鐘。因此，與其長篇大論，我為各位整理如下。
在 HTML 代碼中使用 CSS
- 建立 class 並套用到 HTML 標籤上。
- 直接在 HTML 標籤中加入 style。
有這兩種方法。
第一種是我上面使用的方法。那麼，直接加入的方法是什麼呢？透過下方的範例來介紹如何直接加入 style。
... 中略 ...
<
p
style
=
"color:red;"
>
Hello
</
p
>
... 中略 ...
像這樣使用，你們可以在不使用 class 的情況下，直接對該標籤套用樣式。
那麼，為什麼要使用 class 呢？如果你們想要讓某些詞彙變紅，如果採用直接撰寫的方式，每次都必須逐一在標籤內加入樣式。但若使用我一開始介紹的方法，就有一次將樣式套用到「擁有該 class 或 id」的所有標籤上的優點。
此外，若將樣式整理成「class」，日後還可以製作結合多個 class 的標籤。
CSS 疊加（巢狀/多重套用）
- 建立 btn class，字體大小為 20pt。
- .btn { font-size:20pt; }
- 建立 btn-danger class，文字顏色為 red。
- .btn-danger { color:red; }
若像上面這樣建立多個 class，並將想使用的 class 加入標籤中，樣式就會疊加套用。 若 class 中有相同的屬性，後套用的 class 屬性會覆蓋掉前面的。
下方是套用範例：
<
div
class
=
"btn"
>
大按鈕
<
div
>
<
div
class
=
"btn-danger"
>
紅色按鈕
<
div
>
<
div
class
=
"btn btn-danger"
>
又大又紅的按鈕
<
div
>
像這樣，利用樣式，你們可以隨心所欲地呈現 HTML 的標籤。
總結
- 樣式定義了呈現 HTML 的方式。
- 樣式可透過 class 疊加套用。但若有相同屬性，則套用最後一個 class 的屬性。
- 樣式也可以直接套用到標籤上。
3分鐘預告
- 好，現在已經幫它穿上顏色的衣服了。那麼，要讓這個傢伙動起來該怎麼做呢？