《前端技术基础》第02章 CSS基础【合集】

Rossy Yan

发布于 2025-01-13 08:18:20

7600

代码可运行

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

运行总次数：0

代码可运行

层叠样式表（Cascading Style Sheets，简称CSS）是一种用于描述网页视觉表现的语言。该语言与HTML协同工作，其中HTML负责构建网页的结构，而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用，这些规则由选择器（Selectors）和声明块（Declaration Blocks）构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响，而声明块则包含了具体的样式声明，这些声明定义了元素的视觉属性和相应的值。

第一节在HTML中使用CSS

在HTML文档中引入CSS（层叠样式表）有几种不同的方法，每种方法都有其特定的使用场景和优势。以下是几种常见的方法：

1.1内联样式（Inline Styles）

内联样式是直接在HTML元素中使用style属性来添加CSS规则。这种方法适用于单个元素的样式定制，但不推荐用于大规模的样式定义，因为它缺乏复用性且难以维护。

示例1-1：

<p style="color: blue; font-size: 14px;">这是一个内联样式的段落。</p>

运行结果：

1.2内部样式表（Internal Stylesheet）

内部样式表是将CSS规则放在HTML文档的<head>部分内的<style>标签中。这种方法适用于单个页面的样式定义，可以对页面上的多个元素进行样式控制。

示例1-2：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: #f0f0f0;
        }
        h1 {
            color: #333;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>这是一个内部样式表的标题</h1>
</body>
</html>

运行结果：

1.3外部样式表（External Stylesheet）

外部样式表是将CSS规则保存在一个单独的.css文件中，然后通过HTML文档的<head>部分中的<link>标签引入。这是最推荐的方法，因为它允许在多个页面间共享样式，有助于保持代码的组织和可维护性。

示例1-3：

/* 在index.html文件中 */
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>1-3 外部样式</title>
    <link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<h1>这是一个外部样式表的标题</h1>
</body>
</html>

/* 在styles.css文件中 */
body {
    background-color: #f0f0f0;
}
h1 {
    color: #333;
    text-align: center;
}

运行结果：

1.4导入样式表（Importing Stylesheets）

除了上述三种方法之外，还可以使用@import规则在CSS文件内部导入其他CSS文件。这种方法通常用于将多个样式表合并为一个，或者在样式表中导入第三方样式库。

示例1-4：

/* 在styles.css文件中 */
@import url("reset.css");
@import url("bootstrap.css");

body {
    background-color: #f0f0f0;
}
h1 {
    color: #333;
    text-align: center;
}

请注意，虽然@import可以在CSS文件中使用，但不推荐在HTML文档的<style>标签中使用@import，因为它会导致页面加载时出现额外的延迟。

第二节选择器

选择器是CSS语言中至关重要的组成部分，它决定了样式规则将应用于哪些元素。选择器的使用是网页设计和开发中不可或缺的一环，它允许开发者精确地控制页面上各个元素的外观和布局。通过选择器，我们可以指定哪些HTML元素应该被特定的样式所影响，从而实现丰富的视觉效果和用户交互体验。

CSS中存在多种类型的选择器，每种选择器都有其特定的用途和优势。包括：标签选择器、类选择器、id选择器、属性选择器、伪类选择器等。通过这些选择器，CSS能够以一种非常灵活的方式控制网页的样式，从而实现复杂的布局和视觉效果。

2.1标签选择器

当需要对HTML文件中的某一类标签进行统一样式的定义时，应该选择实用标签选择器，其语法格式为：

tagName{
    property: value;
}

示例2-1：在以下代码中，我们可以尝试将背景颜色修改为红色，将文字颜色设置为黄色。

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <title>2-1 标签选择器</title>
        <style>
            body {
                background-color: red;
            }
            h2 {
                color: yellow;
            }
        </style>
    </head>
    <body>
        <h2>我爱我的祖国</h2>
    </body>
</html>

运行结果：

2.2 类选择器

类选择器根据标签中添加的class属性来选择元素，使用点号.后跟类名来选择具有特定类属性的元素。一个类可以被应用到多个元素上，这使得类选择器非常适合于复用样式。类选择器的基本语法如下：

.className {
    property: value;
}

这里，.className 是选择器，它会匹配所有具有 class="className" 属性的HTML元素。

示例2-2：在以下代码中，我们可以尝试为家庭成员中的女士添加一个 class="female"属性，将文字颜色设置为红色。

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <title>2-2 类选择器</title>
        <style>
            .female {
                color: red;
            }
        </style>
    </head>
    <body>
        我爱我家，我们的家庭成员有：
        <ul>
            <li>爸爸</li>
            <li class="female">妈妈</li>
            <li>我</li>
            <li class="female">妹妹</li>
        </ul>
    </body>
</html>

运行结果：

2.3 id选择器

id 选择器根据标签中添加的 id 属性来选择元素。使用方法和类选择器相似，但是在定义 id 选择器时，需要用 #号和 id 名来定义选择器。但是id选择器并不像类选择器一样适用于复用样式，因为规范要求中，在同一个HTML文档中，id是必须是唯一的。id选择器的基本语法如下：

#idName {
    property: value;
}

