CSS從入門到精通完整指南

第一部分：CSS基礎入門

1.1 什么是CSS

CSS（層疊樣式表，Cascading Style Sheets）是用于描述HTML文檔外觀和格式的樣式語言。CSS將內容與表現分離，讓HTML專注于內容結構，CSS專注于視覺效果。

1.2 CSS語法結構

選擇器 {屬性: 值;屬性: 值;
}

示例：

h1 {color: blue;font-size: 24px;text-align: center;
}

1.3 CSS引入方式

1.3.1 內聯樣式（不推薦）

<p style="color: red; font-size: 16px;">這是內聯樣式</p>

1.3.2 內部樣式表

<head><style>p {color: green;font-size: 18px;}</style>
</head>

1.3.3 外部樣式表（推薦）

<head><link rel="stylesheet" href="styles.css">
</head>

第二部分：選擇器詳解

2.1 基本選擇器

2.1.1 元素選擇器

/* 選擇所有p元素 */
p {color: black;
}/* 選擇所有h1元素 */
h1 {font-size: 32px;
}

2.1.2 類選擇器

/* 選擇class為"highlight"的元素 */
.highlight {background-color: yellow;padding: 10px;
}/* 選擇多個類 */
.btn.primary {background-color: blue;color: white;
}

2.1.3 ID選擇器

/* 選擇id為"header"的元素 */
#header {background-color: #333;height: 100px;
}

2.1.4 通用選擇器

/* 選擇所有元素 */
* {margin: 0;padding: 0;box-sizing: border-box;
}

2.2 組合選擇器

2.2.1 后代選擇器

/* 選擇div內部的所有p元素 */
div p {line-height: 1.6;
}/* 選擇nav內部的所有a元素 */
nav a {text-decoration: none;color: #333;
}

2.2.2 子選擇器

/* 選擇ul的直接子元素li */
ul > li {list-style-type: none;margin-bottom: 5px;
}

2.2.3 相鄰兄弟選擇器

/* 選擇h1后面緊跟的p元素 */
h1 + p {font-weight: bold;margin-top: 0;
}

2.2.4 通用兄弟選擇器

/* 選擇h1后面所有的p元素 */
h1 ~ p {color: #666;
}

2.3 屬性選擇器

/* 選擇具有title屬性的元素 */
[title] {border-bottom: 1px dotted;
}/* 選擇type="text"的input元素 */
input[type="text"] {border: 1px solid #ccc;padding: 5px;
}/* 選擇href以"https"開頭的鏈接 */
a[href^="https"] {color: green;
}/* 選擇href以".pdf"結尾的鏈接 */
a[href$=".pdf"] {background: url('pdf-icon.png') no-repeat right center;padding-right: 20px;
}/* 選擇title包含"important"的元素 */
[title*="important"] {font-weight: bold;
}

2.4 偽類選擇器

2.4.1 動態偽類

/* 鏈接狀態 */
a:link {color: blue;
}a:visited {color: purple;
}a:hover {color: red;text-decoration: underline;
}a:active {color: orange;
}/* 表單狀態 */
input:focus {outline: 2px solid blue;border-color: blue;
}input:disabled {background-color: #f5f5f5;cursor: not-allowed;
}

2.4.2 結構偽類

/* 第一個子元素 */
li:first-child {font-weight: bold;
}/* 最后一個子元素 */
li:last-child {border-bottom: none;
}/* 第n個子元素 */
tr:nth-child(odd) {background-color: #f9f9f9;
}tr:nth-child(even) {background-color: white;
}/* 每3個元素 */
div:nth-child(3n) {margin-right: 0;
}/* 唯一子元素 */
p:only-child {text-align: center;
}

2.5 偽元素選擇器

/* 首字母樣式 */
p:first-letter {font-size: 2em;font-weight: bold;float: left;margin-right: 5px;
}/* 首行樣式 */
p:first-line {font-weight: bold;color: #333;
}/* 在元素前插入內容 */
.quote:before {content: """;font-size: 2em;color: #999;
}/* 在元素后插入內容 */
.quote:after {content: """;font-size: 2em;color: #999;
}/* 選中文本樣式 */
::selection {background-color: yellow;color: black;
}

