HTML 中的 CSS 使用说明

CSS 使用说明

1. CSS 概述

CSS (Cascading Style Sheets) 是一种用于描述 HTML 或 XML（包括如 SVG、MathML 等 XML 方言）文档呈现的样式表语言。CSS 描述了元素应该如何在屏幕、纸张或其他媒体上显示。

2. CSS 的基本语法

CSS 规则由两个主要部分组成：选择器和声明块。

css 复制代码

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

例如：

css 复制代码

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

3. CSS 引入方式

3.1 内联样式（Inline Style）

直接在 HTML 元素的 style 属性中定义 CSS。

html 复制代码

<p style="color: red; font-size: 16px;">这是红色文本</p>

3.2 内部样式表（Internal Style Sheet）

在 HTML 文档的 <head> 部分使用 <style> 标签定义 CSS。

html 复制代码

<head>
  <style>
    p { color: red; font-size: 16px; }
  </style>
</head>

3.3 外部样式表（External Style Sheet）

创建单独的 .css 文件，然后在 HTML 中通过 <link> 标签引入。

html 复制代码

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

4. 选择器

4.1 基本选择器

元素选择器：选择特定类型的元素
css 复制代码
```
p { color: blue; }
```
ID 选择器：选择具有特定 ID 的元素（ID 是唯一的）
css 复制代码
```
#header { background-color: gray; }
```
类选择器：选择具有特定类的元素
css 复制代码
```
.container { width: 100%; }
```
通用选择器：选择所有元素
css 复制代码
```
* { margin: 0; padding: 0; }
```

4.2 组合选择器

后代选择器：选择元素内的所有后代元素
css 复制代码
```
div p { color: green; }
```
子选择器：选择元素的直接子元素
css 复制代码
```
div > p { color: purple; }
```
相邻兄弟选择器：选择紧接在另一个元素后的元素
css 复制代码
```
p + ul { margin-top: 10px; }
```
通用兄弟选择器：选择在另一个元素后的所有兄弟元素
css 复制代码
```
p ~ ul { margin-left: 20px; }
```

4.3 属性选择器

选择具有特定属性或属性值的元素

css 复制代码

[href] { color: blue; }
[href="https://example.com"] { color: green; }
[class^="box-"] { border: 1px solid black; }
[class$="-active"] { background-color: yellow; }

4.4 伪类和伪元素

伪类：选择处于特定状态的元素

css 复制代码

a:hover { color: red; }
p:first-child { font-weight: bold; }
input:focus { border: 2px solid blue; }

伪元素：选择元素的特定部分

css 复制代码

p::first-line { font-size: 120%; }
p::before { content: "• "; }
p::after { content: " ..."; }

5. 常用 CSS 属性

5.1 文本相关

color：设置文本颜色
font-family：设置字体类型
font-size：设置字体大小
font-weight：设置字体粗细
text-align：设置文本对齐方式（left、right、center、justify）
text-decoration：设置文本装饰（none、underline、overline、line-through）
line-height：设置行高

5.2 背景相关

background-color：设置背景颜色
background-image：设置背景图片
background-repeat：设置背景图片是否重复
background-position：设置背景图片位置
background-size：设置背景图片大小

5.3 盒模型相关

width、height：设置元素的宽度和高度
margin：设置元素外部边距
padding：设置元素内部填充
border：设置元素边框
box-sizing：设置盒模型计算方式（content-box、border-box）

5.4 定位相关

position：设置元素定位方式（static、relative、absolute、fixed、sticky）
top、right、bottom、left：设置元素的偏移量
display：设置元素的显示类型（block、inline、inline-block、none 等）
float：设置元素的浮动方式（left、right、none）
clear：清除浮动（left、right、both、none）

5.5 其他常用属性

opacity：设置元素透明度
cursor：设置鼠标指针样式
z-index：设置元素的堆叠顺序
overflow：设置元素溢出内容的处理方式

6. CSS 盒模型

CSS 盒模型是 CSS 布局的基础，它由以下部分组成：

内容区域（content）：显示实际内容的部分
内边距（padding）：内容与边框之间的空白
边框（border）：围绕内边距的边界
外边距（margin）：元素与其他元素之间的空白

css 复制代码

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 15px;
  box-sizing: border-box; /* 设置为 border-box 时，width/height 包含 padding 和 border */
}

7. CSS 布局技术

7.1 Flexbox（弹性盒子）

Flexbox 是一种一维布局模型，用于创建灵活的布局结构。

css 复制代码

.container {
  display: flex;
  flex-direction: row; /* row | row-reverse | column | column-reverse */
  justify-content: space-between; /* flex-start | flex-end | center | space-between | space-around */
  align-items: center; /* stretch | flex-start | flex-end | center | baseline */
  flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
}

7.2 Grid（网格布局）

Grid 是一种二维布局模型，可同时处理行和列。

css 复制代码

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 创建3个等宽列 */
  grid-template-rows: 100px 200px; /* 创建2行，高度分别为100px和200px */
  grid-gap: 10px; /* 网格项之间的间距 */
}

7.3 响应式设计

