css制作教程

CSS 基础语法

CSS（层叠样式表）通过选择器和声明块定义样式。选择器指定要样式化的HTML元素，声明块包含属性和值，用花括号包裹。

选择器 {
  属性: 值;
  属性: 值;
}

示例：

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

常用选择器类型

• 元素选择器：直接使用HTML标签名（如 p、div）。
• 类选择器：以 . 开头（如 .container）。
• ID选择器：以 # 开头（如 #header）。
• 后代选择器：通过空格分隔层级（如 div p）。

盒模型

CSS盒模型包含内容（content）、内边距（padding）、边框（border）、外边距（margin）。

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

布局技术

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

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

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

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

响应式设计

使用媒体查询适配不同屏幕尺寸：

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

动画效果

通过 @keyframes 和 animation 属性实现：

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

.element {
  animation: slide 2s infinite;
}

资源推荐

• MDN CSS教程：全面覆盖基础到高级概念。
• CSS Tricks：提供实用代码片段和布局示例。
• CodePen：在线编辑和分享CSS项目。

通过实践和参考案例逐步掌握CSS，从简单样式到复杂布局。