AI 摘要

文章系统梳理 CSS3 基础与进阶要点：从行内、内部、外部三种引入方式及优先级切入，详解标签、类、ID、层次、结构伪类、属性等选择器；覆盖字体、文本、列表、超链接、背景、渐变等美化技巧，含 font-family、text-shadow、background-size、linear-gradient 等实用属性与示例，帮助读者快速构建现代网页样式。

此摘要根据文章内容自动生成，仅用于文章内容的解释与总结

CSS3 简介

基本结构

CSS 全称层叠样式表或风格样式表，用于美化 HTML 网页。

CSS 的基本用法：

选择器 {
    样式属性: 值;
    样式属性: 值;
    ……
}

在 HTML 中引入 CSS

在 HTML 中引入 CSS，可以使用行内样式，即使用 HTML 标签的 style 属性设置 CSS 样式。

示例：行内样式

入口页面（index.html）：

<h1 style="color: red">这是一个标题</h1>

在 HTML 中引入 CSS，可以使用内部样式表，即使用 style 标签设置 CSS 样式。

示例：内部样式表

入口页面（index.html）：

<head>
    <style>
        h1 {
        color: red;
    }
    </style>
</head>

在 HTML 中引入 CSS，可以使用外部样式表，即 CSS 代码保存在 .css 样式表中，在 HTML 文件中使用 link 标签引入样式表。

示例：外部样式表

入口页面（index.html）：

<head>
    <!--
        rel：指定在页面中使用该样式表，该属性不可省略
        type：指定文件的类型是CSS文件，该属性可省略
        href：CSS文件的路径
    -->
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

样式优先级：就近原则。

  • 越接近标签的样式优先级越高。
  • 行内样式优先级 > 内部样式表优先级 > 外部样式表优先级。

示例：样式优先级

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
<body>
    <h1 style="color: green">这是一个标题</h1>
</body>
</html>

示例效果：

CSS3 基本选择器

标签选择器

一个 HTML 文件由很多标签组成，每种 HTML 标签都可以作为相应的标签选择器的名称。

  • 标签选择器直接应用于 HTML 标签。
  • 网页中相同的 HTML 标签，都会被设置样式。

标签选择器的基本用法：

标签名 {
    样式属性: 值;
    样式属性: 值;
    ……
}

示例：标签选择器

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <h1>这也是一个标题</h1>
    <h2>这是另一个标题</h2>
</body>
</html>

示例效果：

类选择器

在 HTML 标签中，可以设置一个 class 属性，用于引用类样式。

  • 一个 HTML 标签可以引用多个类样式，类样式与类样式直接用空格隔开。
  • 具有相同类名的 HTML 标签都会被设置样式，类选择器可以在页面中多次使用。

类选择器的基本用法：

.类名 {
    样式属性: 值;
    样式属性: 值;
    ……
}

示例：类选择器

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .color {
            color: red;
        }

        .fontSize {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1 class="color">这是一个标题</h1>
    <h1 class="color fontSize">这也是一个标题</h1>
    <h2>这是另一个标题</h2>
</body>
</html>

示例效果：

id 选择器

在 HTML 标签中，可以设置一个 id 属性，用于引用特定的样式声明。

  • id 属性的值在同一个 HTML 文档中必须是唯一的，即唯一标识符。
  • id 选择器在同一个页面中只能使用一次。

id 选择器的基本用法：

#id名称 {
    样式属性: 值;
    样式属性: 值;
    ……
}

--

示例：id 选择器

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1 {
            color: red;
        }

        #title2 {
            color: aqua;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1 id="title1">这是一个标题</h1>
    <h1 id="title2">这也是一个标题</h1>
    <h2>这是另一个标题</h2>
</body>
</html>

示例效果：

基本选择器优先级

CSS3 基本选择器优先级：无论使用什么方式引入 CSS 样式，都遵循 id 选择器 > 类选择器 > 标签选择器。

示例：基本选择器优先级

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1 {
            color: red;
        }

        .title1 {
            color: blue;
        }

        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <h1 id="title1" class="title1">这是一个标题</h1>
</body>
</html>

示例效果：

CSS3 高级选择器

层次选择器

层次选择器在 CSS 中用来根据元素在 HTML 文档树中的层次关系，选择一个元素的特定的子元素或后代元素。

层次选择器的基本用法：

名称描述
E F（后代选择器）匹配 E 元素内的所有后代 F 元素
E>F（子选择器）匹配 E 元素内的所有直接子 F 元素
E+F（相邻兄弟选择器）匹配 E 元素后面同级的、紧邻的兄弟 F 元素
E~F（通用兄弟选择器）匹配 E 元素后面同级的所有兄弟 F 元素

