前端css制作教程

CSS基础语法与结构

CSS（层叠样式表）通过选择器和声明块控制HTML元素的样式。基本语法如下：

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

例如设置段落文字颜色和字体大小：

p {
  color: #333;
  font-size: 16px;
}

常用选择器类型

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

h1 {
  font-weight: bold;
}

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

.highlight {
  background-color: yellow;
}

ID选择器：通过#前缀调用id属性（具有唯一性）

#header {
  height: 80px;
}

盒模型详解

CSS盒模型包含四个核心属性：

• margin：外边距（透明）
• border：边框
• padding：内边距（透明）
• content：实际内容

可视化表示：

+---------------------------+
|          margin           |
|   +-------------------+   |
|   |      border        |   |
|   |   +-----------+   |   |
|   |   |  padding  |   |   |
|   |   |   +---+   |   |   |
|   |   |   |   |   |   |   |
|   |   |   +---+   |   |   |
|   |   +-----------+   |   |
|   +-------------------+   |
+---------------------------+

常用布局技术

Flex布局：通过display: flex创建弹性容器

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

Grid布局：创建网格系统

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

定位方案：

• position: static（默认）
• position: relative（相对定位）
• position: absolute（绝对定位）
• position: fixed（固定定位）
• position: sticky（粘性定位）

响应式设计要点

媒体查询：根据设备特性应用不同样式

@media (max-width: 768px) {
  .menu {
    display: none;
  }
}

视口单位：

• vw：视口宽度的1%
• vh：视口高度的1%
• vmin：视口较小尺寸的1%
• vmax：视口较大尺寸的1%

动画与过渡效果

过渡动画：

.button {
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #f00;
}

关键帧动画：

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

现代CSS特性

CSS变量：定义可复用的值

:root {
  --primary-color: #4285f4;
}
.button {
  background-color: var(--primary-color);
}

伪类与伪元素：

• :hover :focus :active（交互状态）
• ::before ::after（内容生成）

性能优化建议

• 避免过度嵌套选择器（不超过3层）
• 使用will-change属性预判变化
• 优先使用transform和opacity实现动画（不触发重排）
• 压缩CSS文件（工具如cssnano）
• 使用CSS精灵图减少HTTP请求