---
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
<!-- ccc這行背景色會改變為灰色 -->
</div>
</div>
</div>
</div>
```
## 繼承
有些屬性會被繼承，必要性在哪？
- 這些屬性多數是跟`文字`有關 （多數文字是相同的外觀設計）
- `行高`也會被繼承（所以不用一行一行去設定）
邊框線的色彩被繼承，方不方便？
=> 以設計上來說，不太好看（所以不需要繼承）
## 練習
重點
- 一定要用`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鍵補完！
Sign in with Wallet
Connect another wallet