示例2-3：在以下代码中，我们可以尝试为“我”增加一个 id="me"的属性，并将其文字颜色修改为蓝色。

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <title>2-3 id选择器</title>
        <style>
            .female {
                color: red;
            }
            #me {
                color: blue;
            }
        </style>
    </head>
    <body>
        我爱我家，我们的家庭成员有：
        <ul>
            <li>爸爸</li>
            <li class="female">妈妈</li>
            <li id="me">我</li>
            <li class="female">妹妹</li>
        </ul>
    </body>
</html>

运行结果：

2.4 属性选择器

CSS 属性选择器是一种特殊的选择器，它允许你根据 HTML 元素的属性及其值来选择元素。属性选择器非常强大，可以让你对页面上的元素进行更精确的控制。属性选择器用中括号[ ]结合特殊的匹配规则来选择元素，以下是 CSS 中一些常见的属性选择器：

选择器	描述
[attr]	选择具有 attr 属性的元素
[attr=value]	选择具有 attr 属性、且其值为 value 的元素
[attr~=value]	选择具有 attr 属性、且其值是以空白分隔的单词列表、其中之一为 value 的元素
[attr\|=value]	选择具有 attr 属性、且其值为 value 或以 value- 开头的元素
[attr^=value]	选择具有 attr 属性、且其值以 value 开头的元素
[attr$=value]	选择具有 attr 属性、且其值以 value 结尾的元素
[attr*=value]	选择具有 attr 属性、且其值包含 value 的元素

示例2-4：在以下代码中，我们可以使用精确匹配规则来为图片添加背景颜色和边框。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>2-4 属性选择器之一</title>
    <style>
        [src] {
            height: 200px;
        }
        /*不生效,属性当且唯一等于时生效*/
        [title=male] {
            background-color: #f0e62f;
        }
        /*生效*/
        [alt=female] {
            background-color: #f0e62f;
        }
        /*生效，属性中包含时生效*/
        [title~=t1] {
            border: 2px solid blue;
        }
    </style>
</head>
<body>
<img src="images/male.png" title="t1 male" alt="male"/>
<img src="images/female.png" title="t1 female" alt="female"/>
</body>
</html>

运行结果：

示例2-5：在以下代码中，我们可以使用模糊匹配规则来为图片添加背景颜色和边框。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>2-5 属性选择器之二</title>
    <style>
        [src^=imag] {
            height: 200px;
        }
        [src$=png] {
            background-color: yellow;
        }
        [title*=my-test] {
            border: 2px solid blue;
        }
        [title|="my"] {
            transform: rotate(10deg);
        }
    </style>
</head>
<body>
<img src="images/male.png" title="male my-test" alt="male"/>
<img src="images/female.png" title="my-test female" alt="female"/>
</body>
</html>

运行结果：

需要特别注意的是[attr|=value]选择器，它所匹配的必须是完整的属性值，或者匹配使用横线-命名的属性值的前缀部分。示例2-5中第一幅图片中的my-test属性放在了空格之后，也没有被选择器正确选取。

2.5 选择器的优先级

CSS选择器的优先级（也称为CSS特异性）决定了当多个规则应用于同一个元素时，哪个规则将被采用。优先级是根据选择器的类型和数量来计算的，遵循以下原则：

内联样式：直接在HTML元素上使用style属性定义的样式具有最高的优先级，因为它们是直接应用于元素的。
ID选择器：使用#id选择器指定的样式优先级高于类选择器、属性选择器和伪类选择器。
类选择器、属性选择器和伪类选择器：这些选择器的优先级相同，高于元素选择器和伪元素选择器。
标签选择器和伪元素选择器：使用标签名（如div, p等）或伪元素（如::before, ::after等）的选择器具有最低的优先级。
通用选择器（*）：不具有任何优先级。

