CSS语言与界面美化
CSS（Cascading Style Sheets，层叠样式表）用于控制网页的外观和布局。
前置知识：HTML元素关系
父元素与子元素
在HTML文档中，元素之间存在嵌套关系：
<div> ← 父元素（parent）
<p> ← 子元素（child）
<span>← 孙子元素
</p>
</div>
div {
padding: 20px;
border: 2px solid #3498db;
}
div > p {
color: red;
}
div p {
color: blue;
}
我是div的子元素p
我是div的子元素div（也是孙子元素）
我是孙子元素p
祖元素与后代元素
祖元素（祖先）包含了子元素和孙子元素，后代元素是被嵌套在里面的所有元素。
div p { }
div > p { }
兄弟元素
兄弟元素是拥有相同父元素的元素：
<ul>
<li>元素1</li> ← li元素2的哥哥
<li>元素2</li> ← li元素1的弟弟
</ul>
提示：理解元素关系对于使用CSS选择器非常重要，尤其是后代选择器（空格）和子选择器（>）的区别。
第一部分：CSS选择器
什么是CSS选择器？
选择器用于指定要样式化的HTML元素。
基本选择器
| 选择器 |
名称 |
示例 |
| 元素选择器 |
选择所有指定元素 |
p { } |
| 类选择器 |
选择class属性值相同的元素 |
.classname { } |
| ID选择器 |
选择指定id的元素（唯一） |
#idname { } |
| 通配符选择器 |
选择所有元素 |
* { } |
选择器示例
p {
color: blue;
}
.red {
color: red;
}
#header {
background: gray;
}
组合选择器
| 选择器 |
名称 |
示例 |
| 后代选择器 |
选择元素内部的所有指定元素 |
div p { } |
| 子选择器 |
选择元素的直接子元素 |
div > p { } |
| 相邻兄弟选择器 |
选择紧邻的元素 |
h1 + p { } |
| 群组选择器 |
同时选择多个元素 |
h1, h2, h3 { } |
伪类和伪元素
button:hover {
background: blue;
}
li:first-child {
font-weight: bold;
}
p::first-letter {
font-size: 2em;
}
这是一个段落，鼠标悬停在下方的按钮上查看效果：
提示：伪类用单个冒号（:），伪元素用双冒号（::）。现代CSS推荐使用双冒号。
第二部分：CSS属性
常用文本属性
p {
color: #333;
font-size: 16px;
font-family: Arial;
font-weight: bold;
text-align: center;
line-height: 1.8;
text-decoration: underline;
}
常用背景属性
div {
background-color: #f0f0f0;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: center;
}
background-color: #3498db
常用边框属性
div {
border: 2px solid red;
border-width: 2px;
border-style: solid;
border-color: red;
border-radius: 10px;
}
常用盒模型属性
盒模型包括：内容(content) + 内边距(padding) + 边框(border) + 外边距(margin)
div {
width: 200px;
height: 100px;
padding: 20px;
margin: 10px;
box-sizing: border-box;
}
提示：使用 box-sizing: border-box 可以让padding和border包含在width和height内，计算更方便。
第三部分：浮动
什么是浮动？
浮动让元素向左或向右移动，其周围的元素也会围绕它排列。
浮动示例
.box {
float: left;
margin: 5px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
浮动前
浮动后
清除浮动
.clear {
clear: both;
}
.container::after {
content: "";
display: table;
clear: both;
}
注意：浮动会导致元素脱离文档流，父元素高度塌陷，需要使用clearfix技巧或设置父元素overflow: hidden来解决问题。
第四部分：定位
定位属性
position属性用于控制元素的定位方式。
| 值 |
说明 |
| static |
默认值，正常文档流定位 |
| relative |
相对定位，相对于自身原始位置定位 |
| absolute |
绝对定位，相对于最近已定位祖先元素定位 |
| fixed |
固定定位，相对于浏览器窗口定位 |
| sticky |
粘性定位，在滚动范围内是相对定位，超出后固定 |
相对定位（relative）
.box {
position: relative;
top: 20px;
left: 20px;
}
绝对定位（absolute）
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
}
父元素（relative）
子元素（absolute）
固定定位（fixed）
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
}
固定定位的元素会始终保持在浏览器窗口的指定位置，即使页面滚动也不会改变位置。
固定定位
粘性定位（sticky）
.sticky-header {
position: sticky;
top: 0;
}
我是粘性标题，滚动时我会固定在顶部
内容区域...
内容区域...
内容区域...
内容区域...
内容区域...
定位的层级
.box1 {
position: absolute;
z-index: 1;
}
.box2 {
position: absolute;
z-index: 2;
}
提示：z-index值越大，元素层级越高，会显示在其他元素上方。只有position为relative/absolute/fixed/sticky时z-index才有效。
总结
本教程涵盖了CSS的核心知识：
| 章节 |
知识点 |
| 第一部分 |
CSS选择器（元素、类、ID、组合、伪类/伪元素） |
| 第二部分 |
CSS属性（文本、背景、边框、盒模型） |
| 第三部分 |
浮动（float、clearfix） |
| 第四部分 |
定位（relative、absolute、fixed、sticky、z-index） |
下一步学习：现代布局技术、响应式设计、进阶css特性、过渡与css动画