第三部分：盒模型與布局

3.1 盒模型基礎

.box {/* 內容區域 */width: 200px;height: 100px;/* 內邊距 */padding: 20px;padding-top: 10px;padding-right: 15px;padding-bottom: 10px;padding-left: 15px;/* 簡寫：padding: top right bottom left; */padding: 10px 15px 10px 15px;/* 簡寫：上下 左右 */padding: 10px 15px;/* 邊框 */border: 2px solid #333;border-top: 1px solid red;border-right: 2px dashed blue;/* 外邊距 */margin: 20px;margin-top: 30px;/* 水平居中 */margin: 0 auto;
}/* 盒模型計算方式 */
.border-box {box-sizing: border-box; /* 寬度包含padding和border */
}.content-box {box-sizing: content-box; /* 默認，寬度只是內容區域 */
}

3.2 顯示類型

/* 塊級元素 */
.block {display: block;width: 100%;margin-bottom: 20px;
}/* 行內元素 */
.inline {display: inline;padding: 5px 10px;
}/* 行內塊元素 */
.inline-block {display: inline-block;width: 150px;height: 100px;vertical-align: top;
}/* 隱藏元素 */
.hidden {display: none; /* 完全移除 */
}.invisible {visibility: hidden; /* 占位但不顯示 */
}

3.3 定位

3.3.1 靜態定位（默認）

.static {position: static; /* 默認值 */
}

3.3.2 相對定位

.relative {position: relative;top: 20px;left: 30px;/* 相對于原始位置偏移，原位置保留空間 */
}

3.3.3 絕對定位

.absolute {position: absolute;top: 50px;right: 100px;/* 相對于最近的非static定位祖先元素 */
}

3.3.4 固定定位

.fixed {position: fixed;bottom: 20px;right: 20px;/* 相對于視口定位 */
}

3.3.5 粘性定位

.sticky {position: sticky;top: 0;/* 滾動時粘在指定位置 */
}

3.4 浮動布局

.float-left {float: left;width: 300px;margin-right: 20px;
}.float-right {float: right;width: 200px;
}/* 清除浮動 */
.clearfix::after {content: "";display: table;clear: both;
}.clear {clear: both;
}

第四部分：Flexbox布局

4.1 Flex容器屬性

.flex-container {display: flex;/* 主軸方向 */flex-direction: row; /* row | row-reverse | column | column-reverse *//* 換行 */flex-wrap: wrap; /* nowrap | wrap | wrap-reverse *//* 簡寫 */flex-flow: row wrap;/* 主軸對齊 */justify-content: center; /* flex-start | flex-end | center | space-between | space-around | space-evenly *//* 交叉軸對齊 */align-items: center; /* flex-start | flex-end | center | baseline | stretch *//* 多行對齊 */align-content: center; /* flex-start | flex-end | center | space-between | space-around | stretch *//* 間距 */gap: 20px;row-gap: 10px;column-gap: 20px;
}

4.2 Flex項目屬性

.flex-item {/* 擴展比例 */flex-grow: 1; /* 默認0 *//* 收縮比例 */flex-shrink: 1; /* 默認1 *//* 基礎尺寸 */flex-basis: 200px; /* auto | 長度值 *//* 簡寫 */flex: 1; /* flex-grow flex-shrink flex-basis */flex: 1 1 200px;/* 單獨對齊 */align-self: flex-end; /* auto | flex-start | flex-end | center | baseline | stretch *//* 排序 */order: 2; /* 數值越小越靠前 */
}

4.3 常見Flex布局案例

4.3.1 水平垂直居中

.center-container {display: flex;justify-content: center;align-items: center;height: 100vh;
}

4.3.2 等高列布局

.equal-height-container {display: flex;
}.column {flex: 1;padding: 20px;
}

4.3.3 圣杯布局

