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

# 新聞網頁製作（二） - CSS 串接樣式表 ## Slides https://hackmd.io/g7u3hlLqSxORCifjxSp27g#/1 ## 學習大綱： - [新聞網頁製作（一） - HTML 標記式語言](https://hackmd.io/svhFYKq4QyaarC_J0WRsig) - [新聞網頁製作（二） - CSS 串接樣式表](https://hackmd.io/Pekdv0mvT8qD_LXLzUo9iQ) - [新聞網頁製作（三）- CSS 選擇器與基礎網頁排版](https://hackmd.io/ccO-gvxFR5-49q3ePoNJkg) - [新聞網頁製作（四）- CSS Position 與 Flexbox 排版](https://hackmd.io/i1uBelrpRv2Uz5emQawIiw) - [新聞網頁製作（五）- Responsive Web Design 響應式網頁](https://hackmd.io/ojTXG2s0RQaJz85goqIz1w) - [新聞網頁製作（六）- 多媒體元素與動態效果](https://hackmd.io/J_YYk1YUSum1x3fVo75PXA) - [新聞網頁製作（七）- 使用 GitHub 部署網頁](https://hackmd.io/P9N34oIwS2G6Mfhag3Rqzg) ## 學習目標 * 基礎了解／運用 CSS (Cascading Style Sheets) * 在 HTML 中使用 CSS（一） * inline CSS * 文字樣式 * 背景(`background`)、內距(`padding`)、邊框(`border`)和邊界(`margin`) * 在 HTML 中使用 CSS（二） * CSS 語法 * internal CSS * external CSS * 練習： * 實作**字壓圖** * 實作**抽言** ## CSS (Cascading Style Sheets) - [CSS 基礎](https://developer.mozilla.org/zh-TW/docs/Web/CSS) - [CSS tutorial](https://www.w3schools.com/css/default.asp) ## 在 HTML 中使用 CSS（一）當我們 HTML 寫完後，網頁只會有基本的樣式表。此時，網頁需要 CSS 的幫助，才會成為ㄧ個具有樣式的網頁。接下來，我們會藉由 CSS 為網頁添加字型、顏色、邊框、底色等等樣式。在 HTML 中要使用 CSS ，有三種方式，分別是 1. inline CSS 2. internal CSS 3. external CSS 以下會分別介紹他們的使用方式。 ### inline CSS 所謂的 inline CSS，**即是在元素的起始標籤上加上 `style` 屬性。** 下例是讓文章段落的字體大小為 20px。 ```htmlembedded=false   <p style="font-size: 20px;">講到登山，普遍的印象可能是壯闊的山景，雲海朝霞萬丈金芒；也可能是山上人與人之間的情誼，過地形時伸手扶一把，或濕冷雨天一碗熱呼呼的泡麵。我們在山中感受生命各種美好，汲取養分。就算是逆境，痛苦會過去，美會留下，回到人間後依舊能量滿滿再度出發。</p> <p style="font-size: 20px;">做為人，不知為何，我們傾向記憶美好，卻遺忘過程的苦痛。但我卻想，這是否讓我們理解、記憶一件事情性質的方式，也隨之產生偏誤？</p> <p style="font-size: 20px;">我想說的是，登山是件會死人的運動。</p> <p style="font-size: 20px;">那是個風和日麗的早晨，我跟阿果從標高5,600公尺的馬卡魯峰前進基地營帳篷中醒來。我倆前一天剛攀升至7,150公尺處進行適應攀登並下山，往後一週將是一系列壞天氣週期的到來，所以我們正準備迎接休息日的放鬆作息。</p> ``` inline CSS 讓我們可以添加 CSS 樣式在任何的元素上。然而，當我們想要所有的文章段落的字體大小都為 20px 時，我們必須在每個 `<p>` 上都添上 `style="font-size: 20px;"`。此舉動不僅費力，也會讓整個 HTML 看起來密密麻麻的，不容易維護。那有沒有什麼方法，只要我定義一次文章段落的樣式，就可以到處套用呢？有的，我們可以使用 internal CSS，來達成上述需求。關於 internal CSS 和 CSS 的語法，請往下滑，看 [HTML 中使用 CSS（二）](https://hackmd.io/Pekdv0mvT8qD_LXLzUo9iQ#%E5%9C%A8-HTML-%E4%B8%AD%E4%BD%BF%E7%94%A8-CSS%EF%BC%88%E4%BA%8C%EF%BC%89)章節。 ## 文字樣式 CSS 樣式[百百種](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)，很難把所有的樣式都帶過一遍。我們這堂課會針對新聞網頁上常用的樣式講解，其中又以「文字樣式」最常被使用。 |<div style="width:200px">樣式名稱</div>| 說明 | 範例 | |---------|------|------| |`font-family`|字體設定，瀏覽器會從左至右選擇字型。若瀏覽器找不到字型，則會往下一個找。|```font-family: Microsoft JhengHei, Noto Sans TC, PingFang TC, Apple LiGothic Medium, Roboto, Lucida Grande, Lucida Sans Unicode, sans-serif;```| |`font-size`|字級大小設定| `font-size: 16px` | |`font-weight`|字體粗細。可以用`100`, `200`, ..., `900`來指定，數值越大，字體越粗，也可以用`normal`, `bold` 等值| `font-weight: 100`<br> `font-weight: 200`<br> `font-weight: bold`<br> | |`color`|字的顏色，可以輸入文字，<br>如`white`；<br>或是輸入顏色內碼，<br>如`#ffffff`；<br>或是輸入rgb，<br>如`rgba(0, 0, 0)`；<br>或是輸入rgba，<br>如`rgba(0, 0, 0, 1)`|`color: white`<br> `color: #ffffff`<br> `color: rgba(0,0,0,1)` | |`line-height`|每行字的高度| `line-height: normal`<br> `line-height: 1.5` <br> | |`letter-spacing`|字與字的間距| `letter-spacing: 1px` | |`text-align`|文字水平對齊<br>`text-align: left｜right｜center｜justify`<br>`justify` 是展開對齊。|`text-align: justify`<br>`text-align: center` <br>| |`vertical-align`|文字垂直對齊<br>`vertical-align:baseline｜top｜bottom｜middle｜sub｜super｜text-top｜text-bottom`|`vertical-align: middle`| |`text-decoration`|裝飾文字的方法| `text-decoration: none`<br> `text-decoration: underline`<br>| |`text-decoration-color`|裝飾文字的顏色| `text-decoration-color: white`| --- ## 背景(`background`)、內距(`padding`)、邊框(`border`)和邊界(`margin`) 針對大部分的 HTML 元素，我們都可以設定它的高`heigth`、寬`width`、**背景**`background`、**內距**`padding`、**邊框**`border`和**邊界**`margin`。注意：`display: inline` 的元素不能設定高和寬。舉例來說，若我想要標題的文字是黑色，背景色是粉紅色；我可以寫成 ```htmlembedded=false <h1 style="color: black; background-color: pink;">文字是黑色，背景色是粉紅色的標題</h1> ``` 若我想要在一個高`600px`寬`600px`的區塊的背景放上一張照片，那我可以寫成 ```htmlembedded=false <div style="height: 600px; width: 600px; background-image: url(https://nickhsine.github.io/teach-at-nccu/2020/04-16-assets/twreporter-telegram.jpg)">報導者 Telegram 上線囉</div> ``` ### 背景相關的樣式 |<div style="width:200px">樣式名稱</div>|說明|範例| | ------------------ | -------- | --- | |`background-color` |背景顏色。|`backgroud-color: pink;`| |`background-image` |背景圖片。|`background-image: url(https://nickhsine.github.io/teach-at-nccu/2020/04-16-assets/twreporter-telegram.jpg);` | |`background-repeat` |當背景圖片不足以稱滿元素時，是否重複出現。|`background-repeat: repeat;` | |`background-attachment`|設定圖片是否固定在元素中。|`background-attachment: fixed;`| |`background-size`|背景尺寸。|`background-size: contain;`| |`background-position`|背景圖的位置。|`background-position: center center;`| --- ### `background-color` |樣式值|解釋|是否為預設值| |----|-----|----| |transparent|背景顏色是否為透明|yes| |*color*|設定背景顏色，以設定顏色的方式設定。|no| |initial|設定為預設值，也就是 transparent。|no| |inherit|繼承父母的樣式值。|no| 範例： ```css=1 background-color: transparent; background-color: red; background-color: #ff0000; background-color: rgb(255,0,0); background-color: rgba(255,0,0,1); background-color: initial; background-color: inherit; ``` 註：預設值（default value）代表你不指定的話，瀏覽器會自動補上的值。 --- 範例圖網址：https://nickhsine.github.io/teach-at-nccu/assets/images/lovely-mando.png ### `background-image` |<div style="width:250px">樣式值</div>|解釋|是否為預設值| |---|---|---| |none| 不設定背景。|yes| |url('*URL*')|圖片的網址。若要多張圖片，請用逗點`,`隔開。|no| |[linear-gradient()](https://www.w3schools.com/cssref/func_linear-gradient.asp)|線性漸層色。|no| |[radial-gradient()](https://www.w3schools.com/cssref/func_radial-gradient.asp)|放射狀漸層色。|no| |[repeating-linear-gradient()](https://www.w3schools.com/cssref/func_repeating-linear-gradient.asp) |重複出現的線性漸層色|no| |[repeating-radial-gradient()](https://www.w3schools.com/cssref/func_repeating-radial-gradient.asp)|重複出現的放射狀漸層色|no| |initial|設定為預設值，也就是 none。|no| |inherit|繼承父母的樣式值。|no| 範例： ```css=1 background-image: none; background-image: url("img-1.jpg"), url("image-2.jpg"); background-image: linear-gradient(red, lightyellow, lightgreen); background-image: radial-gradient(red, lightyellow, lightgreen); background-image: initial; background-image: inherit; ``` --- ### `background-repeat` |<div style="width:100px">樣式值</div>|解釋|是否為預設值| |---|---|---| |repeat|背景的圖會以水平和垂直的方式重複出現，若圖塞不進背景，則只會部分呈現在瀏覽器上。| yes | |repeat-x|背景的圖會以水平的方式重複出現|no| |repeat-y|背景的圖會以垂直的方式重複出現|no| |no-repeat|背景的圖只會出現一次|no| |space|背景的圖會以水平和垂直的方式重複出現，與 repeat 不同的是，每張重複的圖皆會會完整呈現在瀏覽器上，圖與圖之間可能留空。|no| |round|背景的圖會以水平和垂直的方式重複出現，與 space 不同之處在於，圖與圖之間不會留空，因此圖可能會被壓縮或是拉長。|no| |initial|設定為預設值，也就是 repeat。|no| |inherit|繼承父母的樣式值。|no| 範例： |樣式值|瀏覽器呈現| |---|---| |`background-repeat:repeat`|![](https://i.imgur.com/JfedOGU.png)| |`background-repeat:repeat-x`|![](https://i.imgur.com/cJ4yzay.png)| |`background-repeat:repeat-y`|![](https://i.imgur.com/mjnvgsC.png)| |`background-repeat:no-repeat`|![](https://i.imgur.com/j1jciUW.png)| |`background-repeat:space`|![](https://i.imgur.com/2RmTweI.png)| |`background-repeat:round`|![](https://i.imgur.com/yxASbl6.png)| --- ### `background-attachment` |樣式值|解釋|是否為預設值| |---|---|---| |scroll|背景圖跟著頁面一起滾動。|yes| |fixed|背景圖不跟著頁面一起滾動。|no| |local|當元素內容超過背景圖的大小時，背景圖會跟著內容一起滾動。|no| |initial|設定為預設值，也就是 scroll。|no| |inherit|繼承父母的樣式值。|no| 範例： |樣式值|瀏覽器呈現| |---|---| |`background-attachment: scroll`|![](https://i.imgur.com/3WjUYr4.gif)| |`background-attachment: fixed`|![](https://i.imgur.com/k70OGc3.gif)| |`background-attachment: local`|![](https://i.imgur.com/lErCkIv.gif)| 關於 `background-attachment: local` ，需要特別說明，當前方的內容足以塞進背景圖時，`local` 的作用與 `scroll` 一模一樣。但，當前方的內容比背景圖還要大時，以上面範例而言，「理性飲酒、衝動去愛」標題的高度大於背景圖的高度，因此標題需要滑鼠滾動才會出現，在滑鼠滾動時，背景圖會隨著滑鼠滾動而一起滾動。 --- ### `background-size` |樣式值|解釋|是否為預設值| |---|---|---| |auto|背景圖以原始尺寸呈現。|yes| |*length*|設定背景圖的寬度和高度，第一個值是寬度，第二個值是高度。當只有一個值時，第二個值自動補上 `auto`。|no| |*percentage*|根據元素的父母的寬度和高度，設定背景圖的寬度和高度，因此輸入的值是百分比。當只有一個值時，第二個值自動補上`auto`。|no| |cover|背景不留白。瀏覽器會將圖放大縮小遮蓋背景區塊，因此瀏覽器有可能會裁切圖片。|no| |contain|背景圖要完整呈現。瀏覽器會適度留白，好讓背景圖完整呈現在背景區塊內。|no| |initial|設定為預設值，也就是 auto。|no| |inherit|繼承父母的樣式值。|no| 範例： ```css=1 background-size: auto; background-size: 100px 50px; /* 以下兩個是相同的樣式設定 */ background-size: 100px; background-size: 100px auto; background-size: 50% 50%; /* 以下兩個是相同的樣式設定 */ background-size: 50%; background-size: 50% auto; background-size: cover; background-size: contain; ``` --- ### `background-position` |<div style="width:120px">樣式值</div> |解釋|是否為預設值| |-------|---|---| |left top<br>left center<br>left bottom<br>right top<br>right center<br>right bottom<br>center top<br>center center<br>center bottom<br>|如果只填了一個值，另一個值瀏覽器會自動補上`center`。|no| |*x%* *y%*|*x%* 是水平位置， *y%* 是垂直位置。背景區塊的左上角是 0% 0%。右下角是 100% 100%，如果只設定一個值，則另一個值，瀏覽器會自動補上 `50%`，預設值是 `0% 0%`。|no| |*xpos* *ypos*|*xpos* 是水平位置，*ypos* 是垂直位置，背景區塊的左上角是 0 0, 單位可以是px，或是其他 [CSS 單位](https://www.w3schools.com/cssref/css_units.asp)。如果只設定一個值，則另一個值，瀏覽器會自動補上 `50%`。可以混用與 % 混用。|no| |initial|設定為預設值，也就是 `0% 0%`。|no| |inherit|繼承父母的樣式值。|no| 範例： ```css=1 background-position: left top; /* 以下兩個是相同的樣式設定 */ background-position: left; background-position: left center; /* 水平垂直置中 */ background-position: center; /* 以下兩個是相同的樣式設定 */ background-position: 50% 50%; background-position: 50%; background-position: 100px 50px; /* 以下兩個是相同的樣式設定 */ background-position: 100px 50%; background-position: 100px; ``` --- ## 內距(`padding`)、邊框(`border`)和邊界(`margin`) 在我們學如何使用 CSS 排版之前，我們必須先介紹元素的內距、邊框和邊界。邊界：元素與其他元素之間的距離。邊框：元素的邊框。內距：元素與邊框的距離。以下圖六為例，淺藍色的區塊代表元素內容的大小；由此可知，元素內容的寬：882px，高：29.6px。鵝黃色標記 border 的區塊是元素的邊框。淺綠色標記 padding 的區塊是元素的內距。橘色標記 margin 的區塊則是元素的邊界。 <img src="https://nickhsine.github.io/teach-at-nccu/assets/2018-03-22/padding-margin-border.png" width="300"> 舉個例子，讓大家比較容易想像。假設頁面上有兩個按鈕，則 - 按鈕裡的字是元素的內容； - 按鈕外圍的框是元素的邊框； - 按鈕的字與邊框的距離是內距； - 按鈕與按鈕之間的距離是邊界。 ### `padding` 內距有分上下左右： - `padding-top` 是與上方邊框的距離 - `padding-right` 是與右方邊框的距離 - `padding-bottom` 是與下方邊框的距離 - `padding-left` 是與左方邊框的距離若今天上右下左的內距分別是10px、5px、10px和5px，則我們可以這樣寫 ```css=1 padding-top: 10px; padding-right: 5px; padding-bottom: 10px; padding-left: 5px; ``` 也可以簡寫成 ```css=1 padding: 10px 5px 10px 5px; ``` 第一個 `10px` 代表上內距。第二個 `5px` 代表右的內距。第三個 `10px` 代表下的內距。第四個 `5px` 代表左的內距。上述寫法還可以簡化成 ```css=1 padding: 10px 5px; ``` 第一個 `10px` 代表上下的內距。第二個 `5px` 代表左右的內距。若今天上右下左的內距分別為 10px，則我們更簡化成 ```css=1 padding: 10px; ``` --- ### `margin` 邊界有分上下左右： - `margin-top` 是與上方另一個元素的距離 - `margin-right` 是與右方另一個元素的距離 - `margin-bottom` 是與下方另一個元素的距離 - `margin-left` 是與左方另一個元素的距離若今天上右下左的邊界分別是10px、5px、10px和5px，則我們可以這樣寫 ```css=1 margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-left: 5px; ``` 也可以簡寫成 ```css=1 margin: 10px 5px 10px 5px; ``` 第一個 `10px` 代表上邊界。第二個 `5px` 代表右邊界。第三個 `10px` 代表下邊界。第四個 `5px` 代表左邊界。上述寫法還可以簡化成 ```css=1 margin: 10px 5px; ``` 第一個 `10px` 代表上下邊界。第二個 `5px` 代表左右邊界。若今天上右下左的邊界分別為 10px，則我們更簡化成 ```css=1 margin: 10px; ``` --- ### `border` ### border 相關的樣式 |<div style="width:200px">樣式名稱</div>|說明|範例| | ------------------ | -------- | --- | |`border-top-color` |上邊框顏色。|`border-top-color: pink;`| |`border-top-width` |上邊框寬度。|`border-top-width: 2px;` | |`border-top-style` |上邊框呈現的樣式。|`border-top-style: solid;`| |`border-top`|上邊框。|`border-top: 1px solid pink;`| |`border-right-color` |右邊框顏色。|`border-right-color: pink;`| |`border-right-width` |右邊框寬度。|`border-right-width: 2px;` | |`border-right-style` |右邊框呈現的樣式。|`border-right-style: groove;`| |`border-right`|右邊框。|`border-right: 1px solid pink;`| |`border-bottom-color` |右邊框顏色。|`border-bottom-color: pink;`| |`border-bottom-width` |右邊框寬度。|`border-bottom-width: 2px;` | |`border-bottom-style` |右邊框呈現的樣式。|`border-bottom-style: solid`| |`border-bottom`|下邊框。|`border-bottom: 1px solid pink;`| |`border-left-color` |左邊框顏色。|`border-left-color: pink;`| |`border-left-width` |左邊框寬度。|`border-left-width: 10px;` | |`border-left-style` |左邊框呈現的樣式。|`border-left-style: dotted;`| |`border-left`|左邊框。|`border-left: 1px solid pink;`| |`border-top-left-radius`|左上方邊框的半徑。|`border-top-left-radius: 10px 15px;`| |`border-top-right-radius`|右上方邊框的半徑。|`border-top-right-radius: 15px;`| |`border-bottom-left-radius`|左下方邊框的半徑。|`border-bottom-left-radius: 15px;`| |`border-bottom-right-radius`|右下方邊框的半徑。|`border-bottom-right-radius: 15px;`| |`border-color`|上右下左邊框顏色。|`border-color: pink lightgreen lightblue lightgrey;`| |`border-width`|上右下左邊框寬度。|`border-width: 1px 5px 10px 15px;`| |`border-style`|上右下左邊框樣式。|`border-style: solid dotted double dashed;`| |`border-radius`|左上、右上、右下、左下邊框半徑。|`border-radius: 10px 15px 20px 25px;`| |`border`|上右下左邊框。|`border: 2px solid pink;`| --- #### `border-style` 值包括 - `none` - `hidden` - `dotted` - `dashed` - `solid` - `double` - `groove` - `ridge` - `inset` - `outset` 我們可以透過 `border-style` 定義四邊的邊框樣式，如下 ```css=1 /* 四邊皆是 dotted */ border-style: dotted; /* 上下是 dotted，左右是 solid */ border-style: dotted solid; /* 上：dotted 右：solid 下：double 左：none */ border-style: dotted solid double none; ``` #### `border-(top|right|bottom|left)` `border-top` 是 `border-top-width`、`border-top-style`, `border-left-color` 的簡寫，以此類推 `border-right`、`border-bottom`、`border-left`。 ```css=1 /* 以下兩種寫法相同 */ border-top: 1px solid pink; border-top-width: 1px; border-top-style: solid; border-top-color: pink; ``` #### `border` `border` 是 `border-width`、`border-style`、`border-color` 的簡寫。 ```css=1 /* 以下兩種寫法相同 */ border: 1px solid pink; border-width: 1px; border-style: solid; border-color: pink; ``` ### `box-sizing` 一般來說，當我們給定元素寬和高時，Ex: `<div style="width: 100px; height: 100px">`，100px 並不包括邊框和內距。當例子改寫成`<div style="width: 100px; height: 100px; padding: 10px; border-width: 5px">` 時，元素所佔據的寬是 130px (100px + 10px + 10px + 5px + 5px)。 ``` width: 100px; padding-left: 10px; padding-right: 10px; border-left-width: 5px; border-right-width: 5px; ``` 為了方便計算元素所需要的大小，我們可以將元素設定成 `box-sizing: border-box`，如此一來，剛剛的例子裡的元素，就只會佔據 100px 的寬和 100px 的高，邊框和內距被自動算在 100px 裡面了。想要知道更多細節，請務必參考[此網頁](http://zh-tw.learnlayout.com/box-sizing.html)。 ### `overflow` 元素的內容的寬高超過元素設定的寬高時，在排版上，我們有幾個選擇： 1. 元素內容完整呈現，元素內容多出的部分會超出元素的邊框之外。（見下圖左） 2. 隱藏部分元素內容，元素內容多出的部分會被省略，不會呈現在瀏覽器上。（見下圖中） 3. 讓元素內容可以透過滑鼠滾動，元素會出現 scroll bar，在元素內容可以透過滑鼠滾動的方式觀看。（見下圖右） ![](https://i.imgur.com/HFj33Fc.gif) 圖九： overflow 比較示意圖。 |<div>樣式值</div> |解釋|是否為預設值| |-------|---|---| |visible|不省略內容，多出的內容會畫在邊框之外。|yes| |hidden|省略內容，多出的部分會被隱藏。|no| |scroll|不省略內容，但多出的內容需要透過滑鼠滾動觀看。|no| |auto|與 scroll 類似，差別在於，scroll bar 只有當內容超過元素時才會出現。|no| |initial|設定為預設值，也就是 visible。|no| |inherit|繼承父母的樣式值。|no| ## 在 HTML 中使用 CSS（二） ### CSS 語法 CSS 語法可拆分成下列： - CSS 選擇器（CSS Selector） - CSS 宣告區塊（CSS Declarations Block） - CSS 宣告（CSS Declaration）我們透過以下範例來一一解釋： ![圖一](https://i.imgur.com/eZ58Oam.png) 圖一： CSS 範例。圖一是標準的 CSS 寫法，將此翻成白話文，即是，針對所有 `<h1>` 和 `<p class="intro">` 元素，套用 `color: pink` 和 `font-size: 360px` 等樣式。我們將要套用的樣式（`color` 和 `font-size`），用 CSS 宣告的方式告訴瀏覽器（見圖二）。 ![圖二](https://i.imgur.com/5bmJ4nI.png) 圖二： CSS 宣告。 CSS 宣告的寫法（圖三）： - CSS 宣告裡的屬性（Ex: `color`）與屬性值（Ex: `pink`）用`:` 隔開。 - CSS 宣告與宣告之間，必須用分號(`;`)隔開。 - 冒號（`:`）和分號（`;`）皆是英文的注意符號，切勿打成中文注音符號。 ![](https://i.imgur.com/BNUMdk2.png) 圖三： CSS 宣告細部解釋。一至多個 CSS 宣吿可以組成 CSS 宣告區塊。 CSS 宣告區塊的寫法（圖四）： - 宣告區塊由大括號`{` `}` 包住 CSS 宣告。 ![圖四](https://i.imgur.com/qz0GzyR.png) 圖四： CSS 宣告區塊。 CSS 宣告區塊的用途，是告訴瀏覽器 HTML 元素要套用什麼樣的樣式。然而，瀏覽器是如何知道宣告裡的樣式是要套用在哪些元素上呢？靠的就是 CSS 選擇器，圖五中的 `h1, p.intro` CSS 選擇器告訴瀏覽器說，只要遇到 `<h1>` 或是 `<p class="intro">` 等元素（`h1` 和 `p.intro` 中間的逗點 `,` 是有意思的，它代表「或是」的意思），就幫我套用我寫好的 CSS 宣告區塊。（CSS 選擇器的寫法之後會專章討論） ![圖五](https://i.imgur.com/VbKG5eG.png) 圖五： CSS 選擇器。 ### Internal CSS Inline CSS 是針對個別元素寫 CSS 宣告，例如：`<p style="font-size: 20px; color: pink;">`。此寫法可以為某一個特定的元素增加風格。然而，當我們文章存在多個 `<p>` 元素時，每個`<p>`元素上都得寫上`style="font-size: 20px;"` 的屬性設定。這些重複的設定，不僅 1. 不容易 debug：讓程式碼看起來密密麻麻; 2. 浪費 HTML 的檔案空間：檔案裡一直重複出現相同的設定; 3. 不易修改：若我們要將全部的文章段落改成 `font-size:22px`，我們必須修改多次。為了避免上述問題一再出現，Internal CSS 成了救星。 Internal CSS 使用`<style>` 元素（注意：並非 `style` 屬性）。我們在 `<style></style>` 裡定義元素的樣式。舉例來說，範例一可以改寫成範例二。 ```htmlembedded=false  <html> <head> <style> p { font-size: 20px; } </style> </head> <body> <p>講到登山，普遍的印象可能是壯闊的山景，雲海朝霞萬丈金芒；也可能是山上人與人之間的情誼，過地形時伸手扶一把，或濕冷雨天一碗熱呼呼的泡麵。我們在山中感受生命各種美好，汲取養分。就算是逆境，痛苦會過去，美會留下，回到人間後依舊能量滿滿再度出發。</p> <p>做為人，不知為何，我們傾向記憶美好，卻遺忘過程的苦痛。但我卻想，這是否讓我們理解、記憶一件事情性質的方式，也隨之產生偏誤？</p> <p>我想說的是，登山是件會死人的運動。</p> <p>那是個風和日麗的早晨，我跟阿果從標高5,600公尺的馬卡魯峰前進基地營帳篷中醒來。我倆前一天剛攀升至7,150公尺處進行適應攀登並下山，往後一週將是一系列壞天氣週期的到來，所以我們正準備迎接休息日的放鬆作息。</p> </body> </html> ``` 範例二有幾個點值得注意： 1. CSS 語法必須寫在 `<style>` 元素中 2. 將 `<style>` 元素擺放在 `<head>` 元素中補充說明： - `<head>` 並不會呈現在網頁上面，它的用途是用來定義這網頁的 metadata，而網頁的樣式也算是 metadata 之一。你會發現，當我們使用 internal CSS 後， - 程式碼變得簡潔許多; - HTML 檔案變小了; - 當我們要把 `font-size: 20px` 改成 `font-size:22px` 時，我們只要修改一次就好。當你漸漸習慣 HTML 和 CSS 後，請養成好習慣，**將重複出現的樣式用 internal CSS 的方式撰寫，inline CSS 留給出現頻率不高，不會重複使用的元素使用。** ### External CSS 透過 internal CSS，我們可以避免在同一份 HTML 檔案裡，一直寫重複的樣式。然而，當我們的網站有越來越多的頁面，越來越多的 HTML 檔時，在不同的 HTML 檔案裡面，我們仍會重複定義相同的 CSS 樣式。為了避免重複的 CSS 樣式散落在不同 HTML 檔案裡，我們會將重複的 CSS 樣式獨立成一個 CSS 檔案，接著在 HTML 裡，用 `<link>` 方式將 CSS 樣式載入。 ``` <link rel="stylesheet" type="text/css" href="style.css"> ``` 上述例子中，瀏覽器會讀取 `style.css` 檔案，並將定義在該檔案裡的樣式套用在網頁上。 ## CSS 註解(Comment) 有時候寫程式碼，你會需要寫一些解釋在程式碼裡，但是這些解釋你又不想要呈現在網頁上面。針對 CSS 樣式，你可以使用CSS comment。 ``` <html> <head> <style> /* 這是一個註解，不會被瀏覽器視為 CSS 樣式的一部分 */ div { box-sizing: border-box; } </style> </head> </html> ``` ## 延伸閱讀 ### 如何使用 Google 提供的免費思源黑體（Noto Sans TC）字型？ 1. 先到 [Google Fonts Noto Sans TC 網頁](https://fonts.google.com/noto/specimen/Noto+Sans+TC) 2. 在 Styles 區塊，點選你想要使用的字體大小（見下圖說明） ![](https://i.imgur.com/WtxpoIq.gif) 3. 點選右上角的 icon，並且複製 HTML link ![](https://i.imgur.com/OkY1R0p.gif) 4. 貼於 `<head>` 元素中（見程式碼範例） ```htmlmixed=true <html> <head>  <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;400;500&display=swap" rel="stylesheet"> </head> <body> </body> </html> ``` 5. 使用 Google Noto Sans TC 字型（見程式碼範例） ```htmlmixed=true <html> <head>  <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;400;500&display=swap" rel="stylesheet"> </head>  <body style="font-family: 'Noto Sans TC, sans-serif;'"> 思源黑體字 </body> </html> ``` ## 課堂練習： * 練習一：根據[mockup](https://www.figma.com/file/bjTblBxDRaGKIpGtGR5hZt/%E5%AD%97%E5%A3%93%E5%9C%96)實作**字壓圖**。圖片來源：https://nickhsine.github.io/teach-at-nccu/assets/images/image-1.jpg [練習一解答](https://github.com/nickhsine/teach-at-nccu/blob/master/109-01/10-13/exercises/exercise-1.html) * 練習二：根據[mockup](https://www.figma.com/file/jMxTLYrdMC5dWcTI3iXyng/blockquote)實作**抽言**。 [練習二解答](https://github.com/nickhsine/teach-at-nccu/blob/master/109-01/10-13/exercises/exercise-2.html) * 練習三：根據[mockup](https://www.figma.com/file/6PYqXnGak4OvKJh6cHgZlF/course-pratice-button)實作**按鈕**。 [練習三解答](https://github.com/nickhsine/teach-at-nccu/blob/master/109-01/10-13/exercises/exercise-3.html) ## 延伸資訊 [基本顏色查詢表](https://www.w3schools.com/cssref/css_colors.asp) ###### tags: `teach-at-nccu`, `html`, `css`

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.