一、字體屬性
| 屬性 | 值範例 | 說明 |
|---|
font-family | "Microsoft YaHei", SimSun, sans-serif | 字體族，按序降級 |
font-style | normal / italic / oblique | 斜體/傾斜 |
font-variant | normal / small-caps | 小型大寫字母 |
font-weight | normal / bold / 100-900 | 粗細，400=normal, 700=bold |
font-size | 12px / 1.2em / 120% / large | 絕對/相對/關鍵字 |
font | italic bold 14px/1.5 "YaHei" | 簡寫：style variant weight size/line-height family |
二、顏色與背景
| 屬性 | 值範例 | 說明 |
|---|
color | #ff0000 / rgb(255,0,0) / red | 前景色 |
background-color | #f0f0f0 | 背景色 |
background-image | url(bg.png) | 背景圖 |
background-repeat | repeat / repeat-x / repeat-y / no-repeat / space / round | 平鋪模式 |
background-attachment | scroll / fixed / local | 滾動行為 |
background-position | left top / center / 10px 20px / 50% 50% | 初始位置 |
background | #fff url(x.png) no-repeat center / cover | 簡寫 (CSS3 支援 size: cover/contain) |
三、文本屬性
| 屬性 | 值範例 | 說明 |
|---|
word-spacing | 2px / 0.2em | 單詞間距 |
letter-spacing | 1px / -0.5px | 字符間距 (可負) |
text-decoration | none / underline / overline / line-through / blink | 裝飾線 |
vertical-align | baseline / sub / super / top / middle / bottom / text-top / text-bottom / 10px | 行內元素垂直對齊 |
text-transform | capitalize / uppercase / lowercase / none | 大小寫轉換 |
text-align | left / right / center / justify / start / end | 文本水平對齊 |
text-indent | 2em / 24px | 首行縮進 |
line-height | 1.5 / 24px / normal | 行高 (無單位為倍數，推薦) |
white-space | normal / pre / nowrap / pre-wrap / pre-line | 空白處理 |
四、超鏈接偽類 (LVHA 順序)
a:link { color: green; text-decoration: none; }
a:visited { color: purple; text-decoration: underline; }
a:hover { color: blue; text-decoration: underline; }
a:active { color: red; } /* 鼠標按下瞬間 */
五、盒模型 (Box Model)
| 屬性 | 方向 | 簡寫 |
|---|
margin | top/right/bottom/left | margin: 10px 20px 10px 5px; (順時針) |
padding | top/right/bottom/left | padding: 10px 20px; (垂直 水平) |
六、邊框
border-width: 1px 2px 3px 4px; /* 簡寫 */
border-style: solid dashed dotted double; /* 同序 */
border-color: red green blue black;
border: 1px solid #ccc; /* 終極簡寫 */
border-radius: 4px / 50%; /* CSS3 圓角 */
box-shadow: 2px 2px 5px rgba(0,0,0,.3); /* CSS3 陰影 */
七、尺寸與浮動
width: 300px; height: 200px;
max-width: 100%; min-height: 100px;
float: left / right / none;
clear: left / right / both / none;
八、列表
list-style-type: disc / circle / square / decimal / lower-roman / upper-alpha / none;
list-style-image: url(bullet.png);
list-style-position: inside / outside;
list-style: square inside url(bullet.png); /* 簡寫 */
九、定位
| 屬性 | 值/說明 |
|---|
position | static / relative / absolute / fixed / sticky (CSS3) |
z-index | 整數 (含負)，堆疊層級 |
overflow | visible / hidden / scroll / auto / clip (CSS3) |
top/right/bottom/left | 定位偏移 (需 position ≠ static) |
clip | rect(top, right, bottom, left) 裁剪區域 (absolute/fixed 生效) |
十、CSS3 擴展 (IE 專有濾鏡已棄用，現代項目請用標準 CSS3)
| 功能 | 標準 CSS3 寫法 | 舊 IE 濾鏡 (參考) |
|---|
| 透明度 | opacity: 0.5; | filter: Alpha(Opacity=50); |
| 漸變 | background: linear-gradient(45deg, red, blue); | filter: progid:DXImageTransform.Microsoft.Gradient(...) |
| 陰影 | box-shadow: 2px 2px 5px #0003; | filter: DropShadow(Color=#000, OffX=2, OffY=2); |
| 模糊 | filter: blur(5px); (CSS Filter) | filter: Blur(Strength=5); |
| 旋轉/縮放 | transform: rotate(45deg) scale(1.2); | filter: Matrix(...); |
| 圖片剪裁 | clip-path: circle(50%); | — |
十一、打印控制
@media print {
.no-print { display: none; }
.page-break-before { page-break-before: always; }
.page-break-after { page-break-after: always; }
}
十二、游標
cursor: default / pointer / text / wait / help / move / crosshair /
not-allowed / progress / n-resize / ne-resize / e-resize / se-resize /
s-resize / sw-resize / w-resize / nw-resize / grab / grabbing;
使用建議
- **移動優先**：先寫基礎樣式，再用
@media (min-width: 768px) 疊加桌面端
- **CSS 變量**：
:root { --primary: #007bff; } → color: var(--primary); 統一主題
- **避免 IE 濾鏡**：已棄用，標準 CSS3 在現代瀏覽器 (含 Edge) 完整支援
- **Normalize/Reset**：項目引入
normalize.css 或 reset.css 消除瀏覽器默認差異