.holy-grail {display: flex;min-height: 100vh;flex-direction: column;
}.header, .footer {background-color: #333;color: white;padding: 20px;
}.main {display: flex;flex: 1;
}.sidebar {width: 200px;background-color: #f0f0f0;padding: 20px;
}.content {flex: 1;padding: 20px;
}

第五部分：Grid布局

5.1 Grid容器屬性

.grid-container {display: grid;/* 定義列 */grid-template-columns: 200px 1fr 100px;grid-template-columns: repeat(3, 1fr);grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));/* 定義行 */grid-template-rows: 100px 200px auto;grid-template-rows: repeat(3, 100px);/* 間距 */gap: 20px;row-gap: 10px;column-gap: 20px;/* 區域模板 */grid-template-areas:"header header header""sidebar main main""footer footer footer";/* 對齊 */justify-items: center; /* start | end | center | stretch */align-items: center;justify-content: center; /* start | end | center | stretch | space-around | space-between | space-evenly */align-content: center;
}

5.2 Grid項目屬性

.grid-item {/* 指定位置 */grid-column: 1 / 3; /* 從第1列到第3列 */grid-row: 2 / 4;/* 簡寫 */grid-area: 2 / 1 / 4 / 3; /* row-start / column-start / row-end / column-end *//* 使用命名區域 */grid-area: header;/* 跨越 */grid-column: span 2;grid-row: span 3;/* 單獨對齊 */justify-self: end;align-self: start;
}

5.3 Grid布局案例

5.3.1 響應式網格

