css网页制作

CSS网页制作基础

CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。以下是核心知识点：

选择器与样式规则

/* 标签选择器 */
p {
  color: #333;
  font-size: 16px;
}

/* 类选择器 */
.header {
  background-color: #f8f9fa;
}

/* ID选择器 */
#main-content {
  width: 80%;
  margin: 0 auto;
}

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

• width/height：内容尺寸
• padding：内边距
• border：边框
• margin：外边距

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

布局技术

Flexbox布局 适合一维布局（行或列）：

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

.item {
  flex: 1;
}

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

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

响应式设计

媒体查询 根据屏幕尺寸调整样式：

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

  #main-content {
    width: 95%;
  }
}

视口单位 使用相对单位适应不同设备：

.header {
  height: 10vh; /* 视口高度的10% */
  font-size: clamp(1rem, 2vw, 1.5rem); /* 动态字体大小 */
}

动画与过渡

CSS过渡 平滑状态变化：

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

.button:hover {
  background-color: #0069d9;
}

关键帧动画

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

.element {
  animation: fadeIn 1s forwards;
}

实用技巧

变量管理 使用CSS自定义属性：

:root {
  --primary-color: #4285f4;
  --spacing-unit: 8px;
}

.button {
  background-color: var(--primary-color);
  padding: calc(var(--spacing-unit) * 2);
}

现代CSS特性

• aspect-ratio: 保持元素宽高比
• gap: 替代margin的间距控制
• object-fit: 控制图片填充方式

.card {
  aspect-ratio: 16/9;
  display: grid;
  gap: 1rem;
}

.card img {
  object-fit: cover;
}

性能优化

减少重绘

• 使用transform替代top/left动画
• 避免频繁修改box-shadow等高性能属性

代码组织

• 采用BEM命名规范（如.block__element--modifier）
• 使用CSS预处理器（Sass/Less）管理复杂样式

// Sass示例
.nav {
  &__item {
    padding: 1rem;

    &--active {
      font-weight: bold;
    }
  }
}