网页制作css教程
CSS 基础概念
CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。通过选择器（Selector）和声明块（{}）定义样式规则。
示例代码：
/* 选择器（如元素、类、ID） */
p {
color: blue; /* 属性: 值; */
font-size: 16px;
}常用 CSS 属性
- 文本样式：
color、font-family、font-size、text-align - 盒模型：
width、height、padding、margin、border - 布局：
display（block/inline/flex）、position、float
示例：
.box {
width: 200px;
padding: 10px;
margin: 20px auto;
border: 1px solid #ddd;
}CSS 选择器类型
- 元素选择器：
p { } - 类选择器：
.class-name { } - ID 选择器：
#id-name { } - 后代选择器：
div p { } - 伪类：
a:hover { }
示例：
.header {
background-color: #333;
}
#main-title {
font-weight: bold;
}
nav a:hover {
color: red;
}引入 CSS 的方式
- 内联样式：直接在 HTML 标签中使用
style属性。<p style="color: red;">文本</p> - 内部样式表：在 HTML 的
<style>标签中编写。<style> body { font-family: Arial; } </style> - 外部样式表：通过
<link>引入独立.css文件（推荐）。<link rel="stylesheet" href="styles.css">
布局技术：Flexbox
Flexbox 用于创建灵活的响应式布局，通过容器（display: flex）和子项属性控制排列。
示例代码：
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
margin: 5px;
}响应式设计
使用媒体查询（@media）适配不同屏幕尺寸。
示例：
@media (max-width: 768px) {
.menu {
display: none;
}
}调试与工具
- 浏览器开发者工具（F12）：检查元素、修改样式实时预览。
- 验证工具：如 W3C CSS Validator 检查语法错误。
学习资源推荐
- MDN CSS 教程：MDN Web Docs
- 免费课程：Codecademy、freeCodeCamp 的 CSS 模块
- 书籍：《CSS 权威指南》
通过实践项目（如个人主页、登录页面）巩固知识，逐步掌握高级特性如动画（@keyframes）和网格布局（Grid）。