当两个选择器具有相同的优先级时，通常后定义的规则会覆盖先前的规则。记住，特异性只在选择器针对同一个元素时才起作用。如果选择器针对不同的元素，那么它们的特异性是独立计算的，不会相互影响。

示例2-6： 通过下面的代码，让我们来测试一下到底哪个选择器生效了。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>2-6 选择器的优先级（特异性）</title>
    <style>
        #idSelector {
            color: blue; /* 蓝色 */
        }
        .classSelector {
            color: green; /* 绿色 */
        }
        h1 {
            color: red; /* 红色 */
        }
    </style>
</head>
<body>
<h2 id="idSelector" class="classSelector">选择器的优先级（特异性）</h2>
</body>
</html>

运行结果：

思考：这种既定的优先级规则是否具备可变性？

答案是肯定的。在样式声明中引入 !important 规则，将提升该样式声明的优先级。

示例2-7：注意下面代码中的 !important书写规范。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>2-7 !important</title>
    <style>
        #idSelector {
            color: blue; /* 蓝色 */
        }

        .classSelector {
            color: green; /* 绿色 */
        }

        h2 {
            color: red !important; /* 红色 */
        }
    </style>
</head>
<body>
<h2 id="idSelector" class="classSelector">选择器的优先级（特异性）</h2>
</body>
</html>

运行结果：

第三节复杂选择器

3.1 组合选择器

在CSS中，组合选择器的运用使我们得以依据元素间特定的关系来选取相应的元素。此类选择器可细分为若干类别，涵盖了子元素选择器、相邻兄弟选择器、通用兄弟选择器以及后代选择器等多种类型。

1. 子元素选择器

子元素选择器通过使用大于号（>）连接两个选择器，从而实现对第一个选择器所指定元素的直接子元素的选取。例如：

div > p {
  color: blue;
}

本段CSS代码将针对所有<div>元素的直接子<p>元素进行样式定义，具体操作为将这些子元素的文本颜色属性设置为蓝色。

2. 后代选择器

后代选择器通过空格连接两个选择器，以选取第一个选择器所指定元素的所有后代元素，而不仅限于直接子元素。例如：

div p {
  color: blue;
}

本段CSS代码将针对所有位于<div>元素内部的<p>元素，不论其为直接子元素抑或更深层次的后代元素，均进行文字颜色的调整，设定为蓝色。

3. 相邻兄弟选择器

相邻兄弟选择器通过使用加号（+）连接两个选择器，以选取紧随第一个指定元素之后的同级元素。例如：

div + p {
  color: blue;
}

本段CSS代码将针对所有紧跟在<div>标签之后的<p>标签内的元素，对其文字颜色属性进行调整，具体操作为将文字颜色设置为蓝色。

4. 通用兄弟选择器

通用兄弟选择器采用波浪号（~）作为连接符，连接两个选择器。此选择器将选取第一个指定元素之后的所有同级元素。例如：

div ~ p {
  color: blue;
}

该段CSS代码将针对所有位于<div>元素之后的<p>元素，不论其间存在多少其他元素，均会将其文本颜色调整为蓝色。

示例3-1： 通过下面的代码，来更深入的了解组合选择器的具体作用。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>2-8 组合选择器</title>
    <style>
        /* 子元素选择器 */
        .title > p {
            color: red;
        }
        /* 后代选择器 */
        .box p {
            color: blue;
        }
        /* 相邻兄弟选择器，注意两者顺序 */
        p + div {
            color: green;
        }
        /* 通用兄弟选择器 */
        .tips ~ p {
            background-color: #f0e62f;
        }
    </style>
</head>
<body>
<h1>2-8</h1>
<div class="title">
    <p>欢迎来到我们的208寝室</p>
    <div><p>这是我们寝室的成员：</p></div>
</div>
<div class="box">
    <div class="contain">
        <div class="tips">四个：</div>
        <p><span>张三</span></p>
        <p><span>李四</span></p>
        <p><span>王二</span></p>
        <p><span>麻子</span></p>
    </div>
</div>
<p></p>
</body>
</html>

运行结果：

除上述四种常见的选择器组合使用方法外，不同类型的选择器之间亦存在多种多样且丰富的组合用法，大家可以自行发掘。

3.2 子元素伪类选择器

在 CSS 中，子元素伪类选择器可精准针对元素特定状态下的子元素进行样式控制，其基于元素的特殊状态或相对位置关系发挥作用。

1. :first-child 伪类选择器

:first-child 用于选取指定元素的第一个子元素。例如：

ul li:first-child {
font-weight: bold;
}

