CSS说明文档
CSS（层叠样式表）是一种用于描述标记语言（如HTML）编写的文档的样式表语言。它用于控制网页的布局、颜色、字体以及其他视觉显示效果。以下是CSS的一些基本概念和使用方式的说明。
1. 选择器与规则
CSS的核心是选择器（Selectors）和规则（Rules）。选择器用于指定网页中你想要样式化的元素，规则则定义了这些元素的视觉样式。
/* 一个基本的CSS规则 */
p {
color: blue;
font-size: 14px;
}
在这个例子中，p 是选择器，表示所有段落元素，而花括号内的 color 和 font-size 是属性，分别定义了文本颜色和字体大小。
2. 类和ID选择器
除了HTML元素选择器，CSS还提供了类（Class）和ID选择器。
/* 类选择器，用点开头 */
.highlight {
background-color: yellow;
}
/* ID选择器，用井号开头 */
#main-header {
font-size: 24px;
}
类选择器允许你为一组元素定义相同的样式，而ID选择器则用于特定元素的唯一样式。
3. 继承
CSS中的属性是可继承的，这意味着子元素会继承父元素的某些属性。
body {
font-family: Arial, sans-serif;
}
在这个例子中，如果一个元素没有指定字体，它将继承 body 元素的字体样式。
4. 盒模型
CSS的盒模型（Box Model）描述了元素在网页上的布局方式。每个元素可以看作是一个盒子，包含边距（margin）、边框（border）、填充（padding）和内容（content）。
.box {
width: 300px;
height: 200px;
margin: 10px;
padding: 20px;
border: 1px solid black;
}
5. 布局
CSS提供了多种布局方式，包括传统的布局（使用表格和浮动）和现代布局（使用Flexbox和Grid）。
/* Flexbox布局 */
.flex-container {
display: flex;
justify-content: space-between;
}
/* Grid布局 */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
6. 媒体查询
媒体查询（Media Queries）允许开发者根据设备的特性（如屏幕大小和分辨率）应用不同的样式。
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
7. 伪类和伪元素
伪类（Pseudo-classes）和伪元素（Pseudo-elements）允许你定义元素的特殊状态或子部分的样式。
/* 伪类 */
a:hover {
color: red;
}
/* 伪元素 */
p::first-line {
font-weight: bold;
}
8. CSS预处理器
CSS预处理器（如Sass和Less）提供了变量、嵌套、混合（mixins）和函数等功能，使得CSS更易于维护和扩展。
9. CSS动画和过渡
CSS提供了动画（@keyframes）和过渡（transitions）功能，允许创建动态的视觉效果。
/* 动画 */
@keyframes example {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 过渡 */
button {
transition: background-color 0.3s;
}
10. 响应式设计
响应式设计（Responsive Design）使用CSS媒体查询和灵活的网格系统来创建适应不同屏幕尺寸的网页布局。
结语
CSS是构建现代网页不可或缺的一部分。它不仅提供了丰富的样式定制能力，还支持响应式设计和动态效果，使得网页设计更加灵活和强大。随着Web技术的不断发展，CSS也在不断进化，引入新的特性和功能，以满足开发者和用户的需求。
