Hi，今天來要談談 css的事情，相信大家在寫網頁時，都會用到css吧（沒用css的頁面應該是不太能看啦），今天要就CSS的使用來分享。

什麼是CSS？怎麼用？

階層式樣式表（英語：Cascading Style Sheets，簡稱：CSS），是用來修網頁，讓網頁變的更好看的語言，目前已經和HTML、Javascript並列成為網頁設計三大基本工具，使用方法有很多種，分別說明如下

1. 直接以style屬性進行設定，優先權最高，但是完全不建議使用

<div style="text-align:center; font-size: 14px">xxxx</div>

2. 以 style 標籤設定好樣式名稱與內容，並使用 class 指定使用樣式，以空格隔開即可同時使用多個樣式

<style>
  // 設定名為 div 的樣式名稱，並以指定 class 的方式使用
  .div1 {
      text-align:center;
      font-size: 14px
  }
  // 直接修飾 h2 的標籤，只要
  h2 {
      color: red;
  }
</style>
<h2>標題1</h2>
<div class="div1">xxxx</div>

3. 使用外部檔案方式載入

  .div1 {
      text-align:center;
      font-size: 14px
  }
  // 直接修飾 h2 的標籤，只要
  h2 {
      color: red;
  }

<link hef="./style.css" rel="stylesheet" />
<h2>標題1</h2>
<div class="div1">xxxx</div>

PS. 上述3種做法優先權分別為1最高、3最低，若有同名不同位置的 CSS設定，優先權較高的會複蓋掉低的

CSS的項目很多，這邊簡單的列出常用的項目

適用範圍	CSS屬性名稱	用途說明
調整顏色	color	設定文字色，可用 RGB(255,0,0)、#FF0000、red等方式設定
調整顏色	background-color	設定背景色，可用 RGB(255,0,0)、#FF0000、red等方式設定
控制邊界	padding	設定內縮邊界，可使用 padding-left、padding-top、padding-right、padding-bottom分別設定左上右下之邊界值
控制邊界	margin	設定外推邊界，可使用 margin-left、margin-top、margin-right、margin-bottom分別設定左上右下之邊界值，padding與margin的差異，可參照下圖
寬度設定	width	設定固定寬度，可使用 px、pt、%、cm…等不同的單位，我平常用的單位是 px 或 %，但在設計報表時，會用 cm來設定
寬度設定	max-width	設定最大限制寬度，主要是用於響應式網頁設計，設定 max-width 可讓該元素在顯示時若是超過max-width設定值則維持在該設定值上，避免元素變得太大不好看
寬度設定	min-width	設定最小限制寬度，主要是用於響應式網頁設計，設定 min-width 可讓該元素在顯示時若是不足min-width設定值則維持在該設定值上，避免元素變太小造成資料折行或是版面變形
字型控制	font-size	設定文字大小
字型控制	font-family	設定文字字型
字型控制	font-weight	設定文字粗度，數字範圍為 100~900，或是直接設定粗體（bold）
還有很多很多，族繁不及備載XD
padding和margin的差異

CSS 的進階用法

1. 階層設計

<style>
  .div1 {
      text-align:center;
      font-size: 14px
  }
  .div1 h2 {
      color: red;
  }
</style>
<h2>黑字</h2>
<div class="div1">
    <h2>紅字</h2>
</div>

如上，若是在宣告樣式名稱時，以空白隔開，表示要設定 xxx 下層○○○元素，以上方例子來說，就是要將 class="div1" 下層的 h2 元素變成紅字，如下圖

2. 偽元素&虛擬類別（pseudo-class）
   虛擬類別能夠在特定動作時改變html元素的 CSS 樣式，設定方法是類別名稱:虛擬類別，例如說滑鼠移到元素上方，會設定 :hover、表進入表單元件時，會設定:focus，用法如下

<style>
  .showLock {
    border: 3px solid #bfbfbf;
    text-align: left;
    padding: 15px;
    padding-top: 20px;
    margin: 5px;
    border-radius: 50px;
    cursor: pointer
  }

  .showLock:hover {
    background-color: rgb(207, 207, 207);
    border: 5px solid #bfbfbf;
  }
  table tr:nth-child(odd) {
      background-color: pink;
  }
  table tr:nth-child(even) {
      background-color: skyblue;
  }
</style>
<div class="showLock">
    XXXX
</div>
<table>
    <tr>
    <td>1</td>
    </tr>
    <tr>
    <td>2</td>
    </tr>
</table>

說明： 滑鼠移到 div 上方時，會變成灰底且框線會加寬，且下方的表格中，一列會是粉紅色背景，一列會是淺藍色背景
這裡有所有虛擬類別的介紹，需要時可參考。
偽元素則是基於原有的 DOM ，創建另一個可設定不同 CSS 的 HTML元素屬性，設定方法是「樣式名稱::偽元素」，最常看到的用法是使用 before 或是 after 的偽元素在元件前/後加字了

<style>
    .formtitle::before {
        color: red;
        content: "*";
    }
</style>
<label for="floatingInput"  class="formtitle"> 問題概述</label>

說明：透過 before 在元件前加上一個紅色表示本欄位必填，以前我都是勤勞的打上，現在是完全可以用 css 直接處理掉了