网页制作css教程

CSS基础概念

CSS（层叠样式表）用于控制网页的视觉呈现。通过选择器和属性声明，可以定义HTML元素的样式。基本语法结构如下：

选择器 {
  属性: 值;
}

选择器类型

元素选择器：直接使用HTML标签名

p {
  color: blue;
}

类选择器：通过class属性调用

.highlight {
  background-color: yellow;
}

ID选择器：针对唯一元素

#header {
  font-size: 24px;
}

盒模型

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

• margin：外边距
• border：边框
• padding：内边距
• content：内容区域

示例代码：

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

布局技术

Flexbox：一维布局方案

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

Grid：二维布局系统

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

响应式设计

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

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

动画效果

通过@keyframes创建动画：

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
.element {
  animation: slide 2s infinite;
}

常用属性备忘

• 文本样式：font-family, line-height, text-align
• 颜色设置：color, background-color, rgba()
• 定位方式：position, top, z-index
• 过渡效果：transition, transform

建议通过实际项目练习，例如创建导航栏、卡片组件或完整页面布局来巩固这些概念。现代CSS还支持变量（--var-name）和计算函数（calc()）等高级特性。