為什麼要用CSS？

Go to Previous Section:
什麼是CSS？這是 CSS 入門入門的第二個章節，將會介紹CSS和文件間的關係。在練習中，你將會學習到如何把 CSS樣式表（ CSS stylesheet）加到我們在第一個章節中所新增的檔案裡。

為什麼要用CSS？

CSS用來定義文件的樣式，包含呈現在各種裝置或不同螢幕大小上的排版、設計...等。你可以把CSS 樣式表包在<head>裡面，或是把它寫在另一個外部獨立的檔案；要連接這個外部檔案，就只要把連結寫在<head>裡面即可。

一個獨立於你原有HTML內容以外的樣式表有許多優點：

減少重複
便於維護
在一個檔案中即可完成全站性的調整

範例

使用 CSS 的話，你可以在一個檔案裡面，儲存全頁元素都能共享的樣式化指示。例如，一個文件和定義 h2 標題樣式的樣式表連結後，透過修改該樣式表的屬性，你可以全面套用 h2 標題的樣式。

當用戶瀏覽網頁時，用戶的瀏覽器會把樣式化資訊與頁面內容一同載入。

如果用戶要列印網頁，你也可以提供令列印頁面好閱讀的樣式資訊。

HTML 與 CSS 是怎麼協同工作的？通常，你會用 HTML 來描述文件內容，而不描述樣式。你會用 CSS 來描述文件樣式，而不描述內容。之後，你會看到這個通則的某些例外。

更多資訊

諸如 HTML 之類的標示語言，提供了一些指定樣式的方法。

像是在 HTML 你可以用 <b> 標籤讓文字變粗，你也可以 <body> 標籤內，指定頁面的背景顏色。

當你用 CSS 的時候，通常你要避免在標記語言內，使用這樣的功能。這樣你所有文件的樣式資訊，才能集中同一處管理。

行動：建立一個樣式表

在你第一章放置 doc1.html 文件的目錄裡，再建立一個文字檔案。
把這個文件命名為：style1.css。這個檔案就是你的樣式表。
在這個 CSS 檔案內，複製貼上這行後存檔：
```
strong {color: red;}
```

連結你的文件與樣式表

要把你的文件與樣式表連結起來，請編輯你的 HTML 檔案，把高亮起來的那行加進去。

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Sample document</title>
  <link rel="stylesheet" href="style1.css">
  </head>
  <body>
    <p>
      <strong>C</strong>ascading
      <strong>S</strong>tyle
      <strong>S</strong>heets
    </p>
  </body>
</html>

存檔並重新整理你的瀏覽器。樣式表會讓 <strong> 裡面的文字變成紅色，如下所示：

View above Demo

Challenge

In addition to red, CSS allows some other color names.

Without looking up a reference, find five more color names that work in your stylesheet.

Possible solution

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

Hide solution

See a solution for the challenge.

接下來呢？

Go to Next Section:
How CSS works.Now you have a sample document linked to a separate stylesheet, you are ready to learn more about how your browser combines them when it displays the document.

為什麼要用CSS？