Astro課程 0703 - HTML. CSS(Day2)

--- title: Astro課程 0703 - HTML. CSS(Day2) tags: astro, html, css --- # 0703 - HTML. CSS(Day2) ## 回家必看 [阿莫斯の兔偶斯](https://www.youtube.com/watch?v=zQMG3xm7nEg) 可以裝Wox, Afred和Divvy [CSS 屬性選取器 - 一個選取自由度超高的選取器](https://ithelp.ithome.com.tw/articles/10220168) 屬性選取器的七種選取方式 ## 時間軸 10:35 好用工具介紹 10:44 正課開始(圖片標籤) 11:23 CSS解釋 11:43 相對路徑與絕對路徑 11:53 css style 12:18 選取器 13:34 優先權 13:35 屬性和class的優先權一樣 13:37 後代選取器 14:17 練習demo (十分鐘內寫完！) 16:15 另外兩種優先權 16:24 Flex ## 圖片 `<img src="圖片的路徑">` 獨立標籤 xml --> html = xhtml `<br>`強迫換行，也是獨立標籤沒有標記換行就不會換行 `<img src=" "/>`, `<br/>`後面加了斜線是`xml`的規則 ### 絕對路徑與相對路徑 ``` <img src="圖片的位置 or 圖片的路徑 or 路徑"> <img src="C/user/桌面/絕對路徑.jpg"> #斜線就是進去的意思 <img src="相對路徑.jpg"> # ←圖片要在同一個資料夾 <img src="../相對路徑.jpg"> #"../"跳出去的意思，當圖片在不同資料夾時使用 # "../資料夾/圖片.jpg"跳出資料夾，再進去另一個資料夾 ``` ## 網頁標準網頁如何渲染不同年代的標準？ HTML 4.0 XHTML 1.0 HTML 5.0 `<!DOCTYPE>`不是標籤！！用來告訴瀏覽器是用哪個版本(`DTD`文件類型宣告) # CSS 階層式樣式表：幫HTML或XML處理`樣式`的電腦語言 ``` 標準 css1.0 css2.1 (W3C的推薦標準) --- 草案 css3.0 css4 ``` inline-style: 注意：只有在用程式`動態地`去改變外觀(如`javascript`)才適合這樣做好處是前端渲染速度快但是伺服器很累（所以不要這樣寫！） ``` [翻譯] <p style="文字色彩：紅色; 背景色彩：灰色"> --------------------------------- <p style="color: red; background-color: grey"> ``` css style: ``` [翻譯] <style> 段落 { 色彩: 紅色; 背景色彩: 灰色; } --------------------------------- p { color: red; background-color: grey; } </style> ``` css通常放在`<head>`裡面因為瀏覽器會先讀HTML的結構 (`DOM`文件物件模型) 然後再讀JavaScript # 選取器 ## class類別選取器 `.` - 一個物件可以有很多`class` ``` [翻譯] . 前言 { 色彩: 紅色; 背景色彩: 灰色; } <p class="前言"> --- . info { color: red; background-color: grey; } <p class="info"> ``` ## id選取器 `#` `#id名稱{}` - 同個`id`最多只能出現一次 - `id`不一定要給；給`id`通常是為了程式上的需求 ## 選取器的優先權判斷重點**明確性越高，優先權越高** - 兩個選取器類型相同時，放後者會比前者優先 - class的優先大於標籤（最多有八個層級的優先權順序） `!important > inline style > ID選取器 > Class選取器 > Tag (Element) > * > 繼承` ``` <p class="info" id="first" style="color: green;"> ``` [Ref](https://ithelp.ithome.com.tw/articles/10196454) 注意： `!important`是髒東西！不要隨便亂用 ``` p { color: purple !important; background-color: grey; } ``` ## 把選取器組合在一起 - 使用`.`把條件串在一起 - 順序沒關係，但是要全部符合的才會生效 ``` h1.info { # h1標籤和class選取器 } h2.info { } p.info { } ``` ## `[alt]`屬性 css ``` [alt="圖片"]{ border: 4px solid yellow; } ``` html ``` <img class="" alt="圖片" src="https://fakeimg.pl/150x110/?retina=1&text=你好&font=noto"> ``` ### 屬性容易搞混的地方 case 1: ``` img.pic[alt]{ # 三個選取器，優先權較高 } img[alt="amos"]{ # 只有兩個選取器而已 } ``` case 2: ``` img.pic[alt="Amos"]{ # 三個選取器 } img.pic[alt]{ # 也是三個選取器，放後者優先權較高 } ``` case 3: 屬性和class的優先權一樣 ``` img.pic{ } img[alt]{ } ``` ## 後代選取器藉由父層去控制子層以下範例，所有子層的`div`都會被選到 css ``` .box div{ color: red; } ``` html ``` <div class="box"> <div> aaa <div> bbb </div> </div> </div> ``` ### `>` 指定後代的層級 `div > div` 的話，兩層會有效果 `div > div > div` 的話，三層會有效果以`邊框線`和`背景色`為例子： `（記得先預設背景色，不然會被蓋過）` css ``` div{ padding: 30px; border: 10px solid gray; background-color: #fff; /* 沒有設定背景色的情況下，是透明的 */ /* 要先設定為白色再做測試 */ } .papa > div > div > div { background-color: #ccc; } ``` html ``` <div class="papa"> <div class="child1"> aaa <div class="child1-1"> bbb <div class="child1-1-1"> ccc  </div> </div> </div> </div> ``` ![](https://i.imgur.com/pLIvHr8.png) ## 繼承有些屬性會被繼承，必要性在哪？ - 這些屬性多數是跟`文字`有關（多數文字是相同的外觀設計） - `行高`也會被繼承（所以不用一行一行去設定）邊框線的色彩被繼承，方不方便？ => 以設計上來說，不太好看（所以不需要繼承） ## 練習重點 - 一定要用`class`處理未來的需求變更 - 快速鍵：` div*2>h2{news}+ul>li*5>a[#]{lorem}` ## 精簡原始碼 css 以下可以做精簡： ``` .news{ padding: 30px; border: 3px solid #aaa; margin-bottom: 50px; } .event{ padding: 30px; border: 3px solid #aaa; margin-bottom: 50px; } ``` 精簡後 ``` .news, .event{ padding: 30px; border: 3px solid #aaa; margin-bottom: 50px; } ``` ## 需求變更=> 拆開差異化的部分 ``` .news, .event{ padding: 30px; border: 3px solid #aaa; margin-bottom: 50px; } #差異化的部分是邊框顏色 .news{ border-color: darkblue; } .event{ border-color: darkgoldenrod; } ``` 小技巧： ``` border: 3px solid #aaa; ``` 等於 ``` border-style: solid; border-weight: 3px; ``` ## class 模組化名稱可以設定相同部分+不同部分 ``` <div class="list news"> News </div> <div class="list event"> Event </div> ``` 如此一來就可以再少一行程式碼 ``` .list h2{ font-size: 18px; border: 1px solid #ccc; } ``` 重點：針對需求去調整實作方式！沒有標準答案 ## 星號選取器 `*` `*`會選到所有東西 css ``` * { color: red; } .box1{ color: gray; #只會選到box1, 不會選到<p> } ``` html 這行會讓字變成紅色，不會變成灰色（因為沒選到`<p>`） ``` <div class="box1"> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> </div> ``` 要讓字也變成灰色的設定 ``` .box1 p { color: gray; } ``` 如果把下面註解掉，就變成繼承。`p`會繼承`.box1`裡的設定 ``` # * { # color: red; #} .box1{ color: gray; #只會選到box1, 不會選到<p> } ``` ## 萬用選取器 reset 1. 把要設定的語法寫在[Snippet](https://snippet-generator.app/) 例如： ``` * { margin: 0; padding: 0; list-style: none; } ``` 產生一份給vscode的設定檔 ``` "*": { "prefix": "*", "body": [ "* {", " margin: 0;", " padding: 0;", " list-style: none;", "}" ], "description": "萬用選取器 reset" } ``` 2. VScode: `command` + `shift` + `p` 輸入關鍵字`snippet`，打開`preference`：設定`css.json` 把剛剛產生的Snippet檔貼入即可！ # Flex 讓圖片做橫排特性: 版面不會因為width超過原本設定的數值而爆掉 css ``` <style type="text/css"> .card-group{ display: flex; width: 600px; border:2px solid red; } .card{ width: 180px; #這邊就算設了10000px也不會爆掉！ margin: 10px; } .card img{ width: 100%; } </style> ``` html ``` <div class="card-group"> <div class="card"> <img src="https://picsum.photos/300/200?random=1" alt="圖片說明"> <h3>title</h3> <p>Lorem</p> </div> <div class="card"> <img src="https://picsum.photos/300/200?random=1" alt="圖片說明"> <h3>title</h3> <p>Lorem</p> </div> <div class="card"> <img src="https://picsum.photos/300/200?random=1" alt="圖片說明"> <h3>title</h3> <p>Lorem</p> </div> </div> ``` # 預習 reset, inline, box # 小技巧這個勾勾打開，才能用tab鍵補完！ ![](https://i.imgur.com/u511NP5.png)

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.