CSS知识汇总
编程小白也能看懂的CSS全面指南 – 使用通俗语言讲解核心概念与实用技巧
📚 内容目录
核心概念
- CSS是什么？有什么用？
- CSS引入方式(内联/内部/外部)
- CSS选择器基础
- CSS盒模型
样式属性
- 文本样式设置
- 背景与边框
- 尺寸与边距
- 显示与定位
布局技术
- 传统布局方式
- Flex弹性布局
- Grid网格布局
- 响应式设计
高级特性
- CSS变量
- 过渡与动画
- 变形与变换
- 预处理器(Sass/Less)
第1部分：CSS核心概念
1. CSS是什么？有什么用？
CSS（层叠样式表）就像给HTML穿衣服的设计师。HTML负责网页结构（骨架），CSS负责网页外观（衣服和装饰）。
主要作用：
- 改变网页颜色、字体、间距
- 控制元素位置和布局
- 让网页在不同设备上适配
- 添加动画效果
2. CSS三种引入方式
内联样式
直接在HTML标签里写样式
<h1 style=”color: blue;”>
标题文字
</h1>
标题文字
</h1>
💡 适合个别元素的小调整
内部样式表
在HTML文档<head>里写<style>标签
<style>
h1 {
color: blue;
}
</style>
h1 {
color: blue;
}
</style>
💡 适合单个页面的样式
外部样式表
单独创建.css文件，在HTML中用<link>引入
<!– HTML中 –>
<link rel=”stylesheet” href=”styles.css”>
/* styles.css文件 */
h1 {
color: blue;
}
<link rel=”stylesheet” href=”styles.css”>
/* styles.css文件 */
h1 {
color: blue;
}
💡 最佳实践，适合多个页面共享样式
3. CSS选择器基础
选择器告诉浏览器”样式要应用到哪里”。就像点名一样，点到谁谁就得改变外观。
/* 标签选择器 – 选中所有p标签 */
p { color: red; }
/* 类选择器 – 选中class=”highlight”的元素 */
.highlight { background: yellow; }
/* ID选择器 – 选中id=”header”的元素 */
#header { font-size: 24px; }
/* 后代选择器 – 选中div内的所有p */
div p { margin: 10px; }
/* 伪类选择器 – 鼠标悬停时生效 */
button:hover { background: blue; }
p { color: red; }
/* 类选择器 – 选中class=”highlight”的元素 */
.highlight { background: yellow; }
/* ID选择器 – 选中id=”header”的元素 */
#header { font-size: 24px; }
/* 后代选择器 – 选中div内的所有p */
div p { margin: 10px; }
/* 伪类选择器 – 鼠标悬停时生效 */
button:hover { background: blue; }
4. CSS盒模型
CSS把每个HTML元素都看作一个盒子，包括四个部分：
内容区(content)
内容(content)
盒子里面装的东西，比如文字、图片
内边距(padding)
内容和边框之间的缓冲区域
边框(border)
盒子的外边缘线
外边距(margin)
盒子和其他盒子之间的距离
💡 重要提示：使用 box-sizing: border-box; 能让元素尺寸计算包含padding和border，布局更可控！
第2部分：布局技术
Flex弹性布局
轻松创建响应式布局的工具，像弹簧一样灵活分配空间。
/* 容器设置 */
.container {
display: flex;
justify-content: center; /* 水平对齐 */
align-items: center; /* 垂直对齐 */
flex-wrap: wrap; /* 允许换行 */
}
/* 子元素设置 */
.item {
flex: 1; /* 自动分配空间 */
margin: 10px;
}
.container {
display: flex;
justify-content: center; /* 水平对齐 */
align-items: center; /* 垂直对齐 */
flex-wrap: wrap; /* 允许换行 */
}
/* 子元素设置 */
.item {
flex: 1; /* 自动分配空间 */
margin: 10px;
}
Grid网格布局
创建二维布局的强大工具，像Excel表格一样划分区域。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 三列比例1:2:1 */
grid-template-rows: 100px auto; /* 两行高度 */
gap: 20px; /* 行列间距 */
}
/* 放置元素到特定区域 */
.header {
grid-column: 1 / 4; /* 横跨3列 */
grid-row: 1;
}
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 三列比例1:2:1 */
grid-template-rows: 100px auto; /* 两行高度 */
gap: 20px; /* 行列间距 */
}
/* 放置元素到特定区域 */
.header {
grid-column: 1 / 4; /* 横跨3列 */
grid-row: 1;
}
第3部分：实用技巧
响应式设计
让网页在不同设备上都能良好显示
/* 移动优先：默认样式(小屏幕) */
.container {
padding: 10px;
}
/* 中等屏幕 */
@media (min-width: 768px) {
.container {
padding: 20px;
}
}
/* 大屏幕 */
@media (min-width: 1200px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}
.container {
padding: 10px;
}
/* 中等屏幕 */
@media (min-width: 768px) {
.container {
padding: 20px;
}
}
/* 大屏幕 */
@media (min-width: 1200px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}
CSS动画
让元素动起来，提升用户体验
/* 定义动画 */
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
/* 应用动画 */
.element {
animation: bounce 1s infinite;
}
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
/* 应用动画 */
.element {
animation: bounce 1s infinite;
}