CSS3学习

Posted on In ,

1. CSS3 基础

CSS3 是 Cascading Style Sheets 的最新版本，允许开发者控制网页的布局和视觉样式。在本节中，我们将深入讨论 CSS 的基本语法、选择器类型、如何引入 CSS，以及具体的代码示例。

1.1 CSS 语法

CSS 的基本语法由选择器、属性和值组成。

基本结构：

1
2
3
selector {
    property: value;
}
  • **选择器 (selector)**：指定要应用样式的 HTML 元素。
  • **属性 (property)**：指定要更改的样式特性，如颜色、字体、边距等。
  • **值 (value)**：为属性指定的具体值。

示例：

1
2
3
4
h1 {
    color: blue;  /* 将 h1 元素的文本颜色设置为蓝色 */
    font-size: 24px;  /* 设置字体大小为 24 像素 */
}

选择器的类型：

  1. 元素选择器：

    • 选取特定 HTML 元素。
    • 示例：p { color: red; } 选取所有 <p> 元素。

  2. 类选择器：

    • 以点（.）前缀开头，选取具有特定类的元素。
    • 示例：.highlight { background-color: yellow; } 选取所有带有 highlight 类的元素。

  3. ID 选择器：

    • 以井号（#）前缀开头，选取具有特定 ID 的元素（每个 ID 在页面中应该唯一）。
    • 示例：#header { font-weight: bold; } 选取 ID 为 header 的元素。

  4. 组合选择器：

    • 可以组合多个选择器。
    • 示例：h1, h2 { color: green; } 选取所有 <h1> 和 <h2> 元素。

  5. 后代选择器：

    • 选取某个元素内的后代元素。
    • 示例：div p { color: purple; } 选取所有在 <div> 元素内的 <p> 元素。

  6. 伪类选择器：

    • 选取某种状态的元素，如鼠标悬停状态。
    • 示例：a:hover { text-decoration: underline; } 选取鼠标悬停时的链接。

  7. 伪元素选择器：

    • 选取元素的一部分。
    • 示例：p::first-line { font-weight: bold; } 选取每个段落的第一行。

注释和代码组织：

  • 注释：用 /* ... */ 的方式写注释，有助于代码的可读性。
1
2
3
4
/* 这是一条注释 */
h1 {
    color: blue;  /* 设置 h1 元素的颜色为蓝色 */
}
  • 代码组织：使用合适的缩进和分段，使代码更清晰，便于维护。

1.2 引入 CSS

CSS 可以通过多种方式引入到 HTML 文档中，主要有以下几种：

1.2.1 内联样式：

内联样式直接在 HTML 元素的 style 属性中定义，适用于单个元素。

1
<h1 style="color: blue; font-size: 24px;">Hello, World!</h1>

优点：简单快捷，适合快速原型。

缺点：难以维护，不可重用，可能导致样式混乱。

1.2.2 内部样式表：

内部样式表通过 <style> 标签定义在 HTML 文档的 <head> 部分，适用于整个文档。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: lightgray;
        }
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

优点：样式集中管理，便于维护。

缺点：无法在多个页面间共享，增加了 HTML 文件大小。

1.2.3 外部样式表：

外部样式表是独立的 .css 文件，通过 <link> 标签在 HTML 文档中引入，适用于多个文档。

创建 styles.css 文件：

1
2
3
4
5
6
7
body {
    background-color: lightgray;
}

h1 {
    color: blue;
}

在 HTML 中引入：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">  <!-- 引入外部 CSS 文件 -->
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

优点：样式可以在多个页面间共享，易于维护和管理。

缺点：需要额外的 HTTP 请求加载 CSS 文件。

1.2.4 使用 <link> 标签和 <style> 标签：

  • <link> 标签：用于引入外部 CSS 文件，放在 <head> 部分。
1
<link rel="stylesheet" href="styles.css">
  • <style> 标签：用于内部样式，直接在 <head> 中添加 CSS 规则。
1
2
3
4
5
<style>
    body {
        background-color: lightgray;
    }
</style>

2. 选择器与优先级

CSS 选择器用于选择 HTML 元素并应用样式。在这一节中，我们将详细讨论选择器的类型和优先级，确保你能在网页设计中有效地使用它们。

2.1 选择器类型

基本选择器：

  1. 元素选择器：

    • 直接选择特定的 HTML 元素。
    • 例子：
      1
      2
      3
      p {
          color: blue; /* 所有 <p> 元素的文本颜色设置为蓝色 */
      }

  2. 类选择器：

    • 以点（.）前缀开头，选择具有特定类的元素。
    • 例子：
      1
      2
      3
      .highlight {
          background-color: yellow; /* 所有带有 class="highlight" 的元素背景设置为黄色 */
      }

  3. ID 选择器：

    • 以井号（#）前缀开头，选择具有特定 ID 的元素（每个 ID 应该唯一）。
    • 例子：
      1
      2
      3
      #header {
          font-weight: bold; /* ID 为 header 的元素字体加粗 */
      }

组合选择器：

  1. 子选择器（>）：

    • 选择某个元素的直接子元素。
    • 例子：
      1
      2
      3
      ul > li {
          list-style-type: square; /* 只选择 <ul> 的直接 <li> 子元素 */
      }

  2. 后代选择器（空格）：

    • 选择某个元素内的所有后代元素。
    • 例子：
      1
      2
      3
      div p {
          color: red; /* 选择所有在 <div> 内的 <p> 元素 */
      }

  3. 相邻兄弟选择器（+）：

    • 选择紧接在特定元素后面的兄弟元素。
    • 例子：
      1
      2
      3
      h2 + p {
          margin-top: 0; /* <h2> 后紧接的 <p> 元素的上边距为 0 */
      }

  4. 通配符选择器（*）：

    • 选择所有元素。
    • 例子：
      1
      2
      3
      * {
          box-sizing: border-box; /* 设置所有元素的盒模型为 border-box */
      }

