CSS（Cascading Stylesheets，階層樣式表）是一種樣式表語言，用來打造網站的樣式風格。例如段落文字用藍色、標題文字用紅色、段落置中、背景圖片排列等等，這篇文章是我學習 CSS 的筆記內容。

1. CSS 簡介

  • CSS（Cascading Stylesheets，階層樣式表）：設定網頁的樣式及佈局。
  • DOM Tree（Document Object Model，文件物件模型）：網頁的樹狀表示。
  • Parent Node：Child Node 的父元素（Parent Element）。
  • Child Node：Parent Node 的子元素（Child Element）。
  • CSS 屬性可至CSS reference查詢。
  • CSS comment 語法：/**/。
/* 我是註解 */
  • CSS 可寫在<style>內，例如：
<style>
  /* selector */
  h1 {
    color: red;
  }

  h2 {
    color: green;
  }
</style>

2. CSS 放置位置

  • inline styling：跟 HTML 寫在同一行，優先層級最高，但只能對特定標籤設定。
<h1 style="color: red">我是標題</h1>
  • internal styling：把 HTML 與 CSS 放在同一個文件當中，方便撰寫，但多個頁面難以維護。
<style>
  h1 {
    color: red;
  }

  h2 {
    color: green;
  }
</style>
  • external styling：多個 HTML 文件可連接同一個 CSS 文件，容易維護。
<head>
  <link rel="stylesheet" href="./style.css" />
</head>

3. CSS 顏色設定

  • Color Keywords：關鍵字，如 red、black……。
h1 {
  color: green;
}
  • rgb：光學三原色，數值 0~255，共 256 種不同選擇。
h1 {
  color: rgb(247, 11, 11);
}
  • rgba：同 rgb，但多一個 alpha 儲存透明度，數值 0~1。
h1 {
  color: rgba(154, 53, 53, 0.632);
}
  • hex：十六進制數字代表顏色，數值 0、1、2、……9、A、B、……F。
h2 {
  color: #ffffff;
}
  • HSL：色相、飽和度、亮度。

4. Selectors

  • Universal Selector：匹配任何類型的 HTML element。
* {
  color: blue;
}
  • Element Selector：選擇特定的 HTML element。
h2 {
  color: blue;
}
  • ID Selector：選擇有特定 ID 屬性的 HTML element。
#dog4 {
  color: blue;
}
  • Class Selector：選擇所有特定 class 屬性的 HTML element。
.animal4 {
  color: blue;
}
  • Grouping Selector：一次選擇所有數個 HTML 元素，並逗號分隔。
h1,
h2,
h3,
h4,
h5,
h6 {
  color: blue;
}
  • Descendant Selector：兩個或多個用空格分隔的選擇器組成。
div.animal4 a {
  color: blue;
}
  • Attribute Selector：選擇所有具有相同屬性的 HTML 元素。
input[type="text"] {
  color: blue;
}

5. Pseudo class、element

  • pseudo-class：指定所選元素的特殊狀態。
input[type="text"]:hover {
  color: red;
}
  • pseudo-element：添加選擇器的關鍵字，設置所選元素的特定部分樣式。
p::before {
  content: ">>";
  color: blue;
}

6. CSS 重點概念

  • Inheritance（繼承）。
  • Conflicting Styling（樣式衝突）。
  • Priority 優先順序：Inline Styling、User Stylesheet、User Agent Stylesheet、Inheritance。
  • CSS 選擇器有不同的 specificities（特定度）：id【specificities(1, 0, 0)】、class【specificities(0, 1, 0)】、tag【specificities(0, 0, 1)】。
  • Order Rule（順序規則）：有相同的 specificity 的選擇器時，後寫的選擇器樣式會覆寫前面寫的樣式。
  • 放在後面的<link>stylesheet，會覆寫放在前面的<link>stylesheet。

7. CSS 單位

  • absolute units：有預設數值或現實生活定義的單位。
  • relative units：相對於某數值的單位。

8. font 設定

  • 文字樣式 text styling：font-size（字體大小）、text-align（水平對齊）、text-decoration（裝飾線外觀）、line-height（文字行距）、letter-spacing（文字水平間距）、font-family（字體優先列表）、text-indent（段落內縮長度）、font-weight（粗體字）。

9. 背景設定

  • background-color：背景顏色。
  • background-image：背景圖片。
  • background-size：背景尺寸。
  • background-position：背景圖片位置。
  • background：背景各種設定的 shorthand 設定。

10. Box Model

  • block element 被視為一個 box，box 是由 margin、border、padding、content 組成。
  • content：顯示內容的區域。
  • padding：content 周圍的區域，在 content 與 border 之間。
  • margin：border 以外的區域。
  • border 可特別設定 border-radius 屬性。

11. width、height、overflow

  • width：指定元素的寬度。
  • height：指定元素的高度。
  • width 可設定%，但 height 不行。
  • visible：content 不會被修剪，可呈現在元素框外，此為預設值。
  • hidden：內容會被剪裁以適合元素，不顯示滾動條。
  • scroll：內容將被剪裁以適合填充框，顯示移動軸。
  • overflow-x、overflow-y 可設定特定方向的 overflow 屬性。

12. content-box

  • 預設 box-sizing 屬性為 content-box。

13. border-box

  • border-box：width、height 屬性包括內容 content、內邊距 padding、邊框 border，但不包括外邊距 margin。

14. inline-block

  • display：outer display type、inner display type。
  • outer display type：block、inline、inline-block。
  • inner display type：flex、grid。

15. Position

  • Position：設定元素在文檔中的定位方式，top、right、bottom、left 屬性確定定位元素的最終位置。
  • Position 可設定的值包括 static/z-index、relative、absolute、fixed、sticky。

16. Stacking Context, Cursor, Table

  • Stacking Context：HTML 元素沿虛擬 Z 軸相對於用戶的 3D 概念化。
  • 表格樣式設定：border-collapse。
  • 響應式表格：overflow-x:auto
  • Opacity：元素的不透明度，0 是完全透明、1 是完全不透明。
  • Cursor：設定鼠標圖示。

17. Transition

  • Transition 屬性：設定某 CSS 屬性轉換時的 timing function 以及速度。

18. Transform

  • Transform 屬性：旋轉、縮放、傾斜、平移 HTML 元素。

19. Animation

  • Animation 屬性：客製化動畫。