---
# System prepended metadata

title: HTML & CSS
tags: [HTML&CSS]

---

HTML & CSS
===
> 2023/10/27 & 2023/10/31
# 解析度
* 手機 * 3 = 電腦 (不是一定) 
* 0.5像素 = 灰色
* desktop
![](https://hackmd.io/_uploads/ryprdjOzp.jpg)
* mobile
![](https://hackmd.io/_uploads/SkVUdiOMp.jpg)

# UI&UX
* KVG = 第一屏

# CSS
## 建立CSS
### lnline-style:
瀏覽器解析效率高
```css=
  <h1 style="color: red">
```

### 建立<style></style>標籤，可在內寫CSS語法
* 寫在<head></head>內，因為解析是由上到下
```css=
<style>
      h1 {
        color: red;
      }
</style>
```

### 建立.css檔案，將html連結起來
```css=
    <link rel="stylesheet" href="style.css" />
    <style>
```
### 共用CSS & 非共用CSS
比都連同一個效能較好
* 可能一個頁面會連兩個CSS，一個是共用、一個非共用

### 檢測網頁速度 & SEO
[PageSpeed Insights](https://pagespeed.web.dev/)

### css寫法
* 寫法一
```css=
      p {
        color: pink;
        font-size: 22px;
        border: 3px double red;
      }
```
* 寫法二
```css=
      p {
        color: pink;
        font-size: 22px;
        border-width:3px 6px 9px 12px
        /* 上 右 下 左 */
        border-style:double
        border-color:red
      }
```
* border-width寫法

| 數字      | 設定值 | 
| -------- | -------- | 
| 1     | <上下左右>    | 
| 2 | <上下> <右左> | 
| 3 | <上> <右左> <下> | 
| 4 |<上> <右> <下> <左> | 

## 相同設定
```css=
.no1,
.no2 {
  color: pink;
  font-size: 22px;
  border: 3px solid red;
}
```
# 選取器
## 同等級選取器
後面會蓋掉前面
### 選取器順序
#### !important > animation > inline-style > ID > class > Tag
* ID不能被重複使用
* 還是最常使用class
* 若標籤+clss 特異性更高，優先順序更高
```css=
/* 標籤＋class */
p.no3 {
  color: #ccd5ae;
}
```

* 怎麼比較？
p.no1 > .no1 ; 11 > 10 
![](https://hackmd.io/_uploads/rJbDNAOzp.png)

* important v.s. important
比較ID > class > tag
* 對div設定色彩 裡面的文字也會改變
    * 繼承自父層的設定

* 確認選取的對象，若選到同一個才會有分數的計算
* “＊”不算分，不列入算分的比較中
* 空格的寫法是下一層，可以用此做區隔
```js=
div span {
  background-color: darkblue;
  color: red;
}
```
## 偽類 :
優先權和class一樣
瀏覽器內建的分類 or CSS內建的分類

* 第一個 p:first-of-type
```css=
p:first-of-type {
  background-color: darkblue;
  color: red;
}
```
* 第一個子物件 p:first-child
會看第一個子物件是不是div
只要是第一個child，都會被選到
```js=
p:first-child {
  background-color: darkblue;
  color: red;
}
```
* 最後一個子物件 :last-child
* 第n個子物件 :nth-child(n)
* 倒數第n個子物件 :nth-last-child(n)
* 只有一個子物件 :only-child
    * 搜尋tag往下的唯一子層
* 第一個物件 :first-of-type{}
```javascript=
body *:first-of-type{
    backgound-color:orange
}
```
* 最後一個物件 :last-of-type{}
* 第n個物件 :nth-of-type(n)
* 倒數n個物件 :nth-last-of-type(n)
* :not(){}
* :empty{}

# 超連結
```css=
a {
  color: pink;
}
/* 已造訪 */
a:visited {
  color: gray;
}
/* 聚焦 */
a:focus {
  color: red;
}
/* 滑過 */
a:hover {
  color: green;
}
/* 按下去 */
a:active {
  color: orange;
}
```

# 統一預設值
## Reset
[meyerweb](https://meyerweb.com/eric/tools/css/reset/)
## normalize
沒有那麼強制，只將各家瀏覽器變為預設值
[normalize](https://necolas.github.io/normalize.css/)

# 單位
* em 父層行高
* rem 根目錄層（HTML為20px）
* ex （px的一半）
* px
* %

# 補充
可以看P.17-P.20

# box
![](https://hackmd.io/_uploads/rJA5sJ0Ma.png)
* box-sizing只能設定content-box or border-box
```css=
.box {
  width: 200px;
  background-color: #fa0;
  font-size: 20px;
  border: 20px solid red;
  padding: 20px;
  margin: 20px;
  box-sizing: border-box;
}
```
* ```<H1>```和```<P>```都屬於block元素
* block = 區塊元素；inline = 行元素
## 要怎麼讓block橫排？
    * display:flex
    * display = 把物件特性改掉

### 對齊方向： 
```css=
.wrap p {
  width: 200px;
  background-color: #fa0;
  display: inline-block;
  margin: 10px;
  vertical-align: middle;
  /* top/baseline/middle */
}
```
橫向空白字元text-align：inline、inline-block

*margin:auto 把剩餘空間分配，可利用此居中
```css=
.wrap div {
  margin-left: auto;
  margin-right: auto;
}
```
* inline-box的空間是被撐開的，所以```margin-top: auto```不會有反應

### flex-direction
方向
* row由左至右（依照文字方向）
```html=
<html lang="en" dir="rtl"> //(由右至左」)
```
```html=
writing-mode: verticaal-lr //直書
```

* 主軸：
```html=
flex-direction：row
flex-direction：row-reverse
```


### flex-wrap
換列、欄，交叉軸
* 交叉軸：
```html=
flex-wrap: wrap
flex-wrap: wrap-reverse
```

### justify-content
* content = 空間
控制子物件在父層空間中"主軸"的對齊與分佈

### aligh-content
控制彈性列在父層空間中"交叉軸"的對齊與分佈

### aligh-item
* items = 子物件
控制子物件在彈性列中交叉軸的位置

---
剩餘空間併入彈性列
- stretch
 
剩餘空間不會併入彈性列
- flex-strat
- center
- flex-end
- space-between
- spcace=around
- space-evenly
