--- # System prepended metadata title: CSS 筆記 tags: [CSS] --- # CSS 筆記 ## CSS 參考網址 - [w3schools](https://www.w3schools.com/css/) :::success 學習完後可去練習的地方練習我們設計的題目，可以試試看會不會~~ ::: ## How to use CSS 有三種插入style的方式: 1. [External CSS](#External-CSS) 2. [Internal CSS](#Internal-CSS) 3. [Inline CSS](#Inline-CSS) ### External CSS 將CSS指令寫在另一個副檔名為.css的檔案中(不能包含任何HTML指令)，可以直接改變整個網站風格 指令: ```html ``` ### Internal CSS 將CSS指令寫在和HTML指令同一個檔案中，只能修改此網頁的風格 指令: ```html ``` ### Inline CSS 將CSS指令寫在相關的元素附近，只能修改一個元素的風格 指令: ```html

This is a heading

This is a paragraph.

``` #### Priority :::warning 當同時使用External, Internal, Inline CSS時，將以Inline CSS的內容作為最後表現形態 即CSS優先順序為： Inline > Internal > External 但在任一CSS後面加入"!important"，則無視優先順序 ::: ------------------------------------------------------- ## Selectors CSS 選擇器可用來**尋找**(或選擇)想要裝飾的HTML元素。 **CSS selectors 的五種分類:** 1. [Simple selectors](#Simple-selectors) - 以name, id, class作為選擇參考 2. [Combinator selectors](#Combinator-selectors) - 以特殊關聯符連結兩個simple seletors，例：`>`、`+`、`~` 3. [Pseudo-class selectors](#Pseudo-class-selectors) - 以特定狀態作為選擇參考，例：`:hover`、`:visited`、`first-child` 4. [Pseudo-elements selectors](#Pseudo-class-selectors) - 選擇並裝飾元素的部分區塊，例：`::first-line`、`::before` 5. [Attribute selectors](#Attribute-selectors) - 以屬性或其值作為選擇參考，例：`a[target="_blank"]`、`[attribute~="value"]` ### 1. Simple selectors 用name、id、class選擇要修改風格的元素 * name 所有用到**同一個tag名稱**的element都會改變風格。 ```html

Every paragraph will be affected by the style.

Me too!

And me!

```

Every paragraph will be affected by the style.

Me too!

And me!

* id(#) 用**id**選擇**特定元素**改變其風格，==一個頁面中的id要唯一==。 ```html

Hello World!

This paragraph is not affected by the style.

```

Hello World!

This paragraph is not affected by the style.

* class(.) --> 用**class名稱**選擇要改變風格的**所有特定元素** (一個元素可以屬於多個class，以空格分開) ```html

Dodgerblue and center-aligned paragraph.

Dodgerblue and center-aligned paragraph.

```

Dodgerblue and center-aligned paragraph.

Dodgerblue and center-aligned paragraph.

* name + class --> 改變特定tag中特定class名稱的風格 ```html This span will not be affected

This paragraph will be red and center-aligned.

```
This span will not be affected

This paragraph will be dodgerblue and center-aligned.

* Universal(*) --> 改變**所有頁面**上元素的風格 ```html

Hello world!

Every element on the page will be affected by the style.

Me too!

And me!

```

Hello world!

Every element on the page will be affected by the style.

Me too!

And me!

* group --> 將不同的元素改成同一個風格 ```html

Hello World!

Smaller heading!

This is a paragraph.

```

Hello World!

Smaller heading!

This is a paragraph.

-------------------------------------------------- ### 2. Combinator selectors 用來指定和其他元素有關係的特定元素，通常有父子、兄弟、前後，由多個simple selector組成。 * descendant selector (space) --> 是特定元素的後代元素會被修改 ```html

Paragraph 1 in the div.

Paragraph 2 in the div.

Paragraph 3 in the div.

Paragraph 4. Not in a div.

Paragraph 5. Not in a div.

```

Paragraph 1 in the div.

Paragraph 2 in the div.

Paragraph 3 in the div.

Paragraph 4. Not in a div.

Paragraph 5. Not in a div.

* child selector (>) --> 是特定元素的子元素會被修改 ```html

Paragraph 1 in the div.

Paragraph 2 in the div.

Paragraph 3 in the div (inside a section element).

Paragraph 4 in the div.

Paragraph 5. Not in a div.

```

Paragraph 1 in the div.

Paragraph 2 in the div.

Paragraph 3 in the div (inside a section element).

Paragraph 4 in the div.

Paragraph 5. Not in a div.

:::info :::spoiler Child和Descendant差異 * Child(子元素) * 直接位於父類別的元素(只縮排一次) eg: ```html

Paragraph 1 in the div.

``` * Descendant(後代) * 位於父類別內的所有元素(可以縮排一次或多次) eg: ```html

Paragraph 3 in the div (inside a section element).