.responsive-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;padding: 20px;
}.card {background-color: white;border: 1px solid #ddd;border-radius: 8px;padding: 20px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

5.3.2 復雜布局

.complex-layout {display: grid;grid-template-columns: 200px 1fr 150px;grid-template-rows: 80px 1fr 60px;grid-template-areas:"header header header""sidebar main ads""footer footer footer";min-height: 100vh;gap: 10px;
}.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.ads { grid-area: ads; }
.footer { grid-area: footer; }

第六部分：文本與字體

6.1 文本屬性

.text-styles {/* 字體 */font-family: "Helvetica Neue", Arial, sans-serif;font-size: 16px;font-weight: bold; /* normal | bold | bolder | lighter | 100-900 */font-style: italic; /* normal | italic | oblique *//* 行高 */line-height: 1.5; /* 數值 | 長度 | 百分比 *//* 文本裝飾 */text-decoration: underline; /* none | underline | overline | line-through */text-decoration-color: red;text-decoration-style: dashed;/* 文本對齊 */text-align: center; /* left | right | center | justify */vertical-align: middle; /* baseline | top | middle | bottom *//* 文本轉換 */text-transform: uppercase; /* none | uppercase | lowercase | capitalize *//* 字母間距 */letter-spacing: 2px;/* 單詞間距 */word-spacing: 5px;/* 文本縮進 */text-indent: 2em;/* 空白處理 */white-space: nowrap; /* normal | nowrap | pre | pre-line | pre-wrap *//* 文本溢出 */overflow: hidden;text-overflow: ellipsis;/* 文本陰影 */text-shadow: 2px 2px 4px rgba(0,0,0,0.3);/* 用戶選擇 */user-select: none; /* auto | none | text | all */
}

6.2 Web字體

/* 引入Google字體 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');/* 自定義字體 */
@font-face {font-family: 'MyCustomFont';src: url('font.woff2') format('woff2'),url('font.woff') format('woff'),url('font.ttf') format('truetype');font-weight: normal;font-style: normal;font-display: swap;
}.custom-font {font-family: 'MyCustomFont', Arial, sans-serif;
}

第七部分：顏色與背景

7.1 顏色表示

.color-examples {/* 關鍵詞 */color: red;/* 十六進制 */color: #ff0000;color: #f00; /* 簡寫 *//* RGB */color: rgb(255, 0, 0);/* RGBA */color: rgba(255, 0, 0, 0.5);/* HSL */color: hsl(0, 100%, 50%);/* HSLA */color: hsla(0, 100%, 50%, 0.5);
}

7.2 背景屬性

.background-examples {/* 背景顏色 */background-color: #f0f0f0;/* 背景圖片 */background-image: url('background.jpg');/* 背景重復 */background-repeat: no-repeat; /* repeat | repeat-x | repeat-y | no-repeat *//* 背景位置 */background-position: center center;background-position: 50% 50%;background-position: 10px 20px;/* 背景大小 */background-size: cover; /* auto | cover | contain | 長度值 */background-size: 100% auto;/* 背景附著 */background-attachment: fixed; /* scroll | fixed | local *//* 背景裁剪 */background-clip: border-box; /* border-box | padding-box | content-box *//* 背景起源 */background-origin: padding-box;/* 簡寫 */background: #f0f0f0 url('bg.jpg') no-repeat center center / cover;
}/* 多重背景 */
.multiple-backgrounds {background:url('overlay.png') no-repeat center center,linear-gradient(45deg, #ff0000, #00ff00),url('texture.jpg') repeat;
}

7.3 漸變

7.3.1 線性漸變

.linear-gradients {/* 基本漸變 */background: linear-gradient(red, blue);/* 指定方向 */background: linear-gradient(to right, red, blue);background: linear-gradient(45deg, red, blue);background: linear-gradient(90deg, red, blue);/* 多色漸變 */background: linear-gradient(to right, red, yellow, green, blue);/* 指定色標位置 */background: linear-gradient(to right, red 0%, yellow 25%, green 75%, blue 100%);/* 重復漸變 */background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);
}

7.3.2 徑向漸變

.radial-gradients {/* 基本徑向漸變 */background: radial-gradient(red, blue);/* 指定形狀和大小 */background: radial-gradient(circle, red, blue);background: radial-gradient(ellipse, red, blue);background: radial-gradient(circle 100px, red, blue);/* 指定位置 */background: radial-gradient(circle at top left, red, blue);background: radial-gradient(circle at 30% 70%, red, blue);/* 重復徑向漸變 */background: repeating-radial-gradient(circle, red, red 10px, blue 10px, blue 20px);
}

第八部分：CSS3新特性

8.1 邊框與圓角

.border-styles {/* 圓角 */border-radius: 10px;border-radius: 10px 20px 30px 40px; /* 左上 右上 右下 左下 */border-top-left-radius: 15px;/* 邊框圖片 */border-image: url('border.png') 30 round;border-image-source: url('border.png');border-image-slice: 30;border-image-repeat: round;/* 多重邊框（使用box-shadow） */box-shadow: 0 0 0 5px red,0 0 0 10px blue,0 0 0 15px green;
}

8.2 陰影效果

.shadow-effects {/* 盒陰影 */box-shadow: 5px 5px 10px rgba(0,0,0,0.3);box-shadow: inset 0 0 10px rgba(0,0,0,0.5); /* 內陰影 *//* 多重陰影 */box-shadow: 0 2px 4px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.1),0 8px 16px rgba(0,0,0,0.1);/* 文字陰影 */text-shadow: 2px 2px 4px rgba(0,0,0,0.5);text-shadow: 1px 1px 2px red,2px 2px 4px blue;
}

8.3 變換(Transform)

8.3.1 2D變換

.transform-2d {/* 平移 */transform: translate(50px, 100px);transform: translateX(50px);transform: translateY(100px);/* 縮放 */transform: scale(1.5);transform: scale(2, 0.5); /* X軸2倍，Y軸0.5倍 */transform: scaleX(2);transform: scaleY(0.5);/* 旋轉 */transform: rotate(45deg);/* 傾斜 */transform: skew(30deg, 20deg);transform: skewX(30deg);transform: skewY(20deg);/* 組合變換 */transform: translate(50px, 100px) rotate(45deg) scale(1.2);/* 變換原點 */transform-origin: center center; /* 默認 */transform-origin: top left;transform-origin: 50% 50%;transform-origin: 100px 50px;
}

8.3.2 3D變換

