---
title: CSS 入門
tags: 網頁組
---

# CSS 入門 - 前言

在看完了基礎的 HTML 以後，我們要來學著使用 CSS 來去定義我們的網頁應該要長怎樣，所以本章節會先帶過一些基本的 CSS 用法以後，讓大家試著去修改自己上一章做的課表。

:::info
上課簡報：[網頁組教學簡報](https://docs.google.com/presentation/d/1PL-ZZ1Kk5x4l6l2d5jyqxpzgI5WHL7NenVoT8dbhhcQ/edit?usp=sharing)
:::

# 本節目標

- 實際運用 CSS
- 透過 CSS 修飾上一章節做出的課表

# HTML 和 CSS 的分工
在 CSS 問世前(~1996)，網頁開發者偏好使用 HTML 標籤的屬性來指派樣式，例如：

<p><font size="+3" color="red"><b>一段文字</b></font></p>

這樣的用法會導致程式碼變得難以閱讀，在後續的修改也會十分困難，而使用 CSS 可以大幅減少這樣的問題。

> CSS 的全名是 Cascading Style Sheets，譯為「階層式樣式表」，他專注在外貌的設定上，讓 HTML 專注於文件的結構，因此讓網頁原始碼回歸成乾淨俐落的文件。

# CSS 語法規則
- 選擇器 (selector) 定義你的樣式對誰有作用，它對應的可能是 HTML 標籤名稱或者是 class 和 id 屬性，我們在後面會再介紹選擇器。
- { }：大括號包圍了一個宣告區域，任何寫在這個區域裡的設定，會對文件裡所有的 `<h1></h1>` 標籤起作用。
- 屬性與值：在圖例中，我們宣告選擇器，也就是 `<h1></h1>` 的「文字顏色」(color) 屬性的值是 #ff6600。請注意 CSS 是用冒號 ( : ) 而非等號 (=) 來設定。
- 每條宣告用分號 ( ; ) 隔開

# 套用方式

那我們應該要把這段 CSS 放在哪裡呢?

最快速的作法是直接放在 index.html 裡面：

<style>
    h1 {
        color:#ff6600;
    }
</style>

但是這樣做的話只能影響到當前的頁面，假如有兩個頁面需要相同的設定，我們必須要在另一個網頁也寫上這段，假如需要修改的話，一樣要修改很多次。

所以最好的做法是將 CSS 的部分獨立成另一個檔案，並且在 html 裡面引入他。

<link rel+"stylesheet" href="style.css">

讓我們來認識一下引入外部檔案的 HTML 標籤：

- `<link>` 是一種「後設元素」(meta element)只能放在標頭裡，他可以載入外部檔案。所以瀏覽器讀取到這一行時，就會自動載入 CSS 文件的全部內容。
- rel='stylesheet' 告訴文件載入的資源是樣式表，所以瀏覽器就知道要用讀 CSS 的方式去處理載入的內容。
- href='style.css' href 屬性和 `<a>` 標籤時的用法一樣，描述路徑，讓瀏覽器找得到檔案。

## CSS 選擇器

CSS 提供了一個簡單好用的寫法，也就是使用一種叫作 class (或 id) 的命名方式，先替 HTML 標籤命名，我們知道對標籤命名的目的與方便之處，但是，為什麼又需要分成 class/id 的兩種命名方式呢？

這裡用上的是權重的概念。也就是說，CSS 的選擇器中存在著權重的排序，在 id 和 class 比較之下，id 的優先度會勝過 class。也由於這個緣故，所以在撰寫與命名的時候，特別需要留意先後順序以及採用的到底是 id 或是 class！

在一個網頁上，有的樣式可能只會出現一次，這種情況就適用 id。它表達的是獨一無二的設定。

但也有些樣式是會不斷出現的，如果這些不斷出現的樣式，每次出現就重寫一次，那絕對會是一個很不理智的作法。我們預期的是：寫一次，用很多次（write one, use everywhere），class 就是一個這樣的概念。

幾種 CSS 選取方法：

- 直接選取標籤：直接輸入標籤名稱，就可以做樣式設定

index.html
<div></div>

style.css
div{
    color:red;
}

- 選取 class name：使用符號 .，選取 class name

index.html
<div class="test"></div>

style.css
.test{
    color:red;
}

- 選取 id name：使用符號 #，選取 id name

index.html
<div id="test"></div>

style.css
#test{
    color:red;
}

# 練習題目

以上看完了一些基礎的介紹之後，我們來練習使用 CSS 美化課表。

- 目標：使用 CSS 裝飾課表

範例課表：

:::success
- 線上位置：https://jsfiddle.net/Blajja0916/tg6fsmjo/
:::

---

## 參考資料
:::info
[CSS 教學語法入門：認識 CSS 選擇器與 Box model 介紹](https://tw.alphacamp.co/blog/css-guide-box-model)
:::

---

在經過簡單的練習之後，[下一篇](/cDgMHVdGSlaoWugGckxqlw)希望大家能夠運用所學，做出一個簡單的自我介紹網頁。