新聞網頁製作（三）- CSS 選擇器與基礎網頁排版

# 新聞網頁製作（三）- CSS 選擇器與基礎網頁排版 ## Slides https://hackmd.io/SeAJqourToG8OoTpVos_uA#/ ## 學習大綱： - [新聞網頁製作（一） - 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 基礎元素(基礎了解請參考[上禮拜課程](https://nickhsine.github.io/teach-at-nccu/2020/04-16)) * 區塊與區塊的距離：`margin-*` * 給區塊內距：`padding-*` * 給區塊上邊框： `border-*` * 變化字的樣式： `font-*` * 變化區塊背景： `background-*` * 調升使用者閱讀字的經驗：`line-height`, `letter-spacing` * 字（inline）的安排： `text-align` * 滑鼠游標的變化： `cursor` * 基礎元件製作：按鈕、抽言、字壓圖 * CSS 選擇器（CSS Selectors） * id 屬性 * class 屬性 * HTML tag * 選擇器組合 * 更多選擇器使用方法 * 排版前，必須知道的幾個重點 * 由左至右、由上至下的排列方式 * 文字排列和區塊排列大大不同 * `display` 樣式名稱：`block`, `inline` 和 `inline-block` 的差別 * 基礎排版練習 * 文字水平對齊 * 區塊水平對齊 * 垂直對齊 * 練習文繞圖版型 # CSS 選擇器（CSS Selector）在上一堂課「[新聞網頁製作（二） - CSS 串接樣式表](https://hackmd.io/Pekdv0mvT8qD_LXLzUo9iQ)」中，我們學習了 CSS 語法，也初步了解 CSS 選擇器，那時候沒有多談 CSS 選擇器的寫法。當時，我們只知道，瀏覽器用 CSS 選擇器來決定在哪些元素上附加上什麼樣的 CSS 樣式。今天，我們會一點時間，了解 CSS 選擇器的寫法。 CSS 選擇器的使用方式有很多種變化，以下僅提供最常使用的三種方式來說明。<br> 其他的方式會附錄在[文末](https://hackmd.io/ccO-gvxFR5-49q3ePoNJkg?both#%E9%99%84%E9%8C%84%EF%BC%9A%E6%9B%B4%E5%A4%9A-CSS-%E9%81%B8%E6%93%87%E5%99%A8)。<br> 若有興趣的同學，可以研究研究。 ## 標籤選擇器（Tag Selector）此選擇器針對 HTML 標籤做選擇，<br> 舉下方範例來說，我們定義了所有的 `<p>` 元素，要求它們使用灰色當背景色。 ```html <html> <head> <style> p { background-color: grey; } </style> </head> <body> <p> paragraph with grey background color. </p> <p> paragraph with grey background color. </p> </body> </html> ``` ## 類別選擇器 (Class Selector) 以標籤選擇器的例子來說， ```html p { background-color: grey; } ``` 設定了所有 `<p>` 都擁有一樣的樣式。<br> 但，倘若其中有多個 `<p>`，我想要設定成 `background-color: blue` 呢？ CSS 提供了類別選擇器，來完成客製化的樣式。類別選擇器的寫法如下： #### 1. 先替樣式設定命名，我們稱為**類別名**。舉例來說，我們定義一個叫`bg-blue`的類別。 #### 2. 透過 CSS 語法，我們定義 `bg-blue` 類別要具有什麼 CSS 樣式。 ```css=false .bg-blue { background-color: blue; } ``` 以上述範例來說，我們定義了 `bg-blue` 的樣式是 `background-color: blue;`。<br> **注意，為了區別類別與標籤，我們在類別名稱前面要加上前綴`.`（半形符號），所以是`.bg-blue`。** #### 3. 接著我們便可以在 HTML 的起始標籤上使用類別。 ```html <p class="bg-blue"> paragraph with blue background color. </p> <h1 class="bg-blue"> h1 with blue background color. </h1> ``` 在起始標籤上，加上 `class` 屬性，而屬性的值是 `bg-blue`。<br> 只要套上`bg-blue`樣式的元素，皆具有其樣式。 **注意：套用類別名稱在標籤中時，則不需要前綴`.`。** #### 4. 一個起始標籤上，可以套用不只一個類別。 ```html <style> .bg-blue { background-color: blue; } .text-underline { text-decoration: underline; } </style> ``` 根據上述寫法，我們定義了兩個類別，<br> 分別是 `bg-blue` 和 `text-underline`。<br> ```html <p class="bg-blue text-underline" > paragraph with blue background color and underline. </p> ``` 接著將 `bg-blue` 和 `text-underline` 套用在`<p>`中。 **注意：`bg-blue` 和 `text-underline` 中間需要一個空白。** ```html <html> <head> <style> .bg-blue { background-color: blue; } .text-underline { text-decoration: underline; } </style> </head> <body> <article> <p class="bg-blue"> this paragraph has blue background color. </p> <p class="bg-blue text-underline"> this paragraph not only has blue background color, but also has underline decorated. </p> </article> </body> </html> ``` ## ID 選擇器（ID Selector）實作上，我們大部分都是使用「標籤選擇器」和「類別選擇器」來撰寫 CSS 樣式。<br> 然而，除了「標籤選擇器」和「類別選擇器」之外，有時候我們也會使用 ID 選擇器。<br> ID，就如同我們的身分證 ID 一樣，它代表了獨一無二的你，不會有另外一個人和你共用相同的ID。<br> 因此 ID 選擇器的使用上，也只允許一個標籤使用。使用方式如下： #### 1. 先替 ID 命名，舉例來說，`main-title`。 #### 2. 在`<style>` 裡定義, `main-title` 要具有什麼 CSS 樣式。 ```html <style> #main-title { font-size: 40px; font-weight: bold; font-family: 'Noto Sans TC', sans-serif; } </style> ``` 以上述範例來說，我定義了 `main-title` 的樣式。<br> **注意，為了區別 ID，我們在 ID 名稱前面要加上前綴`#`（半形符號），所以是`#main-title`。** #### 3. 接著我們便可以在 HTML 的起始標籤上使用ID。 ```html <h1 id="main-title"> h1 text with main-title styles. </h1> ``` 在起始標籤上，加上 `id` 屬性，而屬性的值是 `main-title`。<br> 注意：套用 ID 名稱在標籤中時，則不需要前綴`#`。 ```html <html> <head> <style> #main-title { font-size: 40px; font-weight: bold; font-family: 'Noto Sans TC', sans-serif; } </style> </head> <body> <h1 id="main-title"> h1 text with main-title styles. </h1> </body> </html> ``` **注意：同一個 ID 只能在整份 HTML 程式碼裡出現一次，不能同時有多個起始標籤套用同一個 ID。** ## 組合選擇器上述三種選擇器，可以單獨使用，也可以組合起來使用。以下是組合選擇器的方法： |選擇器|Example|解釋| |-------|-------|-------| |* |* |選擇所有的元素。| |元素 |p |選擇所有 `<p>` 元素。 | |元素,元素 |div,p |選擇所有 `<div>` 元素和所有`<p>`元素。 | |元素元素 |div p |選擇所有的`<p>`元素，只要該`<p>`元素是`<div>`元素的子孫（decendent）。| |元素>元素 |div>p |選擇所有的`<p>`元素，只要其父母（parent）是`<div>`元素。 | |元素+元素 |div+p |選擇所有的`<p>`元素，只要其位置**緊接在**`<div>`之後（`<div>`和`<p>`是 siblings）| |元素~元素 |div~p |選擇所有的`<p>`元素，只要其位置在`<div>`之後（`<div>`和`<p>`是 siblings）| 看完組合選擇器的解釋後，你一定會說也太複雜了吧？我一開始碰的時候，也是滿頭霧水，經過多次嘗試才比較記住它的意思。然而，我們不用背這些規則，需要的時候，再去查就好。推薦大家透過 [CSS Selector練習網站](https://flukeout.github.io/) 來實際操作看看。元素與元素之間的關係包含：祖先（ancestor）、子孫（descendant）、父母親（parent）、孩子（child）、兄弟姊妹（siblings）。我們可以將巢狀的 HTML ```htmlembedded= <html> <body> <div> <img> </img> <div> </div> </div> <div> <div> </div> <div> </div> </div> <div> <h2> </h2> <div> </div> </div> </body> </html> ``` 轉換成樹狀圖（見下圖）。 ![圖四](https://i.imgur.com/VA9FbdE.png) 圖四：用樹狀圖來表示元素與元素之間的關係。 ##### Ancestor: 當元素A是巢狀元素，且擁有一層以上的元素時，元素A便是其他被它包含住的元素的祖先。以圖五來說，`<html>`是其他所有元素的祖先，因為`<html>`包含了其他所有的元素。 ![圖五](https://i.imgur.com/A8QXpBq.png) 圖五：`<html>`是所有元素的祖先 ##### Descendant: 當元素A被巢狀元素B包含時，元素A即是元素B的子孫。已圖六來說，除了`<html>`元素，所有的元素皆是`<body>`的子孫。 ![圖六](https://i.imgur.com/XeXjqlL.png) 圖六：`<body>`元素所有的子孫 ##### Parent and Child: 當元素A被巢狀元素B直接包含時，元素A是元素B的 child，而元素B是元素A的 parent。就圖七來說，較上層的 `<div>` 是 `<img>` 的 parent，而 `<img>` 是 `<div>` 的 child。 ![圖七](https://i.imgur.com/EJZhZ26.png) 圖七：介紹 Parent 和 Child 之間的關係。 ##### Siblings: 當元素A、元素B被巢狀元素C直接包含時，元素A是元素B是siblings。 ![圖八](https://i.imgur.com/0XMYBGN.png) 圖八：介紹 Siblings 的關係。因此，若是你不清楚 CSS 組合選擇器的影響範圍，可以試著將 HTML 元素轉換成樹狀圖，藉由樹狀圖來看出元素之間的關係，了解組合選擇器的影響範圍。 # 排版前，必須知道的幾個重點 ## 重點一：瀏覽器採取由左至右、由上至下的排列方式，將巢狀的 HTML 一一排列在畫面上。 ```html <body> <div style="width: 100px; height: 100px; background-color: pink;"></div> </body> ``` 當瀏覽器看到上述 HTML 時，瀏覽器會知道接下來有一個區塊要呈現在網頁上；<br> 因此，它空了高 100px，寬等同於瀏覽器寬的空間給這個`<div>`。<br> 然而，`<div>` 本身只用了 100px 的寬，並無法佔滿整個空間，因此，它便被排在空間的左側。見圖1： ![](https://i.imgur.com/J1eR4HZ.png) *圖1* 可以看到橘色的區塊都是瀏覽器留給這個`<div>`的空間。接著我們再加上一個`<div>`在`<body>`中，看瀏覽器會怎麼排列。 ```html <body> <div style="width: 100px; height: 100px; background-color: pink;"></div> <div style="width: 200px; height: 200px; background-color: blue;"></div> </body> ``` 見圖2： ![](https://i.imgur.com/BhwbUcf.png) *圖2* <br> 可以看見，藍色區塊並沒有並排在粉紅色區塊的右側，儘管還有空間。<br> 原因在於，`<div>` 預設就帶有 `display: block;` 的 CSS 樣式。<br> 基本上，你可以將 `<div>` 看成 `<div style="display:block;">`<br> 當瀏覽器遇到帶有 `display:block` 樣式的元素時，<br> 都會主動留整排的空間給它，儘管它的寬度不足稱滿整個瀏覽器。此外，從圖我們可以看出，瀏覽器在排版的時候，預設是由上至下（先粉紅色區塊再藍色區塊）排列。 ## 重點二：文字排列和區塊排列大大不同剛剛看到的例子是瀏覽器排列區塊（`display: block`）的方式。<br> 但當瀏覽器排列文字時，排列的邏輯與排列區塊的邏輯截然不同。<br> ```html <body> <span>這是一行文字。</span> </body> ``` 透過上面這段程式碼，我們可以產生圖3 的結果。 ![](https://i.imgur.com/IFTGPog.png) *圖3* <br> 接著，我們再加上一個`<span>`，看瀏覽器如何排列文字。 ```html <body> <span>這是一行文字。</span> <span>這是另一行文字。</span> </body> ``` 見圖4 ![](https://i.imgur.com/EGXUj1t.png) *圖4* <br> 你會發現，文字不像區塊的排列方式，一個區塊佔瀏覽器整行的空間。<br> 當瀏覽器發現還有空間可以放更多文字的時候，它會試圖將文字排列在同一行上。<br> 一直排到瀏覽器塞不下才斷行，掉到下一行呈現，見圖5。 ![](https://i.imgur.com/paSrpMh.png) *圖5* <br> 針對文字（例如：`<span>`, `<b>`, `<i>` 等等）的呈現，預設都是 `display: inline` 的 CSS 樣式。<br> 基本上，我們可以將 `<span>` 看成 `<span style="display: inline;">`。 ## 重點三：`display`: `block`, `inline` 和 `inline-block` 的差別看到這裡，我們大概了解，瀏覽器針對區塊（`display: block`）和文字（`display: inline`）的排版方式的不同。<br> 但倘若，我們想要區塊和區塊、區塊和文字同時排列在同一行上呢？<br> 我們可以使用 `display: inline-block`。<br> ``` <body> <div style="display: inline-block; width: 100px; height: 100px; background-color: pink;"></div> <span>這行文字與區塊並排。</span> </body> ``` 上述程式碼可以產生圖6。 ![](https://i.imgur.com/SO717TA.png) *圖6* <br> 當我們將設定成`<div style="display: inline-block;">`時，此`<div>`就同時擁有兩種特性： 1. 它是一個區塊，可以設定寬和高。（注意：我們無法給文字寬度和高度。以下寫法是無效的：`<span style="width:100px; height: 100px">`） 2. 它的排列方式與排列文字的方式相同。（會試著塞在同一行上，若擠不下，才會掉到下一行。） ## 重點四：瀏覽器呈現元素高度與寬度的方式不同。我們在重點一提到，當瀏覽器遇到區塊時，它會試圖保留整排的空間給區塊（更細心地來說，這裡說整排是指該區塊的 parent 的寬）。舉下方程式範例來說： ```htmlembedded=1 <html> <head> <style> .bg-pink { background-color: pink; display: block; } .w300 { width: 300px; display: block; } </style> </head> <body> <div id="1" class="bg-pink">test</div> <div id="2" class="w300"> <div id="3" class="bg-pink">test</div> </div> </body> </html> ``` `<div id="1">` 擁有以下特徵： 1. 沒有指定元素寬度 2. 是 `<body>` 的 child 3. `display: block` 瀏覽器在處理`<div id="1">`的寬度時，它會參考 `<body>` 的寬度，當 `<body>` 多寬，`<div id="1">` 就多寬。而當我們沒有指定 `<body>` 寬度時，`<body>` 的寬度就是瀏覽器的寬度，所以我們會看到整排都是粉紅色背景的區塊，其區塊高度是 `test` 字顯示的行高。然而，`<div id="3">` 與 `<div id="1">` 不同之處在於：`<div id="3">` 的 parent 是 `<div id="2">`，而`<div id="2">` 的寬度是 `300px`；瀏覽器在呈現 `<div id="3">` 時，也是給它一整排的寬度，只是這時的一整排的寬度所參考的是 `<div id="2">` 的寬度，`300px`，最後你會看到 `300px`淺藍色為背景色的區塊，其區塊高度是`test`字顯示的行高。在了解瀏覽器如何處理區塊寬度後，我們要進一步了解瀏覽器怎麼處理區塊的高度。在沒有指定區塊高度的狀態下，區塊的高度為`0px`；所以以下範例程式碼並不會有任何背景為粉紅色的區塊顯示。 ```htmlembedded=1 <html> <body> <div id="1" style="background-color: pink; width: 100px;"></div> </body> </html> ``` 當我們塞元素進到區塊後，程式範例修改如下： ```htmlembedded=1 <html> <body> <div id="1" style="background-color: pink; width: 100px;">區塊內容</div> </body> </html> ``` 區塊的高度，會是`區塊內容` 等字呈現在瀏覽器的行高。當我們再加內容進到該區塊中，如下： ```htmlembedded=1 <html> <body> <div id="1" style="background-color: pink; width: 100px;"> 區塊內容 <div style="background-color: lightblue; width: 100px; height: 100px"></div> </div> </body> </html> ``` `<div id="1">`的區塊的高度會是`區塊內容`等字的行高加上`100px`（新增的區塊的高度）。由此可知，區塊元素A的高度（在不指定高度的情況下）是由其 descendant 元素長出來的，若區塊元素A沒有內容，也沒有指定高度的話，它不會呈現在瀏覽器上。而，區塊元素A的寬度（在不指定寬度的情況下）則是由其 parent 元素決定，瀏覽器會盡可能替區塊元素A留一整排與 parent 元素一樣寬的空間。 # 基礎排版練習在理解排版的幾個要點後，我們可以把 mockup 拆成各個不同的大區塊，例如：header、body 和 footer。接著，我們再把大區塊拆分成多個小區塊，例如 body 可以拆成首圖區塊、標題區塊、工具表區塊、文章相關資訊區塊、內文區塊等等。透過上面幾個要點，我們可以把各個區塊的關係和寬高度轉化成一個一個 HTML 元素。當大方向的骨幹（HTML的結構）確定後，我們再針對每個小區塊進行微調。而要微調排版，我們需要學會以下幾個對齊的方式。 ## 文字水平對齊有了上述區塊和文字排列的基礎後，我們要了解元素如何水平排列。文字水平對齊的方式，是透過 `text-align` 。 ```html <body> <div style="text-align: center;"> <span>這是一行水置中的文字。</span> </div> </body> ``` 上述程式碼可以產生圖7 的結果。 ![](https://i.imgur.com/hJxg1Z6.png) *圖7* 當我們設定 `<div style="text-align: center;">`時，我們是告訴瀏覽器說，在這個區塊裡的元素，都要向中間對齊。 ```html <body> <div style="text-align: center;"> <p>用望心有元們她全心此不唱學的又，因優再勢區。</p> <p>是平務聲前局的起對展青例影的克夫人來的畫會希得我能大、方出以這上的有一、心老可個給的驚後小親轉如親加情結者見魚過人每裝方作學活什資石。</p> <p>車香了居門實多第元觀準入雨所雖跑世物無童會知斷中參正學驗花裡走一各招來不知香主拉前的見。</p> </div> </body> ``` 上述程式碼可以產生圖8的結果。 ![](https://i.imgur.com/5LZiHnz.png) *圖8 文字透過 `text-align: center` 置中。* - 文字置左對齊：`text-align: left;` - 文字置右對齊：`text-align: right;` - 文字置左置右對齊（撐滿區塊）：`text-align: justify`; ## 區塊水平對齊由於我們使用 `text-aling: center` 時，樣式針對的是 `display: inline` 和 `display: inline-block` 元素。然而，有時候我們就只是想一個 `display: block` 元素置在畫面的中間。這時候有個簡單的作法是使用 `margin-left: auto; margin-right: auto` CSS 樣式，看以下範例： ```htmlmixed=false <html> <head> <style> .horizontal-center { margin-right: auto; margin-left: auto; } .block { width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div class="block horizontal-center"></div> </body> </html> ``` 上述程式碼翻譯成白話文如下： `margin-left: auto` ：元素（我們稱之為 A）距離左邊的空間由瀏覽器決定，因此瀏覽器會留盡可能大的空間給元素 A ，所以元素 A 會被推到畫面的右方。 `margin-right: auto` 則是相反，瀏覽器會盡可能留元素 A 的右邊的空間給它，所以元素 A 會被推到畫面的左方。當元素 A 同時被推向左方和右方時，它就會被置於中間。實際結果如下圖： ![圖9](https://i.imgur.com/VJ4iSI7.png) *圖9：粉紅色區塊透過 `margin-left: auto` 和 `margin-right: auto` 置中。* ## 垂直對齊對於元素的擺放方式，除了水平對齊之外，我們還可以根據元素的高度垂直排列。注意：垂直對齊主要運用在 `display: inline` 和 `display: inline-block` 的元素上。對於 `display: block` 的元素來說，因為它本身就會佔一排，所以沒有對象可以垂直對齊。然而，相較於水平對齊，垂直對齊的難度較高。在了解如何垂直對齊之前，我們要先了解文字在排版上的特性。 ![](https://i.imgur.com/LeebGrq.png) *圖10：文字排版對齊的線。* 文字在排版上有非常多種排列方式，我們可以根據圖10上的線來進行排列。而要垂直排列不同元素，我們必須用到 `vertical-align` CSS 樣式。 `vertical-align` 樣式值則可以參考圖9的線。 |樣式值|對齊方式| |---|---| |top|根據 superscript 頂端對齊| |bottom|根據 subscript 底端對齊| |text-top|根據文字的頂端對齊| |text-bottom|根據文字的底端對齊| |baseline|根據文字的基準線對齊| |middle|根據文字的基準線加上x 這個字的高度對齊| |super|根據 superscript 的基準線對齊| |sub|根據 subscript 的基準線對齊| |數值|根據文字的基準線加上數值對齊| 根據圖11，我們可以看到元素與元素的垂直排列的效果。 ![](https://i.imgur.com/CgIekhu.png) *圖11：元素與元素之間的垂直對齊。* ## 文繞圖版型文繞圖的版型，可以把圖設定成 `float: left` or `float: right` 來輕易達成。 ### `float` 使元素浮起來，隨後的元素繞著它走元素使用 `float: left` 或 `float: right` 後，會浮在它所處的區塊的左側或是右側，而後的文字或是inline 元素則繞著它呈現。 [`float` 解釋](https://developer.mozilla.org/en-US/docs/Web/CSS/float)。課堂練習：根據此 [Figma mockup](https://www.figma.com/file/q4wsTRewslossmIs3G1mJ5/course-practice-float) 實作文繞圖。 ### `clear` 清除 `float` 效果如果不想要接在 `float` 後的元素繞著 `float` 的元素走，就需要使用 `clear`。 [`clear` 解釋](https://developer.mozilla.org/en-US/docs/Web/CSS/clear)。 # 附錄：更多 CSS 選擇器 ## Attribute Selector ```html <html> <head> <style> a[target="_blank"] { color: red; } </style> </head> <body> <a href="https://twreporter.org" target="_blank"> link with red color </a> <a href="https://twreporter.org" target="_self"> link with default color </a> </body> </html> ``` ## [Pesudo Selector](https://css-tricks.com/pseudo-class-selectors/) ## [Positional Selector](https://css-tricks.com/pseudo-class-selectors/#article-header-id-2) ``` `:first-child` p:first-child 選取任何一個 <p> ，只要 <p> 是他家長的第一個孩子 `:last-child` p:last-child 選取任何一個 <p> ，只要 <p> 是他家長的最後一個孩子 `:nth-child(n)` p:nth-child(2) 選取任何一個 <p> ，只要 <p> 是他家長的第二的孩子 `:nth-of-type(n)` p:nth-of-type(2) 選取任何一個 <p> ，只要 <p> 是他家長的第二的 <p> 的孩子 `:first-of-type` p:first-of-type 選取任何一個 <p> ，只要 <p> 是他家長的第一的 <p> 的孩子 `:last-of-type` p:last-of-type 選取任何一個 <p> ，只要 <p> 是他家長的最後的 <p> 的孩子 `:nth-last-of-type(n)` p:nth-last-of-type(2) 選取任何一個 <p> ，只要 <p> 是他家長的倒數第二個 <p> 的孩子 `:nth-last-child(n)` p:nth-last-child(2) 選取任何一個 <p> ，只要 <p> 是他家長的倒數第二的孩子 `:only-of-type` p:only-of-type 選取任何一個 <p> ，只要 <p> 是他家長的唯一一個 <p> 的孩子 ``` ```html <html> <head> <style> li:first-child { color: red; } </style> </head> <body> <ul> <li> li with red color </li> <li> li with default color </a> </ul> </body> </html> ``` ## [Link-related pseudo class selectors](https://css-tricks.com/pseudo-class-selectors/#article-header-id-0) ``` /* unvisited link */ a:link { color: green; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: red; } /* selected link */ a:active { color: yellow; } ``` ## [Relational pseudo class selectors](https://css-tricks.com/pseudo-class-selectors/#article-header-id-3) ```html <html> <head> <style> /* tags not p */ :not(p) { color: red; } /* tags no content */ :empty { width: 100px; } p { color: black; } </style> <body> <p> black color paragraph <p> <span> red span </span>  <p></p> </body> </html> ``` ## [Text-related pseudo class selectors](https://css-tricks.com/pseudo-class-selectors/#article-header-id-4) ```html <html> <head> <style> p:first-child:first-letter { font-size: 30px; } p { font-size: 18px; } div:first-line { font-size: 30px; } div { font-size: 18px; } </style> </head> <body> <p>The first letter will be larger than others</p> <p>the second paragraph with 18px</p> <div> THE FIRST LINE WILL BE 30px<br/> the second line will be 18px </div> </body> </html> ``` ## 課堂練習： figma: https://www.figma.com/file/AK1m1XYxFAfeHFSsFDoryZ/course_homework3_mockup?node-id=0%3A1 ```htmlembedded= <!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } body { margin: 0; } .mobile-width { width: 375px; background-color: #f1f1f1; } p { width: 300px; margin-left: 38px; margin-bottom: 40px; margin-top: 0px; font-size: 20px; font-weight: 400; line-height: 40px; letter-spacing: 0.5px; color: #404040; } .bg-white { background-color: #fff; margin-left: 0; width: 375px; padding-left: 38px; padding-right: 38px; padding-top: 14px; padding-bottom: 22px; } </style> </head> <body> <div class="mobile-width"> <p> 講到登山，普遍的印象可能是壯闊的山景，雲海朝霞萬丈金芒；也可能是山上人與人之間的情誼，過地形時伸手扶一把，或濕冷雨天一碗熱呼呼的泡麵。我們在山中感受生命各種美好，汲取養分。就算是逆境，痛苦會過去，美會留下，回到人間後依舊能量滿滿再度出發。 </p> <p> 做為人，不知為何，我們傾向記憶美好，卻遺忘過程的苦痛。但我卻想，這是否讓我們理解、記憶一件事情性質的方式，也隨之產生偏誤？ </p> <p> 我想說的是，登山是件會死人的運動 </p> <p class="bg-white"> 某程度上，登上山巔之途，就是在死亡的陰影之下，動用自身全部的感官與技藝，設法避開那些遭致危機的陷阱。這樣的經驗本身，就是一種回報，高處的風景與抵達最高點的滿足，則是額外的嘉獎。 </p> </div> </body> </html> ``` - [範例1](https://github.com/nickhsine/teach-at-nccu/blob/master/109-01/10-20/exercises/exercise-1.html) - [範例2](https://github.com/nickhsine/teach-at-nccu/blob/master/109-01/10-20/exercises/exercise-2.html) - [範例3](https://github.com/nickhsine/teach-at-nccu/blob/master/109-01/10-20/exercises/exercise-3.html) - [範例4](https://github.com/nickhsine/teach-at-nccu/blob/master/109-01/10-20/exercises/exercise-4.html) - [範例5](https://github.com/nickhsine/teach-at-nccu/blob/master/109-01/10-20/exercises/exercise-5.html) - [範例6](https://github.com/nickhsine/teach-at-nccu/blob/master/109-01/10-20/exercises/exercise-6.html) - [範例7](https://github.com/nickhsine/teach-at-nccu/blob/master/109-01/10-20/exercises/exercise-7.html) - [範例8](https://github.com/nickhsine/teach-at-nccu/blob/master/109-01/10-20/exercises/exercise-8.html) - [範例9](https://github.com/nickhsine/teach-at-nccu/blob/master/109-01/10-20/exercises/exercise-9.html) - [範例10](https://github.com/nickhsine/teach-at-nccu/blob/master/109-01/10-20/exercises/exercise-10.html) - [範例11](https://github.com/nickhsine/teach-at-nccu/blob/master/109-01/10-20/exercises/exercise-11.html) 用紙和筆畫出上述範例的程式碼在瀏覽器上呈現的樣子 **（請由1至11，依序練習）**。也請將程式碼的結構轉化成樹狀圖。 # CSS 參考網站 - [檢查各個瀏覽器對 CSS 的支援程度](https://caniuse.com/) - [CSS reference](https://cssreference.io/) - [CSS Selector練習網站](https://flukeout.github.io/)  ###### tags: `teach-at-nccu`, `css`, `html`

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.