.transform-3d {/* 透視 */perspective: 1000px;/* 3D變換樣式 */transform-style: preserve-3d;/* 背面可見性 */backface-visibility: hidden;/* 3D平移 */transform: translate3d(50px, 100px, -200px);transform: translateZ(-200px);/* 3D旋轉 */transform: rotateX(45deg);transform: rotateY(45deg);transform: rotateZ(45deg);transform: rotate3d(1, 1, 1, 45deg);/* 3D縮放 */transform: scale3d(1.5, 1.5, 1.5);transform: scaleZ(2);
}/* 3D翻轉卡片效果 */
.flip-card {perspective: 1000px;width: 200px;height: 200px;
}.flip-card-inner {position: relative;width: 100%;height: 100%;text-align: center;transition: transform 0.6s;transform-style: preserve-3d;
}.flip-card:hover .flip-card-inner {transform: rotateY(180deg);
}.flip-card-front, .flip-card-back {position: absolute;width: 100%;height: 100%;backface-visibility: hidden;
}.flip-card-back {transform: rotateY(180deg);
}

8.4 過渡(Transition)

.transition-effects {/* 基本過渡 */transition: all 0.3s ease;/* 指定屬性 */transition: width 0.5s ease-in-out, height 0.3s linear;/* 完整語法 */transition-property: width, height, background-color;transition-duration: 0.5s, 0.3s, 1s;transition-timing-function: ease, linear, ease-out;transition-delay: 0s, 0.2s, 0.5s;
}/* 緩動函數 */
.timing-functions {transition-timing-function: ease; /* 默認 */transition-timing-function: linear;transition-timing-function: ease-in;transition-timing-function: ease-out;transition-timing-function: ease-in-out;transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}/* 實用示例 */
.button {background-color: #3498db;color: white;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;transition: all 0.3s ease;
}.button:hover {background-color: #2980b9;transform: translateY(-2px);box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

8.5 動畫(Animation)

8.5.1基本動畫

/* 基本關鍵幀 */
@keyframes slideIn {from {transform: translateX(-100%);opacity: 0;}to {transform: translateX(0);opacity: 1;}
}/* 多階段動畫 */
@keyframes bounce {0% {transform: translateY(0);}25% {transform: translateY(-20px);}50% {transform: translateY(0);}75% {transform: translateY(-10px);}100% {transform: translateY(0);}
}/* 復雜動畫 */
@keyframes rainbow {0% { background-color: red; }16.66% { background-color: orange; }33.33% { background-color: yellow; }50% { background-color: green; }66.66% { background-color: blue; }83.33% { background-color: indigo; }100% { background-color: violet; }
}

8.5.2 應用動畫

.animated-element {/* 基本動畫 */animation: slideIn 1s ease-in-out;/* 完整語法 */animation-name: bounce;animation-duration: 2s;animation-timing-function: ease-in-out;animation-delay: 0.5s;animation-iteration-count: infinite; /* 數字 | infinite */animation-direction: normal; /* normal | reverse | alternate | alternate-reverse */animation-fill-mode: forwards; /* none | forwards | backwards | both */animation-play-state: running; /* running | paused *//* 簡寫 */animation: bounce 2s ease-in-out 0.5s infinite alternate forwards;
}/* 動畫示例 */
.loading-spinner {width: 40px;height: 40px;border: 4px solid #f3f3f3;border-top: 4px solid #3498db;border-radius: 50%;animation: spin 1s linear infinite;
}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }
}.pulse {animation: pulse 2s infinite;
}@keyframes pulse {0% {transform: scale(1);opacity: 1;}50% {transform: scale(1.1);opacity: 0.7;}100% {transform: scale(1);opacity: 1;}
}

8.6 濾鏡(Filter)

.filter-effects {/* 模糊 */filter: blur(5px);/* 亮度 */filter: brightness(150%);/* 對比度 */filter: contrast(200%);/* 降色 */filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));/* 灰度 */filter: grayscale(100%);/* 色相旋轉 */filter: hue-rotate(90deg);/* 反轉 */filter: invert(100%);/* 透明度 */filter: opacity(50%);/* 飽和度 */filter: saturate(200%);/* 棕褐色 */filter: sepia(100%);/* 組合濾鏡 */filter: blur(2px) brightness(150%) contrast(120%);
}/* 濾鏡應用示例 */
.image-effects img {transition: filter 0.3s ease;
}.image-effects img:hover {filter: brightness(110%) contrast(110%) saturate(130%);
}.vintage-effect {filter: sepia(50%) contrast(120%) brightness(110%) saturate(90%);
}

