第一部分：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中使用 */
}总结
这份CSS完整指南涵盖了从基础语法到最新CSS3特性的所有重要内容。学习CSS需要大量的实践，建议您：
- 逐步学习：从基础选择器和属性开始，逐渐掌握布局和高级特性
- 多动手实践：每学习一个概念都要亲自编写代码验证
- 关注浏览器兼容性：使用Can I Use等工具检查特性支持情况
- 保持更新：CSS标准在不断发展，要关注新特性和最佳实践
- 注重性能：编写高效的CSS，避免过度复杂的选择器和不必要的重绘
- 重视可维护性：使用合理的命名规范和组织结构
- 无障碍友好：考虑所有用户的使用需求，编写包容性的CSS