1. CSS 变量(Custom Properties)
CSS 变量允许你定义可重用的值,使用 --
前缀来定义变量。
:root {
--main-color: #3498db;
}
.button {
background-color: var(--main-color);
}
2. 媒体查询(Media Queries)
媒体查询用于根据不同的设备特性(如屏幕宽度)应用不同的样式。
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
3. Flexbox
Flexbox 是一种布局模型,可以轻松地在容器中对齐和分配空间。
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
4. Grid 布局
CSS Grid 布局允许你创建复杂的二维布局。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
5. 伪类和伪元素
伪类和伪元素用于选择元素的特定状态或部分。
a:hover {
color: red;
}
p::first-line {
font-weight: bold;
}
6. 组合选择器
组合选择器允许你选择特定的元素组合。
div > p {
color: blue; /* 选择直接子元素的 p */
}
ul li:hover {
background-color: yellow; /* 选择悬停的 li */
}
7. 动画和过渡
CSS 动画和过渡可以创建平滑的视觉效果。
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #2980b9;
}
8. 计算函数(calc)
calc()
函数允许你在 CSS 中进行简单的数学计算。
.container {
width: calc(100% - 20px);
}
9. 选择器优先级
了解选择器的优先级规则可以帮助你更好地控制样式的应用。
10. CSS 预处理器
使用 Sass 或 LESS 等预处理器可以增强 CSS 的功能,如嵌套、混合、继承等。