网页制作css教程

CSS 基础语法

CSS（层叠样式表）用于控制网页的样式和布局。基本语法由选择器和声明块组成：

选择器 {
  属性: 值;
}

示例：

p {
  color: blue;
  font-size: 16px;
}

常用选择器

• 元素选择器：直接匹配 HTML 标签（如 p、div）。
• 类选择器：以 . 开头（如 .header）。
• ID 选择器：以 # 开头（如 #main）。
• 后代选择器：用空格分隔（如 div p）。

盒模型

每个 HTML 元素视为一个盒子，包含：

• content（内容）
• padding（内边距）
• border（边框）
• margin（外边距）
  通过 CSS 调整：

  .box {
  width: 200px;
  padding: 10px;
  border: 1px solid black;
  margin: 20px;
  }

布局技术

• Flexbox：弹性布局，适合一维排列。

  .container {
    display: flex;
    justify-content: center;
  }

• Grid：网格布局，适合二维结构。

  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

响应式设计

使用媒体查询适配不同设备：

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

动画与过渡

• 过渡（Transition）：平滑改变属性值。

  button {
    transition: background-color 0.5s;
  }

• 动画（Animation）：定义关键帧。

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .element {
    animation: fadeIn 2s;
  }

实用资源推荐

• MDN CSS 文档：权威语法参考。
• CodePen：在线实践平台。
• CSS Tricks：常见技巧与案例。

通过以上方法，可以逐步掌握 CSS 的核心功能并实现复杂页面样式。