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

--- type: slide --- # 新聞網頁製作（三）- CSS 選擇器與基礎網頁排版 --- ## 學習目標 * CSS 選擇器 * tag 選擇器 * class 選擇器 * id 選擇器 * 組合選擇器 * 排版基礎 * 實作練習 --- ### [CSS 選擇器（CSS Selector）](https://hackmd.io/ccO-gvxFR5-49q3ePoNJkg#CSS-%E9%81%B8%E6%93%87%E5%99%A8%EF%BC%88CSS-Selector%EF%BC%89) - tag 選擇器 - class 選擇器 - id 選擇器 - 複合式選擇器 --- ### Tag Selector ```htmlembedded=  <html> <head> <style> /* 所有的 <p> 元素都套用此風格 */ p { color: pink; } </style> </head> <body> <p>文字會是粉紅色的</p> </body> </html> ``` --- ### Class Selector ```htmlembedded <html> <head> <style> /* 定義 bg-pink class */ .bg-pink { background-color: pink; } /* 定義 small-font class */ .small-font { font-size: 14px; } </style> </head> <body>  <p class="bg-pink"> 粉紅色背景的文章段落。 </p>  <p class="small-font"> 14px 文字大小的文章段落。 </p>  <p class="bg-pink small-font"> 14px 文字大小和粉紅色背景的文章段落。 </p> </body> </html> ``` --- ### ID 選擇器 --- ### 組合選擇器 ```htmlembedded  <style> /* 套用在 <p class="bg-pink"> 元素上 */ /* <p> 不會套用 */ /* <div class="bg-pink"> 也不會套用 */ p.bg-pink { background-color: pink; } </style> ``` --- ### html 樹狀圖 - Parent/Child - Ancestor/Decendent - Sibling --- ### 排版的基礎知識 --- #### 排版動向 - 由上至下 - 由左至右 --- #### 區塊（`display: block`）排版 - 可以指定寬度 - 可以指定高度 - 不管寬度多少，都會佔滿一行（Parent 的寬度） - margin 設定有效 - 可以有巢狀區塊（大區塊包住小區塊／Parent Child 關係） --- #### 文字（`display: inline`）排版 - 不能指定寬度 - 不能指定高度 - sibling 之間會在同一行接續排列，直到超過 Parent 寬度後斷行 - margin 設定無效 --- #### `display: inline-block` 排版 - 擁有 `inline` 和 `block` 兩種特性 - 可以設定寬高 - 會在同一行接續排列 --- #### 注意事項 1. `block` 可以是 `inline` 的 Parent 2. `inline` 不可以是 `block`, `inline-block` 的 Parent 3. 有些 `block` 不能是 nested `block`（例如：`<p>`） --- #### 透過區塊和樹狀圖來排版 - 透過區塊給定寬高 - 區塊若沒有指定寬度，寬度跟隨 Parent 的寬度 - 區塊若沒有指定高度，高度由 Child 決定 - 若 Child 沒有指定高度，則由文字決定高度 --- ### 版面對齊 - 水平對齊 - 文字置中 - 區塊置中 - 垂直對齊 - 文字置中 - 區塊置中（以後會說明） --- #### 文字水平置中 ```htmlembedded= <div style="text-align: center;"> 理性飲酒 </div>   ``` --- #### 區塊水平置中 ```htmlembedded= <div style="width: fit-content; margin-left: auto; margin-right: auto;"> 衝動去愛 </div>      ``` --- #### 文字垂直置中 ```htmlembedded= <div> <span style="vertical-align: middle;">理性飲酒</span> <span>衝動去愛</span> </div>  ``` --- ### 文繞圖版型 ```htmlembedded= <img style="float: right; margin-bottom: 10px; margin-right: 10px;" src="https://img-src"> </img> <p> 元素使用 float: left 或 float: right 後，會浮在它所處的區塊的左側或是右側，而後的文字或是inline 元素則繞著它呈現。 </p>  ``` --- ### 課堂練習 ```htmlembedded=   <body>  <div style="width: 100px; height: 100px; background-color: pink;"> </div> </body>  <body> <div style="width: 50px; height: 50px; background-color: pink;"> </div>  <div style="width: 50px; height: 50px; background-color: lightblue;"> </div> </body>  <body> <div style="width: 150px; height: 150px; background-color: lightseagreen;"> <div style="width: 50px; height: 50px; background-color: pink;"> </div>  <div style="width: 50px; height: 50px; background-color: lightblue;"> </div> </div> </body>  <body> <div style="width: 150px; height: 150px; background-color: lightseagreen;">  <div style="width: 50px; height: 50px; background-color: pink display: inline-block;"> </div> <div style="width: 50px; height: 50px; background-color: lightblue;"> </div> </div> </body>  <body> <div style="width: 150px; height: 150px; background-color: lightseagreen;"> <div style="width: 50px; height: 50px; background-color: pink; display: inline-block;"> </div>  <div style="width: 50px; height: 50px; background-color: lightblue; display: inline-block;"> </div> </div> </body>  <body> <div style="width: 150px; height: 150px; background-color: lightseagreen;"> <div style="width: 50px; height: 50px; background-color: pink; display: inline-block;"> </div> <div style="width: 50px; height: 50px; background-color: lightblue; display: inline-block;"> </div>  <span style="font-size: 30px;">文字要放在哪裡？</span> </div> </body>  <body> <div style="width: 150px; height: 150px; background-color: lightseagreen;"> <div style="width: 50px; height: 50px; background-color: pink; display: inline-block;"> </div> <div style="width: 50px; height: 50px; background-color: lightblue; display: inline-block;"> </div>  <span style="width: 50px; height: 50px; font-size: 30px;"> 文字要放在哪裡？</span> </div> </body>  <body>  <div style="width: 150px; height: 150px; background-color: lightseagreen; overflow: scroll;"> <div style="width: 50px; height: 50px; background-color: pink; display: inline-block;"> </div> <div style="width: 50px; height: 50px; background-color: lightblue; display: inline-block;"> </div>  <p style="font-size: 30px;">文字要放在哪裡？</p> </div> </body>  <body> <div style="width: 150px; height: 150px; background-color: lightseagreen; overflow: scroll;"> <div style="width: 50px; height: 50px; background-color: pink; display: inline-block;"> </div> <div style="width: 50px; height: 50px; background-color: lightblue; display: inline-block;"> </div>  <p style="font-size: 30px; text-align: right;"> 文字要放在哪裡？</p> </div> </body>  <body>  <div style="width: 150px; height: 150px; background-color: lightseagreen; overflow: scroll; text-align: right;"> <div style="width: 50px; height: 50px; background-color: pink; display: inline-block;"> </div> <div style="width: 50px; height: 50px; background-color: lightblue; display: inline-block;"> </div>  <p style="font-size: 30px;"> 文字要放在哪裡？ </p> </div> </body>  <body>  <div style="width: 150px; height: 150px; background-color: lightseagreen; overflow: scroll; text-align: right;">  <div style="width: 50px; height: 50px; background-color: pink;"> </div> <div style="width: 50px;height: 50px; background-color: lightblue; display: inline-block;"> </div>  <p style="font-size: 30px;"> 文字要放在哪裡？ </p> </div> </body> ``` ###### tags: `slides`