网页制作 css

CSS基础概念

CSS（Cascading Style Sheets）用于控制网页的样式和布局。通过选择器（Selector）和属性（Property）的组合，可以定义HTML元素的显示效果。

常用CSS属性

字体和文本控制：

• font-family: 设置字体类型（如Arial, sans-serif）。
• color: 定义文本颜色（如#FF0000或red）。
• text-align: 控制文本对齐方式（left/center/right）。

盒模型属性：

• width/height: 设置元素宽高。
• margin: 控制外边距（如margin: 10px auto）。
• padding: 设置内边距（如padding: 20px）。
• border: 定义边框（如border: 1px solid black）。

选择器类型

元素选择器：

p {
  line-height: 1.5;
}

类选择器（以.开头）：

.header {
  background-color: #333;
}

ID选择器（以#开头）：

#main-content {
  max-width: 1200px;
}

布局技术

Flexbox布局：

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

Grid布局：

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

响应式设计

媒体查询示例：

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

CSS动画

过渡效果：

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

关键帧动画：

@keyframes slidein {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

最佳实践

• 使用外部样式表（.css文件）而非内联样式
• 合理使用CSS预处理器（如Sass/Less）
• 遵循BEM等命名规范提高可维护性
• 利用CSS变量实现主题切换：

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

调试工具

浏览器开发者工具（F12）可实时编辑和调试CSS，查看盒模型计算值及样式覆盖关系。