伪类选择器：

  • 伪类选择器用于选取处于特定状态的元素。

  1. :hover：

    • 选择鼠标悬停时的元素。
    • 例子：
      1
      2
      3
      a:hover {
          text-decoration: underline; /* 鼠标悬停时链接下划线 */
      }

  2. :focus：

    • 选择获得焦点的元素。
    • 例子：
      1
      2
      3
      input:focus {
          border: 2px solid blue; /* 输入框获得焦点时边框变为蓝色 */
      }

  3. **:nth-child(n)**：

    • 选择特定的子元素。
    • 例子：
      1
      2
      3
      li:nth-child(2) {
          color: green; /* 选择每个 <ul> 中的第二个 <li> 元素 */
      }

伪元素选择器：

  • 伪元素用于选取元素的一部分。

  1. ::before：

    • 在元素内容前插入内容。
    • 例子：
      1
      2
      3
      h1::before {
          content: "★ "; /* 在每个 <h1> 前添加星号 */
      }

  2. ::after：

    • 在元素内容后插入内容。
    • 例子：
      1
      2
      3
      p::after {
          content: " ... "; /* 在每个段落后添加省略号 */
      }

  3. ::first-line：

    • 选择元素的第一行。
    • 例子：
      1
      2
      3
      p::first-line {
          font-weight: bold; /* 段落的第一行加粗 */
      }

2.2 优先级与继承

优先级计算规则：

CSS 在处理样式时会根据选择器的优先级来决定使用哪个样式。优先级从高到低的顺序为：

  1. 内联样式：直接在元素的 style 属性中定义的样式，优先级最高。

    1
    <h1 style="color: red;">Hello</h1> <!-- 这个样式优先级最高 -->

  2. ID 选择器：以 # 开头的选择器。

    1
    2
    3
    #header {
        color: blue; /* 优先级高于类选择器和元素选择器 */
    }

  3. 类选择器、伪类选择器：以 . 开头的选择器。

    1
    2
    3
    .highlight {
        color: green; /* 优先级低于 ID 选择器 */
    }

  4. 元素选择器、伪元素选择器：直接选择元素的选择器，优先级最低。

    1
    2
    3
    p {
        color: orange; /* 优先级最低 */
    }

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级示例</title>
    <style>
        /* 元素选择器 */
        h1 {
            color: orange; /* 颜色为橙色 */
        }

        /* 类选择器 */
        .highlight {
            color: green; /* 颜色为绿色 */
        }

        /* ID 选择器 */
        #header {
            color: blue; /* 颜色为蓝色 */
        }
    </style>
</head>
<body>
    <h1 id="header" class="highlight">Hello, World!</h1>
</body>
</html>

在这个例子中，虽然 h1 元素的颜色定义为橙色，但由于 ID 选择器的优先级高于元素选择器，因此实际颜色为蓝色。

重要性（!important）的使用：

  • 使用 !important 可以提高特定样式的优先级，覆写其他样式。
  • 例子：
    1
    2
    3
    h1 {
        color: red !important; /* 无论其他选择器的优先级，h1 的颜色都会是红色 */
    }

注意：过度使用 !important 会使 CSS 变得难以维护，因此应谨慎使用。

属性继承的理解：

  • CSS 属性可以通过继承从父元素传递到子元素。
  • 一些属性（如 color、font-family）是可继承的，而其他属性（如 margin、padding）则不是。

例子：

1
2
3
4
5
6
7
8
9
10
11
12
<style>
    .parent {
        color: blue; /* 父元素的文本颜色 */
    }
    .child {
        /* 默认继承父元素的色彩 */
    }
</style>

<div class="parent">
    <p class="child">这个文本将是蓝色的。</p>
</div>

在这个例子中，子元素 (.child) 将继承父元素 (.parent) 的文本颜色，即使没有直接指定它的颜色。

3. CSS3 盒模型

CSS 盒模型是网页布局与元素间距的基础概念。理解盒模型对于设计和布局网页至关重要。本节将详细介绍盒模型的组成部分、宽度和高度的计算方式，以及相关的属性。

3.1 盒模型概述

盒模型由四个部分组成：

  1. **内容区域 (Content)**：

    • 这是元素的实际内容区域，包含文本、图像等。
    • 宽度和高度由 width 和 height 属性控制。

  2. **内边距 (Padding)**：

    • 内边距是内容区域与边框之间的空间。它向内扩展，增加内容与边框之间的距离。
    • 通过 padding 属性设置。可以分别设置四个方向的内边距（padding-top、padding-right、padding-bottom、padding-left）。

  3. **边框 (Border)**：

    • 边框围绕在内边距外面，包围内容区域和内边距。
    • 通过 border 属性设置。可以分别设置四个方向的边框（border-top、border-right、border-bottom、border-left）。

  4. **外边距 (Margin)**：

    • 外边距是元素边框与其他元素之间的空间。它向外扩展。
    • 通过 margin 属性设置。可以分别设置四个方向的外边距（margin-top、margin-right、margin-bottom、margin-left）。

盒模型示意图：

1
2
3
4
5
6
7
8
9
10
11
12
+-------------------+       (外边距)
|   Margin          | 
| +---------------+ |       (边框)
| |   Border      | |
| | +-----------+ | |
| | |  Padding  | | |
| | | +-------+ | | |
| | | |Content| | | |       (内容)
| | | +-------+ | | |
| | +-----------+ | |
| +---------------+ | 
+-------------------+

盒模型的宽度和高度计算：

在标准的盒模型中，元素的总宽度和总高度计算方式如下：

  • 总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
  • 总高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型示例</title>
    <style>
        .box {
            width: 200px; /* 内容宽度 */
            height: 100px; /* 内容高度 */
            padding: 20px; /* 内边距 */
            border: 5px solid black; /* 边框 */
            margin: 10px; /* 外边距 */
            background-color: lightblue; /* 背景颜色 */
        }
    </style>
