1、CSS 基礎
定義：CSS (Cascading Style Sheets) 是用於設定HTML元素顯示樣式的語言。
用途：控制網頁的佈局、顏色、字型和動畫等。
基本語法：
css
Copy code
selector {
property: value;
}
例如：
css
Copy code
p {
color: red;
font-size: 16px;
}
參考文件：
2、選擇器
元素選擇器：直接指定元素，如 p, div。
類選擇器：點.開頭，如 .classname。
ID選擇器：井號#開頭，如 #idname。
屬性選擇器：根據元素屬性選擇，如 [type="text"]。
偽類選擇器：如 :hover, :focus。
偽元素選擇器：如 ::before, ::after。
3、盒模型
組成：內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)。
計算總寬度和高度：
總寬度 = 寬度 + 左右內邊距 + 左右邊框 + 左右外邊距
總高度 = 高度 + 上下內邊距 + 上下邊框 + 上下外邊距
4、佈局技術
浮動（Float）：常用於文字環繞圖片，需要管理清除浮動。
定位（Positioning）：static, relative, absolute, fixed, sticky。
Flexbox：一維佈局模型，適用於任何方向的佈局。
Grid：二維佈局模型，提供網格系統，進行更復雜的佈局設計。
5、響應式設計
視口（Viewport）：控制裝置螢幕的使用方式。
媒體查詢（Media Queries）：根據不同的螢幕尺寸或裝置特性應用不同的樣式。
css
Copy code
@media (min-width: 600px) {
.classname {
padding: 20px;
}
}
6、動畫與轉換
轉換（Transitions）：在CSS屬性之間平滑過渡。
css
Copy code
.transition {
transition: all 0.3s ease;
}
動畫（Animations）：使用@keyframes定義動畫序列。
css
Copy code
@keyframes example {
from { background-color: red; }
to { background-color: yellow; }
}
.animate {
animation-name: example;
animation-duration: 2s;
}
參考文件：