---
# System prepended metadata

title: 新聞網頁製作（二） - CSS 串接樣式表
tags: [slides]

---

---
type: slide
---

# 新聞網頁製作（二） - CSS 串接樣式表

---

## 學習目標
* CSS 語法
* 文字樣式 `font-*`
* 背景樣式 `background`
* 內距 `padding`
* 邊界 `border`
* 外距 `margin`

---


* `box-sizing`
* 文字對齊 `text-align`
* 滑鼠游標 `cursor`
* 內容溢出 `overflow`
* inline, internal, external CSS
* 實作練習 

---

## Inline CSS

針對特定元素添增風格 `style`

```htmlembedd!
<p style="font-size:20px; color: pink;">文章段落一</p>
<p style="font-size:20px; color: pink;">文章段落二</p>
<img src="https://img.src.com">
```


---

## Inline CSS

-  每個元素都有 `style` attribute
-  style attribute 中可以寫入 0 至多個 properties
-  property  之間透過 `;` 分號隔開
-  property 與 value 之間透過 `:` 冒號隔開
-  若我們不給元素 `style`，則會使用瀏覽器預設的 `style`。


---

## 字型相關 style

- `font-family` 字體
- `font-size` 大小
- `font-weight` 粗細
- `color` 顏色
- `line-height` 行高
- `letter-spacing` 字與字的間距


---

```htmlembedded!
<p style="font-size: 30px;">
    理性飲酒，衝動去愛
</p>
<p style="font-weight: bold;">...</p>
<p style="color: pink;">...</p>
<p style="font-size: 30px; font-weight: bold; color: pink">...</p>
```

---

```htmlembedded!
<p style="line-height: 1.5"></p>
<p style="line-height: 30px;"></p>
<p style="letter-spacing: 0.5px;"></p>
```


---

```htmlembedded!
<!-- 無襯線體 -->
<p style="font-family: sans-serif">理性飲酒</p>
<!-- 襯線體 -->
<p style="font-family: serif">理性飲酒</p>
<!-- 幻想體 -->
<p style="font-family: fantasy">Drink rationally</p>
<!-- 手寫體 -->
<p style="font-family: cursive">Drink rationally</p>
<!-- 等寬體 -->
<p style="font-family: monospace">Drink rationally</p>
```

---

```htmlembedded!
<!--
瀏覽器會由左至右看有沒有字體可以使用
以下依序是
微軟正黑體、思源黑體、蘋果蘋方體等等
-->
<p style="font-family: 'Microsoft JhengHei', 'Noto Sans TC', 'PingFang TC', 'Apple LiGothic Medium', Roboto, sans-serif"></p>
<!-- 因此，我們習慣把會用到的字體，依照我們想要瀏覽器呈現的順序排列 -->
```

---

### 載入外部字體

https://hackmd.io/Pekdv0mvT8qD_LXLzUo9iQ#%E5%BB%B6%E4%BC%B8%E9%96%B1%E8%AE%80

---

## block（區塊）
block tag 可以
- 設定寬度和高度
- 設定 background
- 設定 padding
- 設定 border
- 設定 margin

block tag： `div`, `p`, `body`, `figure` ...


---

## 設定 block 寬高

```

<!-- 不設定寬高，元素 p 會被內容給撐寬／撐高 -->
<p>理性飲酒</p>

<!-- 設定寬高，元素不會影響元素 p 的寬高 -->
<p style="width: 50px; height: 50px;">理性飲酒</p>

```

---

## Background

https://hackmd.io/Pekdv0mvT8qD_LXLzUo9iQ#%E8%83%8C%E6%99%AF%E7%9B%B8%E9%97%9C%E7%9A%84%E6%A8%A3%E5%BC%8F

---

## 隨著內容調整 block 寬度

### `width: min-content`
### `width: max-content`
### `width: fit-content`

---

## Border, Padding, Margin

![](https://i.imgur.com/QC9m4WR.png)

---

## Border

https://hackmd.io/Pekdv0mvT8qD_LXLzUo9iQ#border

---

## Padding

https://hackmd.io/Pekdv0mvT8qD_LXLzUo9iQ#padding

---

## Margin

https://hackmd.io/Pekdv0mvT8qD_LXLzUo9iQ#margin

---

## Box Sizing
瀏覽器 `width` `height` 的預設的計算方式不包含 padding 和 border。
為了計算方便，我們會加上 `box-sizing: border-box`，讓寬度和高度的計算包含 padding 和 border。

---

### 文字對齊 `text-algin`

```htmlembedded
<p style="text-align: left;">文字向左對齊</p>
<!-- 文字預設向左對齊，所以我們看簡寫成 -->
<p>文字向左對齊</p>

<p style="text-align: center;">文字置於區塊中間</p>
<p style="text-align: right;">文字置於區塊右邊</p>

<!-- 使用英文字時，希望文字走滿整行時使用。
避免英文字與英文字之間有空白。 -->
<p style="text-align: justify">文字展開對齊</p>
```

---

### 滑鼠游標 `cursor`

```htmlembedded=
<!-- cursor 預設的值為 auto，
但我們可以調整滑鼠移到元素時的樣式 -->

<a style="cursor: pointer;" href="https://google.com">Google</a>
<!-- <a> 預設的滑鼠樣式為 cursor: pointer，所以上述也可以改寫成 -->
<a href="https://google.com">Google</a>

<!-- 除了 auto, pointer 之外，還有相當多的選擇 -->
<span style="cursor: grab">游標顯示「張開手」的圖案</span>

<span style="cursor: grabbing">游標顯示「手去抓」的圖案</span>

<!-- 其他的值，請參考 https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#formal_syntax -->

```

---

### 內容溢出 `overflow`

```htmlembedded=
<!-- 一般來說，元素的寬度和高度會隨著元素的內容變大／縮小。
但當我們固定元素的寬高後，若是元素容超過元素固定的寬高，
此行為我們稱為 overflow -->

<div style="width: 60px; height: 60px; border: 1px black solid">
    內容超過寬高，文字的呈現會超過元素邊框
</div>

<!-- 我們可以使用 overflow 來處理「溢出」的內容 -->
<!-- 1. overflow: hidden 隱藏溢出的內容 -->
<div style="overflow: hidden; width: 60px; height: 60px; border: 1px black solid">
    內容超過寬高，文字的呈現會被隱藏
</div>

<!-- 2. overflow: scroll 讓溢出的內容，可以透過滑鼠滾動 -->
<div style="overflow: scroll; width: 60px; height: 60px; border: 1px black solid">
    內容超過寬高，文字的呈現會被隱藏
</div>

```

---


### inline, internal, external CSS

---

### inline CSS 

```htmlembedded=
<p style="font-size: 14px; background-color: pink">段落一</p>
<p style="font-size: 14px; background-color: pink">段落二</p>
<p style="font-size: 14px; background-color: pink">段落三</p>
<!-- 當 <p> 出現多個時，inline CSS 不方便管理程式碼 -->
```

---

### internal CSS

```htmlembedded=
<!-- 透過 CSS Selector 的寫法，將 style 都寫在 <style> 中 -->
<head>
    <style>
        p {
            font-size: 14px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>段落一</p>
    <p>段落二</p>
    <p>段落三</p>
</body>
```

---

## CSS 註解
```htmlembedded
<style>
    /* css 註解 */
    /* 粉紅色背景 */
    bg-pink {
        background-color: pink;
    }
</style>
```

---




###### tags: `slides`