</head>
<body>
    <div class="box">这是一个盒模型示例</div>
</body>
</html>

在这个例子中：

  • 内容区域：宽 200px，高 100px。
  • 内边距：上下各 20px，左右各 20px。
  • 边框：5px。
  • 外边距：10px。

因此，总宽度 = 200 + 20 + 20 + 5 + 5 + 10 + 10 = 270px
总高度 = 100 + 20 + 20 + 5 + 5 + 10 + 10 = 170px

3.2 盒模型属性

box-sizing 属性：

box-sizing 属性用于控制盒模型的计算方式。

  • content-box（默认值）：

    • 盒模型的宽度和高度只包括内容区域，不包括内边距和边框。
    • 总宽度和高度的计算方式如上所述。

  • border-box：

    • 盒模型的宽度和高度包括内容、不包括内边距和边框。
    • 这意味着你设置的 width 和 height 将包括内容、内边距和边框的总和。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box-sizing 示例</title>
    <style>
        .box-content {
            box-sizing: content-box; /* 默认值 */
            width: 200px;
            padding: 20px;
            border: 5px solid black;
            margin: 10px;
            background-color: lightgreen;
        }

        .box-border {
            box-sizing: border-box; /* 包括内边距和边框 */
            width: 200px;
            padding: 20px;
            border: 5px solid black;
            margin: 10px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="box-content">Content Box</div>
    <div class="box-border">Border Box</div>
</body>
</html>

在这个例子中：

  • .box-content 使用 content-box，其总宽度为 200 + 20 + 20 + 5 + 5 + 10 + 10 = 270px。

  • .box-border 使用 border-box，其总宽度保持为 200px，内容区域宽度为 200 - 20（内边距） - 5（边框） - 5（边框）= 170px。

使用 margin、padding 和 border 控制布局：

  • **margin**：用于设置外边距，控制元素与其他元素之间的空间。
1
2
3
.element {
    margin: 20px; /* 所有方向外边距为 20px */
}
  • **padding**：用于设置内边距，控制元素内容与边框之间的空间。
1
2
3
.element {
    padding: 15px; /* 所有方向内边距为 15px */
}
  • **border**：设置元素的边框。
1
2
3
.element {
    border: 2px solid black; /* 2px 黑色实线边框 */
}

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Margin, Padding, Border 示例</title>
    <style>
        .outer {
            margin: 20px; /* 外边距 */
            padding: 20px; /* 内边距 */
            border: 5px solid black; /* 边框 */
            background-color: lightblue;
        }

        .inner {
            margin: 10px; /* 内部元素的外边距 */
            padding: 15px; /* 内部元素的内边距 */
            border: 2px dashed red; /* 内部元素的边框 */
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="outer">
        外部盒子
        <div class="inner">内部盒子</div>
    </div>
</body>
</html>

在这个示例中，外部盒子（.outer）有 20px 的外边距和内边距，5px 的边框。而内部盒子（.inner）有 10px 的外边距、15px 的内边距和 2px 的红色虚线边框。

4. 布局模型

网页的布局模型是控制网页元素排列和显示的关键。CSS 提供了多种布局方法，包括流布局、定位、Flexbox 和 Grid 布局。接下来，我们将逐一讨论这些布局模型。

4.1 流布局

文档流概念：

文档流是指网页中元素的默认排列方式。元素在页面中根据其类型（块级元素或行内元素）自动排列。

块级元素和行内元素的区别：

  1. 块级元素：

    • 占用整行，默认情况下从新的一行开始。
    • 具有宽度（默认为 100%）和高度属性，可以设置边距和填充。
    • 例子：<div>, <h1>, <p>, <ul>, <li>。

    示例：

    1
    2
    <div style="background-color: lightblue;">这是一个块级元素</div>
    <div style="background-color: lightgreen;">这是另一个块级元素</div>

  2. 行内元素：

    • 仅占据其内容的宽度，不会从新的一行开始。
    • 不能设置宽度和高度，只能设置左右外边距（margin-left、margin-right）。
    • 例子：<span>, <a>, <img>。

    示例：

    1
    2
    <span style="background-color: lightcoral;">这是一个行内元素</span>
    <span style="background-color: lightyellow;">这是另一个行内元素</span>

4.2 定位

CSS 提供了多种定位方式，可以精确控制元素在页面中的位置。

  1. **相对定位 (position: relative)**：

    • 元素相对于其正常位置进行定位，可以使用 top、right、bottom 和 left 属性进行偏移。
    • 仍然保留在文档流中。

    示例：

    1
    2
    3
    <div style="position: relative; top: 20px; left: 20px; background-color: lightblue;">
        相对定位的元素
    </div>

  2. **绝对定位 (position: absolute)**：

    • 元素相对于最近的已定位祖先元素（position 不为 static 的元素）进行定位，若没有则相对于文档 body。
    • 不占据空间，脱离文档流。

    示例：

    1
    2
    3
    4
    5
    6
    <div style="position: relative; height: 200px; background-color: lightgray;">
        父元素
        <div style="position: absolute; top: 10px; left: 10px; background-color: lightcoral;">
            绝对定位的元素
        </div>
    </div>

  3. **固定定位 (position: fixed)**：

    • 元素相对于视口（浏览器窗口）进行定位，即使滚动页面也不会移动。
    • 脱离文档流。

    示例：

    1
    2
    3
    <div style="position: fixed; top: 10px; right: 10px; background-color: lightblue;">
        固定定位的元素
    </div>

  4. **粘性定位 (position: sticky)**：

    • 在特定的滚动位置下，元素表现为相对定位；当滚动超过特定阈值时，变为固定定位。
    • 适用于导航条等场景。

    示例：

    1
    2
    3
    4
    5
    6
    <div style="height: 1000px; background-color: lightgray;">
        <div style="position: sticky; top: 0; background-color: lightblue;">
            粘性定位的元素
        </div>
        <p>滚动查看效果...</p>
    </div>

4.3 Flexbox 布局

Flexbox 概念：

Flexbox（弹性盒布局）是一种一维布局模型，能够在容器内灵活地排列元素。它适用于需要在一条轴线（行或列）上对齐和分配空间的场景。

主要属性：

  1. **display: flex**：

    • 将容器设为 Flexbox 容器，子元素会变为 Flex 项。

  2. **flex-direction**：

    • 确定主轴方向，决定子元素的排列方向。
    • 可能的值：row（默认）、row-reverse、column、column-reverse。

    示例：

    1
    2
    3
    4
    5
    <div style="display: flex; flex-direction: row;">
        <div style="background-color: lightblue; padding: 10px;">项 1</div>
        <div style="background-color: lightcoral; padding: 10px;">项 2</div>
        <div style="background-color: lightgreen; padding: 10px;">项 3</div>
    </div>

  3. **justify-content**：

    • 定义主轴上子元素的对齐方式。
    • 可能的值：flex-start、flex-end、center、space-between、space-around。

    示例：

    1
    2
    3
    4
    <div style="display: flex; justify-content: center;">
        <div style="background-color: lightblue; padding: 10px;">项 1</div>
        <div style="background-color: lightcoral; padding: 10px;">项 2</div>
    </div>

  4. **align-items**：

    • 定义交叉轴上子元素的对齐方式。
    • 可能的值：flex-start、flex-end、center、baseline、stretch。

    示例：

    1
    2
    3
    4
    <div style="display: flex; align-items: center; height: 100px;">
        <div style="background-color: lightblue; padding: 10px;">项 1</div>
        <div style="background-color: lightcoral; padding: 20px;">项 2</div>
    </div>

Flexbox 的响应式设计：

Flexbox 可以轻松实现响应式布局。例如，可以在特定的屏幕宽度下改变方向或对齐方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    .container {
        display: flex;
        flex-wrap: wrap; /* 允许换行 */
    }
    .item {
        flex: 1 1 200px; /* 设置弹性增长和缩小，基础宽度 200px */
        margin: 10px;
        background-color: lightblue;
        padding: 20px;
    }
</style>
<div class="container">
    <div class="item">项 1</div>
    <div class="item">项 2</div>
    <div class="item">项 3</div>
</div>

在这个例子中，.item 元素会在父容器的宽度范围内自动调整大小和换行。

4.4 Grid 布局

Grid 概念：

Grid 布局是一种二维布局模型，允许在行和列中同时布局元素。它非常适用于复杂的网页布局设计。

主要属性：

  1. **display: grid**：

    • 将容器设置为 Grid 容器。

  2. **grid-template-columns**：

    • 设置列的结构和数量。
    • 例子：grid-template-columns: 100px 200px; 表示第一列 100px，第二列 200px。

    示例：

    1
    2
    3
    4
    <div style="display: grid; grid-template-columns: 1fr 2fr;">
        <div style="background-color: lightblue;">列 1</div>
        <div style="background-color: lightcoral;">列 2</div>
    </div>

  3. **grid-template-rows**：

    • 设置行的结构和数量。

    示例：

    1
    2
    3
    4
    <div style="display: grid; grid-template-rows: auto 100px;">
        <div style="background-color: lightgreen;">行 1</div>
        <div style="background-color: lightblue;">行 2</div>
    </div>

  4. **grid-area**：

    • 用于定义元素在 Grid 中所占的区域。

    示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 100px);
        }
        .item1 { grid-area: 1 / 1 / 2 / 3; }
        .item2 { grid-area: 2 / 1 / 3 / 2; }
        .item3 { grid-area: 2 / 2 / 3 / 4; }
    </style>
    <div class="grid-container">
        <div class="item1" style="background-color: lightblue;">项 1</div>
        <div class="item2" style="background-color: lightcoral;">项 2</div>
        <div class="item3" style="background-color: lightgreen;">项 3</div>
    </div>

