# 如何使用 CSS

## 第一種方式：inline

在我們建立了 HTML 檔之後，我們想要裝飾 HTML，最直接的想法就是在想要裝飾的標籤上增加樣式。\
例如下面這個範例將會讓「請注意！」變成紅色字：

<pre class="language-html"><code class="lang-html"><strong>&#x3C;p>這裡是重點，&#x3C;span style="color: red;">請注意！&#x3C;/span>&#x3C;/p>
</strong></code></pre>

只要在想裝飾的地方，加上`style=""`，就可以在該標籤附上樣式（屬性: 值;），就是這麼簡單。

### 第二種方式：\<style>\</style> (Internal style sheet)

第一種方式很明確的在想要增加樣式的地方做修改，但隨著修改的地方變多，整個 HTML 會變得破碎，影響開發人員後續的維護性以及權重太高（在[權重與選擇器](https://bpio.gitbook.io/docs/edu-css/chapter2-css-basic/selector)篇幅會更詳細地解說），為了好管理，我們會將所有樣式集中在 \<head>\</head> 裡，如下範例：

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
    <style>
      span {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>這裡是重點，<span>請注意！</span></p>
  </body>
</html>
```

在這個範例中，我們在 \<head> 裡增加了 \<style>，意思就是在 \<style> 裡寫 CSS 改變樣式，這樣也能改變「請注意！」的文字顏色。其中 span {} 是使用了 CSS 的選擇器，在這個範例裡，只要是 \<span> 都會是紅色文字，利用 {} 界定範圍。詳細部分我們會在[權重與選擇器](https://bpio.gitbook.io/docs/edu-css/chapter2-css-basic/selector)篇幅詳細解說，現在，我們只要知道這樣子也可以使用 CSS 就可以了。

如此一來，我們只要專心在 \<style> 裡面寫 CSS 就好了，也不會污染 HTML 標籤的可讀性與易維護性。

### 第三種方式：\<link> (External style sheet)

第二種方式比起第一種方式更容易管理，但還是會在 HTML 裡佔了一些篇幅，為了更專心於 HTML ，我們會再把 \<style> 裡的內容，移出去外面獨立成一個檔案，而此檔案的副檔名會命名為 `.css`，接著 HTML 再執行連接，依然能達成同樣效果：

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p>這裡是重點，<span>請注意！</span></p>
  </body>
</html>
```

```css
/* style.css */
span {
 color: red;
}
```

此種方式將樣式獨立成一個檔案，達到了易管理、單純化，但必須小心 href 的路徑是否正確，如果路徑不正確將會導致連結不到樣式，在此範例中就不會產生文字顏色的變化。

### 小結

三種方式都有實用的地方，在未來越來越熟 CSS 的過程中您就會理解。

### 作業

請實際操作三種方式練習 CSS 的使用。