使用媒体查询（Media Queries）创建适应不同屏幕尺寸的布局。

css 复制代码

/* 当屏幕宽度小于 768px 时应用的样式 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .sidebar {
    display: none;
  }
}

8. CSS 优先级和继承

8.1 优先级

当多个选择器应用于同一个元素时，CSS 会按照以下优先级顺序应用样式：

内联样式（style 属性）
ID 选择器
类选择器、属性选择器、伪类
元素选择器、伪元素
通用选择器

可以使用 !important 覆盖任何样式，但应谨慎使用。

8.2 继承

某些 CSS 属性会从父元素继承到子元素，如 color、font-family 等。

可以使用 inherit、initial 或 unset 控制属性的继承行为。

css 复制代码

div {
  color: red; /* 所有子元素默认会继承这个颜色 */
}

p {
  color: inherit; /* 显式继承父元素的颜色 */
}

span {
  color: initial; /* 使用属性的初始值 */
}

9. CSS 变量（自定义属性）

CSS 变量允许您定义可重用的值，有助于维护和主题化。

css 复制代码

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --spacing-unit: 16px;
}

.header {
  background-color: var(--primary-color);
  padding: var(--spacing-unit);
}

.button {
  background-color: var(--secondary-color);
  margin: calc(var(--spacing-unit) * 2);
}

10. 最佳实践

组织和维护
- 使用有意义的选择器名称
- 按逻辑分组相关样式
- 使用注释解释复杂样式
- 考虑使用 CSS 预处理器（如 Sass、Less）提高代码可维护性
性能优化
- 减少选择器的复杂性
- 避免过度使用 !important
- 合并和压缩 CSS 文件
- 使用 CSS 变量代替重复值
可访问性
- 确保文本与背景的对比度符合 WCAG 标准
- 避免依赖颜色来传达信息
- 确保交互元素有适当的状态指示（hover、focus 等）
响应式设计
- 使用相对单位（如 em、rem、%、vh、vw）
- 采用移动优先的设计方法
- 使用媒体查询适配不同设备
- 测试不同屏幕尺寸下的布局

11. 示例代码

以下是一个综合示例，展示了 CSS 的多种用法：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 示例</title>
  <style>
    /* CSS 变量定义 */
    :root {
      --primary-color: #3498db;
      --text-color: #333;
      --background-color: #f5f5f5;
      --border-radius: 8px;
      --spacing: 20px;
    }

    /* 重置默认样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Arial', sans-serif;
      color: var(--text-color);
      background-color: var(--background-color);
      line-height: 1.6;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: var(--spacing);
    }

    header {
      background-color: var(--primary-color);
      color: white;
      padding: calc(var(--spacing) * 1.5);
      text-align: center;
      border-radius: var(--border-radius) var(--border-radius) 0 0;
    }

    nav {
      background-color: white;
      padding: var(--spacing);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    nav ul {
      display: flex;
      list-style: none;
      gap: var(--spacing);
    }

    nav a {
      text-decoration: none;
      color: var(--text-color);
      padding: 8px 16px;
      border-radius: 4px;
      transition: background-color 0.3s;
    }

    nav a:hover {
      background-color: var(--background-color);
    }

    .main-content {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: var(--spacing);
      margin: var(--spacing) 0;
    }

    article {
      background-color: white;
      padding: var(--spacing);
      border-radius: var(--border-radius);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    aside {
      background-color: white;
      padding: var(--spacing);
      border-radius: var(--border-radius);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    footer {
      background-color: #2c3e50;
      color: white;
      text-align: center;
      padding: var(--spacing);
      border-radius: 0 0 var(--border-radius) var(--border-radius);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .main-content {
        grid-template-columns: 1fr;
      }

      nav ul {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>CSS 示例页面</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
    <div class="main-content">
      <article>
        <h2>主要内容</h2>
        <p>这是一个使用 CSS 布局的示例页面。</p>
      </article>
      <aside>
        <h3>侧边栏</h3>
        <p>这里是侧边栏内容。</p>
      </aside>
    </div>
    <footer>
      <p>&copy; 2023 CSS 示例。保留所有权利。</p>
    </footer>
  </div>
</body>
</html>

HTML 中的 CSS 使用说明

CSS 使用说明

1. CSS 概述

2. CSS 的基本语法

3. CSS 引入方式

3.1 内联样式（Inline Style）

3.2 内部样式表（Internal Style Sheet）

3.3 外部样式表（External Style Sheet）

4. 选择器

4.1 基本选择器

4.2 组合选择器

4.3 属性选择器

4.4 伪类和伪元素

5. 常用 CSS 属性

5.1 文本相关

5.2 背景相关

5.3 盒模型相关

5.4 定位相关

5.5 其他常用属性

6. CSS 盒模型

7. CSS 布局技术

7.1 Flexbox（弹性盒子）

7.2 Grid（网格布局）

7.3 响应式设计

8. CSS 优先级和继承

8.1 优先级

8.2 继承

9. CSS 变量（自定义属性）

10. 最佳实践

11. 示例代码

12. 学习资源