``` ::: * adjacent sibling selector (+) --> 是在同一個父元素下且在特定元素==後==的**一個元素**會被修改(有相同父元素的子元素) ```html

Paragraph 1 in the div.

Paragraph 2. After a div.

Paragraph 3. After a div.

``` * paragraph2和`
`屬於同一個父元素且paragraph2在`
`之後

Paragraph 1 in the div.

Paragraph 2. After a div.

Paragraph 3. After a div.

* general sibling selector (~) --> 是在同一個父元素下且在特定元素==後==的**所有元素**會被修改(有相同父元素的子元素) ```html

Paragraph 1.

Paragraph 2.

Paragraph 3.

Paragraph 4.

```

Paragraph 1.

Paragraph 2.

Paragraph 3.

Paragraph 4.

### 3. Pseudo-class selectors * 用來設定元素的狀態(可以搭配HTML class) * eg:滑鼠游標經過文字時會放大文字 * 使用順序：++a:link、a:visited -> a:hover -> a:active++ ```html

Styling a link depending on state

This is a link

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.

Note: a:active MUST come after a:hover in the CSS definition in order to be effective.

``` 滑鼠游標放到"This is a link"時字的顏色會變粉紅色 link: ![image](https://hackmd.io/_uploads/ByUqGd6s1l.png) hover: ![image](https://hackmd.io/_uploads/ByOuTITjJl.png) 其他指令舉例： * first-child -> 遇到某父類別中的第一個子元素 * lang -> 特定的語言會被修改 :::info :::spoiler link, visited, hover, active**區別**及**排列順序** * **link v.s. visited** * link：尚未被訪問的連結使用的格式 * visited：已被訪問的連結使用的格式 * **hover v.s. active** * hover：當鼠標懸浮於目標之上時所顯示的格式 * active：當鼠標按下左鍵(尚未釋放左鍵前)所展現的格式 * 在CSS的定義中，link, visited, hover, focus, active的排列有一定的順序，排列順序如下: ***link -> visited -> hover -> focus -> active*** ::: ### 4. Pseudo-elements selectors 用在修改特定部分的元素(可以搭配class使用、針對同一個元素可以多個Pseudo-elements一起使用)，例如一段文字中只修改第一行的風格。 * `::first-line`：第一行的的長度會依照網頁大小不同而不同(只能用在block-level的元素) ```html

You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.

``` ![image](https://hackmd.io/_uploads/B1Jl9y6Ya.png) 其他舉例： * `::first-letter`：第一個字母(只能用在block-level的元素) * `::before`：在特定元素前插入一些內容 * `::after`：在特定元素後插入一些內容 * `::marker`：針對list編號修改風格 * `::selection`：設定當滑鼠游標選取某段文字時的風格，像是color、background、cursor和outline ### 5. Attribute selectors --> 依照attribute或attribute值的內容選擇元素 有`target`屬性的才會修改風格，`target`也可以改成 `target="_blank"`代表屬性有特定值時才修改風格 ```html

CSS [attribute] Selector

The links with a target attribute gets a yellow background:

w3schools.com disney.com wikipedia.org ``` ![image](https://hackmd.io/_uploads/rk-MkgTta.png) 其他舉例： * `[attribute~="value"]`：屬性值為特定的單詞(空白分隔) * `[title~="flower"]`可調整的類別：`title="flower"`、 `title="klematis flower"` * `[attribute|="value"]`：屬性值為特定的文字(可以有'-'符號連接) *`[class~="top"]`可調整的類別：`class="top"`、`class="top-text"` * **不能**調整的類別：`class="topcontent"` * `attribute^= "value"`：屬性值由特定的文字開頭 * `[class~="top"]`可調整的類別：`class="top"`、`class="top-text"`、`class="topcontent"` * `attribute$= "value"`：屬性值由特定的文字結尾 * `[class$="test"]`可調整的類別： `class="first_test"`、 `class="my-test"`、`class="mytest"` * `attribute*= "value"`：屬性值為特定的文字(可以是某個詞的一部分) * eg：`[class*= "te"]` title有te文字都會被調整 * 針對特定的styling forms不用class或ID，依據input type去調整 * eg:`input[type="text"]` # 主要使用 CSS ## Background - background-color ` background-color: lightblue; /*把背景換藍色*/ ` - background-image ` background-image: url("paper.gif"); /*背景圖片是paper.gif*/ ` - background-repeat `background-repeat: repeat-x; /*水平重複*/` `background-repeat: repeat-y; /*垂直重複*/` `background-repeat: no-repeat;/*不重複*/` - background-attachment `background-attachment: fixed;/*固定背景*/` `background-attachment: scroll;/*滾動背景*/` - background-position `background-position: right top;/*右上*/` `background-position: left bottom;/*左下*/` ## Color 可以更改字的顏色或背景顏色，CSS裡有已命名好的顏色，也可以自己用別的方式去設定顏色，例如 - RGB - HEX - HSL ```html