8.7 CSS變量(自定義屬性)

/* 定義全局變量 */
:root {--primary-color: #3498db;--secondary-color: #2ecc71;--font-size-large: 24px;--font-size-medium: 16px;--font-size-small: 14px;--spacing-large: 20px;--spacing-medium: 15px;--spacing-small: 10px;--border-radius: 8px;--box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}/* 使用變量 */
.component {color: var(--primary-color);font-size: var(--font-size-medium);padding: var(--spacing-medium);border-radius: var(--border-radius);box-shadow: var(--box-shadow);
}/* 帶默認值的變量 */
.element {background-color: var(--custom-bg, #ffffff);color: var(--text-color, var(--primary-color));
}/* 動態修改變量 */
.theme-dark {--primary-color: #ffffff;--secondary-color: #333333;--background-color: #1a1a1a;
}/* 在媒體查詢中使用變量 */
@media (max-width: 768px) {:root {--font-size-large: 20px;--spacing-large: 15px;}
}/* JavaScript中修改CSS變量 */
/* document.documentElement.style.setProperty('--primary-color', '#e74c3c'); */

第九部分：響應式設計

9.1 媒體查詢

/* 基本媒體查詢 */
@media screen and (max-width: 768px) {.container {width: 100%;padding: 10px;}
}/* 多種媒體查詢 */
@media screen and (min-width: 481px) and (max-width: 768px) {/* 平板樣式 */.grid {grid-template-columns: repeat(2, 1fr);}
}@media screen and (max-width: 480px) {/* 手機樣式 */.grid {grid-template-columns: 1fr;}
}/* 設備方向 */
@media screen and (orientation: landscape) {.hero {height: 60vh;}
}@media screen and (orientation: portrait) {.hero {height: 40vh;}
}/* 分辨率查詢 */
@media screen and (min-resolution: 2dppx) {.logo {background-image: url('logo@2x.png');background-size: 100px 50px;}
}/* 偏好查詢 */
@media (prefers-color-scheme: dark) {body {background-color: #1a1a1a;color: #ffffff;}
}@media (prefers-reduced-motion: reduce) {* {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;}
}

9.2 響應式布局技巧

/* 流體網格 */
.fluid-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;
}/* 響應式字體 */
.responsive-text {font-size: clamp(16px, 4vw, 32px);
}/* 容器查詢（未來特性，部分支持） */
@container (min-width: 400px) {.card {display: grid;grid-template-columns: 1fr 2fr;}
}/* 響應式圖片 */
.responsive-image {max-width: 100%;height: auto;
}/* Aspect Ratio */
.video-container {aspect-ratio: 16 / 9;width: 100%;
}/* 響應式間距 */
.section {padding: clamp(20px, 5vw, 60px);margin-bottom: clamp(30px, 8vw, 80px);
}

第十部分：CSS架構與最佳實踐

10.1 BEM命名方法論

/* Block */
.card {background: white;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}/* Element */
.card__header {padding: 20px;border-bottom: 1px solid #eee;
}.card__title {font-size: 24px;font-weight: bold;margin: 0;
}.card__content {padding: 20px;
}.card__footer {padding: 20px;text-align: right;
}/* Modifier */
.card--featured {border: 2px solid #3498db;
}.card--large {max-width: 800px;
}.card__title--small {font-size: 18px;
}/* 組合使用 */
.card.card--featured .card__title {color: #3498db;
}

10.2 CSS重置與Normalize

/* 現代CSS重置 */
*, *::before, *::after {box-sizing: border-box;
}* {margin: 0;
}html, body {height: 100%;
}body {line-height: 1.5;-webkit-font-smoothing: antialiased;
}img, picture, video, canvas, svg {display: block;max-width: 100%;
}input, button, textarea, select {font: inherit;
}p, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;
}#root, #__next {isolation: isolate;
}/* 無障礙友好的焦點樣式 */
:focus-visible {outline: 2px solid #3498db;outline-offset: 2px;
}/* 移除默認的焦點樣式，但保持鍵盤導航可訪問 */
:focus:not(:focus-visible) {outline: none;
}

