css 网页制作
CSS 网页制作基础
CSS（层叠样式表）用于控制网页的视觉呈现，包括布局、颜色、字体等。以下为关键知识点：
选择器与样式规则
/* 标签选择器 */
p {
color: blue;
font-size: 16px;
}
/* 类选择器 */
.highlight {
background-color: yellow;
}
/* ID选择器 */
#header {
padding: 20px;
}盒模型 每个元素被视为一个矩形盒子，包含：
width/height：内容尺寸padding：内边距border：边框margin：外边距
.box {
width: 300px;
padding: 15px;
border: 2px solid black;
margin: 10px;
}布局技术
Flexbox 弹性布局适合一维排列：
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
}Grid 网格布局适合二维结构：
.grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}响应式设计
媒体查询 根据设备特性调整样式：
@media (max-width: 768px) {
.sidebar {
display: none;
}
.content {
width: 100%;
}
}视口单位 使用动态单位适应不同屏幕：
.header {
height: 10vh; /* 视口高度的10% */
font-size: calc(12px + 0.5vw); /* 响应式字体 */
}动画与过渡
过渡效果 平滑属性变化：
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #ff9900;
}关键帧动画 复杂动画序列：
@keyframes slide {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.slide-in {
animation: slide 0.5s forwards;
}性能优化
减少重绘
- 使用
transform替代top/left位移 - 避免频繁修改
box-shadow等高性能属性
CSS压缩 通过工具如PostCSS去除空格和注释
预处理器 Sass/Less提供变量和嵌套：
$primary-color: #3498db;
.button {
background: $primary-color;
&:hover {
darken($primary-color, 10%);
}
}调试技巧
浏览器开发者工具
- 实时编辑CSS
- 查看盒模型图示
- 强制元素状态（如:hover）
特性检测
@supports (display: grid) {
/* 仅当支持Grid时应用的样式 */
}实际项目中建议结合HTML5语义化标签和现代CSS特性，如CSS变量（--main-color: #333;）和CSS模块化方案。
