CSS是什么？—— 网页的“化妆师”
目录
第一阶段：CSS基础理念
1：CSS是什么？—— 网页的“化妆师”
2：选择器——精准定位元素的“GPS”
2.1、 标签选择器
2.2、id选择器
2.3、class选择器
2.4、伪类选择器
2.5、后代选择器
2.6、常见的css属性
3：盒模型——所有元素的“生存空间”
4：常用样式属性
设置Div尺寸
创建渐变背景
添加边框
设置上方间距
实现文字居中
第三阶段：布局艺术
5：传统布局方案
6：Flex布局
7：Grid布局（二维布局之王）
最终实现代码
实现效果
Flex布局实现步骤
Grid布局实现步骤
Flex布局要点
Grid布局要点
第四阶段：高级技巧与响应式
8：响应式设计
9：炫酷特效
第一阶段：CSS基础理念
1：CSS是什么？—— 网页的“化妆师”
- 核心概念：CSS（层叠样式表）负责控制HTML元素的视觉效果（颜色、大小、位置等）。
- 核心规则：层叠（优先级）与继承（父元素样式传递子元素）。
- 如何引入CSS：
<!-- 1. 内联样式（优先级最高，少用） --><div style="color: red;">内容</div><!-- 2. 内部样式表（适合小项目） --><head><style>body { background: #f0f0f0; }</style></head><!-- 3. 外部样式表（最推荐！） --><head><link rel="stylesheet" href="style.css"></head> - CSS语法：
语法1
选择器{
样式属性键：样式属性值
Eg:color:red
样式属性键：样式属性值1 样式属性值2 样式属性值3····（样式属性值之间使用空格）
语法2:
style="样式属性键：样式属性值"
}
2：选择器——精准定位元素的“GPS”
/* 1. 标签选择器 */
p { color: blue; }/* 2. 类选择器（最常用） */
.text-red { color: red; }
/* HTML: <p class="text-red">红色文字</p> *//* 3. ID选择器（唯一性） */
#header { height: 80px; }
/* HTML: <div id="header"></div> *//* 4. 后代选择器 */
nav a { text-decoration: none; } /* nav下的所有a标签 *//* 5. 伪类选择器（交互状态） */
a:hover { color: orange; } /* 鼠标悬停时 */2.1、 标签选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标签选择器.html</title><!--标签选择器标签名称{}--><style type="text/css">a{color:aqua}</style>
</head>
<body><a>This is my HTML.page</a>
</body>
</html>
2.2、id选择器
- 注意：使用id时，要保证id的值在页面中是唯一的
- 例如：使用两个a标签，是第一个a标签的内容变黄色，而第二个不变
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>id选择器.html</title><!--id选择器#标签id{}--><style type="text/css">#one{color:yellow}</style>
</head>
<body><a id="one">This is my HTML.page</a><br><a>This is my HTML.page</a>
</body>
</html>
2.3、class选择器
- 实例：页面上有《a》和《p》标签，希望第一个a标签和p标签颜色变化
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>class选择器.html</title><!--class选择器.class标签名称{}--><style type="text/css">.one{color:green}</style>
</head>
<body><a class="one"> This is my HTML.page </a><br><a>This is my HTML.page </a><p class="one">This is my HTML.page </p><p>This is my HTML.page </p></body>
</html>
2.4、伪类选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类选择器.html</title><!--伪类选择器选择标签的某个状态，需要配合其他选择器来使用link:表示未访问过visited:表示访问过hover:表示悬浮active:表示激活，点击--><style type="text/css">a:link{color:green}a:visited{color:aqua}a:hover{color:rgb(228, 131, 168)}a:active{color:rgb(196, 52, 8)}</style>
</head>
<body><a href="类选择器.html">点我</a></body>
</html>2.5、后代选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代选择器.html</title><style type="text/css">#one,.two,font{color: #3366ff}</style>
</head>
<body><p id="one">This is my HTML.page</p><br><a class="two">This is my HTML.page</a><br><font>This is my HTML.page</font></body>
</html>
2.6、常见的css属性
3：盒模型——所有元素的“生存空间”
块级标签：div => 占据的范围是一行
行内标签 : span => 占据的是行中的一部分
div {width: 200px; /* 内容宽度 */height: 100px; /* 内容高度 */padding: 20px; /* 内边距（内容与边框的间距） */border: 2px solid black; /* 边框 */margin: 30px; /* 外边距（元素与其他元素的间距） *//* 重要！改变盒模型计算方式 */box-sizing: border-box; /* width包含padding和border */
}
4：常用样式属性
/* 文字样式 */
p {font-family: "Microsoft YaHei", sans-serif; /* 字体栈 */font-size: 16px;font-weight: bold;text-align: center; /* 左left/中center/右right */line-height: 1.6; /* 行高（重要！） */
}/* 颜色与背景 */
div {color: #ff0000; /* 文字颜色 */background-color: rgba(0,0,0,0.5); /* 半透明黑色背景 */background-image: url("bg.jpg");background-size: cover;
}
- 实战小任务
创建一个200x200px的div，要求： ① 背景渐变色 ② 内部文字垂直水平居中 ③ 有1px黑色边框 ④ 距离上方元素50px
- 最终实现代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS实战任务：渐变Div与居中文字</title><style>/* 重置默认样式以确保一致性 */* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);min-height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 20px;color: #333;}.container {max-width: 900px;width: 100%;text-align: center;}header {margin-bottom: 40px;color: white;text-shadow: 0 2px 4px rgba(0,0,0,0.3);}h1 {font-size: 2.5rem;margin-bottom: 15px;}.instructions {background: rgba(255, 255, 255, 0.9);border-radius: 10px;padding: 20px;margin-bottom: 30px;box-shadow: 0 5px 15px rgba(0,0,0,0.1);}.task-container {display: flex;justify-content: center;gap: 40px;flex-wrap: wrap;}/* 代码演示区域样式 */.code-demo {background: #2d2d2d;color: #f8f8f2;border-radius: 8px;padding: 20px;width: 400px;box-shadow: 0 5px 15px rgba(0,0,0,0.2);text-align: left;}.code-demo h3 {color: #ff6b6b;margin-bottom: 15px;border-bottom: 1px solid #444;padding-bottom: 8px;}pre {background: #1e1e1e;padding: 15px;border-radius: 5px;overflow-x: auto;font-family: 'Consolas', 'Monaco', monospace;line-height: 1.5;white-space: pre-wrap;}.css-code {color: #a5e844;}.comment {color: #75715e;}/* 任务要求实现的目标div */.target-div {/* 设置div尺寸为200x200像素 */width: 200px;height: 200px;/* 添加渐变背景 - 从左上到右下的蓝紫色渐变 */background: linear-gradient(135deg, #4b6cb7, #182848);/* 添加1px黑色实线边框 */border: 1px solid #000;/* 设置距离上方元素50px的间距 */margin-top: 50px;/* 使用flexbox实现内部文字垂直水平居中 */display: flex;align-items: center;justify-content: center;/* 文字样式 */color: white;font-weight: bold;font-size: 18px;/* 添加一些圆角使视觉效果更柔和 */border-radius: 8px;/* 添加阴影增强立体感 */box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);}.visual-output {display: flex;flex-direction: column;align-items: center;}.visual-output h3 {color: #4ecdc4;margin-bottom: 20px;}footer {margin-top: 40px;color: white;text-align: center;font-size: 0.9rem;}</style>
</head>
<body><div class="container"><header><h1>CSS实战任务：渐变Div与居中文字</h1><p>学习如何创建一个符合特定样式要求的div元素</p></header><div class="instructions"><h2>任务要求</h2><p>创建一个200x200px的div，要求：</p><ol><li>背景渐变色</li><li>内部文字垂直水平居中</li><li>有1px黑色边框</li><li>距离上方元素50px</li></ol></div><div class="task-container"><div class="code-demo"><h3>实现代码</h3><pre><span class="css-code">.target-div {<span class="comment">/* 设置div尺寸 */</span>width: 200px;height: 200px;<span class="comment">/* 添加渐变背景 */</span>background: linear-gradient(135deg, #4b6cb7, #182848);<span class="comment">/* 添加1px黑色边框 */</span>border: 1px solid #000;<span class="comment">/* 设置上方间距 */</span>margin-top: 50px;<span class="comment">/* 使用flexbox实现文字居中 */</span>display: flex;align-items: center;justify-content: center;<span class="comment">/* 文字样式 */</span>color: white;font-weight: bold;
}</span></pre></div><div class="visual-output"><h3>视觉效果</h3><!-- 这是上方的元素，用于演示margin-top的效果 --><div style="background: #f8f9fa; padding: 10px; border-radius: 5px; margin-bottom: 10px;">上方元素</div><!-- 这是我们要创建的目标div --><div class="target-div">居中文字</div><div style="margin-top: 20px; background: #f8f9fa; padding: 10px; border-radius: 5px;">下方元素</div></div></div><footer><p>CSS实战练习 - 通过实践掌握CSS布局与样式技巧</p></footer></div>
</body>
</html>2.最终实现效果
3、代码解析，
设置Div尺寸
/* 设置div尺寸为200x200像素 */
width: 200px;
height: 200px;创建渐变背景
/* 添加渐变背景 - 从左上到右下的蓝紫色渐变 */
background: linear-gradient(135deg, #4b6cb7, #182848);
linear-gradient()函数创建线性渐变135deg设置渐变方向为从左上到右下- 可以添加多个颜色值创建更复杂的渐变
添加边框
/* 添加1px黑色实线边框 */
border: 1px solid #000;
border是边框的简写属性1px设置边框宽度solid设置边框样式为实线#000设置边框颜色为黑色
设置上方间距
/* 设置距离上方元素50px的间距 */
margin-top: 50px;
argin-top控制元素上方的外边距- 这会在此div和它上方的元素之间创建50px的空间
实现文字居中
/* 使用flexbox实现内部文字垂直水平居中 */
display: flex;
align-items: center;
justify-content: center;
display: flex将元素设置为Flex容器align-items: center垂直居中子元素justify-content: center水平居中子元素
第三阶段：布局艺术
5：传统布局方案
/* 1. 浮动布局（传统方案） */
.left { float: left; width: 70%; }
.right { float: right; width: 28%; }
.clearfix::after { /* 清除浮动 */content: "";display: block;clear: both;
}/* 2. 定位布局 */
.parent { position: relative; }
.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); /* 经典居中方案 */
}6：Flex布局
.container {display: flex;justify-content: center; /* 主轴对齐方式 */align-items: center; /* 交叉轴对齐方式 */flex-wrap: wrap; /* 换行 */
}.item {flex: 1; /* 弹性比例 */align-self: flex-start; /* 单个项目对齐 */
}7：Grid布局（二维布局之王）
.container {display: grid;grid-template-columns: 1fr 2fr 1fr; /* 3列，中间列是两侧2倍 */grid-gap: 20px; /* 间距 */
}.item {grid-column: 1 / 3; /* 从第1列到第3列 */grid-row: 1; /* 在第1行 */
}实战任务3： 用Flex布局实现：一个水平居中的容器，内部有3个等宽按钮 用Grid布局实现： 3x3的九宫格布局，每个格子100x100px
最终实现代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flex与Grid布局实战</title><style>/* 全局样式重置 */* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);min-height: 100vh;display: flex;flex-direction: column;align-items: center;padding: 40px 20px;color: #fff;}.container {width: 100%;max-width: 1000px;margin: 0 auto;}header {text-align: center;margin-bottom: 40px;text-shadow: 0 2px 4px rgba(0,0,0,0.3);}h1 {font-size: 2.5rem;margin-bottom: 15px;}.task-section {background: rgba(255, 255, 255, 0.9);border-radius: 12px;padding: 25px;margin-bottom: 40px;box-shadow: 0 8px 25px rgba(0,0,0,0.15);color: #333;}h2 {color: #1a2a6c;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid #ddd;}h3 {color: #b21f1f;margin: 20px 0 15px;}/* Flex布局任务样式 */.flex-container {/* 设置为flex容器 */display: flex;/* 主轴（水平方向）上居中 */justify-content: center;/* 设置容器宽度为80% */width: 80%;/* 水平居中容器 */margin: 0 auto;/* 添加内边距 */padding: 20px;/* 添加背景色 */background-color: #f8f9fa;/* 添加圆角 */border-radius: 10px;/* 添加阴影效果 */box-shadow: 0 4px 12px rgba(0,0,0,0.1);}.flex-btn {/* 设置按钮弹性增长，使它们等宽 */flex: 1;/* 设置内边距 */padding: 12px 0;/* 设置字体大小 */font-size: 16px;/* 设置字体粗细 */font-weight: 600;/* 设置背景颜色 */background: linear-gradient(to right, #4b6cb7, #182848);/* 设置文字颜色 */color: white;/* 移除按钮默认边框 */border: none;/* 添加圆角 */border-radius: 6px;/* 添加光标指针样式 */cursor: pointer;/* 添加过渡效果 */transition: all 0.3s ease;/* 设置最大宽度，避免在大屏幕上过宽 */max-width: 150px;/* 添加按钮间距 */margin: 0 8px;}.flex-btn:hover {/* 鼠标悬停时变换背景 */background: linear-gradient(to right, #182848, #4b6cb7);/* 添加悬停时的阴影效果 */box-shadow: 0 6px 12px rgba(0,0,0,0.15);/* 轻微向上移动 */transform: translateY(-2px);}/* Grid布局任务样式 */.grid-container {/* 设置为grid容器 */display: grid;/* 创建3列，每列100px */grid-template-columns: 100px 100px 100px;/* 创建3行，每行100px */grid-template-rows: 100px 100px 100px;/* 设置网格项之间的间隙 */gap: 10px;/* 水平居中容器 */margin: 0 auto;/* 添加内边距 */padding: 20px;/* 添加背景色 */background-color: #f8f9fa;/* 添加圆角 */border-radius: 10px;/* 添加阴影效果 */box-shadow: 0 4px 12px rgba(0,0,0,0.1);/* 设置容器宽度以适应内容 */width: fit-content;}.grid-item {/* 设置背景颜色 */background: linear-gradient(45deg, #fdbb2d, #b21f1f);/* 添加圆角 */border-radius: 8px;/* 设置文字颜色 */color: white;/* 设置字体大小 */font-size: 24px;/* 设置字体粗细 */font-weight: bold;/* 使用flex让数字在格子中居中 */display: flex;/* 水平居中 */justify-content: center;/* 垂直居中 */align-items: center;/* 添加阴影效果 */box-shadow: 0 4px 8px rgba(0,0,0,0.1);/* 添加过渡效果 */transition: all 0.3s ease;}.grid-item:hover {/* 鼠标悬停时变换背景 */background: linear-gradient(45deg, #b21f1f, #fdbb2d);/* 添加悬停时的阴影效果 */box-shadow: 0 6px 12px rgba(0,0,0,0.2);/* 旋转效果 */transform: rotate(5deg);}.code-container {background: #2d2d2d;color: #f8f8f2;border-radius: 8px;padding: 20px;margin-top: 25px;box-shadow: 0 5px 15px rgba(0,0,0,0.2);}pre {background: #1e1e1e;padding: 15px;border-radius: 5px;overflow-x: auto;font-family: 'Consolas', 'Monaco', monospace;line-height: 1.5;white-space: pre-wrap;}.css-code {color: #a5e844;}.comment {color: #75715e;}.flex-example, .grid-example {display: flex;flex-direction: column;align-items: center;margin: 25px 0;}footer {margin-top: 40px;color: white;text-align: center;font-size: 0.9rem;}</style>
</head>
<body><div class="container"><header><h1>Flex与Grid布局实战</h1><p>掌握现代CSS布局的强大技术</p></header><div class="task-section"><h2>实战任务</h2><p>使用Flex布局实现水平居中的等宽按钮，使用Grid布局实现3×3九宫格。</p><div class="flex-example"><h3>Flex布局：水平居中的等宽按钮</h3><div class="flex-container"><button class="flex-btn">首页</button><button class="flex-btn">产品</button><button class="flex-btn">联系</button></div><div class="code-container"><h3>Flex布局代码实现</h3><pre><span class="css-code"><span class="comment">/* Flex容器样式 */</span>
.flex-container {display: flex; <span class="comment">/* 设置为flex容器 */</span>justify-content: center; <span class="comment">/* 主轴（水平方向）上居中 */</span>width: 80%; <span class="comment">/* 设置容器宽度 */</span>margin: 0 auto; <span class="comment">/* 水平居中容器 */</span>
}<span class="comment">/* Flex项目（按钮）样式 */</span>
.flex-btn {flex: 1; <span class="comment">/* 使按钮等宽 */</span>max-width: 150px; <span class="comment">/* 设置最大宽度 */</span>margin: 0 8px; <span class="comment">/* 添加按钮间距 */</span>
}</span></pre></div></div><div class="grid-example"><h3>Grid布局：3×3九宫格（每个格子100×100px）</h3><div class="grid-container"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div><div class="grid-item">7</div><div class="grid-item">8</div><div class="grid-item">9</div></div><div class="code-container"><h3>Grid布局代码实现</h3><pre><span class="css-code"><span class="comment">/* Grid容器样式 */</span>
.grid-container {display: grid; <span class="comment">/* 设置为grid容器 */</span>grid-template-columns: 100px 100px 100px; <span class="comment">/* 创建3列，每列100px */</span>grid-template-rows: 100px 100px 100px; <span class="comment">/* 创建3行，每行100px */</span>gap: 10px; <span class="comment">/* 设置网格项之间的间隙 */</span>margin: 0 auto; <span class="comment">/* 水平居中容器 */</span>
}<span class="comment">/* Grid项目（格子）样式 */</span>
.grid-item {width: 100px; <span class="comment">/* 设置宽度 */</span>height: 100px; <span class="comment">/* 设置高度 */</span>display: flex; <span class="comment">/* 使用flex让内容居中 */</span>justify-content: center; <span class="comment">/* 水平居中内容 */</span>align-items: center; <span class="comment">/* 垂直居中内容 */</span>
}</span></pre></div></div></div><footer><p>CSS布局实战练习 - 掌握Flex和Grid布局技术</p></footer></div>
</body>
</html>实现效果
Flex布局实现步骤
- 创建Flex容器
.flex-container {display: flex; /* 设置为flex容器 */justify-content: center; /* 主轴（水平方向）上居中 */width: 80%; /* 设置容器宽度 */margin: 0 auto; /* 水平居中容器 */}2、设置Flex项目（按钮）
.flex-btn {flex: 1; /* 使按钮等宽 */max-width: 150px; /* 设置最大宽度 */margin: 0 8px; /* 添加按钮间距 */}Grid布局实现步骤
- 创建Grid容器
.grid-container {display: grid; /* 设置为grid容器 */grid-template-columns: 100px 100px 100px; /* 创建3列，每列100px */grid-template-rows: 100px 100px 100px; /* 创建3行，每行100px */gap: 10px; /* 设置网格项之间的间隙 */margin: 0 auto; /* 水平居中容器 */}2设置Grid项目（格子）
.grid-item {width: 100px; /* 设置宽度 */height: 100px; /* 设置高度 */display: flex; /* 使用flex让内容居中 */justify-content: center; /* 水平居中内容 */align-items: center; /* 垂直居中内容 */}Flex布局要点
display: flex创建一个flex容器justify-content控制主轴（默认水平方向）对齐方式flex: 1使flex项目等分可用空间Grid布局要点
display: grid创建一个grid容器grid-template-columns定义列数和列宽grid-template-rows定义行数和行高gap设置网格项之间的间距
区别
| 特性 | Flexbox (一维) | Grid (二维) |
|---|---|---|
| 维度 | 一次处理一行或一列 | 同时处理行和列 |
| 核心思想 | 内容流、弹性 | 预先定义的结构、精准放置 |
| 控制方式 | 在主轴和交叉轴上对齐、分布内容 | 将项目放置到明确定义的网格单元格中 |
| 最适合 | 小型组件、线性布局、内容动态的布局 | 大型布局、整体页面架构、需要精确控制的布局 |
第四阶段：高级技巧与响应式
8：响应式设计
/* 1. 媒体查询（断点） */
@media (max-width: 768px) { /* 平板 */.container { flex-direction: column; }
}@media (max-width: 480px) { /* 手机 */.item { width: 100%; }
}/* 2. 响应式单位 */
div {width: 80vw; /* 视口宽度的80% */height: 50vh; /* 视口高度的50% */font-size: 2rem;/* 基于根元素字体大小 */
}9：炫酷特效
/* 1. 过渡动画 */
.button {transition: all 0.3s ease;
}
.button:hover {transform: scale(1.1);box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}/* 2. 关键帧动画 */
@keyframes slideIn {from { transform: translateX(-100%); }to { transform: translateX(0); }
}.element {animation: slideIn 0.5s ease forwards;
}