# CSS
### Recall
(https://hackmd.io/piO0H1BbQ9KgQAZS-fuj-A)
#### html架構
#### 基本元素解釋(參考DOM Tree)
`<!doctype html>`:文件第一行的Docucment Type Definition，不能忽略不寫
`<html>` :根元素，是樹狀DOM結構的根源
`<head>` :放入文件相關的說明與資料，瀏覽器不會將head元素內容顯示在視窗上
`<body` :文件內容
`<title>` :元素用於顯示在索引標上的名稱，在此的名稱為Document
#### HTML Strucrure
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
```
<br>
- 樹狀元素的階層結構—父子關係
- 一個箱子包住其他箱子的結構
---
### 群組元素
- 目的:為HTML文件增加結構，做為一個容器，將其他元素包裝在之中
- 用途:能在一群包在其中的元素，以某種**共同的風貌**出現
- 區塊的概念，任何元素都有這種特徵
| 元素 | 顯示模式 | 內容 |
|------|-|-------|
| `<div>` |block-level|可以包含block-level和Inline元素|
| `<span>` | inline|僅包含Inline元素|
>block-level特徵:Begin on new lines && 占滿整個parents元素
>inline特徵:Start anywhere in a line
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div && Span</title>
</head>
<style>
.highlight_span{
background-color: bisque;
}
.highlight_division{
background-color:greenyellow;
}
</style>
<body>
<p>The following span is an <span class="highlight_span">inline element</span>;
its background has been colored to display both the beginning and end of
the inline element's influence.</p>
<br>
<p>The following paragraph is a <div class="highlight_division">block-level element;</div>
its background has been colored to display both the beginning and end of
the block-level element's influence.</p>
</body>
</html>
```
#### Compare them
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div && Span</title>
</head>
<body>
<div>優木雪菜</div>
<div>上原步夢</div>
<div>中須霞</div>
<br>
<span>優木雪菜</span>
<span>上原步夢</span>
<span>中須霞</span>
</body>
</html>
```
<hr>
### Let's make it a bit more colorful
- 將指定給某元素的樣式屬性直接寫在HTML
```htmlmixed=
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<title>Hello CSS</title>
</head>
<body>
<h1 style="color: red;">h1</h1>
<h2>h2</h2>
<p style="color: brown; background-color: yellow;">
<b>bold</b>
<u>underline</u>
<i>italic</i>
<s>strike</s>
</p>
</body>
</html>
```
### Better way - Introduce CSS
- CSS全名Cascading Style Sheets(階層樣式化)
- 第二個英文字Style代表和設計相關的工作
- 假如網頁的HTML部份是網頁地基、外框，則CSS負責起室內設計的工作
- 核心: **選擇器{屬性:值 ; 屬性:值}**
#### Case1: 在`<head>`內使用`<style>`嵌入CSS樣式
```htmlmixed=
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<style>
h1 {
color: red;
}
p {
color: brown;
background-color: yellow;
}
</style>
<meta charset="UTF-8">
<title>Hello CSS</title>
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<p>
<b>bold</b>
<u>underline</u>
<i>italic</i>
<s>strike</s>
</p>
</body>
</html>
```
#### Case2: 用`<link>`元素指向外部CSS
```htmlmixed=
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<link rel="stylesheet" href="first.css">
<meta charset="UTF-8">
<title>Hello CSS</title>
</head>
<body>
<p>
<b>bold</b>
<u>underline</u>
<i>italic</i>
<s>strike</s>
</p>
</body>
</html>
```
### Class && ID
- class和id能對標籤設置一個識別的名稱，對於資料處裡十分方便
- ``<p class=“命名名字”>`` 對應到.css中的
`.命名名字{ 該標籤所共有的特性 }`
- Id則是唯一識別名稱，該代號只能出現一次
`<h1 id=“代號”>`對應到.css中的
`#代號{ 該代號所擁有的特性 }`
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p{
color:blue;
}
#tutor{
color:purple;
background-color:cadetblue;
}
.food{
color:pink;
}
.food .can_eat{
background-color: rgb(59, 188, 188);
}
.school_idol{
color:red;
background-color:blanchedalmond;
}
#Mars{
color:green;
}
</style>
<title>Class&&ID</title>
</head>
<body>
<h1 id="tutor">Introduce Class && ID</h1>
<p>樸實無華</p>
<p class="food">風雲樓</p>
<p class="food can_eat">水木</p>
<p class="school_idol">優木雪菜</p>
<p class="school_idol" id="Mars">上原步夢</p>
</body>
</html>
```
### 複習時間
---
### HTML邊界關係
- box model
- those properties form a box -- `content` `padding` `border` `margin`
<!-- - those properties determine a box's scale -- `padding` + `border` + `width(height)` -->
| properties | meaning |
|------|------|
| `content` |內容|
| `padding` | 內邊界--元素邊界至主要內容的間距|
|`border`|邊框--元素的邊界|
|`margin`|外邊界--與外層元素的距離|
- A simple example -- a box
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:200px;
height: 200px;
background-color: aqua;
padding:100px 50px 60px 100px;
/* border: solid black; */
border-top: dotted red 5px;
border-bottom: dashed black 10px;
margin:100px auto;
}
</style>
</head>
<body>
<div class="box">
<p>this is the content</p>
</div>
</body>
</html>
```
- 實作時，注意parents 和 children元素的關係
- That is, don't let the children elements cover over the parents element
#### CSS單位
|單位|解釋|
|----|---|
|`vh`|view height，(裝置)螢幕可視範圍高度的百分比|
|`vw`|view width，(裝置)螢幕可視範圍寬度的百分比|
|`px`|像素，不會跟著視窗而變更尺寸|
|`%`|百分比，以父元素為基準做百分比縮放|
|`fr`|在grid中，依照fr比例分配網格大小|
#### The advantage of Console
- 將物件、值傳送至主控台視窗。
- ==檢視物件視覺化檢視。==
- 在執行中的 App 中檢視和修改本機和全域變數的值。
- 執行在目前的指令碼內容中執行的 JavaScript 程式碼。
- 等到後面JavaScript和DOM會對此有更為詳細的說明
## 如何製作Sticky Bar (應用)
### Grid
- The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
- 簡單來說，就是透過**網格規劃**，像是把我們所需的區塊填入座標之中
---
- An HTML element becomes a grid container when its **display property** is set to **grid** or inline-grid.
- The parent element must have the property **display:grid**
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.grid_container {
border:solid 7px darkgray;
width:330px;
height:420px;
display:grid;
column-gap:3px;
row-gap:3px;
}
.box_red {
background-color:red;
}
.box_green {
background-color:green;
}
.box_yellow {
background-color:yellow;
}
.box_blue {
background-color:blue;
}
.box_deepBlue {
background-color:deepskyblue;
}
/* 分配網格空間 */
.grid_container {
grid-template-columns:[line_one] 30px [line_two] 100px [line_three] 0.7fr [line_four] 0.3fr [line_five];
grid-template-rows:[row-1] 100px [row-2] 150px [row-3] 0.2fr [row-4] 0.8fr [row-5];
}
/* 分配元件位置 */
.box_red {
grid-column-start:3;
grid-column-end:5;
grid-row-start:1;
grid-row-end:2;
}
.box_green{
grid-column-start:2;
grid-column-end:4;
grid-row-start:2;
grid-row-end: 3;
}
.box_blue{
grid-column-start:3;
grid-column-end:5;
grid-row-start:3;
grid-row-end: 4;
}
.box_yellow{
grid-column-start:1;
grid-column-end:2;
grid-row-start:4;
grid-row-end: 5;
}
.box_deepBlue{
grid-column:4/5;
grid-row:4/5;
}
</style>
</head>
<body>
<div class="grid_container">
<div class="box_red"></div>
<div class="box_green"></div>
<div class="box_yellow"></div>
<div class="box_blue"></div>
<div class="box_deepBlue"></div>
</div>
</body>
</html>
```
---
## Position
- 決定每個網頁元素空間的分配
|value|解釋|
|----|---|
|`static`|the element is not positioned in any special way.|
|`relative`|the element is positioned relative to its normal position, and other content will not be adjusted to fit into any gap left by the element.|
|`fixed`|the element is positioned relative to the viewport. That is, it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.|
|`absolute`| The element is positioned relative to the nearest parents element. In addition, its size depends on the content.|
|`sticky`|The element is positioned based on the user's scroll position.|
- 注意:在使用absolute下，若沒有設定任何偏移屬性的話，該元素的位置將遵照原本的位置(position:static)，但依舊會跳脫原本頁面。
#### Position實際操作並觀察
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.sibling-element {
background: #f2f2f2;
padding: 10px;
}
.main-element {
position:absolute ;
bottom: 10px;
left: 10px;
background-color: yellow;
padding: 10px;
}
/* 實際操作給同學看 position:static(以此comment掉bottom) position:relative*/
/* 調整top/buttom/left讓同學看出差異 */
.parent-element {
position:relative;
height: 20vh;
padding: 10px;
background-color: #81adc8;
}
</style>
</head>
<body>
<div class="parent-element">
<p class="main-element">This is the main element.</p>
<p class="sibling-element">This is the sibling element.</p>
<p class="sibling-element">This is the sibling element.</p>
</div>
</body>
</html>
```
#### Sticky Bar
- 把要固定的元素設定 position: sticky，並記得設定 top, left, right 或 bottom，這樣才能**在捲動後固定在指定的位置**
- For example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
height: 300vh;
}
header{
height: 80px;
background: pink;
}
p{
background: lightblue;
position: sticky;
top:0;
}
</style>
<title>Sticky Bar</title>
</head>
<body>
<header>header</header>
<p>This is sticky</p>
</body>
</html>
```
### Practice
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
height:300vh;
}
.bar{
background-color: rgb(216, 141, 42);
position: sticky;
top:0;
border: solid 5px black;
display:grid;
}
.list{
background-color: aqua;
margin:5px;
}
.green{
width: 300px;
height: 300px;
background-color: rgb(141, 141, 59);
margin:10px;
}
#yellow{
width: 300px;
height: 300px;
background-color: yellow;
margin:10px;
}
/* //////////////////////////////////////// */
/* 分配網格空間 */
.bar {
grid-template-columns:[line_one] 0.3 [line_two] 0.3fr [line_three] 0.4fr [line_four];
grid-template-rows:[row-1] 30px [row-2]
}
/* 分配元件位置 */
.first {
grid-column-start:2;
grid-column-end:3;
grid-row: 1/2;
}
.second{
grid-column-start:3;
grid-column-end:4;
grid-row: 1/2;
}
.last{
grid-column-start:1;
grid-column-end:2;
grid-row: 1/2;
}
</style>
<title>Document</title>
</head>
<body>
<div class="bar">
<p class="list first"> 興趣 </p>
<p class="list second"> 專長 </p>
<p class="list last"> 作品集 </p>
</div>
<div class="green"></div>
<div id="yellow"></div>
</body>
</html>
```
---
## Flex
- 多從**parent元素**賦予CSS屬性(部分還是在內部的item上)，用於調整欄、列之間的功用
- The parent element must have the property **display:flex**
- 雖然項目列表是用線性方式呈現，不過flex是有兩個座標軸，水平軸為稱為主軸(justify)，垂直軸稱為交叉軸(align)
#### flex-direction屬性
- 用於設定項目的走向
`row` (預設值，由左至右，從上到下)
`row-reverse` (排列方向和row一樣，但內元件順序會反轉)
`column` (先從上到下，再由左至右)
`column-reverse` (排列方向和column一樣，但內元件順序會反轉)`
#### flex-wrap屬性
- 決定parent元素容器空間不足時，項目該如何換行
`nowrap` (預設值)
`wrap` (換行)
`wrap-reverse` (換行，且行順序反轉)
#### flex-flow屬性
- 是flex-direction和flex-wrap屬性的速記，讓用一種屬性名稱便能決定兩者
- Example: `flex-flow:column wrap`
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.flex-container {
display: flex;
flex-direction: column;
background-color: DodgerBlue;
/* height:300px; */
/* flex-wrap:wrap; */
}
/* 同學試著改變旋轉軸 */
.flex-container > div {
background-color:wheat;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<!-- 若container固定呢，試著使用flex-wrap屬性!! -->
</body>
</html>
```
- 補充:大於(>)就是選取底下(底下一階層)**直接**的子元素。
- 比較(.box > p)和(.box p)
#### justify-content屬性
- 對主軸的排列方法
|value|解釋|
|----|---|
|`flex-start`|aligns the flex items at the beginning of the container (this is default)|
|`flex-end`|aligns the flex items at the end of the container|
|`center`|aligns the flex items at the center of the container|
|`space-between`|displays the flex items with space between the lines|
|`space-around`|displays the flex items with space before, between, and after the lines|
|`stretch`|like grid, try to align the elements into a line |
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.flex-container {
display: flex;
justify-content: center;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
```
#### align-items屬性
- 對交叉軸的排列方法，相對於parent的水平對齊
|value|解釋|
|---|---|
|`flex-start`/`flex-end`|aligns the flex items at the top/bottom of the container|
|`center`|aligns the flex items at the bottom of the container|
|`stretch`|stretches the flex items to fill the container|
|`baseline`|向文字的底部對齊|
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
justify-content: center;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
```
#### 其他實用的Property(用於child element上)
**`order`** : specifies the order of the flex items
**`flex-grow`** : specifies how much a flex item will grow relative to the rest of the flex items
```htmlembedded
<div class="flex-container">
<div style="order:3; flex-grow: 2">1</div>
<div style="order:1; flex-grow: 2">2</div>
<div style="order:2; flex-grow: 7">3</div>
</div>
```
**`flex-basis`** : specifies the initial length of a flex item
```htmlembedded=
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
</div>
```
### z-index
- z 軸（立體空間），和堆疊順序有關
- z-index 數字越大其物件將越上層，上層的物件可以覆蓋下層的物件
- 若沒有指定 z-index，那麼預設會是 auto，重疊的物件將依照 HTML 撰寫的順序覆蓋，也就是寫在越下面的 HTML 元素將會顯示在越上層。
- 注意:重疊通常是透過定位元素如**positon:absolute**
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box-1{ position: absolute;top:10px; left:10px; width:100px; height:100px; background:#369; color:#fff;z-index:1;}
.box-2{ width:100px; height:100px; position: absolute; top:40px; left:40px; background:#F60; color:#fff;z-index:2; }
.box-3{ width:100px; height:100px; position: absolute; top:60px; left:60px; background: #636; color:#fff; z-index:3;}
</style>
<title>Document</title>
</head>
<body>
<div class="box-1">z-index:1</div>
<div class="box-2">z-index:2</div>
<div class="box-3">z-index:3</div>
<h1>我被蓋住了QQ</h1>
</body>
</html>
```
## This is the end of basic CSS, then, we will go on JacaScript
Sign in with Wallet
Connect another wallet