在这个例子中，item1 占据了第一行的前两列，item2 占据了第二行的第一列，item3 占据了第二行的最后两列。

5. CSS3 样式属性

CSS3 提供了丰富的样式属性来控制网页的外观和表现。在本节中，我们将详细探讨字体与文本、背景与边框，以及色彩与渐变的相关属性，并结合具体代码示例进行说明。

5.1 字体与文本

字体属性：

  1. **font-family**：

    • 指定文本使用的字体系列。可以使用系统字体、网络字体或自定义字体。
    • 例子：
      1
      2
      3
      p {
          font-family: 'Arial', sans-serif; /* 使用 Arial 字体，后备字体为无衬线字体 */
      }

  2. **font-size**：

    • 设置文本的大小。可以使用绝对单位（如 px、pt）或相对单位（如 em、rem）。
    • 例子：
      1
      2
      3
      h1 {
          font-size: 24px; /* 设置标题的字体大小为 24 像素 */
      }

  3. **font-weight**：

    • 控制文本的粗细程度。常用值有 normal、bold、bolder、lighter，或数值值（如 400、700）。
    • 例子：
      1
      2
      3
      strong {
          font-weight: bold; /* 设置加粗文本 */
      }

  4. **line-height**：

    • 设置文本行之间的高度，影响文本的可读性。
    • 例子：
      1
      2
      3
      p {
          line-height: 1.5; /* 设置段落行高为 1.5 倍字体大小 */
      }

文本对齐与装饰：

  1. **text-align**：

    • 设置文本的对齐方式，可能的值有 left、right、center、justify。
    • 例子：
      1
      2
      3
      h2 {
          text-align: center; /* 标题居中对齐 */
      }

  2. **text-decoration**：

    • 控制文本的装饰效果，如下划线、删除线。
    • 例子：
      1
      2
      3
      a {
          text-decoration: underline; /* 将链接文本添加下划线 */
      }

  3. **text-transform**：

    • 控制文本的大小写转换，可能的值有 uppercase、lowercase、capitalize。
    • 例子：
      1
      2
      3
      h3 {
          text-transform: uppercase; /* 将文本转换为大写 */
      }

