# 二、CSS 常用語法
## 1. CSS 標籤選擇器 - 插入 CSS 檔案，讓文字變大變顏色吧！
* 在 `` 裡連結 css
* 加入 ``
CSS 的寫法
選擇器 {\
屬性: 設定值;\
屬性: 設定值;\
}
```css
h1 {
color:blue;
font-size: 99px;
}
p {
color: red;
}
```
## 2. 套用第一個 Sublime Plugin，利用 emmet 提昇寫 HTML、CSS 效率
寫程式碼好麻煩啊 \~ 有辦法提昇效率嗎
sublime package
* google 搜尋 sublime package
* 右上角有 Installation，貼到「view」「console」
* 按 `ctrl + shift + P` 打開控制版
* install emmet
emmet
* `! + tab`，自動產生 html 架構
* 懶得打的標籤就按 `tab`
* `link:css` rel 和 href 都用好了
* 為什麼不先講？因為要先知道原理，直接用工具會本末倒置
* `p*3`
* `ul>li*3`
## 3. CSS 類別選擇器 - 如何透過 Class 來指定 HTML 樣式
* 先在 .html 裡的標籤加上屬性 `class=""`
* 再到 .css 增加 `.xx {屬性: 值;}`
## 4. CSS 擬態選擇器 - 設計 a 連結動作觸發樣式
希望滑過連結時，顏色會變成灰色
```css
a:hover {
color: gray;
}
a:active {
color: yellow;
}
```
> : 是偽類別， :: 是偽元素
## 5. 使用 CSS 設定優化文字排版
* `lorem20` 新增假字
* 這麼多設定值，怎麼背？只交比較實務的
* font-family
* font-size
* line-height
* text-align: left, center, left
* text-indent
* text-decoration: underline, line-through
## 6. 在 HTML 標籤上加上線條 (border)
* border: 1px solid(dashed, dotted) black;
* 值移動沒關係，但遵循古法比較好
* 只用 CSS 設計畫面，會比較省流量
* border-right
## 7. 作業：優化第一節作業吧！
麻煩老師過目我的 HW2-16 作業練習了，謝謝老師
*
觀察與心得
1. 在 CodePen 好像不需要用 `` 連結 css 檔案，所以我就先註解掉了
順便想請問老師
1. 在實務中，網頁上的文字排版，會用 `em` 還是 `px` 呢？或是兩個使用的情境不同？我印象中 `1em` 就是 1 個字的寬度，`1px` 就是對應螢幕上的 1 個像素點
> 觀察很仔細\
> 其實 Codepen 不需要 html, head, link, script:src 等標籤喔 :D
>
> 作業做得很好\
> 沒有任何問題\
> 至於你問到的文字排版會使用何者\
> 建議前期都使用 px，少用 em\
> 到了 Bootstrap 會提到另一個單位稱為 rem\
> 現在主流也是以此為主喔
>
> 先前問答會影片介紹到的 rem, em, px\
>
## 8. 第二章測驗
