---
# System prepended metadata

title: '3-1 、 CSS 基礎 2 : 基本裝飾'
tags: [FE101, Lidemy心得, HTML+CSS, 進度筆記, 2020八月第四周]

---

# 3-1 、 CSS 基礎 2 : 基本裝飾
###### tags: `FE101` `HTML+CSS` `2020八月第四周` `進度筆記` `Lidemy心得` 08/26
---

## 基本裝飾: Background

存成 .html 檔案格式:  
```
<!DOCTYPE HTML>

<html>
　<head>  
    <meta charset="utf-8" />  
　　<title>網頁製作教學</title>  
　　<link rel="stylesheet" href="./style.css" />
　</head>  
　<body>  
　　body 間: 為主要語意所在，網頁主要顯示的部分。     
    <div id="Box1">Box1</div>
	<div id="Box2">Box2</div>
　</body>  
</html>
```
---

另外開個類似模組的 style.css 檔案格式:  
```
#Box1 {
  background: url("./b.gif") no-repeat center center;
  background-size: 250px 2500px;
  width: 250px;
  height: 2500px;
}

#Box2 {
  background: green;
  width: 250px;
  height: 2500px;
}
```

- 除了用 ``#Box1 {background: orange;}`` 也可以用色碼，如: #ffa500 。  
- 或是用 rgb(255, 165, 0) 值。  
- 透明度 rgba(255, 165, 0, 0.5) ， 透明度 0 ~1 ， 設 0.5 會變淡橘色。  
- `background: url("./b.gif");` 同資料夾底下放圖片 ， 圖檔格式就會顯示。  
- 如果 height 和 width 的 px 值太高，會重複用一張圖串起來，但這個寬和高設定不會強制拉伸圖片，只會局部或依設定顯示圖片。  
- 所以可以設定 `background: url("./b.gif") no-repeat;` 使圖片不再重複。  
- 可以調整圖片顯示的 X Y 軸來對齊: ``background: url("./b.gif") no-repeat center center;`` ， 如 top 、 center 、 bottom...等。  
- 也可以強制拉伸調整圖片寬和高 `background-size: 250px 2500px;` ; `background-size: 50% 50%;` 一半一半，設成 100% 100% 就會自動讓 div 填滿。  
- `background-size: contant;` 會讓圖片按比例可以放進 div ， 如果沒有固定 width 和 height 就會隨著瀏覽器拉縮。  
- `background-size: cover;` 會讓大圖片直接照比例拉縮，會填滿背景。  
- 如果用 dev tool (Firefox) 看會 Elements 會發現 Styles 有很多屬性，且有按照順序。  
 ![](https://i.imgur.com/8Q6GziD.png)  

---

# 3-2 、 CSS 基礎 2 : 邊框
###### tags: `FE101` `HTML+CSS` `2020八月第四周` `進度筆記` `Lidemy心得` 08/26
---

## 邊框:
- border
- outline
----
延伸 3-1 的 .html 但修改 style.css 檔案格式:  
```
#Box1 {
  background: orange;
  border: 20px solid orange;
}

#Box2 {
  background: green;
  width: 250px;
  height: 2500px;
}
```
## 1. border
- ``border: 20px solid orange;`` 寬度、類型和顏色; 如果沒設定 height: 和 width: 的話，邊框會往內壓縮 Box1 ， 會把內容撐開。  

- 這樣的 pixel 實際上是 寬 20px + 高 20px + 內容(假設) 30px 因此是 70px 。  
![](https://i.imgur.com/HSN7cnA.png)
![](https://i.imgur.com/e2zgz4T.png)

- 如果用 dev tool(Chrome) 調整 border-style 像是 dashed 就會改變樣式，實線 soild 常用。  

## 2. outline

- outline 會讓框線的外框再加框線，如:  `outline: 5px solid gray;` ， outline 的功能比較少用。  
![](https://i.imgur.com/AqnzfoM.png)  

- outline 加不加都不會影響原本元素寬高和 pixel ， 但 border 會影響 Box 寬高和 pixel。  

## 3. border 可以拿來畫圖

- border-radius (如果沒 border 也是可以設)可以調整邊角的弧度，設定 px 或是 % 都行。  
```
#Box1 {
  background: url("./b.gif") no-repeat center center;
  width: 100px;
  height: 100px;
  border-top: 20px solid orange;
  border-bottom: 20px solid green;
  border-left: 20px solid pink;
  border-right: 20px solid red;
  outline: 5px solid gray;
}
```
會變成正方形邊框帶有各種顏色，各邊框像是梯形。  

![](https://i.imgur.com/UQw8sPp.png)  

如果 width 和 height 調成 0 ， 剩下 background 、 border-top 、 border-bottom 、 border-left 、 border-right 就會變四個三角形交集。  
![](https://i.imgur.com/utrcFtI.png)  

因此可以畫三角形，和調整其大小，很多圖形都能用 border 來畫。
```
#Box1 {
  background: url("./b.gif") no-repeat center center;
  width: 0px;
  height: 0px;
  border-top: 100px solid orange;
  border-bottom: 100px solid transparent;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  outline: 5px solid gray;
}
```
![](https://i.imgur.com/B2aPNIW.png)

---

# 3-3 、 CSS 基礎 2 : 離我比較近，所以看起來比較大
###### tags: `FE101` `HTML+CSS` `2020八月第四周` `進度筆記` `Lidemy心得` 08/26
---

## 常用的邊距
- padding (內邊距)
- margin(外邊距)

---
延續 3-1 的 .html 但修改 style.css 檔案格式:  
```
#Box1 {
  background: orange;
  width: 100px;
  height: 100px;
  padding: 30px ;
}

#Box2 {
  background: green;
  width: 100px;
  height: 100px;
  margin: 20px;
}
```
## 1. padding (內邊距)
- 會讓 ``width: 100px;  height: 100px;`` 的 Box 元素內容距離本身的邊框 30px ， 被撐大了。  

![](https://i.imgur.com/YAanOnP.png)  
![](https://i.imgur.com/F04Jvqb.png)  

- 跟 border 一樣 ， padding 也可以設定 top 、 bottom 、 left 、 right 。  
- ``padding: 30px 30px; :`` 如果只寫兩個值，第一個值是上下，第二個值是左右。  
- 三個值也可以: 上、下、但右和左是同個值，不好記。  

---

## 2. margin(外邊距)
- 讓 Box 元素離外面東西的距離，但不會影響到寬高和 pixel 。  
- 很多瀏覽器會幫你加: ``body {margin:0}`` ， 預留空間，debug 時清掉這個就正常了。  

---

# 3-4 、 CSS 基礎 2 : 文字屬性(很多、超多，超級多)
###### tags: `FE101` `HTML+CSS` `2020八月第四周` `進度筆記` `Lidemy心得` 08/26
---

## Color

---
延續 3-1 的 .html 但修改 style.css 檔案格式:  
```
#Box1 {
  background: orange;

  height: 100px;
  color: white
}
```
- ``color: ;`` 會讓前景的顏色改變。  
- ``color: rgba(255, 0, 0, 0.5)`` 會改變前景文字顏色和透明度。  
---

## 大小

- ``font-size: ;`` 可以改變前景字體大小。  
- ``font-weight: ;`` 可以改變前景字體粗細，常用的例如 normal 、 bold...等。  
- ``font-weight: ;`` 也可以用數字調整 pt ， 例如調整範圍從 100 到 900 pt 之間。  

## 字體

- ``font-family: ;`` 像是 "新細明體" ， "Arial" ， "Serif" 之類的，電腦有的字體格式才支援，否則瀏覽器會用預設。  

## 字體距離

- ``letter-spacing: ;`` 例如 1px ， 就會讓字體間的距離變大。  

## 字體行距

- ``line-height: ;`` 例如 12px 、 1.5em(1.5 倍率行高，具體為 line-height: 1.5em x font-size = 18px(line-height)) 。  

## 字體對齊

- ``text-align: ;`` 如 center 、 left 和 right ， 水平置中、水平靠左和靠右對齊。  

## 經典問題: 置中對齊
```
#Box1 {
  background: orange;
  width: 200px;
  height: 100px;
  font-size: 12px;
  font-weight: bold;
  line-height: 100px;
  text-align: center;
}
```
- 如果只有一行字，可以調整 height 和 line-height 相等。  
- 但缺點是兩行字體就不能調整 height 和 line-height 相等，會跑出 Box 外。  

__或是不要設定 height 和 line-height ， 然後用 padding 撐開:__  
```
#Box1 {
  background: orange;
  width: 200px;
  
  font-size: 12px;
  font-weight: bold;
  
  padding: 30px 0px;
  text-align: center;
}
```
- 適用多行文字，但比較難指定高度，可能要計算高度。  

# 3-5 、 CSS 基礎 2 : 文字屬性(很多、超多，超級多第二彈)
###### tags: `FE101` `HTML+CSS` `2020八月第四周` `進度筆記` `Lidemy心得` 08/26
---
存成 .html 檔案格式:  
```
<!DOCTYPE HTML>

<html>
　<head>  
    <meta charset="utf-8" />  
　　<title> meme: 你的名字怎麼唸? </title>  
　　<link rel="stylesheet" href="./style.css" />
　</head>  
　<body>  
　　meme: 你的名字怎麼唸?      
    <div id="Box1">
	     uvweweweweonyetenyevweuvwewenumosas
	</div> 
  </body>  
</html>
```

## 文字 CSS - 沒有空白的超長句子超出框怎辦?

## word-break

結合上面的 .html 檔案然後套用 CSS 屬性:  
```
#Box1 {
  background: orange;
  width: 200px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}
```

- 如果有 ``width: 200px;`` 的設定，限制寬度，文字超長，拿掉 width 後就沒有問題。  

![](https://i.imgur.com/H5qqP6g.png)  

- 如果有 ``width: 200px;`` 的設定，且字體間有空白，且不拿掉寬度，可以用 word-break:  
  - 如這行: `uvwewewewe onyetenyevweuv wewenumosas` 文字。  

- ``word-break: break-all;``  會將字體截斷，分成兩行。  
![](https://i.imgur.com/K2rW9AY.png)

- ``word-break: break-word;`` 不會截斷字，而且有點小置中，分成兩行。  
![](https://i.imgur.com/EKWwALU.png)  

---

## 如果文字有空白，但想把空白拿掉
## white-space

- ``white-space: nowrap;`` 會把所有字集中到同一行。  

![](https://i.imgur.com/vZzY3fz.png)

---

# 3-6 、 CSS 基礎 2 : Eldwe Scroll
###### tags: `FE101` `HTML+CSS` `2020八月第四周` `進度筆記` `Lidemy心得` 08/26
---

__元素或是字體超出寬度。__

---

## overflow

以 3-5 的 .html 格式為基準，套用 style.css 格式:  
```
#Box1 {
  background: orange;
  width: 200px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
```
- 會讓文字有被截斷的效果。  

![](https://i.imgur.com/GvrFX5V.png)  

- overflow: scroll; 垂直和水平可滾動~

![](https://i.imgur.com/kUE1hDR.png)  

- overflow: auto; 依照預設自動產生可滾動捲軸~

![](https://i.imgur.com/BqriOoa.png)  


## text-overflow
__針對文字使用，蠻常用。__  

- ``text-overflow: ellipsis;`` 和 ``overflow: hidden;`` 以及 ``white-space: nowrap;`` 併用可以省略文字。  

![](https://i.imgur.com/7oJLRtD.png)  


---
參考資料:

[overflow](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/overflow)

[text-overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow)

[CSS overflow 屬性用](https://www.wibibi.com/info.php?tid=157)

---

# 3-7 、 CSS 基礎 2 : 質感瞬間昇華
###### tags: `FE101` `HTML+CSS` `2020八月第四周` `進度筆記` `Lidemy心得` 08/26
---

## transition

存成 .html 檔案格式:  
```
<!DOCTYPE HTML>

<html>
　<head>  
    <meta charset="utf-8" />  
　　<title> Orange Box </title>  
　　<link rel="stylesheet" href="./style.css" />
　</head>  
　<body>  
　　Orange Box      
    <div id="Box1">Box1</div> 
  </body>  
</html>
```

以上面 .html 格式為基準，套用 style.css 格式:  
``
#Box1 {
  width: 200px;
  height: 100px;
  border-radius: 30px;
  text-align: center;
  line-height: 100px;
  transition: all 1s ease-in;
  color: black;
  border: 2px solid orange;
}

#Box1:hover {
  background: orange;
  color: white;
  cursor: pointer;
}
``
- ``transition: all 0.3s`` ; 與 ``#Box1:hover`` 一起用，可以產生滑鼠移到樣式上有漸變的效果。 
  - transition 不放在 hover 那，不然 cursor 移開後就沒效了。  
  - all 表示所有屬性套用，秒數為 1s ， ease-in 是屬性漸變的效果，可以設計樣式。  
  - transition effect 屬性如果影響到周遭元素，像是寬和高...等，可能會吃效能。  

---