Hello World

Hello World

Hello World

...

...

...

...

...

``` - 做出來長這樣 ![螢幕擷取畫面 2024-01-21](https://hackmd.io/_uploads/BkCNSs5Yp.png) ## Box Model - Content - 內容，包含文字和圖像 - Padding - 框框跟內容的中間 - Border - 框框的樣式、大小以及顏色 - Margin - 框框外面的邊界大小 ![image](https://hackmd.io/_uploads/BkSQ63Ica.png) ```html
This is a example.
``` - 做出來的樣子 ![image](https://hackmd.io/_uploads/rkC4ypIc6.png) ## Float `float: right;` - left - 靠左 - right - 靠右 - none - 預設 - inherit - 繼承父元素的設定 inline才能用，block不能用，因為block占據整個畫面無法靠左或靠右，可以利用display轉換成inline ## RWD 響應式網頁:可以根據不同的螢幕大小去設計一個有彈性的使用者介面 ```html ``` - 小於480px的樣子 ![image](https://hackmd.io/_uploads/rJ9mEaU9p.png) - 大於480px的樣子 ![image](https://hackmd.io/_uploads/HkREVaLca.png) ## Flex 可以有效率的調整排版，像是置中區塊、對齊內容，也可以配合響應式網頁進行換行，一個屬性只對單一方向排版 以下是常見的屬性： - `display:flex;` //宣告此容器要使用flex - `flex-direction: column;` //控制主軸方向，row:水平方向; column:垂直方向 - `flex-wrap: wrap;` //wrap:換行; nowrap:不換 - `justify-content: center` //center:置中;flex-start:靠左;flex-end:靠右 - `align-items:center` //center:置中;flex-start:靠上;flex-end:靠下 Flexbox 的組成包含: - container : 父元素（容器） <div>元素 - items : container <div>中的項目 ![image](https://www.casper.tw/images/2017/flex/flex.png) 要有flex佈局，父容器就要將`dispaly`屬性設為`flex`，而內部第一層的子元素就會自動成為flex items :::spoiler Flex vs. Inline-Flex - Flex：彈性容器會變成block元素 `display: flex;` - Inline-Flex：彈性容器會變成inline元素 `display: inline-flex;` ::: --- ### Flex Container * [設定顯示方向及換行](#flex-flow:-設定顯示方向以及是否換行(為`flex-direction`與`flex-warp`的縮寫)) * [指定顯示方向](#flex-direction:-指定顯示方向) * [控制是否換行](flex-wrap:-控制超出範圍時是否換行) * [水平方向對齊](#justify-content:-控制主軸方向的對齊(通常為水平對齊)) * [單行垂直方向對齊](#align-items:-控制交錯軸方向的單行對齊(通常為垂直對齊)) * [整體垂直方向對齊](#align-content:-整體以交錯軸方向對齊) #### flex-direction: 指定顯示方向 設定flex的軸線(主軸與交錯軸)，會影響內元件對齊。 * 下圖是預設軸線方向： ![image](https://www.casper.tw/images/2017/flex/flex-axis.png) * row - 預設值，讓物件沿左到右水平顯示 * 程式碼 ```html=
1
2
3
``` * 結果預覽
1
2
3
* row-reverse - 讓物件由右到左水平顯示(水平反轉) * 程式碼 ```css= .flex-container { display: flex; flex-direction: row-reverse; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
* column - 讓物件由上到下垂直顯示(主軸轉為垂直向下) * 程式碼 ```css= .flex-container { display: flex; flex-direction: column; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
* column-reverse - 讓物件由下到上垂直顯示(主軸轉為垂直向上) * 程式碼 ```css= .flex-container { display: flex; flex-direction: column-reverse; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
以下是所有選項的示意圖： ![image](https://www.casper.tw/images/2017/flex/flex-direction.png) [go back to Flex-Container!](#Flex-Container) #### flex-wrap: 控制超出範圍時是否換行 * nowrap - 預設值，不換行 * 程式碼 ```css= .flex-container { display: flex; flex-wrap: nowrap; background-color: DodgerBlue; } ``` * 結果顯示
1
2
3
4
5
6
7
8
9
10
11
12
* wrap - 超出範圍就換行，正著排(由上往下) * 程式碼 ```css= .flex-container { display: flex; flex-wrap: wrap; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
4
5
6
7
8
9
10
11
12
* wrap-reverse - 超出範圍就換行，倒著排(由下往上) * 程式碼 ```css= .flex-container { display: flex; flex-wrap: wrap-reverse; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
4
5
6
7
8
9
10
11
12
[go back to Flex-Container!](#Flex-Container) #### flex-flow: 設定顯示方向以及是否換行(為`flex-direction`與`flex-warp`的縮寫) * 程式碼 ```css= .flex-container { display: flex; flex-flow: row wrap; background-color: DodgerBlue; } ``` * 結果顯示
1
2
3
4
5
6
7
8
9
10
11
12
[go back to Flex-Container!](#Flex-Container) #### justify-content: 控制主軸方向的對齊(通常為水平對齊) * center - 置中 * 程式碼 ```css= .flex-container { display: flex; justify-content: center; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
* flex-start - 預設值，讓內元件從 container 的主軸起始位置開始（通常是從左向右） * 程式碼 ```css= .flex-container { display: flex; justify-content: flex-start; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
* flex-end - 讓內元件從 container 的主軸末尾位置開始 * 程式碼 ```css= .flex-container { display: flex; justify-content: flex-end; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
* space-around - 內元件彼此間距相等，且邊緣留有內元件間距的一半 * 程式碼 ```css= .flex-container { display: flex; justify-content: space-around; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
* space-between - 內元件彼此間距相等，且兩端內元件貼齊邊緣 * 程式碼 ```css= .flex-container { display: flex; justify-content: space-between; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
* space-evenly - 內元件彼此間距相等，且邊緣空間也和間距一樣大 * 程式碼 ```css= .flex-container { display: flex; justify-content: space-evenly; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
[go back to Flex-Container!](#Flex-Container) #### align-items: 控制交錯軸方向的單行對齊(通常為垂直對齊) * center - 單行置中(高度平均分配) * 程式碼 ```css= .flex-container { display: flex; height: 200px; align-items: center; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
* flex-start - 從 container 的交錯軸起始位置開始（通常是從上到下） * 程式碼 ```css= .flex-container { display: flex; height: 200px; align-items: flex-start; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
* flex-end - 從 container 的交錯軸末尾位置開始（通常是從下到上） * 程式碼 ```css= .flex-container { display: flex; height: 200px; align-items: flex-end; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
* stretch - 預設值(等同於normal)，若內元件未設置高度或設為auto，內元件會在交錯軸伸縮以符合 container * 程式碼 ```css= .flex-container { display: flex; height: 200px; align-items: stretch; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
* baseline - 內元件依字符底部基準線擺放，用在子元素的字體大小不同時。 * 程式碼 ```css= .flex-container { display: flex; height: 200px; align-items: baseline; background-color: DodgerBlue; } ``` * 結果預覽

1

2

3

4
[go back to Flex-Container!](#Flex-Container) #### align-content: 整體以交錯軸方向對齊 * center - 整體置中於 container * 程式碼 ```css= .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: center; overflow: scroll; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
4
5
6
7
8
9
10
11
12
* stretch - 預設值，整體一起伸縮以填滿整個 container * 程式碼 ```css= .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: stretch; overflow: scroll; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
4
5
6
7
8
9
10
11
12
* flex-start - 整體從 container 的交錯軸起始位置開始(通常為上方) * 程式碼 ```css= .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: flex-start; overflow: scroll; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
4
5
6
7
8
9
10
11
12
* flex-end - 整體從 container 的交錯軸末尾位置開始(通常為下方) * 程式碼 ```css= .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: flex-end; overflow: scroll; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
4
5
6
7
8
9
10
11
12
* space-between - 整體的行間距相等，邊緣貼齊交錯軸始末兩端 * 程式碼 ```css= .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: sapce-between; overflow: scroll; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
4
5
6
7
8
9
10
11
12
* space-around - 整體的行間距相等，且邊緣(通常為上下)留有內部間距的一半 * 程式碼 ```css= .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: sapce-around; overflow: scroll; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
4
5
6
7
8
9
10
11
12
* space-evenly - 整體間距相等，且邊緣空間(通常為上下)也和間距一樣大 * 程式碼 ```css= .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: space-evenly; overflow: scroll; background-color: DodgerBlue; } ``` * 結果預覽
1
2
3
4
5
6
7
8
9
10
11
12
[go back to Flex-Container!](#Flex-Container) --- ### Flex Items [The order Property](#The-order-Property:) [The flex-grow Property](#flex-grow) [The flex-shrink Property](#The-flex-shrink-Property) [The flex-basis Property](#The-flex-basis-Property) [The flex Property](#The-flex-Property) [The align-self Property](#The-align-self-Property) 在 flex container 中的直接子元素(direct child elements)會自動變成 flex items。 :::info flex items 的CSS的屬性有 : * order * flex * flex-grow * flex-shrink * flex-basis * align-self ::: #### The order Property : * order屬性指定了 flex items 在 flex container 中的順序(由小排到大)，==order值必須為整數，預設值為0，可為負值==。 * 程式碼 ```html=
1
2
3
4
``` * 結果預覽
1
2
3
4
#### flex-grow * flex-grow 屬性指定了有剩餘空間時一個 flex items相對於其他 flex items可以在主軸方向上擴展的比例，預設值為0，可為小數不可為負值。 * 程式碼 ```html=
1
2
3
``` * 結果預覽
1
2
3
:::spoiler 如何計算擴展比例? 1. 設總寬為550px，內元件三個各先消耗30px，還有內元件兩側的margin長度各為10px，剩餘空間為400px(550-30\*3-10\*6)。 1. 計算flex-grow比例總和(0.5 : 0.5 : 4)得5，400/5=80px，前兩個元件增寬40px(80\*0.5=40)，最後的元件增寬320px(80\*4=320) * 以上算式可參考上方「結果預覽」的詳細尺寸 ::: #### flex-shrink * flex-shrink 屬性指定了當items超出空間時一個 flex items相對於其他 flex items可以被壓縮的比例，==預設值為1，可為小數，不可為負值，不想被壓縮可設為0==。 * 程式碼 ```html=
1
2
3
``` * 結果預覽
1
2
3
:::spoiler 如何計算壓縮比例? 1. 設總寬為550px，內元件三個寬度各為180px，margin都為10px，則超出空間為50px(180\*3+10\*6-550=50)。 1. 計算壓縮權重(1\*180+1\*180+3\*180=900)為900px，將50px/900px=1/18為壓縮比率，前兩個元件壓縮10px(180/18=10)，最後的元件壓縮30px(180/18\*3=30) 1. 前兩個元件的寬度為170px(180-10=170)，最後的元件為150px(180-30=150) * 以上算式可參考上方「結果預覽」的詳細尺寸 ::: #### flex-basis * 指定 flex items (子元素)的初始長度，會因為 flex-direction 的不同而改變指定長度的對象(row->width/column->height)，預設值為0 ```html=
1
2
3
4
``` ![image](https://hackmd.io/_uploads/rJp_cLZjJg.png) #### The flex Property * flex 屬性是一個簡寫屬性，用於 flex-grow、flex-shrink 和 flex-basis 屬性。 * 如果 flex 只填了一個數值，預設是調整「flex-grow」的效果。 * not growable (0), not shrinkable (0), 初始長度為 200 pixels: ```html=
1
2
3
4
``` ![image](https://hackmd.io/_uploads/rk1hkg4j1l.png) #### The align-self Property * align-self 屬性指定 flex items 在flex container 內的對齊方式(只適用於交錯軸)。align-self 屬性會覆蓋容器的 align-items 屬性設置的預設對齊，因此可個別設定items的值。 * 將第三個項目對齊到container中間 ```html=
1
2
3
4
``` ![image](https://hackmd.io/_uploads/HkY8QDWo1g.png =80%x) * 將第二個items對齊到 container 頂端，第三個items對齊到 container 底端 ```html=
1
2
3
4
``` ![image](https://hackmd.io/_uploads/r10QBwWj1g.png =80%x) ---------------------------------------------- #### Responsive Flexbox * 當頁面寬度超過800px時，flex-direction 會由row變成column ```html= .flex-container { display: flex; flex-direction: row; } /* Responsive layout - makes a one column layout instead of a two-column layout */ @media (max-width: 800px) { .flex-container { flex-direction: column; } } ``` * 另外一個方法:更改 flex items 中 flex 的百分比，以產生適合各種螢幕尺寸的佈局，==記得在.flex-container中也要放flex-wrap: wrap== ```html= .flex-container { display: flex; flex-wrap: wrap; } .flex-item-left { flex: 50%; } .flex-item-right { flex: 50%; } /* Responsive layout - makes a one column layout instead of a two-column layout */ @media (max-width: 800px) { .flex-item-right, .flex-item-left { flex: 100%; } } ``` ## Grid 可以幫忙分配版面，將版面切成網格狀 [直接上w3schools教學](https://www.w3schools.com/css/css_rwd_grid.asp) - 有兩種寫法(block、inline) ```css grid-container { display: grid; //display寫grid } grid-container { display: inline-grid; //display寫inline-grid } ``` - column示意 ![image](https://hackmd.io/_uploads/S19QnTLcT.png) - row示意 ![image](https://hackmd.io/_uploads/S1cz3a8q6.png) - column-gap、row-gap示意 ![image](https://hackmd.io/_uploads/BJWW36U96.png) ### Grid Container Container 內 Item 行列的排列方式可由 ``` .grid-container1 { display: grid; grid-template-columns: auto 80px 1fr 30%; /*n個變數代表一行n個Item，這行有4個*/ grid-template-rows: auto auto;/*n個變數代表一列n個Item，這行有2個，假如有第三行(這個例子大於9個item)，grid-auto-rows可統一控制*/ } .grid-container2 { display: grid; grid-template: 100px 200px 50px/ 150px 150px ;/*三行兩列*/ } .grid-container3 { display: grid; grid-template: "header header" "sidebar main" "footer footer"; grid-template-columns: 200px 1fr; grid-template-rows: 100px 1fr 50px; } ``` ![螢幕擷取畫面 2025-03-04 223700](https://hackmd.io/_uploads/HkHVgcVj1g.png) :::spoiler ```

Grid Container 1

1
2
3
4
5
6
7
8
9

Grid Container 2

1
2
3
4
5
6

Grid Container 3

Header
Sidebar
Main Content
Footer
``` ::: * auto：根據內容自適應寬度。 * px：固定單位px。 * % ：Container寬度的幾%。 * fr：剩餘的可用空間的幾等分。 minmax(min, max)可設定縮放的最大與最小。 repeat(3, 1fr) 同等於 1fr 1fr 1fr。 以及展示 ``` .grid-container { display: grid; place-content:center;/*上下左右*/ justify-content:center;/*左右*/ align-content:center;/*上下*/ } ``` | 參數種類 |意思 |例圖(justify-content)| | -------- | -------- | -------- | | start | 貼齊上/左 | ![螢幕擷取畫面 2025-03-04 160135](https://hackmd.io/_uploads/Sy2GNVViJx.png)| | end | 貼齊下/右|![螢幕擷取畫面 2025-03-04 160150](https://hackmd.io/_uploads/rJwmN4VoJl.png)| | center | 置中(不填滿上下左右) |![螢幕擷取畫面 2025-03-04 160204](https://hackmd.io/_uploads/S1HrVNEske.png)| |space-between|平分畫面且間隔相等，邊界沒有間隔|![螢幕擷取畫面 2025-03-04 160301](https://hackmd.io/_uploads/SyWLN44iJl.png)| |space-around|平分畫面且間隔相等，邊界間隔只有一半寬|![螢幕擷取畫面 2025-03-04 160334](https://hackmd.io/_uploads/rksLVV4syx.png)| |space-evenly|平分畫面且間隔相等，邊界有同等間隔|![螢幕擷取畫面 2025-03-04 160409](https://hackmd.io/_uploads/H1HwNNNoye.png)| 需注意剩餘空間是否足以安插間隔。 ### Grid properties * `Grid Lines` 可以決定item的大小 - 第一種寫法 : 從row1到row3，下面圖片的第一格 ```css .item1 { grid-column-start: 1; //起始row grid-column-end: 3; //結束row } ``` ![image](https://hackmd.io/_uploads/ByNHCTU9p.png) - 第二種寫法 : 從row1到row5，下面圖片的第一格 ```css .item1 { grid-column: 1 / 5; } ``` ![image](https://hackmd.io/_uploads/S1eGk08cp.png) - 第三種寫法 : 用格子算，從第一格到第三格，下面圖片的第一格 ```css .item1 { grid-column: 1 / span 3; } ``` ![image](https://hackmd.io/_uploads/B1pKk0IcT.png) * 程式碼 ```html=
1
2
3
4
5
6
7
8
``` * 結果預覽
1
2
3
4
5
6
7
8
* 說明 設定 `item1` 元素會從第二列開始，到第四列結束 (佔 2 列)，可參照上方 grid line 定義 * grid-column - 為 grid-column-start 和 grid-column-end 的縮寫 * 以上方例子，可改成以下兩種方式 ```css= .item1 { grid-column: 2 / 4; } ``` ```css= .item1 { grid-column: 2 / span 2; } ``` * span 指的是「空的格數」 * grid-row-start / grid-row-end - 定義元素開始與結束列行的位置 * 程式碼 ```css= .item1 { grid-row-start: 1; grid-row-end: 3; } ``` * 結果預覽
1
2
3
4
5
6
7
8
* grid-row - 為 grid-row-start 和 grid-row-end 的縮寫 * grid-auto-columns - 指定隱式網格的列的大小 * 程式碼 ```css= .grid-container { display: grid; grid-template-columns: 100px 100px; /*指定義兩個顯式列*/ grid-auto-flow: column; /*讓其他不在顯示列的欄位向右排列*/ grid-auto-columns: 150px; /*未使用顯式定義的其他隱式列皆為150px*/ gap: 10px; background-color: #f1f1f1; padding: 10px; overflow-x: auto; /*超出範圍可滾動*/ } ``` * 結果預覽
1
2
3
4
5
6
7
8
* 說明 若有元素超過顯式定義的列範圍，寬度就設為 150px，顯式定義的 column 只有兩個參數，只定義了 line1 和 line2，所以會是 100px，剩下的 items 就會以 150px 顯示 * grid-auto-rows - 指定隱式網格的行的大小 * 程式碼 ```css= .grid-container { display: grid; grid-template-rows: 100px 100px; grid-template-columns: 100px 100px 100px; grid-auto-flow: row; grid-auto-rows: 150px; gap: 10px; background-color: #f1f1f1; padding: 10px; } ``` * 結果預覽
1
2
3
4
5
6
7
8
* grid-auto-flow - 決定隱式元素擺放位置 * row: 預設值，自動填充 * column: 自動填充 * dense: 允許重新排列元素子填補空隙 :::spoiler 什麼是隱式網格? * 顯式網格(explicit grid): 由開發者設定出來的 grid > 可以透過 grid-template-columns 和 grid-template-rows 來設定形成網格的固定數量和軌道(手動設定) * 隱式網格(implicit grid): 除了顯式網格外，其他不存在的網格，由 grid 自動產生 > 即可透過 grid-auto-columns 和 grid-auto-rows 來定，若有元素超出顯式定義的範圍，就以其值作為極限值 ::: * grid-area - 定義空間名稱或位置，將 grid-row-start、 grid-column-start、 grid-row-end、 grid-column-end 一起表示 * 使用方式 ```css= .item1 { grid-area: 1 / 2 / 3 / 4; } ``` * grid-template-areas - 定義網格區域名稱，搭配 grid-area 使用 * 程式碼 ```css= .container { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; } ``` * 結果預覽
Header
Sidebar
Main Content
Footer
* grid-template * grid-template-areas的縮寫。 * grid-template-rows和grid-template-columns同時控制。 * grid-template-rows - 設置內元素的高度。 * grid-template-columns - 設置內元素的寬度。 * 重複設定 `grid-template-columns: 1fr 1fr 1fr 1fr;`，可寫成 `grid-template-columns: repeat(4, 1fr);` * (grid-)row-gap - 水平間隔距離(row跟row的距離)。 * (grid-)column-gap - 垂直間隔距離(column跟column的距離)。 * (grid-)gap - row-gap 和 column-gap同時控制。 ## CSS Responsive * RWD(Responsive Web Design) 網頁可以透過桌機、平板電腦和手機查看，且同一個網站有各種不同的版面呈現，顯示的字級大小也不同，響應式網頁可以讓使用者易於瀏覽，同時也減少在行動裝置上閱讀時的縮放和移動等動作。 ### RWD Viewport * 根據裝置的顯示區域來展示文件 * 放大或縮小文件，來符合或設定中給予裝置的可視區域 * 允許設定或初始化縮放的級別，或是其他規則 * viewport是跟著裝置顯示在運作的，但跟Media Query 不太一樣 @viewport 有絕對優先權，所以它會比 @media 還要早執行 ![image](https://hackmd.io/_uploads/H1-xiy4s1x.png) * device-width 可以理解為我們所看見的裝置的寬度，而當該顯示文本遇到768px這個條件時，顯示結果會依據@media而決定 * @viewport 有兩種 1. initial viewport initial viewport 是指裝置本身的實際展示的尺寸或相關設定 2. actual viewport actual viewport 是指經由 initial viewport 初始化後，內容本文的展示尺寸或相關設定 > 參考資料: https://blog.hinablue.me/viewport-the-css-device-adaptation/ ### RWD Grid View 使用grid進行布局，可用在設計不同視窗大小下改變不同布局。 ### RWD Media Queries 利用@media讓不同視窗大小的布局改變 * @media (max-width:632px) 視窗不超過632px套用。 * @media screen and (min-width:632px) 設備為screen且視窗不超過632px套用。 * @media only screen and (min-width:632px) 同上，only可以篩去過舊的瀏覽器。 * @media only screen and (orientation: portrait) 縱向，寬度大於高度。 * @media only screen and (orientation: landscape) 橫向，寬度小於高度。 可用在grid排版，和改變style ``` @media (max-width: 600px) { div.example { display: none; } } @media only screen and (max-width: 800px) { .grid-container { grid-template-columns: repeat(3, 1fr); /* 3列排版 */ } } @media only screen and (max-width: 500px) { .grid-container { grid-template-columns: 1fr; /* 1列排版 */ } ``` ---------------------------------------------------- ### Animation * `animation: mymove 5s infinite;` 也可以這樣寫: - animation-name: (@keyframes後面的名字); - animation-iteration-count:(放一個值//3就3次,infinite就無限多次) - animation-duration: 5s(s前面放多少就幾秒) ```css @keyframes mymove { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} } ``` - 前面的幾%代表動畫的時間點 ### Transform * transform可以讓html元素(包含內容)被位移、旋轉、縮放和傾斜，分為2D和3D * transform 屬性可為none、一個或多個transform-function ```css div { transform: rotate(20deg); } ``` #### 2D
Rotate
##### Transform-origin 元素的原始位置(參考點) * elememt(x,y) * 位移、旋轉、縮放、傾斜的參考點 * x、y可為尺寸值 或 % (百分比) 或方位關鍵字；% 是以元素本身大小作為計算基準 * 預設值為元素中心點(50%,50%) * 元素左上角座標為原點(0,0) * 方位關鍵字(center,top,right,bottom,left)，如忽略第二個值，則自動定為center ##### transform property * translate(x, y) 偏移 * x: 水平移動，可用`translateX()` * y: 垂直移動，可用`translateY()` * 程式碼 ```css div { transform: translate(50px, 20px); } ``` * 結果預覽
translate
* scale(x, y) 縮放 * x: 縮放寬度 * y: 縮放高度 * 程式碼 ```css div { transform: scale(1.5, 0.8); } ``` * 結果預覽
scale
* rotate(angle) 元素以參考點為中心進行旋轉 * 正值: 順時針旋轉 * 負值: 逆時針旋轉 * 程式碼 ```css div { transform: rotate(25deg); } ``` * 結果預覽
rotate
* skew(x-angle, y-angle) 傾斜，元素以參考點為中心進行拉伸變形 * 單位: deg * 只寫一個參數就只有X軸的傾斜 * 程式碼 ```css div { transform: skew(30deg, 10deg); transform-orgin: top left; } ``` * 結果預覽
skew
* matrix(a, b, c, d, e, f) 元素以參考點為中心，依變形矩陣的6個參數值產生2D變形。 * a: scaleX() * b: skewY() * c: skewX() * d: scaleY() * e: translateX() * f: translateY() * 程式碼 ```css div { transform: matrix(1, 0, 0, 1, 50, 50); } ``` * 結果預覽
matrix
* 同一元素套用多個變形函數 函數間以半形空格間隔 ```css .box{ transform:translate(120px) rotate(80deg) scale(0.5); } ``` #### 3D :::info 1. 好用的工具-->可以直接找到result測試結果 https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function ::: * transform-orgin: 元素原始位置，表示為element(x, y, z) * transform-style: 定義是3D或是2Dtransform，屬性值分為flat(預設2D)和preserve-3d * perspective: 透視距離，即觀看位置到元素的距離，預設是0 * perspective-origin: 透視原點，perspective-origin:(x,y)，x可為長度值、百分比及方向關鍵字: left、center、right，y可為長度值、百分比及方向關鍵字: top、center、bottom，預設值(x,y)都為50% * backface-visibility: 定義元素背面是否可見，屬性值為hidden和visible --------
3D rotate
------
Rotating
-------- ##### transform property * translate3d(x, y, z) * x: 以參考點為中心，向X軸位移x距離 * y: 以參考點為中心，向Y軸位移y距離 * z: 以參考點為中心，向Z軸位移z距離 * 程式碼 ```css div { transform: translate3d(10px, 50px, 70px); } ``` * 結果預覽
translate3d
* scale3d(x, y, z) * x: 以X軸做縮放 * y: 以Y軸做縮放 * z: 以Z軸做縮放 * 程式碼 ```css div { transform: scale3d(0.8, 0.8, -0.5); } ``` * 結果預覽
scale3d
* rotate3d(x, y, x, angle) * x: 以X軸旋轉，正值-->順時針旋轉，負值-->逆時針旋轉 * y: 以Y軸旋轉，正值-->順時針旋轉，負值-->逆時針旋轉 * z: 以Z軸旋轉，正值-->順時針旋轉，負值-->逆時針旋轉 * angle: 以參考點為中心做旋轉 * 程式碼 ```css div{ transform: rotate3d(1, 1, 1, 30deg); } ``` * 結果預覽
rotate
* matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) * 4x4的矩陣，共16個值 $$ \begin{matrix} a1 & a2 & a3 & a4 \\ b1 & b2 & b3 & b4 \\ c1 & c2 & c3 & c4 \\ d1 & d2 & d3 & d4 \end{matrix} $$ * 上方矩陣參數，分別對應的函數，()內的值為預設值 $$ \begin{matrix} scaleX & scaleY & scaleZ & translateX \\ rotateX & rotateY & rotateZ & translateY \\ skewX & skewY & skewZ & translateZ \\ perspective(0) & perspective(0) & perspective(0) & perspective(1) \end{matrix} $$ * 程式碼 ```css div { transform: matrix3d( 0.7, 0.1, 0.7, 0, -0.6, 0.7, 0.2, 0, -0.5, -0.8, 0.7, 0, 10, 10, 0, 1 ) } ``` * 結果預覽
matrix3d
* perspective(n) * 定義 3D 變換元素的透視視圖，讓遠離視點的物件縮小 * 程式碼 ```css div { transform: perspective(5cm); } ``` * 結果預覽
perspective
### Transition 在特定時間段內可以平順的改變設計，例如:滑鼠游標放到字上面可以自動放大字體 #### Transition property: - transition - transition-property: 指定要轉換的CSS屬性 - transition-duration: 轉換需要的時間，預設0，單位為s或ms - transition-delay: 延遲多久轉換，預設0，單位為s或ms - transition-timing-function: 轉換時的速度曲線，預設為ease ---------------------------------------------- ## Text Alignment 用於文字的水平對齊，作用對象是物件內的文字 ```css text-align: left; ``` text-align設定的值已關鍵字為主，可以設定的值有 - left(對齊左側) - right(對齊右側) - center(置中) - justify(左右對齊) - inherit(和父元素相同) - initial