css网页制作教程
CSS 网页制作基础教程
CSS（层叠样式表）用于控制网页的样式和布局。以下是一个基础教程，涵盖关键概念和实用技巧。
基本语法与引入方式
CSS 规则由选择器和声明块组成：
选择器 {
属性: 值;
}引入方式：
- 内联样式：直接在 HTML 标签中使用
style属性<p style="color: red;">文本</p> - 内部样式表：在 HTML 的
<head>中使用<style>标签<style> p { color: blue; } </style> - 外部样式表：通过
<link>引入独立的.css文件<link rel="stylesheet" href="styles.css">
常用选择器类型
- 元素选择器：按标签名选择
p { font-size: 16px; } - 类选择器：通过
.class选择.highlight { background-color: yellow; } - ID 选择器：通过
#id选择#header { height: 80px; } - 组合选择器：
div p { } /* 后代选择器 */ div > p { } /* 子选择器 */ h1 + p { } /* 相邻兄弟选择器 */
盒模型与布局
每个元素都是一个矩形盒子，包含：
content（内容）padding（内边距）border（边框）margin（外边距）
示例代码：
.box {
width: 200px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}常用布局方式
- Flexbox（弹性盒子）：
.container { display: flex; justify-content: center; /* 水平对齐 */ align-items: center; /* 垂直对齐 */ } - Grid（网格布局）：
.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } - 定位：
.absolute-box { position: absolute; top: 50px; left: 100px; }
响应式设计
使用媒体查询适配不同设备：
@media (max-width: 768px) {
.menu { display: none; }
.mobile-menu { display: block; }
}动画与过渡
- 过渡效果：
.button { transition: background-color 0.3s ease; } .button:hover { background-color: #ff0000; } - 关键帧动画：
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(100px); } } .animated { animation: slide 2s infinite; }
实用资源推荐
-
颜色工具：
- Color Hunt（配色方案）
- CSS Gradient（渐变生成器）
-
学习平台：
- MDN Web Docs（权威文档）
- CodePen（在线代码实验）
-
框架推荐：
- Bootstrap（快速原型设计）
- Tailwind CSS（实用优先的原子化 CSS）
通过实践这些基础概念，可以逐步掌握 CSS 的核心技能。建议从简单页面开始，逐步尝试复杂布局和交互效果。
