[week 6] CSS - 認識基礎標籤 & 屬性（一）

本篇為 [FE101] 前端基礎：HTML 與 CSS 這門課程的學習筆記。如有錯誤歡迎指正。

已複製！
學習目標:

 P1 你知道 CSS 是什麼
 P1 你知道 inline、block 跟 inline-block 的區別
 P1 你知道什麼是 box model
 P1 你知道 position 的所有屬性及其差別
 P2 你知道 :hover, :before, :after
 P2 你知道 :nth-child 的各種用法
 P2 你熟悉 CSS selector，可以輕鬆選到想選到的元素

什麼是 CSS？#

Cascading Style Sheets 階層式樣式表

如何引入 CSS#

使用內部 CSS#

直接在 body 的元素內加上 style=""

已複製！
<html>
  <head>
    <meta charset="UTF-8">
    <title>網頁前端</title>
  </head>
  <body>
    <!--   文字變紅色 -->
    <div style="color: red;">
      網頁前端課程
    </div>

  </body>
</html>

在 head 裡加上 <style> 標籤：

已複製！
<html>
  <head>
    <meta charset="UTF-8">
    <title>網頁前端</title>
        <style>
          div {
            color: blue;
          }
        </style>
  </head>
  <body>
    <!--   文字變藍色 -->
    <div>
      網頁前端課程
    </div>
  </body>
</html>

使用外部 CSS#

使用 <link> 元素，從外部引用 CSS 檔，這是一個空白的元素（不需要結束標記）：

href：指定 CSS 檔的路徑，通常放在 css 或 styles 資料夾
rel：表示 HTML 頁面與連結其連結檔案的關係，連到 CSS 檔其值應為 stylesheet

將 style.css 引入 index.html 為例：

已複製！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>網頁前端</title>
    <link rel="stylesheet" href="css/style.css" >
</head>
<body>
  網頁前端課程
</body>
</html>

內部引入的兩種方法，因不易維護而較少使用。使用外部引入的優點如下：

將內容和外觀分開，結構較清楚
可在不同頁面使用同一個樣式規則，不需修改每個檔案，便於維護

CSS Selector#

利用 CSS 選取器，可將規則套用在 HTML 文件的特定元素上，寫法如下：

已複製！
<!-- 選取器 -->
selector {
  <!--   宣告（分成屬性和值兩個部分） -->
  attribute: value;
}

全域選擇器#

Universal Selector：套用到文件的所有元素。

已複製！
<!-- 所有背景均為藍色 -->
* {
  background: blue
}

標籤選取器#

找出符合的元素名稱。

已複製！
<!-- 將所有 <h3> 元素套用該樣式 -->
h3 {
  color: red
}

類別選取器#

CLASS Selector：找出 class 屬性值符合句號後之值的元素。

已複製！
<!-- 找出所有 class 屬性之值為 note 的元素 -->
.note {}

<!-- 找出所有 class 屬性之值為 note 的 <h3> 元素 -->
h3.note{}

ID 選取器#

和 class 的最大不同，在於整個網頁上 id 只能有一個。

已複製！
<!-- 找出 id 為 name 的元素 -->
#name {}

子元素選取器#

利用 > 區隔兩個元素，表示在有父子關係的元素才會套用。
與後代選取器的差異在於中間不能插入其他元素。

已複製！
<!-- 找出任何身為 <li> 元素之子的 <a> 元素 -->
li > a {
  color: red;
}

後代選取器#

利用空白鍵區隔兩個元素。
中間可堆疊其他元素。

已複製！
<!-- 找出任何位在 <li> 元素內的 <a> 元素 -->
li a {
  color: yellow;
}

偽類選取器#

Pseudo-classes 偽類一覽表

以 hover（滑鼠滑入的樣式）為例：

已複製！
<!-- 當滑鼠移至任何 a 連結上時，背景會變成黃色 -->
a:hover {
  background: yellow
}

參考資料：CSS Selectors Reference - W3Schools

nth-child(n) 選擇器#

參考資料：CSS 選取第幾個標籤元素：nth-child(n)、first-child、last-child

CSS Selector 的權重計算方式#

當選擇器作用在同一元素上時：

兩個權重不同：權重值高的規則生效
兩個權重相同：後面覆蓋前面

權重由高到低如下：

已複製！
!important > inline style > id > class > tag > *

各類選擇器：

!important：權重最高，但在實際開發過程，幾乎不會使用 !important 來覆蓋其他規則
inline style 行內樣式
- 權重為 1-0-0-0
id 選擇器（#）
- 權重為 0-1-0-0
class 類別選擇器、pseudo class 偽類選擇器、attribute 屬性選擇器
- 權重為 0-0-1-0
tag 標籤選擇器、pseudo elements 偽元素選擇器
- 權重為 0-0-0-1
萬用選擇器（*）：選擇所有元素
- 預設為 0-0-0-0

參考資料：

box model 盒模型#

盒模型又稱為區塊模型，意思是所有 HTML 元素均可被視為一個盒子。我們能透過 CSS 控制內距、外距、邊框屬性，來調整盒子的外觀及位置。

box model

盒模型的組成由外而內分別為：

margin（外邊距）
border（邊框）
padding（內邊距）
content（內容）

box-sizing 屬性#

透過這個屬性，我們能控制盒模型長寬的計算方式。

以長寬同樣為 150px 的 box 為例：DEMO

我們可以使用 DevTool 看盒模型：

box-sizing: content-box：為預設屬性。「內容」就等於長寬度。

content-box 加上 border 和 padding 會導致元素實際大小比設定值還大。

box-sizing: border-box：「邊框到邊框之間的範圍」等於長寬度。

border-box 此時長寬設定會套用到 border、padding、content。

而 margin 在兩種盒模型都是額外加上去的，並不會影響盒子長寬。

參考資料：