网页制作css功能

CSS 基础功能

CSS（层叠样式表）用于控制网页的样式和布局，以下是核心功能分类：

选择器与样式规则

• 通过选择器（如标签名、类、ID）匹配HTML元素。
• 声明样式属性（如 color: red;）和值。

盒模型

• 控制元素尺寸、边距（margin）、内边距（padding）、边框（border）。
• 示例代码：

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

布局与定位

Flexbox 布局

• 弹性布局模型，适合一维排列。
• 关键属性：

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

Grid 布局

• 二维网格系统，适合复杂布局。
• 示例：

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

定位方式

• position: static|relative|absolute|fixed|sticky 控制元素定位上下文。

视觉效果

颜色与背景

• 设置颜色（color）、背景色（background-color）、背景图（background-image）。
• 渐变示例：

  .gradient {
    background: linear-gradient(90deg, #ff0000, #0000ff);
  }

过渡与动画

• 平滑状态变化：

  .transition {
    transition: all 0.3s ease;
  }

• 关键帧动画：

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

响应式设计

媒体查询

• 根据设备特性适配样式：

  @media (max-width: 768px) {
    body { font-size: 14px; }
  }

视口单位

• 使用 vw、vh 实现动态尺寸：

  .responsive {
    width: 50vw;
    height: 20vh;
  }

字体与排版

自定义字体

• 通过 @font-face 引入：

  @font-face {
    font-family: 'CustomFont';
    src: url('font.woff2') format('woff2');
  }

文本样式

• 控制字体大小（font-size）、行高（line-height）、对齐（text-align）。

高级特性

CSS 变量

• 定义可复用值：

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

伪类与伪元素

• 状态选择（:hover）和虚拟元素（::before）：

  a:hover { color: red; }
  .tooltip::before { content: "提示"; }

以上功能可通过组合使用实现复杂的网页设计需求。