【前端基础】层叠宇宙的代码旅人：css（上）

原创已于 2025-06-23 15:44:02 修改 · 1.3k 阅读

60 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #css3

于 2025-06-23 15:43:51 首次发布

前端基础专栏收录该内容

5 篇文章

订阅专栏

在学完 html 的相关框架后，需要进一步学习 css 对网页的相关优化

1.什么是css？

css 又叫做层叠样式表 (Cascading Style Sheets)
css 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离

💻比如：

在这里插入图片描述

这样一个百度搜索栏，图标的大小，按键的颜色，字体的样式，都属于 css 的范围

简单来说：

html 决定页面结构
css 控制页面的展示效果

2.基本语法规范

选择器 + {一条/N条声明}

🔥值得注意的是：

选择器决定针对谁修改 (找谁)
声明决定修改啥 (干啥)
声明的属性是键值对，使用 ; 区分键值对，使用 : 区分键和值

✏️举个例子：

<!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>
        p{
            color: red;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <p>hello world</p>
</body>
</html>

通常我们把 css 的内容写在 style 标签里
style 标签可以放到页面任意位置. 一般放到 head 标签内
color 表示标签的颜色，font-size 表示标签的像素大小

✏️展示效果：

在这里插入图片描述

3.引入方式

3.1 内部样式表

前面写的代码例子就是一种内部样式表，把 css 和 html 写在同一页面，会对同种标签都进行操作

比如上面写的例子就会对所有的 p 标签进行修饰

但是这种方式不能够对单独的标签进行操作，分离的还不够彻底，尤其是 css 内容多的时候

3.2 行内样式表

行内样式表通过 style 属性, 来指定某个标签的样式，只适合于写简单样式，只针对某个标签生效

✏️举个例子：

<!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>
        p{
            color: red;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <p style="color: green;">hello world</p>
    <p style="color: blue; font-size: 80px;">你好</p>
</body>
</html>

可以看到在 p 标签内部进行修饰能够指定特定标签的属性

而且在内部样式表和行内样式表同时对同一标签进行修饰时，行内样式表的优先级更高

✏️展示效果：

在这里插入图片描述

3.3 外部样式

这是实际开发中最常见的方式，类似于 C++ 的声明定义分离

✏️举个例子：

在这里插入图片描述

创建一个 css 文件 demo02.css
使用 link 标签在 demo0.html 文件引入 css

🔥值得注意的是：

rel 表示链接文件间的关系，stylesheet 表示被链接的是个样式表
href 表示被链接文件的地址

✏️展示效果：

在这里插入图片描述

4.选择器

这里我们只介绍常用的选择器，以下内容只是 CSS2 标准中支持的选择器，在 CSS3 中还做出了一些补充

传送门：选择器参考文档

4.1 基础选择器

4.1.1 标签选择器

能快速为同一类型的标签都选择出来
但是不能差异化选择

✏️举个例子：

<!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>
        p{
            color: red;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <p>hello world</p>
    <p>你好</p>
</body>
</html>

✏️展示效果：

在这里插入图片描述

4.1.2 类选择器

差异化表示不同的标签
可以让多个标签的都使用同一个标签

✏️举个例子：

<!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="./demo03.css">
</head>
<body>
    <p class="eat">吃饭</p>
    <p class="sleep">睡觉</p>
    <p class="play game">玩游戏</p>
</body>
</html>

在这里插入图片描述

在 p 标签中加 class 属性进行标签标记，然后在 css 文件里以 . 开头的类名进行修饰

🔥值得注意的是：

play 和 game 都是对同一标签进行修饰，一个类可以被多个标签使用，一个标签也能使用多个类(多个类名要使用空格分割，这种做法可以让代码更好复用)

<style>
    .box {
        width: 200px;
        height: 150px;
   }
    .red {
        background-color: red;
   }
    .green {
        background-color: green;
   }
</style>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>

如果是长的类名，可以使用 - 分割
不要使用纯数字，或者中文，以及标签名来命名类名

✏️展示效果：

在这里插入图片描述

4.1.3 id 选择器

id 是唯一的，不能被多个标签使用 (是和类选择器最大的区别)，而且 id 选择器的优先级大于绝大部分选择器

✏️举个例子：

<!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="./demo04.css">
</head>
<body>
    <p id="nn">你好</p>
    <p id="zz">再见</p>
</body>
</html>

在这里插入图片描述
在 p 标签中加 id 属性进行标签标记，然后在 css 文件里以 # 开头的 id 名进行修饰

🔥值得注意的是：

id 选择器的值和 html 中某个元素的 id 值相同
html 的元素 id 不必带 #

✏️展示效果：

在这里插入图片描述

4.1.4 通配符选择器

✏️举个例子：

<!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="./demo04.css">
</head>
<body>
    <p id="nn">前端开发</p>
    <p id="zz">后端开发</p>
</body>
</html>

在这里插入图片描述

使用 * 的定义，选取所有的标签，页面的背景会被改成绿黄色，每个标签都会带有这条选择器

✏️展示效果：

在这里插入图片描述

4.2 复合选择器

复合选择器是对基础选择器的综合运用

4.2.1 后代选择器

后代选择器又叫包含选择器，选择某个父元素中的某个子元素

元素1 元素2 {样式声明}

✏️举个例子：

<!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="./demo05.css">
</head>
<body>

    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>

    <ol>
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
    </ol>

</body>
</html>

在这里插入图片描述

如果我们单纯想对有序列表进行修改，或许可以给每个 li 加类名实现，但是数据万一很多就麻烦了，因此这里使用包含选择器

🔥值得注意的是：

元素 1 和元素 2 要使用空格分割
元素 1 是父级, 元素 2 是子级，只选元素 2 ，不影响元素 1
元素 2 不一定非是儿子，也可以是孙子

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li><a href="#">ccc</a></li>
</ul>

在这里插入图片描述

可以是任意基础选择器的组合 (包括类选择器，id 选择器)

<ol class="one">
    <li>ddd</li>
    <li>eee</li>
    <li><a href="#">fff</a></li>
    <li><a href="#">fff</a></li>
    <li><a href="#">fff</a></li>
</ol>

在这里插入图片描述

✏️展示效果：

在这里插入图片描述

4.2.2 子选择器

和后代选择器类似，但是只能选择子标签

元素1>元素2 { 样式声明 }

<div class="two">
    <a href="#">链接1</a>
    <p><a href="#">链接2</a></p>
</div>

后代选择器的写法, 会把链接 1 和 2 都选中

在这里插入图片描述

子选择器的写法, 只选链接 1

在这里插入图片描述

🔥值得注意的是：

使用大于号分割
只选亲儿子，不选孙子元素

4.2.3 并集选择器

用于选择多组标签 (集体声明)

元素1, 元素2 { 样式声明 }

<div>苹果</div>
<h3>香蕉</h3>
<ul>
    <li>鸭梨</li>
    <li>橙子</li>
</ul>

所有水果颜色改成红色

在这里插入图片描述

🔥值得注意的是：

通过 , 分割等多个元素，表示同时选中元素 1 和元素 2
任何基础选择器都可以使用并集选择器
并集选择器建议竖着写，每个选择器占一行 (最后一个选择器不能加逗号)

4.2.4 伪类选择器

4.2.4.1 链接伪类选择器

a 选择链接
a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)

🔥值得注意的是：

如何让一个已经被访问过的链接恢复成未访问的状态?

清空浏览器历史记录即可 ctrl + shift + delete

需要按照 LVHA 的顺序书写，例如把 active 拿到前面去，就会导致 active 失效，记忆规则 “绿化”

在 CSS 中，LVHA 顺序指的是 :link（未访问的链接）、:visited（已访问的链接）、:hover（鼠标悬停在链接上）、:active（激活的链接，即鼠标按下但未松开时）这几种伪类的顺序。按照这个顺序书写样式，才能保证在不同状态下样式正确显示

实际开发主要给链接做一个样式，然后给 hover 做一个样式即可，link，visited，active 用的不多

✏️举个例子：

<!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>
        a{
            color: black;
        }

        a:hover{
            color: red;
        }

        a:active{
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">不跳转</a>
</body>
</html>

✏️展示效果：

在这里插入图片描述

4.2.4.2 :force 伪类选择器

:force 伪类选择器也是同理，但是还有一种 focus 样式比较常用

在这里插入图片描述

此时被选中的表单的字体就会变成红色

✏️举个例子：

<!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>
        input{
            color: black;
        }

        input:hover{
            color: red;
        }

        input:active{
            color: green;
        }
    </style>
</head>
<body>
    <input type="button" value="按钮">
</body>
</html>