css制作
CSS制作基础
CSS（层叠样式表）用于控制网页的样式和布局。通过CSS可以定义字体、颜色、间距、背景等视觉表现。
选择器与属性 CSS规则由选择器和声明块组成。选择器指定样式应用的对象，声明块包含属性和值。
p {
color: blue;
font-size: 16px;
}常用属性
color: 文本颜色background-color: 背景颜色margin: 外边距padding: 内边距border: 边框font-family: 字体
布局技术
Flexbox布局 Flexbox提供高效的容器内项目排列方式，适合一维布局。
.container {
display: flex;
justify-content: center;
align-items: center;
}Grid布局 CSS Grid适合创建复杂的二维布局系统。
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}响应式设计
媒体查询 通过媒体查询可以根据设备特性应用不同样式。
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}相对单位
使用相对单位如vw、vh、%等可以使元素尺寸随视口变化。
.box {
width: 80vw;
height: 50vh;
}动画与过渡
过渡效果 CSS过渡可以在属性变化时创建平滑的动画效果。
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #ff0000;
}关键帧动画
通过@keyframes可以创建更复杂的动画序列。
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.element {
animation: slide 2s infinite;
}预处理器
Sass/SCSS CSS预处理器提供了变量、嵌套、混合等功能。
$primary-color: #333;
.button {
background: $primary-color;
&:hover {
background: lighten($primary-color, 10%);
}
}PostCSS PostCSS通过插件系统可以自动添加浏览器前缀、优化CSS等。
最佳实践
模块化CSS
将CSS拆分为多个模块文件，通过@import或构建工具组合。
BEM命名规范 使用Block__Element--Modifier的命名约定提高可维护性。
.menu__item--active {
color: red;
}性能优化
- 减少选择器复杂度
- 避免过度使用通配符
- 压缩生产环境CSS文件
