网页制作css语言

CSS 基础概念

CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。通过将样式与HTML结构分离，提升代码可维护性。

CSS 语法结构

CSS 规则由选择器和声明块组成：

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

示例：

h1 {
  color: blue;
  font-size: 24px;
}

常用选择器类型

• 元素选择器：直接匹配HTML标签（如 p、div）。
• 类选择器：以 . 开头（如 .header），通过HTML的 class 属性调用。
• ID选择器：以 # 开头（如 #main），通过 id 属性调用，具有唯一性。
• 伪类选择器：如 a:hover 定义鼠标悬停样式。

盒模型

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

• 内容区（content）
• 内边距（padding）
• 边框（border）
• 外边距（margin）
  通过 box-sizing 属性可控制计算方式（默认 content-box，border-box 包含边框和内边距）。

布局方式

• Flexbox：弹性布局，通过 display: flex 启用，适合一维排列。

  .container {
    display: flex;
    justify-content: center; /* 水平对齐 */
    align-items: center;     /* 垂直对齐 */
  }

• Grid：网格布局，通过 display: grid 启用，适合复杂二维布局。

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列等宽 */
  }

响应式设计

使用媒体查询（@media）适配不同设备屏幕：

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

动画与过渡

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

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

• 动画（animation）：通过关键帧定义复杂动画。

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .element {
    animation: fadeIn 2s;
  }

常见单位

• 绝对单位：px（像素）、pt（点）。
• 相对单位：em（基于父元素字体大小）、rem（基于根元素字体大小）、vw/vh（视窗宽度/高度的百分比）。

预处理器（如Sass）

扩展CSS功能，支持变量、嵌套、混合等：

$primary-color: #3498db;
.button {
  background: $primary-color;
  &:hover { background: darken($primary-color, 10%); }
}

最佳实践

• 使用外部样式表（.css 文件）而非内联样式。
• 遵循BEM（块、元素、修饰符）命名规范，如 .header__button--active。
• 利用CSS变量（--var-name）提高可维护性。

通过系统学习以上内容，可快速掌握CSS的核心功能并实现现代化网页设计。