---
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
---
## 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`
Sign in with Wallet
Connect another wallet