网页制作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 选择器类型

1. 元素选择器：p { }
2. 类选择器：.class-name { }
3. ID 选择器：#id-name { }
4. 后代选择器：div p { }
5. 伪类：a:hover { }

示例：

.header {
  background-color: #333;
}
#main-title {
  font-weight: bold;
}
nav a:hover {
  color: red;
}

引入 CSS 的方式

1. 内联样式：直接在 HTML 标签中使用 style 属性。

   <p style="color: red;">文本</p>

2. 内部样式表：在 HTML 的 <style> 标签中编写。

   <style>
     body { font-family: Arial; }
   </style>

3. 外部样式表：通过 <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）。