---
# System prepended metadata

title: Astro課程 0703 - HTML. CSS(Day2)
tags: [' html', astro, ' css']

---

---
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>
```
![](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)
