---
# System prepended metadata

title: '第 6 節： CSS: The Very Basics'
tags: [The Web Developer Bootcamp 2021, CSS, Udemy]

---

Udemy課程：[The Web Developer Bootcamp 2021（Colt Steele）](https://www.udemy.com/course/the-web-developer-bootcamp/)
# 第 6 節： CSS: The Very Basics
###### tags: `CSS` `Udemy` `The Web Developer Bootcamp 2021`
2021.04.16（Fri.）~04.19（Mon.）
## ● 上課筆記
## 1. CSS Rules
```css=
selector{
    property: value;
}
```
假如說要讓所有h1元素變成紫色：
```css=
h1{
    color: purple;
}
```
假如說要讓所有img元素的寬高為100、200：
```css=
img{
    width: 100px;
    height: 200px;
}
```
假如說要讓第偶數個text input變成紅色的外框：
```css=
input[type = "text"]:nth-of-type(2n){
    border: 2px solid red;
}
```

## 2. 把CSS另外用成一個.css的檔案
另外用成一個.css的檔案後，記得要用一個link放到.html中，css的樣式才會生效。
**link：**
放在html中的`<head>`裡面
```htmlmixed=
<head>
    <title>Froms Demo</title>
    <link rel="stylesheet" href="my_style.css">
</head>
```

## 3. Color Picker
> 網站：[Picker](https://htmlcolorcodes.com/color-picker/)

**Hex Color**
數字以二進位來表示。
![](https://i.imgur.com/A3jhR7u.jpg)

## 4. CSS Text Properties
（A）**text-align：**
text-align的CSS屬性定義行內內容（例如文字）如何相對它的塊父元素對齊。
text-align 並不控制塊元素自己的對齊，只控制它的行內內容的對齊。
他是水平對齊！讓文字在 div 範圍內水平置中。
```css=
//行內內容居中
text-align: center;

//行內內容向右側邊對齊
text-align: right;

//行內內容向左側邊對齊
text-align: left;
```

（B）**font-weight：**
font-weight CSS 屬性指定了字體的粗細程度。
一些字體只提供 normal 和 bold 兩種值。
```css=
//正常字體，與400等值
font-weight: normal;

//粗字體，與700等值
font-weight: bold;

//更粗字體，比從父元素繼承來的值更粗
font-weight: bolder;

//更細字體，比從父元素繼承來的值更細
font-weight: lighter;

//也可以用數字表示，數字由小到大為細到粗
font-weight: <數字1~1000>
```

（C）**text-decoration：**
text-decoration 這個CSS 屬性是用於設置文本的修飾線外觀的（下劃線、上劃線、貫穿線/刪除線或閃爍）。
它是text-decoration-line, text-decoration-color, text-decoration-style , 和新出現的text-decoration-thickness 屬性的縮寫。
```css=
text-decoration: text-decoration-line text-decoration-color text-decoration-style|initial|inherit;
```
* 設定值為以下：
**[text-decoration-line](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration-line)**
文本修飾的位置, 如下劃線underline，刪除線line-through
**[text-decoration-color](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration-color)**
文本修飾的顏色
**[text-decoration-style](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration-style)**
文本修飾的樣式, 如波浪線wavy實線solid虛線dashed
**[text-decoration-thickness](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration-thickness)**
文本修飾線的粗細

（D）**line-height：**
line-height CSS 屬性用於設置多行元素的空間量，如多行文本的間距。對於塊級元素，它指定元素行盒（line boxes）的最小高度。
對於非替代的 inline 元素，它用於計算行盒（line box）的高度。

> 參考網址：[深入 CSS 之 line-height 應用](https://muki.tw/tech/css-line-height/)
> 參考網址：[css行高line-height的一些深入理解及应用](https://www.zhangxinxu.com/wordpress/2009/11/css%e8%a1%8c%e9%ab%98line-height%e7%9a%84%e4%b8%80%e4%ba%9b%e6%b7%b1%e5%85%a5%e7%90%86%e8%a7%a3%e5%8f%8a%e5%ba%94%e7%94%a8/)
> 
```css=
line-height: <Property Values>
```

* Property Values：
可以是normal（預設）、任何數字、長度（例如單位為px, pt, cm等等）、%、繼承inherit等。

（E）**letter-spacing：**
letter-spacing 屬性用於設置文本字與字間的距離表現。

```css=
letter-spacing: <Property Values>
```

* Property Values：
可以是normal（預設，沒有任何距離）、任何長度（負數也可以）、繼承inherit等。

（F）**font-size：**
font-size CSS 屬性指定字體的大小。
因為該屬性的值會被用於計算em和ex長度單位，定義該值可能改變其他元素的大小。
（不過常用px）

（G）**font-family：**
就是字體！
font-family 允許通過給定一個有先後順序的，由字體名或者字體族名組成的列表來為選定的元素設置字體。

> 可用資源：[google fonts](https://fonts.google.com/)
> 可用資源：[CSS fonts](https://www.cssfontstack.com/)
> 可用資源：[MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family)
> 
> 前兩個網站中的字體不一定每個電腦都有，所以可以用MDN中通用的即可。
> 或者說可以給多個，當使用者使用時，會自動從排序第一個的字體開始使用，如果無法使用，將會套用下一個字體。