css网页制作
CSS 网页制作基础
CSS（层叠样式表）用于控制网页的样式和布局，与HTML结合使用可实现丰富的视觉效果。以下是核心方法和技巧：
选择器与样式定义
- 标签选择器：
p { color: red; }修改所有段落文本颜色 - 类选择器：
.header { font-size: 24px; }通过class属性调用 - ID选择器：
#navbar { background: #333; }针对唯一元素 - 组合选择器：
div.content > p精准定位嵌套元素
盒模型控制
- 宽度/边距：
width: 80%; margin: 0 auto;实现居中布局 - 边框样式：
border: 1px solid #ddd; border-radius: 5px; - 内边距：
padding: 15px;控制内容与边框间距 - 盒模型切换：
box-sizing: border-box;包含padding/border的计算
Flexbox布局
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1; /* 等分空间 */
}响应式设计
- 媒体查询：
@media (max-width: 768px) { .sidebar { display: none; } } - 相对单位：
width: 90vw; font-size: calc(1rem + 0.5vw);
动画与过渡
- 悬停效果：
button:hover { transform: scale(1.05); } - 关键帧动画：
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .element { animation: fadeIn 1s; }
实用技巧
- 变量定义：
:root { --main-color: #06c; }调用时使用color: var(--main-color); - 字体优化：
font-family: 'Segoe UI', system-ui, sans-serif; - 阴影效果：
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
调试与优化
- 浏览器开发者工具检查元素样式
- 使用CSS预处理器（如Sass/Less）编写模块化代码
- 通过Can I Use网站检查属性兼容性
- 性能优化：避免过度嵌套选择器，压缩最终CSS文件
