css网页制作样式表
基础语法与结构
CSS（层叠样式表）通过选择器和声明块定义样式。选择器指定HTML元素，声明块包含属性和值：
选择器 {
属性: 值;
属性: 值;
}例如设置段落文字颜色和字体大小：
p {
color: #333;
font-size: 16px;
}常用选择器类型
- 元素选择器：直接匹配HTML标签名（如
h1、div） - 类选择器：以
.开头（如.header匹配class="header"的元素） - ID选择器：以
#开头（如#nav匹配id="nav"的元素） - 伪类选择器：定义特殊状态（如
a:hover设置鼠标悬停样式）
盒模型控制
CSS盒模型包含内容（content）、内边距（padding）、边框（border）和外边距（margin）：
.box {
width: 300px;
padding: 20px;
border: 1px solid #ddd;
margin: 10px;
}通过box-sizing属性可切换计算方式：
content-box（默认）：宽度仅含内容border-box：宽度包含内容+内边距+边框
布局技术
Flexbox布局：
.container {
display: flex;
justify-content: center; /* 水平对齐 */
align-items: center; /* 垂直对齐 */
}
.item {
flex: 1; /* 弹性伸缩比例 */
}Grid布局：
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr; /* 两列，比例1:2 */
gap: 10px; /* 网格间隙 */
}响应式设计
使用媒体查询适配不同设备：
/* 移动端样式 */
@media (max-width: 768px) {
.menu {
display: none;
}
}动画与过渡
CSS过渡：
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #f00;
}关键帧动画：
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.element {
animation: slide 2s infinite;
}变量与预处理
CSS自定义变量：
:root {
--main-color: #06c;
}
.element {
color: var(--main-color);
}性能优化建议
- 减少选择器复杂度（避免
div ul li a） - 使用
transform和opacity实现高性能动画 - 压缩CSS文件（如通过PostCSS）
- 优先使用CSS原生特性替代JavaScript操作样式
