网页制作CSS样式

CSS样式基础语法

CSS（层叠样式表）用于控制网页的视觉表现。基本语法由选择器和声明块组成：

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

示例：

p {
  color: blue;
  font-size: 16px;
}

常用选择器类型

• 元素选择器：直接匹配HTML标签（如 p、div）。
• 类选择器：以 . 开头（如 .header）。
• ID选择器：以 # 开头（如 #main）。
• 后代选择器：通过空格嵌套（如 div p）。
• 伪类选择器：如 a:hover 控制悬停状态。

盒模型

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

• 内容区（width/height）
• 内边距（padding）
• 边框（border）
• 外边距（margin）
  示例：

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

布局技术

• Flexbox：弹性布局，适合一维排列。

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

• Grid：网格布局，适合二维结构。

  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

响应式设计

通过媒体查询适配不同设备：

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

动画与过渡

• 过渡（transition）：平滑属性变化。

  button {
    transition: background-color 0.5s ease;
  }

• 动画（@keyframes）：定义复杂动画序列。

  @keyframes slide {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
  }

常见样式示例

• 居中元素：

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

• 隐藏元素：

  .hidden {
    display: none; /* 或 visibility: hidden */
  }

通过组合这些技术，可构建复杂且美观的网页界面。