示例：后代选择器

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body p {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li><p>p4</p></li>
        <li><p>p5</p></li>
        <li><p>p6</p></li>
    </ul>
</body>
</html>

页面层级分析：

示例效果：

示例：子选择器

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body>p {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
        <p>p4</p>
    </li>
        <li><p>p5</p></li>
        <li><p>p6</p></li>
    </ul>
</body>
</html>

页面层级分析：

示例效果：

示例：相邻兄弟选择器

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active+p {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p class="active">p2</p>
    <p>p3</p>
    <ul>
        <li><p class="active">p4</p></li>
        <li><p>p5</p></li>
        <li><p>p6</p></li>
    </ul>
    <p class="active">p7</p>
    <a>a1</a>
    <p>p8</p>
</body>
</html>

页面层级分析：

示例效果：

示例：通用兄弟选择器

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active~p {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p class="active">p2</p>
    <p>p3</p>
    <ul>
        <li><p class="active">p4</p></li>
        <li><p>p5</p></li>
        <li><p>p6</p></li>
    </ul>
    <p>p7</p>
    <a>a1</a>
    <p>p8</p>
</body>
</html>

页面层级分析：

示例效果：

结构伪类选择器

结构伪类选择器在 CSS 中用来根据元素在文档结构中的特定位置或状态来选择元素。

结构伪类选择器的基本用法：

名称描述
E F:first-child匹配 E 元素的第一个子元素 F
E F:last-child匹配 E 元素的最后一个子元素 F
E F:nth-child(n)n=数字时，匹配 E 元素的第 n 个子元素 F
n=even 时，匹配 E 元素的偶数位的子元素 F
n=odd 时，匹配 E 元素的奇数位的子元素 F
F 元素必须是 E 元素下的第 n 个子元素
E F:first-of-type匹配 E 元素下类型为 F 的第一个子元素
E F:last-of-type匹配 E 元素下类型为 F 的最后一个子元素
E F:nth-of-type(n)匹配 E 元素下类型为 F 的第 n 个子元素

示例：E F:first-child 选择器

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li:first-child {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li><p>p4</p></li>
        <li><p>p5</p></li>
        <li><p>p6</p></li>
    </ul>
    <p>p7</p>
    <a>a1</a>
    <p>p8</p>
</body>
</html>

页面层级分析：

示例效果：

示例：E F:last-child 选择器

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li:last-child {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li><p>p4</p></li>
        <li><p>p5</p></li>
        <li><p>p6</p></li>
    </ul>
    <p>p7</p>
    <a>a1</a>
    <p>p8</p>
</body>
</html>

页面层级分析：

示例效果：

示例：E F:nth-child(n) 选择器

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body p:nth-child(2) {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li><p>p4</p></li>
        <li><p>p5</p></li>
        <li><p>p6</p></li>
    </ul>
    <p>p7</p>
    <a>a1</a>
    <p>p8</p>
</body>
</html>

页面层级分析：

示例效果：

示例：E F:nth-child(even) 选择器

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body p:nth-child(even) {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li><p>p4</p></li>
        <li><p>p5</p></li>
        <li><p>p6</p></li>
    </ul>
    <p>p7</p>
    <a>a1</a>
    <p>p8</p>
</body>
</html>

页面层级分析：

示例效果：

示例：E F:nth-child(odd) 选择器

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body p:nth-child(odd) {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li><p>p4</p></li>
        <li><p>p5</p></li>
        <li><p>p6</p></li>
    </ul>
    <p>p7</p>
    <a>a1</a>
    <p>p8</p>
</body>
</html>

页面层级分析：

示例效果：

示例：E F:firs-of-type 选择器

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul:first-of-type {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li><p>p4</p></li>
        <li><p>p5</p></li>
        <li><p>p6</p></li>
    </ul>
    <p>p7</p>
    <a>a1</a>
    <p>p8</p>
</body>
</html>

页面层级分析：

示例效果：

示例：E F:last-of-type 选择器

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li:last-of-type {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li><p>p4</p></li>
        <li><p>p5</p></li>
        <li><p>p6</p></li>
    </ul>
    <p>p7</p>
    <a>a1</a>
    <p>p8</p>
</body>
</html>

页面层级分析：

示例效果：

示例：E F:nth-of-type 选择器

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:nth-of-type(4) {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li><p>p4</p></li>
        <li><p>p5</p></li>
        <li><p>p6</p></li>
    </ul>
    <p>p7</p>
    <a>a1</a>
    <p>p8</p>
</body>
</html>

页面层级分析：

示例效果：

属性选择器

属性选择器在 CSS 中用来根据元素的属性及其值来选择这些元素。

属性选择器的基本用法：

名称描述
E[attr]匹配具有 attr 属性的 E 元素
E[attr=val]匹配具有 attr 属性且 attr 属性值为 val（区分大小写）的 E 元素
E[attr^=val]匹配具有 attr 属性且 attr 属性的值以 val 开头的 E 元素
E[attr$=val]匹配具有 attr 属性且 attr 属性的值以 val 结尾的 E 元素
E[attr*=val]匹配具有 attr 属性且 attr 属性的值包含 val 的 E 元素

示例：E[attr] 选择器

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p[id] {
            background-color: red;
        }
    </style>
</head>
<body>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
    <p class="p3">p3</p>
</body>
</html>

示例效果：

示例：E[attr=val] 选择器

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p[id=p1] {
            background-color: red;
        }
    </style>
</head>
<body>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
    <p class="p3">p3</p>
</body>
</html>

示例效果：

CSS3 美化字体

字体类型

font-family 属性用于设置字体类型。

  • 同时设置英文字体和中文字体时，要把英文字体写在中文字体之前。
  • 字体类型可以设置多个，并按顺序匹配字体。
  • 设置字体类型时，需要检查计算机中是否有该字体的存在。

font-family 属性的基本用法：

font-family: 字体名称, 字体名称;

示例：font-family

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            font-family: "Kaiti SC";
        }
    </style>
</head>
<body>
    <h1>这是一段文本</h1>
</body>
</html>

示例效果：

字体大小

font-size 属性用于设置字体大小。

font-size 属性的基本用法：

font-size: 字体大小;

字体大小单位：

名称描述
px指定字体大小为固定的像素值
rem相对于根元素（即 HTML 元素）的字体大小
默认情况下 1rem=16px
em相对于父元素的字体大小

示例：font-size

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html {
            font-size: 128px;
        }

        h1 {
            font-size: 64px;
        }

        p {
            font-size: 1rem;
        }
    </style>
</head>
<body>
    <h1>这是一段文本</h1>
    <p>这是一段文本</p>
</body>
</html>

示例效果：

字体风格

font-style 属性用于设置字体风格。

font-style 属性的基本用法：

font-style: 字体风格;

字体风格：

名称描述
normal（默认值）标准字体样式
italic斜体字体样式（直接设置倾斜字体）
oblique倾斜字体样式（让没有倾斜字体的文本有倾斜效果）

示例：font-style

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            font-size: 64px;
            font-style: italic;
        }
    </style>
</head>
<body>
    <h1>这是一段文本</h1>
</body>
</html>

示例效果：

字体粗细

font-weight 属性用于设置字体风格。

font-weight 属性的基本用法：

font-weight: 字体粗细;

字体粗细：

名称描述
normal（默认值）标准的字体
bold粗体字体
bolder更粗的字体
lighter更细的字体
100～900定义由细到粗的字体
400 等同于 normal，700 等同于 bold

示例：font-weight

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .normal {
            font-weight: normal;
        }
    </style>
</head>
<body>
    <h1>这是一段文本</h1>
    <h1 class="normal">这是一段文本</h1>
</body>
</html>

示例效果：

字体属性

font 属性用于设置字体的所有属性。

font 属性的基本用法：

font: 字体风格 字体粗细 字体大小 字体类型;

示例：font

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            font: italic bold 48px "Kaiti SC","Libian SC";
        }
    </style>
</head>
<body>
    <h1>这是一段文本</h1>
</body>
</html>

示例效果：

CSS3 美化文本排版

文本颜色

color 属性用于设置文本颜色。

color 属性的基本用法：

color: 文本颜色;

颜色值表示法：

名称使用方式描述
单词表示法/如：red 表示红色、green 表示绿色，blue 表示蓝色等
RGB 表示法rgb(r, g, b)RGB 即红绿蓝三原色模式
r、g、b 参数的取值范围为 0～255
十六进制表示法#FAFAFARGB 的十六进制表示方式
可以和 RGB 表示法相互转换
RGBA 表示法rgba(r, g, b, alpha)在 RGB 的基础上增加了 alpha 透明度，取值范围为 0～1，0 为完全透明

示例：color

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p1 {
            color: red;
        }

        .p2 {
            color: rgb(120, 130, 15);
        }

        .p3 {
            color: #765157;
        }

        .p4 {
            color: rgba(0, 0, 255, 0.1);
        }
    </style>
</head>
<body>
    <p class="p1">这是一段文本</p>
    <p class="p2">这是一段文本</p>
    <p class="p3">这是一段文本</p>
    <p class="p4">这是一段文本</p>
</body>
</html>

示例效果：

文本水平对齐方式

text-align 属性用于设置文本水平对齐方式。

text-align 属性的基本用法：

text-align: 文本水平对齐方式;

文本水平对齐方式：

名称描述
left（默认值）左对齐
right右对齐
center居中对齐
justify两端对齐

示例：text-align

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p1 {
            text-align: center;
        }

        .p2 {
            text-align: right;
        }

        .p3 {
            text-align: justify;
        }
    </style>
</head>
<body>
    <p class="p1">这是一段文本</p>
    <p class="p2">这是一段文本</p>
    <div style="width: 90px;">
        <p class="p3">这是一段超长的文本</p>
        <p class="p4">这是一段超长的文本</p>
    </div>
</body>
</html>

示例效果：

文本垂直对齐方式

vertical-align 属性用于设置文本垂直对齐方式，该属性比较不常用。

vertical-align 属性的基本用法：

vertical-align: 文本垂直对齐方式;

文本垂直对齐方式：

名称描述
baseline（默认值）基线对齐
middle垂直居中
top顶部对齐
bottom底部对齐

示例：vertical-align

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img, span {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>
        <img src="demo.png" width="100" />
        <span>这是一行文本</span>
    </div>
</body>
</html>

示例效果：

文本首行缩进

text-indent 属性用于设置文本首行缩进。

text-indent 属性的基本用法：

text-indent: 文本首行缩进大小;

示例：text-indent

入口页面（index.html）

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            width: 200px;
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本。</p>
</body>
</html>

示例效果：

文本行高

line-height 属性用于设置文本行高。

line-height 属性的基本用法：

line-height: 文本行高大小/倍数;

示例：line-height

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            width: 200px;
            line-height: 36px;
        }
    </style>
</head>
<body>
    <p>这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本。</p>
</body>
</html>

示例效果：

文本装饰

text-decoration 属性用于设置文本装饰。

text-decoration 属性的基本用法：

text-decoration: 文本装饰;

文本装饰：

名称描述
none（默认值）标准文本
underline设置文本下划线
overline设置文本上划线
line-through设置文本删除线

示例：text-decoration

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a2 {
            text-decoration: none;
        }

        .p1 {
            text-decoration: underline;
        }

        .p2 {
            text-decoration: overline;
        }

        .p3 {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <p><a class="a1" href="https://www.duozai.cn/">点我跳转</a></p>
    <p><a class="a2" href="https://www.duozai.cn/">点我跳转</a></p>
    <p class="p1">这是一段文本</p>
    <p class="p2">这是一段文本</p>
    <p class="p3">这是一段文本</p>
</body>
</html>

示例效果：

文本阴影

text-shadow 属性用于设置文本阴影。

text-shadow 属性基本用法：

text-shadow: 阴影颜色 x轴位移 y轴位移 模糊半径;

text-shadow 属性的基本配置项：

配置描述
阴影颜色如果不设置，默认使用文本颜色
x 轴位移x>0 时阴影向右偏移
y 轴位移y>0 时阴影向下偏移
模糊半径模糊半径值越大阴影越模糊

示例：text-shadow

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            text-shadow: red 30px 30px 5px;
        }
    </style>
</head>
<body>
    <h1>这是一段文本</h1>
</body>
</html>

示例效果：

CSS3 美化超链接

超链接伪类

超链接标签 a 标签会根据用户单击访问前、鼠标悬浮在超链接上、单击未释放、单击访问后的四个状态显示不同的超链接样式。

通过超链接伪类，可以设置超链接标签的多态样式。

超链接伪类：

名称描述
a:link单击访问前的超链接样式
a:visited单击访问后的超链接样式
a:hover鼠标悬浮在其上的超链接样式
a:active单击未释放的超链接样式

伪类的设置顺序，必须遵循 link、visited、hover、active 的顺序。

示例：超链接伪类

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link {
            color: black;
        }

        a:visited {
            color: red;
        }

        a:hover {
            color: green;
        }

        a:active {
            color: yellow;
        }
    </style>
</head>
<body>
    <a href="https://www.duozai.cn/" target="_blank" style="font-size: 64px">跳转到duozai.cn</a>
</body>
</html>

示例效果：

CSS3 美化列表

列表样式

list-style-type/list-style 属性用于设置列表样式。

list-style-type/list-style 属性的基本用法：

list-style-type: 列表样式;
list-style: 列表样式;

列表样式：

名称描述
none无标记符号
disc实心圆点
circle空心圆点
square实心正方形
decimal数字

示例：list-style

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style: square;
        }
    </style>
</head>
<body>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
</body>
</html>

示例效果：

CSS3 美化背景

背景颜色

background-color 属性用于设置网页元素的背景颜色。

background-color 属性的基本用法：

background-color: 背景颜色;

示例：background-color

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1">
        box1
    </div>
</body>
</html>

示例效果：

背景图片

background-image 属性用于设置网页元素的背景图片。

background-image 属性的基本用法：

background-image: url("背景图片路径");

示例：background-image

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-image: url("demo.png");
        }
    </style>
</head>
<body>
    <div class="box1">
        box1
    </div>
</body>
</html>

示例效果：

背景平铺

background-image 属性设置的背景图片默认情况下会自动向水平方向和垂直方向重复平铺。

background-repeat 属性用于设置网页元素背景图片的平铺方式。

background-repeat 属性的基本用法：

background-repeat: 背景平铺方式;

背景平铺方式：

名称描述
repeat沿水平和垂直两个方向平铺
no-repeat不平铺，背景图片只显示一次
repeat-x只沿水平方向平铺
repeat-y只沿垂直方向平铺

示例：background-repeat

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-image: url("demo.png");
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="box1">
        box1
    </div>
</body>
</html>

示例效果：

背景定位

background-position 属性用于设置网页元素背景图片的定位。

background-position 属性的基本用法：

background-position: 背景定位方式;

背景定位方式：

名称描述
Xpos Ypos使用像素值表示背景图片的位置
Xpos 表示水平偏移，X>0 时背景图片向右偏移
Ypos 表示垂直偏移，Y>0 时背景图片向下偏移
X% Y%使用百分比表示背景图片的位置
方向关键字使用方向关键字自由组合，默认为 center
方向关键词：left、right、center、top、bottom

示例：background-position

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-image: url("demo.png");
            background-repeat: no-repeat;
            background-position: 30px 50px;
        }

        .box2 {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-image: url("demo.png");
            background-repeat: no-repeat;
            background-position: 50% 50%;
        }

        .box3 {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-image: url("demo.png");
            background-repeat: no-repeat;
            background-position: right bottom;
        }
    </style>
</head>
<body>
    <div class="box1">
        box1
    </div>
    <div class="box2">
        box2
    </div>
    <div class="box3">
        box3
    </div>
</body>
</html>

示例效果：

背景尺寸

background-size 属性用于设置网页元素背景图片的尺寸。

background-size 属性的基本用法：

background-size: 背景尺寸;

背景尺寸：

名称描述
auto背景图片尺寸保持原样
X% Y%使用百分比表示背景图片的尺寸大小
cover背景图片缩放充满整个容器
contain在背景图片保持宽高比的情况下，缩放到宽度或高度正好适合整个容器

示例：background-size

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            width: 500px;
            height: 300px;
            border: 1px solid black;
            background-image: url("demo.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }

        .box2 {
            width: 500px;
            height: 300px;
            border: 1px solid black;
            background-image: url("demo.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
    </style>
</head>
<body>
    <div class="box1">
        box1
    </div>
    <div class="box2">
        box2
    </div>
</body>
</html>

示例效果：

背景属性

background 属性用于简写背景样式。

background 属性的基本用法：

background: 背景颜色 背景图片 背景定位 背景平铺;

CSS3 渐变

线性渐变

线性渐变是颜色沿着一条直线过渡：从左到右、从上到下等。

线性渐变的基本用法：

background-image: linear-gradient(渐变方向, 颜色1, 颜色2);

渐变方向：

名称描述
to bottom颜色 1 从顶部到底部向颜色 2 渐变
to right颜色 1 从左边到右边向颜色 2 渐变
to top left颜色 1 从右下到左上向颜色 2 渐变

不同的浏览器对渐变的支持不一样，为了适配浏览器，在编写样式的时候需要在用法上加上每种浏览器对应的前缀。

浏览器样式前缀：

名称描述
-ms-适配 IE 浏览器
-webkit-适配 Chrome 内核浏览器和 Safari 浏览器
-o-适配欧朋浏览器
-moz-适配 Firefox 火狐浏览器

示例：linear-gradient

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            width: 500px;
            height: 300px;
            border: 1px solid black;
            background-image: linear-gradient(to bottom, red, yellow);
            background-image: -moz-linear-gradient(to bottom, red, yellow);
        }
    </style>
</head>
<body>
    <div class="box1">
        box1
    </div>
</body>
</html>

示例效果：