10.3 CSS組織結構

/* 1. 變量和配置 */
:root {/* 顏色 */--color-primary: #3498db;--color-secondary: #2ecc71;--color-text: #333333;--color-text-light: #666666;--color-background: #ffffff;--color-border: #e1e1e1;/* 字體 */--font-family-primary: 'Helvetica Neue', Arial, sans-serif;--font-family-secondary: Georgia, serif;--font-size-base: 16px;--font-weight-normal: 400;--font-weight-bold: 700;/* 間距 */--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;/* 其他 */--border-radius: 4px;--box-shadow: 0 2px 8px rgba(0,0,0,0.1);--transition: 0.3s ease;
}/* 2. 工具類 */
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }.u-mb-sm { margin-bottom: var(--spacing-sm); }
.u-mb-md { margin-bottom: var(--spacing-md); }
.u-mb-lg { margin-bottom: var(--spacing-lg); }.u-hidden { display: none; }
.u-sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;
}/* 3. 基礎樣式 */
.btn {display: inline-block;padding: var(--spacing-sm) var(--spacing-md);border: none;border-radius: var(--border-radius);font-family: var(--font-family-primary);font-size: var(--font-size-base);font-weight: var(--font-weight-bold);text-decoration: none;text-align: center;cursor: pointer;transition: var(--transition);
}.btn--primary {background-color: var(--color-primary);color: white;
}.btn--primary:hover {background-color: #2980b9;
}.btn--secondary {background-color: var(--color-secondary);color: white;
}/* 4. 組件樣式 */
/* 參考前面的BEM示例 */

10.4 性能優化

/* 1. 避免昂貴的屬性 */
.expensive {/* 避免使用 */box-shadow: 0 0 0 1px rgba(0,0,0,0.1);border-radius: 50%;/* 更好的選擇 */transform: translateZ(0); /* 觸發硬件加速 */
}/* 2. 使用will-change提示瀏覽器 */
.animated-element {will-change: transform, opacity;
}/* 3. 合理使用contain屬性 */
.independent-component {contain: layout style paint;
}/* 4. 優化選擇器 */
/* 避免：過于復雜的選擇器 */
body div.container ul li a span.text {color: red;
}/* 更好：簡化選擇器 */
.link-text {color: red;
}/* 5. 關鍵CSS內聯 */
/* 將首屏樣式內聯到HTML中，其余樣式異步加載 */

第十一部分：現代CSS特性

11.1 CSS Grid高級特性

/* Subgrid（部分瀏覽器支持） */
.main-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;
}.sub-grid {display: grid;grid-column: span 3;grid-template-columns: subgrid;gap: inherit;
}/* Grid區域的高級用法 */
.complex-grid {display: grid;grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end];grid-template-rows: [header-start] 80px [header-end content-start] 1fr [content-end];
}.header {grid-column: sidebar-start / main-end;grid-row: header-start / header-end;
}/* 密集堆積 */
.masonry-like {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));grid-auto-rows: 10px;grid-auto-flow: row dense;
}.masonry-item {grid-row-end: span var(--row-span, 10);
}

11.2 邏輯屬性

/* 傳統物理屬性 */
.traditional {margin-top: 10px;margin-right: 20px;margin-bottom: 10px;margin-left: 20px;border-left: 1px solid #ccc;text-align: left;
}/* 現代邏輯屬性（支持RTL） */
.logical {margin-block-start: 10px;margin-inline-end: 20px;margin-block-end: 10px;margin-inline-start: 20px;border-inline-start: 1px solid #ccc;text-align: start;/* 簡寫 */margin-block: 10px;margin-inline: 20px;padding-block: 15px 25px;padding-inline: 10px 30px;
}

11.3 容器查詢