5.2 背景与边框

背景属性：

  1. **background-color**：

    • 设置元素的背景颜色。
    • 例子：
      1
      2
      3
      div {
          background-color: lightblue; /* 设置背景颜色为浅蓝色 */
      }

  2. **background-image**：

    • 设置元素的背景图像。
    • 例子：
      1
      2
      3
      div {
          background-image: url('image.jpg'); /* 设置背景图像 */
      }

  3. **background-size**：

    • 控制背景图像的大小，可能的值有 cover、contain 或具体尺寸。
    • 例子：
      1
      2
      3
      4
      div {
          background-image: url('image.jpg');
          background-size: cover; /* 背景图像覆盖整个元素 */
      }

  4. **background-repeat**：

    • 控制背景图像的重复方式，可能的值有 repeat、no-repeat、repeat-x、repeat-y。
    • 例子：
      1
      2
      3
      4
      div {
          background-image: url('image.jpg');
          background-repeat: no-repeat; /* 不重复背景图像 */
      }

边框属性：

  1. **border-style**：

    • 设置边框的样式，如 none、solid、dashed、dotted。
    • 例子：
      1
      2
      3
      div {
          border-style: solid; /* 设定实线边框 */
      }

  2. **border-color**：

    • 设置边框的颜色。
    • 例子：
      1
      2
      3
      div {
          border-color: red; /* 设置边框颜色为红色 */
      }

  3. **border-width**：

    • 设置边框的宽度，可以使用像素值。
    • 例子：
      1
      2
      3
      div {
          border-width: 2px; /* 设置边框宽度为 2 像素 */
      }

  4. **border-radius**：

    • 设置边框的圆角。
    • 例子：
      1
      2
      3
      div {
          border-radius: 10px; /* 设置边框圆角为 10 像素 */
      }

5.3 色彩与渐变

色彩模式：

  1. RGB：

    • 表示红、绿、蓝三种颜色的组合，范围从 0 到 255。
    • 例子：
      1
      2
      3
      div {
          background-color: rgb(255, 0, 0); /* 红色 */
      }

  2. RGBA：

    • 在 RGB 的基础上增加了 alpha 通道，控制透明度（0 到 1）。
    • 例子：
      1
      2
      3
      div {
          background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
      }

  3. HSL：

    • 表示色相（Hue）、饱和度（Saturation）和亮度（Lightness）。
    • 例子：
      1
      2
      3
      div {
          background-color: hsl(120, 100%, 50%); /* 纯绿色 */
      }

  4. HSLA：

    • 在 HSL 的基础上增加了 alpha 通道。
    • 例子：
      1
      2
      3
      div {
          background-color: hsla(120, 100%, 50%, 0.3); /* 半透明绿色 */
      }

渐变背景：

  1. **线性渐变 (linear-gradient)**：

    • 创建沿线性方向（如上到下、左到右）的渐变效果。
    • 例子：
      1
      2
      3
      div {
          background: linear-gradient(to right, red, blue); /* 从红色到蓝色的渐变 */
      }

  2. **径向渐变 (radial-gradient)**：

    • 创建从中心向外扩展的渐变效果。
    • 例子：
      1
      2
      3
      div {
          background: radial-gradient(circle, yellow, green); /* 从黄色到绿色的圆形渐变 */
      }

示例整合

结合以上属性，我们可以创建一个完整的网页样式示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 样式属性示例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            background-color: #f4f4f4;
            color: #333;
        }
        h1 {
            font-size: 36px;
            font-weight: bold;
            text-align: center;
        }
        p {
            font-size: 18px;
            text-align: justify;
            text-transform: capitalize;
            margin: 20px;
        }
        .box {
            background-color: lightblue;
            border: 2px solid darkblue;
            border-radius: 15px;
            padding: 20px;
            margin: 20px;
            background: linear-gradient(to right, lightblue, white);
        }
    </style>
</head>
<body>
    <h1>CSS3 样式属性示例</h1>
    <div class="box">
        <p>这是一个使用 CSS3 样式属性的示例。我们可以设置字体、背景和边框等属性。</p>
    </div>
</body>
</html>

在这个示例中，我们设置了标题和段落的字体与文本样式，创建了一个带有线性渐变背景的盒子，并为其添加了边框和圆角。

6. CSS3 变换与过渡

CSS3 变换与过渡是用于创建动态效果的重要工具，使网页元素能够在不同状态间平滑地转换。以下是对 CSS3 变换和过渡的详细讲解，结合具体的代码示例。

6.1 变换

变换可以改变元素的形状、大小和位置。CSS 提供了 2D 和 3D 的变换功能。

2D 变换：

  1. **translate**：

    • 用于移动元素的位置。可指定移动的水平和垂直距离。
    • 语法：transform: translate(x, y);
    • 例子：
      1
      2
      3
      .box {
          transform: translate(50px, 100px); /* 向右移动 50px，向下移动 100px */
      }

  2. **rotate**：

    • 用于旋转元素，可以指定旋转的角度。
    • 语法：transform: rotate(angle);
    • 例子：
      1
      2
      3
      .box {
          transform: rotate(45deg); /* 顺时针旋转 45 度 */
      }

  3. **scale**：

    • 用于缩放元素的大小，参数为倍数。
    • 语法：transform: scale(sx, sy);
    • 例子：
      1
      2
      3
      .box {
          transform: scale(1.5, 1.5); /* 横向和纵向都放大 1.5 倍 */
      }

  4. **skew**：

    • 用于倾斜元素，可以指定水平和垂直的倾斜角度。
    • 语法：transform: skew(x-angle, y-angle);
    • 例子：
      1
      2
      3
      .box {
          transform: skew(20deg, 10deg); /* 水平倾斜 20 度，垂直倾斜 10 度 */
      }

