---
# System prepended metadata
title: CSS Basic - HTML加入樣式、選擇器
tags: [CSS]
---
# CSS Basic - HTML加入樣式、選擇器
###### tags: `CSS`
學習資源：
[MDN CSS](https://developer.mozilla.org/zh-TW/docs/Web/CSS)
[CSS Basic](https://teamtreehouse.com/library/css-basics-5)
[【css】2小時初學者教學](https://youtu.be/Ml78vnNTBLw)
>CSS 階層樣式表，非標準程式語言，也不是標記語言, 而是一種風格頁面語言（style sheet language），能夠讓HTML上的元素套上不同的樣式
## :pushpin:HTML中加入樣式
### inline
```html=
```
`style="background-color:orange"`將style加入HTML標籤中
### internal
```html=
...
Document
```
將樣式內容放置於``中
:::info
將樣式寫在HTML中可以用於測試，當HTML檔案較多時就會難以管理，每次開啟頁面就會重新載入相同的樣式
:::
## :pushpin:CSS嵌入至HTML
### external
使用嵌入的方式可以有效管理頁面，讓文本及樣式分開管理，並且可以用於多個HTML頁面
```html=
```
* `rel` 連結到 stylesheet樣式表
* `href` CSS路徑
## :pushpin:選擇器
### 標籤選擇器
使用HTML標籤{ }中置入屬性
```css=
h1{
color: red;
font-size: 18px;
}
```
### class
CSS選擇class時須加上.
HTML
```html=
Lorem ipsum dolor sit amet.
```
CSS
```css=
.content-class{
background-color:yellow;
}
```
### id
CSS選擇class時須加上#
HTML中id用於連結至頁面中的某個部分且不可重複CSS
```css=
#content-id{
background-color:purple;
}
```
### 後代選擇器(Descendant Selectors)
使用空格選取子標籤內容
HTML
```html=
```
CSS
```css=
.animals li{
color:green;
}
```
### 偽類(Pseudo-classes)
能夠在特定動作時改變 DOM 的 CSS 樣式
* :hover 游標滑動到元素時觸發
```css=
a:hover{
color:blue;
}
```
* :active 長按時觸發
```css=
a:active{
color:blue;
}
```
* :link 尚未訪問的元素 ex:連結尚未點擊前
* :focus 表示正在使用中的元素 ex:點擊輸入框、鍵盤輸入