本段CSS代码将针对所有无序列表<ul>中的第一个列表项<li>内的元素，对其文字属性进行调整，具体操作为将这些子元素的文本字体加粗。

2. :last-child 伪类选择器

:last-child 用于选取指定元素的最后一个子元素。例如：

ol li:last-child {
color: green;
}

本段CSS代码将针对所有有序列表<ol>中的最后一个列表项<li>内的元素，对其文字属性进行调整，具体操作为将文字颜色设置为绿色。

3. :nth-child (n) 伪类选择器

:nth-child (n) 灵活性强，其中 n 可为具体数字、表达式或关键词。

n 为具体数字，如 :nth-child (3)，选取指定元素的第三个子元素。例如：

div p:nth-child (3) {
background-color: yellow;
}

本段CSS代码将针对所有元素<div> 中的第三个直接子元素 <p> ，对其背景属性进行调整，具体操作为将背景颜色设置为黄色。

n 为表达式，如 :nth-child (2n) 表示选取偶数位置的子元素，:nth-child (2n + 1) 则选取奇数位置的子元素。例如：

table tr:nth-child (2n) {
background-color: lightgray;
}

本段CSS代码将针对所有表格<table> 中的偶数行 <tr> ，对其背景属性进行调整，具体操作为将背景颜色设置为浅灰色。

n 为关键词，如 :nth-child (even) 等同于 :nth-child (2n)，:nth-child (odd) 等同于:nth-child (2n + 1)。例如：

table tr:nth-child (odd) {
background-color: pink;
}

本段CSS代码将针对所有表格<table> 中的奇数行 <tr> ，对其背景属性进行调整，具体操作为将背景颜色设置为粉色。

4. :only-child 伪类选择器

:only-child 用于当某个元素是其父元素唯一子元素时，对其应用样式。例如：

section > p:only-child {
text-align: center;
}

本段CSS代码将针对所有仅有一个直接子元素 <p>的<section> 元素，对其文本对齐属性进行调整，具体操作为将文本设置为居中对齐。