3D 变换：

3D 变换允许元素在三维空间中移动、旋转和缩放。

  1. **perspective**：

    • 定义 3D 变换的视角。值越小，透视效果越强。
    • 例子：
      1
      2
      3
      .container {
          perspective: 1000px; /* 设定 3D 视角为 1000px */
      }

  2. **rotateX、rotateY、rotateZ**：

    • 分别沿着 X、Y、Z 轴旋转元素。
    • 例子：
      1
      2
      3
      .box {
          transform: rotateX(30deg); /* 沿 X 轴旋转 30 度 */
      }

示例代码 - 变换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 变换示例</title>
    <style>
        .container {
            perspective: 1000px; /* 添加 3D 透视效果 */
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 50px;
            transition: transform 0.5s; /* 添加过渡效果 */
        }
        .box:hover {
            transform: rotateY(45deg) translate(50px, 50px); /* 鼠标悬停时的变换效果 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

在上面的示例中，.box 元素在鼠标悬停时会旋转 45 度并平移 50 像素，且变换效果伴随平滑的过渡。

6.2 过渡

过渡允许元素在不同状态之间平滑地变化，从而创建视觉效果。

过渡属性：

  1. **transition-property**：

    • 定义要应用过渡效果的属性，例如 transform、background-color 等。

  2. **transition-duration**：

    • 设定过渡效果的持续时间，通常以秒（s）或毫秒（ms）为单位。
    • 例子：
      1
      2
      3
      .box {
          transition-duration: 0.5s; /* 过渡持续时间为 0.5 秒 */
      }

  3. **transition-timing-function**：

    • 定义过渡的加速曲线，可能的值有 ease、linear、ease-in、ease-out、ease-in-out 等。
    • 例子：
      1
      2
      3
      .box {
          transition-timing-function: ease-in; /* 过渡采用加速曲线 */
      }

  4. **transition-delay**：

    • 设置过渡开始前的延迟时间。
    • 例子：
      1
      2
      3
      .box {
          transition-delay: 0.2s; /* 过渡开始前延迟 0.2 秒 */
      }

创建平滑的状态变化：

通过结合使用这些过渡属性，可以实现丰富的动态效果。

示例代码 - 过渡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 过渡示例</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transition-property: background-color, transform; /* 过渡的属性 */
            transition-duration: 0.5s; /* 过渡持续时间 */
            transition-timing-function: ease; /* 过渡效果的时间函数 */
        }
        .box:hover {
            background-color: lightcoral; /* 鼠标悬停时的背景颜色变化 */
            transform: scale(1.2); /* 鼠标悬停时放大 1.2 倍 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这个示例中，当鼠标悬停在 .box 元素上时，背景颜色会变成浅珊瑚色，并且元素会平滑放大 1.2 倍。

7. 动画

CSS 动画使网页元素能够以动态的方式变化，创造出流畅的视觉效果。通过使用关键帧（@keyframes）定义动画，并将其应用到元素上，可以增强用户体验。下面将详细讲解 CSS 动画的各个方面，并结合具体的代码示例。

7.1 CSS 动画

使用 @keyframes 定义动画：

@keyframes 规则用于创建动画的具体步骤。您可以在关键帧中定义动画的不同状态（如起始状态和结束状态）。

基本语法：

1
2
3
4
@keyframes animation-name {
    from { /* 起始状态 */ }
    to { /* 结束状态 */ }
}

示例：

1
2
3
4
5
6
7
8
9
10
@keyframes slideIn {
    from {
        transform: translateX(-100%); /* 初始位置在左侧 */
        opacity: 0; /* 初始透明度 */
    }
    to {
        transform: translateX(0); /* 结束位置 */
        opacity: 1; /* 最终透明度 */
    }
}

应用动画到元素的方式：

  1. **animation-name**：

    • 指定要使用的动画名称。

  2. **animation-duration**：

    • 定义动画持续的时间。

  3. **animation-timing-function**：

    • 控制动画的速度曲线，如 ease、linear、ease-in、ease-out 等。

完整示例：

1
2
3
4
5
6
7
8
.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    animation-name: slideIn; /* 应用动画 */
    animation-duration: 1s; /* 动画持续时间为 1 秒 */
    animation-timing-function: ease; /* 动画速度曲线 */
}

7.2 动画效果

循环与延迟：

  1. **animation-iteration-count**：

    • 定义动画循环的次数，值为 infinite 会无限循环。

  2. **animation-delay**：

    • 设置动画开始前的延迟时间。

示例：

1
2
3
4
5
6
7
.box {
    animation-name: slideIn; 
    animation-duration: 1s; 
    animation-timing-function: ease; 
    animation-iteration-count: infinite; /* 无限循环 */
    animation-delay: 0.5s; /* 动画开始前延迟 0.5 秒 */
}

完整示例代码 - 动画

以下是一个完整的 HTML 和 CSS 示例，展示了如何使用 CSS 动画使元素动态移动并产生循环效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 动画示例</title>
    <style>
        @keyframes slideIn {
            from {
                transform: translateX(-100%); /* 初始位置 */
                opacity: 0; /* 初始透明度 */
            }
            to {
                transform: translateX(0); /* 结束位置 */
                opacity: 1; /* 最终透明度 */
            }
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1); /* 初始和结束状态的缩放 */
            }
            50% {
                transform: scale(1.1); /* 中间状态放大 */
            }
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* 使容器占满视口高度 */
            background-color: #f4f4f4;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            animation-name: slideIn, pulse; /* 应用多个动画 */
            animation-duration: 1s, 1s; /* 两个动画都持续 1 秒 */
            animation-timing-function: ease, ease-in-out; /* 不同的速度曲线 */
            animation-iteration-count: infinite, infinite; /* 无限循环 */
            animation-delay: 0s, 0s; /* 无延迟 */
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

