一、CSS 简介
CSS (Cascading Style Sheets) 是用来描述 HTML 文档样式的样式表语言，控制网页的外观和布局。
核心概念：
层叠性：多个样式规则可以应用于同一元素
继承性：某些样式属性会传递给子元素
优先级：不同选择器有不同的权重
二、基础语法
1. 基本结构
选择器 {
属性: 值;
属性: 值;
}
示例：
h1 {
color: blue;
font-size: 24px;
}
2. 三种引入方式
红色文字
三、选择器详解
1. 基本选择器
/* 元素选择器 */
p { color: #333; }
/* 类选择器 */
.title { font-weight: bold; }
/* ID选择器 */
#header { height: 60px; }
/* 通配符选择器 */
* { margin: 0; padding: 0; }
2. 组合选择器
/* 后代选择器 */
div p { line-height: 1.5; }
/* 子元素选择器 */
ul > li { list-style: none; }
/* 相邻兄弟选择器 */
h1 + p { margin-top: 0; }
/* 通用兄弟选择器 */
h2 ~ p { color: #666; }
3. 属性选择器
/* 存在属性 */
a[target] { color: purple; }
/* 精确匹配 */
input[type="text"] { width: 200px; }
/* 包含字符串 */
a[href*="example"] { text-decoration: none; }
/* 开头匹配 */
a[href^="https"] { color: green; }
/* 结尾匹配 */
a[href$=".pdf"]::after { content: " (PDF)"; }
4. 伪类与伪元素
/* 伪类 */
a:hover { color: red; }
li:nth-child(odd) { background: #eee; }
/* 伪元素 */
p::first-line { font-weight: bold; }
p::after { content: " - 结束"; }
四、盒模型
1. 盒模型组成
内容(content) → 内边距(padding) → 边框(border) → 外边距(margin)
2. 标准盒模型 vs 怪异盒模型
.box {
box-sizing: content-box; /* 默认，width仅指内容宽度 */
box-sizing: border-box; /* width包含padding和border */
}
3. 常用属性
div {
width: 300px;
height: 200px;
padding: 20px;
border: 1px solid #ccc;
margin: 10px;
background: #fff;
}
五、布局系统
1. Flex 布局
.container {
display: flex;
justify-content: center; /* 主轴对齐 */
align-items: center; /* 交叉轴对齐 */
flex-wrap: wrap; /* 换行 */
}
.item {
flex: 1; /* 弹性比例 */
order: 2; /* 排序 */
align-self: flex-start; /* 单独对齐 */
}
2. Grid 布局
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 列宽 */
grid-template-rows: 100px auto; /* 行高 */
gap: 10px; /* 间距 */
}
.item {
grid-column: 1 / 3; /* 跨越列 */
grid-row: 1; /* 行位置 */
}
3. 传统布局
/* 浮动布局 */
.left { float: left; width: 200px; }
.right { margin-left: 220px; }
/* 定位布局 */
.parent { position: relative; }
.child { position: absolute; top: 0; right: 0; }
六、响应式设计
1. 媒体查询
/* 小屏幕 */
@media (max-width: 768px) {
.sidebar { display: none; }
.content { width: 100%; }
}
/* 打印样式 */
@media print {
nav, footer { display: none; }
}
2. 响应式单位
h1 { font-size: 2rem; } /* 相对于根元素 */
p { font-size: 16px; } /* 固定像素 */
.container { width: 90%; } /* 百分比 */
img { max-width: 100%; } /* 自适应 */
七、动画与过渡
1. 过渡效果
.button {
transition: all 0.3s ease;
}
.button:hover {
transform: scale(1.1);
background: #4CAF50;
}
2. 关键帧动画
@keyframes slidein {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.banner {
animation: slidein 1s forwards;
}
八、CSS 变量
:root {
--primary-color: #4285f4;
--spacing: 8px;
}
.header {
color: var(--primary-color);
padding: var(--spacing);
}
九、最佳实践
命名规范：使用 BEM 等命名约定
.block__element--modifier { ... }
预处理器：使用 Sass/Less
$primary-color: #333;
.header {
background: lighten($primary-color, 20%);
}
性能优化：
避免过度嵌套
使用简写属性
减少重绘和回流
十、学习资源
MDN CSS 文档
CSS Tricks
Flexbox 小游戏
Grid 小游戏
CSDN CSS 社区专栏
这篇 CSS 教程涵盖了从基础到进阶的核心知识点，建议边学边实践，通过实际项目加深理解。随着 CSS3 的不断发展，建议持续关注新特性如容器查询、层叠布局等前沿技术。