网页制作 css
CSS基础概念
CSS（层叠样式表）用于控制网页的视觉呈现，包括布局、颜色、字体等。通过分离样式与内容，提升代码可维护性。
引入CSS的方式
内联样式：直接在HTML标签中使用style属性，适用于单个元素。
<p style="color: red;">文本内容</p>内部样式表：在HTML的<head>内通过<style>标签定义，适用于单个页面。
<style>
body { background-color: #f0f0f0; }
</style>外部样式表：通过.css文件引入，适合多页面复用。
<link rel="stylesheet" href="styles.css">常用CSS属性
文本样式color: 文字颜色（如#FF0000或red）font-family: 字体（如Arial, sans-serif）font-size: 字号（如16px或1.2em）text-align: 对齐方式（left/center/right）
盒模型width/height: 元素宽高padding: 内边距margin: 外边距border: 边框（如1px solid black）
布局控制display: 显示类型（block/inline/flex/grid）position: 定位方式（static/relative/absolute/fixed）float: 浮动（left/right/none）
选择器类型
元素选择器：按标签名匹配
p { line-height: 1.5; }类选择器：通过.前缀匹配class属性
.header { background: blue; }ID选择器：通过#前缀匹配唯一id
#main-content { width: 80%; }组合选择器
/* 后代选择器 */
div p { color: green; }
/* 子元素选择器 */
ul > li { list-style: none; }
/* 相邻兄弟选择器 */
h1 + p { font-weight: bold; }响应式设计
媒体查询：根据屏幕尺寸调整样式
@media (max-width: 600px) {
body { font-size: 14px; }
}Flexbox布局：弹性容器模型
.container {
display: flex;
justify-content: space-between;
}CSS Grid：网格布局系统
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}动画与过渡
过渡效果：平滑属性变化
.button {
transition: background-color 0.3s ease;
}
.button:hover { background-color: #ddd; }关键帧动画：自定义动画序列
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element { animation: fadeIn 2s; }性能优化建议
- 避免过度嵌套选择器（如
.nav ul li a） - 使用CSS压缩工具减少文件体积
- 优先使用CSS而非JavaScript实现视觉效果
- 利用浏览器开发者工具调试样式
浏览器兼容性
- 使用前缀处理实验性属性（如
-webkit-、-moz-） - 通过Can I Use网站检查属性支持情况
- 考虑使用Autoprefixer工具自动添加前缀
学习资源推荐
- MDN CSS文档：权威参考指南
- CodePen：在线代码实验平台
- CSS Tricks：实用技巧与教程
- FreeCodeCamp：交互式学习课程