在此示例中：

  • slideIn 动画使 .box 元素从左侧滑入，初始透明度为 0，最终透明度为 1。
  • pulse 动画使 .box 元素在其位置上进行放大和缩小的效果，营造出跳动的感觉。
  • 两个动画都设置为无限循环，创造出连续的动态效果。

8. 响应式设计

响应式设计是现代网页开发的重要组成部分，旨在使网页在不同设备和屏幕尺寸上均能良好显示。通过使用媒体查询、流式布局和弹性布局，可以实现灵活的网页设计。下面将详细讲解这些概念，并结合具体的代码实例。

8.1 媒体查询

媒体查询（@media）是 CSS 的一项功能，允许根据不同的设备特性（如宽度、高度、分辨率等）来应用不同的样式。

基本语法：

1
2
3
@media media-type and (condition) {
    /* CSS 规则 */
}

示例：

1
2
3
4
5
6
7
8
9
/* 针对屏幕宽度小于 600px 的设备 */
@media screen and (max-width: 600px) {
    body {
        background-color: lightblue; /* 背景颜色变为浅蓝 */
    }
    .container {
        flex-direction: column; /* 改为纵向排列 */
    }
}

在这个示例中，当屏幕宽度小于 600 像素时，页面的背景颜色会变为浅蓝色，并且容器的布局会调整为纵向排列。

8.2 流式布局与弹性布局

流式布局和弹性布局是实现响应式设计的两种重要方法。

流式布局：

  • 流式布局通过使用相对单位（如百分比）来创建可自适应的布局。元素的宽度和高度依据父元素的大小进行调整。

示例：

1
2
3
4
5
6
7
8
9
10
.container {
    width: 80%; /* 容器宽度为视口的 80% */
    margin: auto; /* 居中对齐 */
}

.box {
    width: 50%; /* 每个盒子占容器宽度的 50% */
    padding: 20px;
    box-sizing: border-box; /* 包含内边距和边框 */
}

弹性布局：

  • 弹性布局（Flexbox）提供了一种更为灵活的布局方式，可以在不同屏幕尺寸上轻松排列和对齐元素。

示例：

1
2
3
4
5
6
7
8
9
10
11
.container {
    display: flex; /* 使用弹性布局 */
    flex-wrap: wrap; /* 允许换行 */
}

.box {
    flex: 1 1 300px; /* 弹性盒子，基于 300px 基础宽度，允许缩放 */
    margin: 10px;
    padding: 20px;
    background-color: lightcoral;
}

媒体查询的实际应用案例

