CSS, 样式·
CSS 样式指南
掌握 CSS 现代技术和布局方法
CSS（层叠样式表）用于描述网页的外观和格式。本文将介绍 CSS 的现代技术和布局方法。
CSS 基础
CSS 规则由选择器和声明块组成：
selector {
property: value;
}
选择器
CSS 提供了多种选择器：
- 元素选择器：
div { } - 类选择器：
.class { } - ID 选择器：
#id { } - 属性选择器：
[attr=value] { } - 伪类选择器：
:hover { } - 组合选择器：
div p { }
布局技术
Flexbox
Flexbox 是一维布局模型，非常适合组件内部布局：
.container {
display: flex;
justify-content: center;
align-items: center;
}
Grid
CSS Grid 是二维布局系统，适合页面整体布局：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
响应式设计
使用媒体查询创建响应式布局：
@media (max-width: 768px) {
.container {
padding: 10px;
}
}
CSS 变量
使用 CSS 自定义属性：
:root {
--primary-color: #3498db;
--spacing: 20px;
}
.button {
background-color: var(--primary-color);
padding: var(--spacing);
}
动画和过渡
添加平滑的动画效果：
.element {
transition: all 0.3s ease;
}
.element:hover {
transform: translateY(-5px);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
最佳实践
- 使用语义化的类名
- 避免内联样式
- 使用 CSS 预处理器
- 遵循 BEM 命名规范
- 优化 CSS 加载性能
学习资源
掌握 CSS，创造美丽的网页！