示例 3-2：通过下面的代码，深入了解子元素伪类选择器的具体作用。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>3-2 子元素伪类选择器</title>
    <style>
        /* :first-child 示例 */
        .list ul li:first-child {
            border-top: 2px solid red;
        }
        /* :last-child 示例 */
        .list ol li:last-child {
            border-bottom: 2px solid blue;
        }
        /* :nth-child(n) 示例 */
        .content div p:nth-child(2) {
            font-size: 18px;
        }
        .table table tr:nth-child(odd) {
            background-color: lavender;
        }
        /* :only-child 示例 */
        .single>p:only-child {
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="list">
        <ul>
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
        </ul>
        <ol>
            <li>一</li>
            <li>二</li>
            <li>三</li>
        </ol>
    </div>
    <div class="content">
        <div>
            <p>普通段落 1</p>
            <p>普通段落 2</p>
            <p>普通段落 3</p>
        </div>
    </div>
    <div class="table">
        <table>
            <tr>
                <td>单元格 1</td>
                <td>单元格 2</td>
            </tr>
            <tr>
                <td>单元格 3</td>
                <td>单元格 4</td>
            </tr>
            <tr>
                <td>单元格 5</td>
                <td>单元格 6</td>
            </tr>
            <tr>
                <td>单元格 7</td>
                <td>单元格 8</td>
            </tr>
        </table>
    </div>
    <div class="single">
        <p>独自的段落</p>
    </div>
</body>
</html>

运行结果：

子元素伪类选择器极大丰富了 CSS 样式设计时对元素的精细控制，大家可根据实际项目需求巧妙运用，创造出更具个性与美感的页面效果。

3.3 伪元素选择器

在 CSS 领域中，伪元素选择器具备独特的功能，能够为页面样式设计创造出在 HTML 结构中不存在，但对视觉呈现具有重要意义的元素样式。

1. ::before 伪元素选择器

::before 可在被选元素的内容前插入生成的内容。例如：

p::before {
content: "前置提示：";
color: gray;
}

本段CSS代码将针对所有<p>元素，在其内容开头插入灰色的 前置提示：字样。

2. ::after 伪元素选择器

与 ::before 相对应，::after 用于在被选元素的内容之后插入内容。比如：

span::after {
content: "补充信息: ";
font-style: italic;
}

本段CSS代码将针对所有<span>元素，在其内容末尾插入斜体样式的补充信息：字样。

3. ::first-letter 伪元素选择器

::first-letter 专注于选取元素文本的首字母，并对其单独设置样式。例如：

h1::first-letter {
font-size: 2em;
color: red;
}

本段CSS代码将针对所有 <h1>标题元素中的首字母，对其文字属性进行调整，具体操作为将首字母的字体大小变为两倍并显示为红色。

4. ::first-line 伪元素选择器

::first-line 能够选取元素文本的首行并施加样式。像这样：

article p::first-line {
background-color: lightyellow;
font-weight: bold;
}

本段CSS代码将针对所有 <article>元素中的 <p> 段落，对其背景属性和文字属性进行调整，具体操作为将首行背景被设置为浅黄色，文本字体加粗。

示例 3-3：通过下面的代码，深入了解伪元素选择器的具体作用。

<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>3-3 伪元素选择器</title>
    <style>
        /* ::before 示例 */
        .intro p::before {
            content: "重要提醒：";
            background-color: lightgreen;
            padding: 3px;
        }
        /* ::after 示例 */
        .detail span::after {
            content: " - 详情请看";
            color: blue;
        }
        /* ::first-letter 示例 */
        .title h2::first-letter {
            float: left;
            font-size: 30px;
            color: purple;
        }
        /* ::first-line 示例 */
        .text article p::first-line {
            text-decoration: underline;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="intro">
        <p>这是一段重要的文本内容。</p>
    </div>
    <div class="detail">
        <span>关键信息</span>
    </div>
    <div class="title">
        <h2>精彩标题</h2>
    </div>
    <div class="text">
        <article>
            <p>这里是一篇文章的开篇段落，包含诸多有用信息。</p>
            <p>后续段落继续阐述相关要点。</p>
        </article>
    </div>
</body>
</html>

运行结果：

伪元素选择器赋予了 CSS 强大的扩展能力，开发者可依据页面布局与设计需求，灵活运用它们，打造出更加精致、富有层次感的网页界面。

3.4 UI 伪类选择器

在 CSS 技术体系里，UI 伪类选择器能够精准捕捉用户与界面元素交互时的各种状态，并据此赋予元素相应的独特样式，以此提升网页的交互性与用户体验。

1. :hover 伪类选择器

:hover 的功能是在鼠标指针悬浮于元素上方时，触发特定样式的呈现。例如：

img:hover {
transform: scale (1.1);
box-shadow: 0 0 10px rgba (0, 0, 0, 0.3);
}

当鼠标移至 <img> 图片元素之上，图片会以中心为基准放大 1.1 倍，同时出现一个半透明的黑色阴影。

2. :active 伪类选择器

:active 着重于体现元素被激活的那一瞬间状态，常见于鼠标点击的操作场景。比如：

div:active {
background-color: darkgray;
outline: 2px solid black;
}

当鼠标点击 <div> 区域时，该区域的背景色会切换为深灰色，并且出现一个 2 像素宽的黑色边框。

3. :focus 伪类选择器

:focus 专注于处理获取焦点的元素样式变化，在表单操作流程里应用广泛。例如：

textarea:focus {
border-color: skyblue;
padding: 5px;
}

当鼠标点击 <textarea> 文本域准备输入内容时，文本域边框颜色会变为天蓝色，同时内边距增加到 5 像素。

4. :disabled 伪类选择器

:disabled 用于界定那些处于不可用状态的元素外观样式。像下面这样：

select:disabled {
background-color: lightgray;
color: gray;
pointer-events: none;
}

若<select> 下拉菜单被禁用，它将呈现浅灰色背景，文本颜色也变为灰色，且鼠标指针移至其上时不再触发任何交互事件。

示例 3-4：通过下面的代码，深入了解 UI 伪类选择器的具体作用。

<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>3-4 UI 伪类选择器</title>
    <style>
        /* :hover 示例 */
        .icon:hover {
            opacity: 0.8;
            rotate: 30deg;
        }
        /* :active 示例 */
        .button:active {
            background-color: #ccc;
            border-radius: 5px;
        }
        /* :focus 示例 */
        .input:focus {
            caret-color: green;
            font-size: 16px;
        }
        /* :disabled 示例 */
        .checkbox:disabled {
            opacity: 0.6;
            border: none;
        }
    </style>
</head>
<body>
    <div class="icon">
        <img src="icon.png" alt="图标">
    </div>
    <div class="button">
        <button>确认</button>
    </div>
    <div class="input">
        <input type="text" placeholder="请输入内容">
    </div>
    <div class="checkbox">
        <input type="checkbox" id="agreement" disabled>
        <label for="agreement">已阅读协议</label>
    </div>
</body>
</html>