网站制作css教程

CSS 基础入门

CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。以下是一个基础教程：

语法结构
CSS 规则由选择器和声明块组成：

选择器 {
  属性: 值;
}

示例：

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

常用选择器类型

元素选择器
通过 HTML 标签名选择元素：

h1 {
  text-align: center;
}

类选择器
通过 class 属性选择，前缀为 .：

.highlight {
  background-color: yellow;
}

ID 选择器
通过 id 属性选择，前缀为 #：

#header {
  padding: 20px;
}

盒模型

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

• margin（外边距）
• border（边框）
• padding（内边距）
• content（内容）

示例调整盒模型：

.box {
  width: 300px;
  padding: 15px;
  border: 2px solid black;
  margin: 10px;
}

布局技术

Flexbox
弹性布局模型，适合一维布局：

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

Grid
网格布局，适合二维布局：

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

响应式设计

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

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

动画效果

通过 @keyframes 创建动画：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 2s;
}

资源推荐

1. MDN CSS 文档：权威的 CSS 参考指南
2. CSS-Tricks：实用技巧和教程
3. CodePen：在线编辑和分享 CSS 代码

通过系统练习这些基础概念，可以逐步掌握 CSS 的核心技能。