简单网页制作css

基础CSS结构

CSS（层叠样式表）用于控制网页的样式和布局。一个基本的CSS文件包含选择器和声明块。选择器用于定位HTML元素，声明块包含属性和值。

/* 选择器 */
body {
  /* 声明块 */
  background-color: #f0f0f0; /* 属性: 值 */
  font-family: Arial, sans-serif;
}

常用CSS属性

颜色和背景

• color: 设置文本颜色（如 #333 或 red）。
• background-color: 设置背景颜色。
• background-image: 添加背景图片（如 url("image.jpg")）。

文本样式

• font-family: 设置字体（如 "Helvetica Neue"）。
• font-size: 设置字号（如 16px 或 1.2em）。
• text-align: 控制对齐方式（如 center）。

盒模型

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

布局技术

Flexbox Flexbox适合一维布局（如导航栏或卡片排列）：

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

Grid Grid适合二维布局（如整体页面结构）：

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

响应式设计

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

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

实战示例

导航栏样式

.navbar {
  background-color: #333;
  overflow: hidden;
}
.navbar a {
  float: left;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

按钮样式

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
}

注意事项

• 使用外部CSS文件（通过<link>引入）而非内联样式，便于维护。
• 避免过度使用!important，优先通过选择器特异性解决问题。
• 使用变量（CSS自定义属性）管理重复值：

  :root {
    --primary-color: #3498db;
  }
  .header {
    background-color: var(--primary-color);
  }