网页制作css教程

CSS 基础概念

CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。通过将样式与HTML分离，提升代码可维护性。

选择器与样式规则

CSS 规则由选择器和声明块组成：

h1 {
    color: blue;
    font-size: 24px;
}

• 选择器类型：
  • 元素选择器（如 p）
  • 类选择器（如 .class-name）
  • ID 选择器（如 #id-name）
  • 伪类选择器（如 a:hover）

常用样式属性

• 文本与字体：

  body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      text-align: center;
  }

• 盒模型：

  div {
      width: 300px;
      padding: 20px;
      border: 1px solid #ddd;
      margin: 10px auto;
  }

• 背景与颜色：

  header {
      background-color: #f4f4f4;
      color: #333;
  }

布局技术

• Flexbox：

  .container {
      display: flex;
      justify-content: space-between;
  }

• Grid：

  .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
  }

响应式设计

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

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

动画与过渡

• 过渡效果：

  button {
      transition: background-color 0.3s ease;
  }

• 关键帧动画：

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

资源推荐

• 学习平台：MDN Web Docs、W3Schools
• 工具：Chrome 开发者工具、CodePen
• 框架：Bootstrap、Tailwind CSS

通过实践项目（如个人博客、产品页面）巩固知识，逐步掌握高级特性。