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中使用 */
}