以下是一个完整的响应式设计示例，结合媒体查询、流式布局和弹性布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式设计示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex; /* 使用弹性布局 */
            flex-wrap: wrap; /* 换行 */
            justify-content: space-between; /* 均匀分布元素 */
            padding: 20px;
            background-color: #f4f4f4;
        }

        .box {
            flex: 1 1 300px; /* 弹性盒子 */
            margin: 10px;
            padding: 20px;
            background-color: lightcoral;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s; /* 添加过渡效果 */
        }

        .box:hover {
            transform: scale(1.05); /* 鼠标悬停时稍微放大 */
        }

        /* 媒体查询 */
        @media screen and (max-width: 600px) {
            .container {
                flex-direction: column; /* 纵向排列 */
            }
            .box {
                margin: 0; /* 移除外边距 */
                margin-bottom: 10px; /* 添加底部外边距 */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">盒子 1</div>
        <div class="box">盒子 2</div>
        <div class="box">盒子 3</div>
        <div class="box">盒子 4</div>
    </div>
</body>
</html>

在此示例中：

  • 响应式布局：使用弹性布局，.container 中的 .box 元素会根据可用空间自动调整大小。
  • 媒体查询：当屏幕宽度小于 600 像素时，容器的布局会变为纵向排列，并调整盒子之间的外边距，以适应小屏幕设备。

9. 高级 CSS3 特性

CSS3 引入了许多高级特性，使得样式表更加灵活和强大。以下是关于自定义属性（CSS 变量）、选择器与特性、以及 CSS3 函数的详细讲解，并结合具体的代码示例。

9.1 自定义属性（CSS 变量）

自定义属性（也称为 CSS 变量）允许开发者将值存储在变量中，以便在样式表的不同地方重用。

定义和使用自定义属性：

  • 使用 -- 前缀定义变量。
  • 通过 var() 函数使用变量。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
:root {
    --main-color: #3498db; /* 定义全局变量 */
    --font-size: 16px;
}

body {
    font-size: var(--font-size); /* 使用自定义属性 */
    background-color: var(--main-color);
}

.button {
    background-color: var(--main-color);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

变量的作用域与继承：

  • 自定义属性的作用域可以是全局的（在 :root 中定义）或局部的（在特定选择器中定义）。
  • 变量会被其父元素的不同选择器继承。

局部变量示例：

1
2
3
4
5
6
7
8
.container {
    --container-bg: #f8f8f8; /* 局部变量 */
    background-color: var(--container-bg);
}

.box {
    background-color: var(--container-bg); /* 继承父元素的变量 */
}

9.2 选择器与特性

选择器是 CSS 的基本组成部分。通过选择器，可以精确地选择和应用样式到特定的元素。

属性选择器：

  • 属性选择器允许根据元素的属性及其值选择元素。

示例：

1
2
3
4
5
6
7
8
input[type="text"] {
    border: 1px solid #ccc; /* 选择所有类型为文本的输入框 */
    padding: 5px;
}

a[href^="https://"] {
    color: green; /* 选择所有以 https:// 开头的链接 */
}

选择器组合：

  • 可以组合多个选择器以创建更具体的选择条件。

示例：

1
2
3
4
5
6
7
8
9
10
/* 选择所有类名为 highlight 的段落 */
p.highlight {
    background-color: yellow;
}

/* 选择具有特定类和特定属性的元素 */
button[type="submit"].primary {
    background-color: blue;
    color: white;
}

9.3 CSS3 函数

CSS3 提供了一些内置函数，允许进行动态计算和响应式设计。

calc() 函数：

  • 用于动态计算长度、宽度等值。

示例：

1
2
3
4
5
6
7
8
.container {
    width: calc(100% - 20px); /* 使容器宽度为 100% 减去 20px */
    padding: 10px;
}

.box {
    height: calc(50vh - 50px); /* 高度为视口高度的 50% 减去 50px */
}

clamp()、min()、max() 函数：

  • clamp(min, preferred, max)：限制值在一个范围内。
  • min()：返回给定值中的最小值。
  • max()：返回给定值中的最大值。

示例：

1
2
3
4
5
6
7
8
9
10
11
h1 {
    font-size: clamp(1.5rem, 2vw + 1rem, 3rem); /* 字体大小在 1.5rem 和 3rem 之间，基于视口宽度 */
}

.box {
    width: min(100%, 600px); /* 宽度最大为 600px，且不会超过 100% */
}

.container {
    padding: max(10px, 5%); /* 内边距至少为 10px，且不超过 5% */
}

完整示例代码

以下是一个完整的示例，展示了自定义属性、选择器和函数的使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级 CSS3 特性示例</title>
    <style>
        :root {
            --main-color: #3498db;
            --padding: 10px;
            --max-width: 600px;
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: var(--padding);
            background-color: #f4f4f4;
        }

        .container {
            max-width: var(--max-width);
            margin: auto;
            padding: var(--padding);
            background-color: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        h1 {
            font-size: clamp(1.5rem, 2vw + 1rem, 3rem); /* 响应式字体大小 */
            color: var(--main-color);
        }

        input[type="text"] {
            width: calc(100% - 20px);
            padding: var(--padding);
            border: 1px solid #ccc;
            margin-bottom: var(--padding);
        }

        button {
            background-color: var(--main-color);
            color: white;
            padding: var(--padding);
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: darkblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>高级 CSS3 特性</h1>
        <input type="text" placeholder="请输入文本" />
        <button>提交</button>
    </div>
</body>
</html>

10. 实践与项目

本节将涵盖实践项目的构建、代码重构与优化、以及可用的资源与工具。通过这些内容，您将能够构建自己的网页、优化代码，并利用现有的工具和库来加速开发过程。

10.1 实践项目

创建个人网站的样式

一个个人网站通常包括个人介绍、项目展示和联系信息。下面是一个简单的个人网站的样式示例。

HTML 结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人网站</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>欢迎来到我的个人网站</h1>
        <nav>
            <ul>
                <li><a href="#about">关于我</a></li>
                <li><a href="#projects">项目</a></li>
                <li><a href="#contact">联系我</a></li>
            </ul>
        </nav>
    </header>
    <section id="about">
        <h2>关于我</h2>
        <p>这是我的个人介绍。</p>
    </section>
    <section id="projects">
        <h2>项目</h2>
        <div class="project">
            <h3>项目一</h3>
            <p>项目描述...</p>
        </div>
        <div class="project">
            <h3>项目二</h3>
            <p>项目描述...</p>
        </div>
    </section>
    <footer id="contact">
        <h2>联系我</h2>
        <p>电子邮件: example@example.com</p>
    </footer>
</body>
</html>

CSS 样式（styles.css）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

header {
    background: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

section {
    padding: 20px;
}

.project {
    background: #f4f4f4;
    margin: 10px 0;
    padding: 15px;
    border-left: 5px solid #3498db;
}
制作响应式布局的博客页面

为了制作一个响应式的博客页面，可以使用 Flexbox 或 CSS Grid 来布局。下面是一个简单的响应式博客页面的示例。

HTML 结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客</title>
    <link rel="stylesheet" href="blog.css">
</head>
<body>
    <header>
        <h1>我的博客</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </nav>
    </header>
    <main class="container">
        <article>
            <h2>博客文章标题</h2>
            <p>这是博客文章的内容...</p>
        </article>
        <aside>
            <h3>侧边栏</h3>
            <p>一些附加信息...</p>
        </aside>
    </main>
    <footer>
        <p>© 2023 我的博客</p>
    </footer>
</body>
</html>

CSS 样式（blog.css）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

header {
    background: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

.container {
    display: flex;
    flex-direction: row;
    padding: 20px;
}

article {
    flex: 3; /* 主内容占 3 份 */
    margin-right: 20px;
}

aside {
    flex: 1; /* 侧边栏占 1 份 */
    background: #f4f4f4;
    padding: 10px;
}

footer {
    text-align: center;
    padding: 10px;
    background: #3498db;
    color: white;
}

10.2 代码重构与优化

分析和优化 CSS 代码的最佳实践：

  1. 避免重复代码：使用类选择器或合并样式来避免重复的 CSS 规则。
  2. 使用自定义属性：利用 CSS 变量来管理颜色、边距等重复使用的值。
  3. 简化选择器：使用简洁的选择器来提升性能。

CSS 预处理器的使用（如 SASS、LESS）：

  • CSS 预处理器允许使用变量、嵌套规则、混合宏等，使 CSS 更加可维护和灵活。

SASS 示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$main-color: #3498db;

body {
    font-family: Arial, sans-serif;
    
    header {
        background: $main-color;
        color: white;
        
        nav {
            ul {
                list-style: none;
            }
        }
    }
}

10.3 资源与工具

使用在线工具：

  • CSS Grid Generator：帮助可视化创建 CSS Grid 布局。
  • Flexbox Froggy：互动游戏，帮助学习 Flexbox 布局。

常用 CSS3 库：

  • Bootstrap：一个流行的 CSS 框架，提供响应式布局和组件。
  • Tailwind CSS：实用优先的 CSS 框架，允许快速构建现代网站。