---
# System prepended metadata

title: Front End -- CSS
tags: [web develope]

---

# Front End -- CSS
###### tags: `web develope`

在 CSS 問世前(~1996)，網頁開發者偏好使用 HTML 標籤的屬性來指派樣式，例如：
```htmlembedded=
<p><font size="+3" color="red"><b>一段文字</b></font></p>
```
這樣的作為衍生不少問題，例如讓網頁內容包覆過多的標籤，讓程式碼變得不好閱讀——對人與搜尋引擎都是。其中最重要的，是讓網站維護變得非常困難。例如：我們的網頁裡有十個 \<h4> 大小的副標題。\</h4>
```htmlembedded=
<h4><font size="+3" color="blue"><b>副標題一</b></font></h4>
…<h4><font size="+3" color="blue"><b>副標題二</b></font></h4>

…
…
…<h4><font size="+3" color="blue"><b>副標題十</b></font></h4>
```

如果有天覺得副標題用藍色 (blue) 不夠搶眼，要改成橘色，那我們就的把那十個副標題一個一個找出來修改。這種反覆的修改工作，嚴重影響到工作效率。
另外，在大型專案裡，一般有專屬的設計師 (designer) 去設計網站的呈現，而工程師會專注在內容與結構。因此 **「內容 與 呈現」的分工可以讓設計師與工程師的分工跟清楚**，不用擔心干擾到對方。

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

想像一下 HTML、CSS 和瀏覽器之間的對話: ```HTML 會說：「這是一個標題。」而 CSS 會和瀏覽器補充：「這個標題很大，請放在正中間。」```
![](https://i.imgur.com/4UQO1Yj.png)

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

### 套用方式

那這段 CSS 宣告要放在哪裡呢？

- 內嵌於 style 屬性
```htmlembedded=
<p style="color: red; font-size: 10pt;">一段文字</p>
```

這種宣告方式只會影響到這一個標籤，而不是所有的 \<p>。這是一個很簡便的作法，但 CSS 宣告混合在 HTML 結構中，無法進行管理。你可能會在寫 blog 時偶爾不得不這麼做(因為你無法在別人家的平台上開新檔案)。\</p>
![](https://i.imgur.com/Tq4siYb.png)

- 外部檔案 (建議方法)
![](https://i.imgur.com/1HIl25C.png)
讓我們來認識一下引入外部檔案的 HTML 標籤：

    - \<link> 是一種「後設元素」(meta element)只能放在標頭裡，他可以載入外部檔案。所以瀏覽器讀取到這一行時，就會自動載入 CSS 文件的全部內容。
    - rel='stylesheet' 告訴文件載入的資源是樣式表，所以瀏覽器就知道要用讀 CSS 的方式去處理載入的內容。
    - href='style.css' href 屬性和 \<a> 標籤時的用法一樣，描述路徑，讓瀏覽器找得到檔案。\</a>
    
### 認識 box 及其排列方式
每個網頁元素都是一個「盒子」，HTML 宣告出來的網頁元素都是一個矩形的「盒子」。如下圖我們試著用色塊和虛線把「盒子」描繪出來：
![](https://i.imgur.com/2kUZocg.png)

以下和你說明這張圖的標示：

- 做為主要內容的圖示、標題、文字簡介，以淺藍底色的「盒子」標示。
![](https://i.imgur.com/hVvWvER.png)

- 三個淺藍色盒子，又被放進一個由黃色虛線標示的「盒子」裡。
![](https://i.imgur.com/BN4JkTm.png)

- 三個黃色虛線的容器，又被放到一個綠色虛線的「盒子」裡。
![](https://i.imgur.com/IObZuvV.png)

網頁的組成，其實就是一個又一個「盒子」的堆疊，只要你把內容用同一個「盒子」封裝起來，你就可以利用 CSS 去選擇一整個容器，一口氣改變整個盒子的樣式、定位或排列方式，因而呈現千萬變化的版面配置。

到目前為止，你用到的 HTML 都會有預設樣式，例如\<h1>已經帶有字體大小的設定、\<a>標籤已經帶有字體顏色與底線，但如果我不想要改變任何樣式，我只是想把網頁內容打造成一個 box，要怎麼做呢？\</a>\</h1>

你需要一個「容器」(container)，這個容器能打包內容，方便你加上 CSS 設定，這就是\<div>和\<span>的功能。\</span>\</div>
![](https://i.imgur.com/cv4MWmn.png)
用\<div>來宣告出一塊區域，並且使用 id 或 class 來為每個\<div>命名
```htmlembedded=
<div id="about">I am Myra Chen</div>

<div id="my-work">This is my works</div>

<div id="contact-me">Contact me</div>
```

有些時候，只是想局部改變樣式可以是用\<span>，例如：
```htmlembedded=
<p>我想要對「<span>被 span 標籤包圍的文字</span>」追加樣式</p>
```
這種情況很常在修改 blog 文章時用到（因為去找 Blog 平台的 CSS 文件很麻煩），你有可能會使用內嵌 style 屬性的方式，直接把樣式寫在/<span>標籤裡

### inline v.s. block
**block 盒子特性**
- Block 盒子佔滿一整個橫列，也就是說 block 盒子的寬度和瀏覽器視窗一樣寬。
- Block 盒子後面的元素，將另起新的一行。
- Block 盒子的高度預設和內容一樣，如果你把視窗拉小，由於 \<h1> 的內容被擠到下一行，盒子的高度也隨之調整。\</h1>
- Block 盒子的高度和寬度都可以用 CSS 控制。

**Inline 盒子特性**
- Inline 盒子的尺寸取決於內容，不可隨意改變。
- Inline 盒子緊鄰前一個物件，不會另起新行。

![](https://i.imgur.com/epbPbzG.png)
常見的 block 元素：\<h1>, \<p>, \<div>\</div>\</p>\</h1>
常見的 inline 元素：\<span>, \<em>, \<strong>, \<img>, \<a>\</a>\</strong>\</em>\</span>

![](https://i.imgur.com/vbHQi6w.png)
```htmlembedded=
<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'/>
    <title>認識盒子模型</title>
    <style>
      h1, p, div {
        background-color: #eee;
      }

      em, a {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <h1>這是 h1 元素，佔滿一整個橫列，所以是 block 排列方式</h1>
    <div>這是 div 元素，也佔滿一整個橫列。</div>
    <p>這是段落 (p) 元素，也是 block。但在段落裡的 <em>inline 元素</em>，則順應 block 元素的排列，不會影響到網頁整體的排版。</p>
    <a href="#">網頁連結（a 元素）也是 inline。</a>
    <p>在 inline 後面的 block 元素還是會另起一行。</p>
  </body>
</html>
```
![](https://uploads-ssl.webflow.com/5d3a7aed4e11720246d46f49/5ec7bcbb5f7d315913460759_block_inline.gif)

### Source & Material
https://tw.alphacamp.co/blog/css-guide-box-model