/* 定義容器 */
.card-container {container-type: inline-size;container-name: card;
}/* 基于容器大小的查詢 */
@container card (min-width: 400px) {.card {display: grid;grid-template-columns: 1fr 2fr;gap: 20px;}.card__image {grid-row: 1 / -1;}
}@container (max-width: 300px) {.card__title {font-size: 18px;}.card__description {display: none;}
}/* 容器查詢單位 */
.responsive-element {font-size: 5cqw; /* 5% of container width */padding: 2cqh; /* 2% of container height */margin: 1cqi; /* 1% of container inline size */border-radius: 2cqb; /* 2% of container block size */
}

11.4 CSS層疊層(Cascade Layers)

/* 定義層 */
@layer reset, base, components, utilities;/* 在特定層中添加樣式 */
@layer reset {* {margin: 0;padding: 0;box-sizing: border-box;}
}@layer base {body {font-family: system-ui, sans-serif;line-height: 1.5;}h1, h2, h3 {font-weight: bold;margin-bottom: 1em;}
}@layer components {.btn {padding: 0.5em 1em;border: none;border-radius: 4px;cursor: pointer;}.btn--primary {background: blue;color: white;}
}@layer utilities {.text-center {text-align: center !important;}
}/* 匿名層 */
@layer {.special-component {color: red;}
}

11.5 顏色功能增強

.modern-colors {/* 相對顏色語法 */--primary: #3498db;--primary-light: color-mix(in srgb, var(--primary), white 20%);--primary-dark: color-mix(in srgb, var(--primary), black 20%);/* LAB和LCH顏色空間 */color: lab(50% 20 -30);background: lch(60% 45 200);/* P3顏色空間 */background: color(display-p3 0.8 0.2 0.4);/* 相對顏色修改 */--accent: lch(from var(--primary) calc(l * 0.8) c h);--complement: hsl(from var(--primary) calc(h + 180) s l);
}/* 顏色對比度函數 */
.accessible-colors {background: var(--bg-color);color: color-contrast(var(--bg-color) vs white, black);
}

第十二部分：調試與工具

12.1 CSS調試技巧

/* 1. 邊框調試法 */
* {border: 1px solid red !important;
}/* 2. 背景色調試 */
.debug {background: rgba(255, 0, 0, 0.1) !important;
}/* 3. 輪廓調試 */
* {outline: 1px solid rgba(255, 0, 0, 0.5) !important;outline-offset: -1px !important;
}/* 4. Grid/Flex調試 */
.debug-grid {background: linear-gradient(90deg, rgba(255,0,0,0.1) 50%, transparent 50%),linear-gradient(rgba(0,255,0,0.1) 50%, transparent 50%);background-size: 20px 20px;
}/* 5. 字體回退調試 */
.font-debug {font-family: "Non-existent-font", Arial, sans-serif;
}/* 6. Z-index可視化 */
.z-index-debug {position: relative;
}.z-index-debug::before {content: attr(style);position: absolute;top: 0;left: 0;background: yellow;font-size: 12px;padding: 2px;z-index: 9999;
}

12.2 CSS自定義屬性調試

:root {/* 調試模式開關 */--debug-mode: 0; /* 0 = off, 1 = on */--debug-color: red;
}.debug-when-enabled {border: calc(var(--debug-mode) * 2px) solid var(--debug-color);background: rgba(255, 0, 0, calc(var(--debug-mode) * 0.1));
}/* 在開發時啟用調試 */
:root {--debug-mode: 1;
}

12.3 性能分析相關CSS

/* 標記重繪區域 */
.repaint-debug {animation: repaint 1s infinite;
}@keyframes repaint {0% { outline-color: red; }50% { outline-color: blue; }100% { outline-color: red; }
}/* 檢測布局抖動 */
.layout-debug {/* 觸發重排的屬性 */width: calc(100% - 1px);/* 更好的替代方案 */transform: translateX(-1px);
}/* 內存使用優化 */
.memory-efficient {/* 避免復雜的選擇器和深層嵌套 *//* 使用類而不是標簽選擇器 *//* 避免通配符選擇器在大型DOM中使用 */
}