网页制作语言css

CSS 基础概念

CSS（Cascading Style Sheets）是一种用于描述网页外观和样式的语言，与HTML结合使用。通过CSS可以控制网页的布局、颜色、字体等视觉表现，实现内容与样式的分离。

CSS 语法结构

CSS规则由选择器和声明块组成。选择器指定要样式化的HTML元素，声明块包含一个或多个属性-值对，用花括号包裹：

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

示例：

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

常用选择器类型

• 元素选择器：通过HTML标签名选择（如 p、div）。
• 类选择器：通过类名选择（如 .className）。
• ID选择器：通过唯一ID选择（如 #idName）。
• 后代选择器：通过嵌套关系选择（如 div p）。
• 伪类选择器：定义元素特殊状态（如 :hover）。

核心样式属性

• 文本样式：color、font-family、text-align。
• 盒模型：width、height、padding、margin、border。
• 布局控制：display（如 flex、grid）、position（如 relative、absolute）。

CSS 引入方式

• 内联样式：直接在HTML标签中使用 style 属性。

  <p style="color: red;">文本</p>

• 内部样式表：在HTML的 <style> 标签中定义。

  <style>
    p { color: red; }
  </style>

• 外部样式表：通过 <link> 引入外部 .css 文件（推荐）。

  <link rel="stylesheet" href="styles.css">

响应式设计

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

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

现代CSS特性

• Flexbox：弹性布局模型，简化复杂布局的实现。

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

• CSS Grid：二维网格布局系统，适合多列设计。

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

• CSS变量：定义可复用的值。

  :root {
    --main-color: #0066ff;
  }
  body {
    color: var(--main-color);
  }

调试与优化

• 浏览器开发者工具（如Chrome DevTools）可实时修改和调试CSS。
• 使用压缩工具（如CSSNano）减少文件大小。
• 遵循BEM（Block-Element-Modifier）等命名规范提高可维护性。

通过系统学习以上内容，可逐步掌握CSS的核心功能并实现专业的网页设计。