【前端】保姆级的CSS简介

🔥 信仰：一个人走得远了，就会忘记自己为了什么而出发，希望你可以不忘初心，不要随波逐流，一直走下去
🦋 欢迎关注🖱点赞👍收藏🌟留言🐾
🦄 本文由程序喵正在路上原创，CSDN首发！
💖 系列专栏：HTML5+CSS3+移动端前端
🌠 首发时间：2022年7月6日
✅ 如果觉得博主的文章还不错的话，希望小伙伴们三连支持一下哦

🌠学习目标

● 能够说出什么是 CSS
● 能够使用 CSS 基础选择器
● 能够设置字体样式
● 能够设置文本样式
● 能够说出 CSS 的三种引入方式
● 能够说出 Chrome 调试工具调试样式

🌠CSS 简介

CSS 的主要使用场景就是美化网页，布局网页的。

1. HTML 的局限性

说到 HTML，这其实是个非常单纯的家伙，它只关注内容的语义。比如 <h1> 表明这是一个大标题，<p> 表明这个一个段落，<img> 表明这里有一张图片，<a> 表明这里有一个链接。

很早的时候，世界上的网页虽然很多，但是它们都有一个共同的特点：丑

虽然 HTML 可以做简单的样式，但是带来的却是无尽的臃肿和繁琐…

在这里插入图片描述

2. CSS-网页的美容师

CSS 是层叠样式表（Cascading Style Sheets）的简称，有时我们也会称之为 CSS 样式表或级联样式表。

CSS 也是一种标记语言。

CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外观（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML，让 HTML 更漂亮，让页面布局更简单。

总结：
● HTML 主要做结构，显示元素内容
● CSS 美化 HTML，布局网页
● CSS 最大价值：由 HTML 专注去做结构呈现，样式交给 CSS，即结构（HTML）与样式（CSS）相分离

3. CSS 语法规范

使用 HTML 时，需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解 CSS 样式规则。

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明，写在 HTML 文件的 <head> 和 </head> 之间添加的 <style> 和 </style> 里面
在这里插入图片描述
● 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
● 属性和属性值以 ”键值对“ 的形式出现
● 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
● 属性和属性值之间用英文 ”:” 分开
● 多个 “键值对” 之间用英文 “;“ 进行区分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法规范</title>
    <style>
        /* 选择器 样式 */
        /* 给谁改样式 什么样式 */
        p {
            color:red;
            /* 修改文字大小为12像素 */
            font-size:12px;
        }
    </style>
</head>
<body>
    <p>有点意思</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在这里插入图片描述

4. CSS 代码风格

以下代码书写风格不是强制规范，而是符合实际开发书写方式

● 样式格式书写

① 紧凑格式

h3 { color: deeppink; font-size: 20px; }
1

② 展开风格

h3 {
	color: pink;
	font-size: 20px;
}
1
2
3
4

强烈推荐第二种格式，因为更直观

● 样式大小写风格

h3 {
	color: pink;
}
1
2
3

h3 {
	COLOR: PINK;
}
1
2
3

强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外

● 样式空格风格

h3 {
	color: pink;
}
1
2
3

① 属性值前面，冒号后面，保留一个空格
② 选择器（标签）和大括号中间保留空格

在这里插入图片描述

🌠CSS 基础选择器

1. CSS 选择器的作用

<div>我是div</div>
<div>我是div</div>
<p>我是段落</p>
<ul>
    <li>我是ul里面小li哦</li>
</ul>
<ol>
    <li>我是ul里面小li哦</li>
</ol>
1
2
3
4
5
6
7
8
9

怎么解决下列需求：

我想把 div 里面的文字改为红色？
我想把第一个 div 里面的文字改为红色？
我想把 ul 里面的 li 文字改为红色？

选择器（选择符）就是根据不同需求把不同的标签选出来，这就是选择器的作用。简单来说，就是选择标签用的。

2. 选择器分类

选择器分为基础选择器和复合选择器两个大类，我们先了解以下基础选择器

● 基础选择器是由单个选择器组成的
● 基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

3. 标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

基本语法格式如下：

标签名 {
	属性1: 属性值1;
	属性2: 属性值2;
	属性3: 属性值3;
	...
}
1
2
3
4
5
6

作用

标签选择器可以把某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签

优点

能快速为页面中同类型的标签统一设置样式和

缺点

不能设计差异化样式，只能选择全部的当前标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>
        p {
            color: green;
            font-size: 20px;
        }
        div {
            color: red;
        }
    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>
</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

在这里插入图片描述

4. 类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点 “." 号显示。

基本语法格式如下

.类名 {
	属性1: 属性值1;
	...
}
1
2
3
4

例如，将所有拥有 red 类的 HTML 元素均改为红色

.red {
	color: red;
}
1
2
3

结构需要用 class 属性来调用 class 类的意思

演示

<div class='red'> 变红色 </div>
1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        /* 类选择器口诀：样式点定义 结构类(class)调用 一个或多个 开发最常用*/
        .red {
            color: red;
        }
        .star-sing {
            color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">笑场</li>
        <li>演员</li>
        <li class="red">刚刚好</li>
        <li class="star-sing">我好像在哪见过你</li>
        <li>丑八怪</li>
    </ul>
    <div class="red">我也会变红色</div>
</body>
</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

在这里插入图片描述

注意

类选择器使用 ”.“ （英文点号）进行标识，后面紧跟类名（自定义，我们自己命名）
可以理解为给这个标签起了一个名字来表示
长名称或词组可以使用中横线来为选择器命名
不要使用纯数字、中文等命名，尽量使用英文字母来表示
命名要有意义，尽量使别人一眼就知道这个类名的目的
命名规范：CSS类命名规则

案例
➤ 所用知识点
—— 类选择器的使用
—— div 就是一个盒子，用来装网页内容的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用类选择器画三个盒子</title>
    <style>
        .red {
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: red;
        }
        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>
</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

在这里插入图片描述
类选择器-多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签，简单理解就是一个标签有多个名字

➽ 多类名使用方式

<div class="red font20">亚瑟</div>
1

（1）在标签 class 属性中写多个类名
（2）多个类名中间必须用空格分开
（3）这个标签就可以分别具有这些类名的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多类名的使用方式</title>
    <style>
        .red {
            color: red;
        }
        .font35 {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="red">薛之谦</div>
    <div class="red font35">薛之谦</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在这里插入图片描述
➽ 多类名的使用场景

可以把一些标签元素相同的样式（共同的部分）放到一个类里面
这些标签都可以调用这个公共的类，然后再调用自己独有的类
从而节省 CSS 代码，统一修改也非常方便

对三个盒子的案例进行改进：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用类选择器画三个盒子</title>
    <style>
        /* 便于后面修改 */
        .box {
            width: 100px;
            height: 100px;
        }
        .red {
            /* 背景颜色 */
            background-color: red;
        }
        .green {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>
</body>
</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

➽ 多类名总结

各个类名中间用空格分开
简单理解：就是给某个标签添加了多个类，或者这个标签有多个名字
这个标签就可以分别具有这些类名的样式
从而节省 CSS 的代码，统一修改也非常方便
多类名选择器在后期布局比较复杂的情况下，还是较多使用的

5. id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特有的样式

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 ”#“ 来定义

基本语法格式如下

#id名 {
	属性1: 属性值1;
	...
}
1
2
3
4

例如，将 id 为 nav 元素中的内容设置为红色

#nav {
	color: red;
}
1
2
3

注意：id 属性只能在每个 HTML 文档中出现一次，也就是只能调用一次

id 选择器和类选择器的区别
① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
② id 选择器好比人的身份证号码，全中国是唯一的，不得重复
③ id 选择器和类选择器最大的不同在于使用次数上
④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用

6. 通配符选择器

在 CSS 中，通配符选择器使用 ”*“定义，它表示选取页面中所有元素（标签）

➠ 基本语法格式如下

* {
	属性1: 属性值1;
	...
}
1
2
3
4

● 通配符选择器不需要调用，自动就给所有的元素使用样式
● 特殊情况才使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
    <style>
        * {
            color: red;
        }
        /* * 这里把 html body div span li 等等的标签都改为了红色 */
    </style>
</head>
<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述

下面是清除所有的元素标签的内外边距

* {
	margin: 0;
	padding: 0;
}
1
2
3
4

7. 基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如 p	不能差异化选择	较多	`p { color: red; }`
类选择器	可以选出 1 个或者多个标签	可以根据需求选择	非常多	`.nav { color: red; }`
id 选择器	一次只能选择 1 个标签	ID 属性只能在每个 HTML 文档中出现一次	一般和 js 搭配	`#nav { color: red; }`
通配符选择器	选择所有的标签	选择的太多，有部分可能不需要	特殊情况使用	`* { color: red; }`

● 每个基础选择器都有使用场景，都需要掌握
● 如果是修改样式，类选择器是使用最多的

🌠CSS 字体属性

CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）

1. 字体系列

CSS 使用 font-family 属性定义文本的字体系列

语法格式如下：

p { font-family:"微软雅黑"; }
div { font-family: Arial,"Microsoft","微软雅黑"; }
1
2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体系列</title>
    <style>
        h2 {
            font-family: '楷体';
        }
        p {
            /* font-family: 'Microsoft YaHei'; */
            font-family: 'Times New Roman', Times, serif;
        }
    </style>
    
</head>
<body>
    <h2>桃花庵歌</h2>
    <h4>明 唐伯虎</h4>
    <p>桃花坞里桃花庵，桃花庵下桃花仙。</p>
    <p>桃花仙人种桃树，又摘桃花换酒钱。</p>
    <p>酒醒只在花前坐，酒醉还来花下眠。</p>
    <p>半醉半醒日复日，花落花开年复年。</p>
    <p>但愿老死花酒间，不愿鞠躬车马前。</p>
    <p>车尘马足富者事，酒盏花枝隐士缘。</p>
    <p>若将显者比隐士，一在平地一在天。</p>
    <p>若将花酒比车马，彼何碌碌我何闲。</p>
    <p>世人笑我太疯癫，我笑他人看不穿。</p>
    <p>不见五陵豪杰墓，无花无酒锄作田。</p>
</body>
</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

在这里插入图片描述

● 各种字体之间必须使用英文状态下的逗号隔开
● 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
● 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
● 最常用的几个字体：body { font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB'; }

2. 字体大小

CSS 使用 font-size 属性定义字体大小

语法格式如下：

p {
	font-size: 20px;
}
1
2
3

● px（像素）大小是我们网页的最常用的单位
● 谷歌浏览器默认的文字大小为 16px
● 不同的浏览器默认显示的字体大小可能不一致，我们尽量给一个明确值大小，不要默认大小
● 可以给 body 指定整个页面文字的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体大小</title>
    <style>
        body {
            font-size: 20px;
        }
        /* 标题标签比较特殊，需要单独指定文字大小 */
        h2 {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h2>桃花庵歌</h2>
    <h4>明 唐伯虎</h4>
    <p>桃花坞里桃花庵，桃花庵下桃花仙。</p>
    <p>桃花仙人种桃树，又摘桃花换酒钱。</p>
    <p>酒醒只在花前坐，酒醉还来花下眠。</p>
    <p>半醉半醒日复日，花落花开年复年。</p>
    <p>但愿老死花酒间，不愿鞠躬车马前。</p>
    <p>车尘马足富者事，酒盏花枝隐士缘。</p>
    <p>若将显者比隐士，一在平地一在天。</p>
    <p>若将花酒比车马，彼何碌碌我何闲。</p>
    <p>世人笑我太疯癫，我笑他人看不穿。</p>
    <p>不见五陵豪杰墓，无花无酒锄作田。</p>
</body>
</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

在这里插入图片描述

3. 字体粗细

CSS 粗细 font-weight 属性设置文本字体的粗细

语法格式如下：

p {
	font-weight: bold;
}
1
2
3

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100-900	400 等同于 normal，而 700 等同于 bold，注意这个数字后面不跟单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体粗细</title>
    <style>
        .bold {
            /* font-weight: bold; */
            /* 这个700的后面不要跟单位 等价于 bold 都是加粗的效果 */
            /* 实际开发中，我们跟提倡使用数字来表示加粗或者变细 */
            font-weight: 700;
        }
        h2 {
            /* font-weight: normal; */
            font-weight: 400;
        }
    </style>
</head>
<body>
    <h2>桃花庵歌</h2>
    <h4>明 唐伯虎</h4>
    <p>桃花坞里桃花庵，桃花庵下桃花仙。</p>
    <p>桃花仙人种桃树，又摘桃花换酒钱。</p>
    <p>酒醒只在花前坐，酒醉还来花下眠。</p>
    <p>半醉半醒日复日，花落花开年复年。</p>
    <p>但愿老死花酒间，不愿鞠躬车马前。</p>
    <p>车尘马足富者事，酒盏花枝隐士缘。</p>
    <p>若将显者比隐士，一在平地一在天。</p>
    <p>若将花酒比车马，彼何碌碌我何闲。</p>
    <p class="bold">世人笑我太疯癫，我笑他人看不穿。</p>
    <p>不见五陵豪杰墓，无花无酒锄作田。</p>
</body>
</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

在这里插入图片描述

● 学会让加粗标签（比如 h 和 strong 等）不加粗，或者其他标签加粗
● 实际开发时，我们更喜欢用数字表示粗细

4. 文字样式

CSS 使用 font-style 属性设置文本的风格

语法格式如下：

p {
	font-style: normal;
}
1
2
3

属性值	作用
normal	默认值，浏览器会显示标准的字体样式 `font-style: normal;`
italic	浏览器会显示斜体的字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体样式</title>
    <style>
        p {
            font-style: italic;
        }
        em {
            font-style: normal;
        }
    </style>
</head>
<body>
    <p>同学，上课时候的你</p>
    <em>下课时候的你</em>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在这里插入图片描述

注意：平时我们很少给文字加斜体，反而要给斜体标签（em, i）改为不倾斜字体

5. 字体复合属性

字体属性可以把以上文字样式综合来写，这样可以更节约代码

语法格式如下：

body {
	font: font-style font-weight font-size/line-height font-family;
}
1
2
3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之复合属性</title>
    <style>
        div {
            /* font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: 'Microsoft YaHei'; */

             /* 复合属性：简写的方式 */
             font: italic 700 16px/20px 'Microsoft YaHei';
        }
    </style>
</head>
<body>
    <div>世人笑我太疯癫，我笑他人看不穿</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在这里插入图片描述

● 使用 font 属性时，必须按上面语法格式中的顺序来写，不能更换顺序，并且每个属性之间以空格隔开
● 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

6. 字体属性总结

属性	表示	注意点
font-size	字号	我们通常用的单位是 px（像素），一定要跟上单位
font-family	字体	实际工作中按照团队规定来写字体
font-weight	字体粗细	记住加粗是 700 或者 bold，不加粗是 normal 或者 400，记住数字不要跟单位
font-style	字体样式	记住倾斜是 italic，不倾斜是 normal，工作中我们最常用 normal
font	字体连写	1. 字体连写是有顺序的，不能随意换位置 2. 其中字号和字体必须同时出现

🌠CSS 文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

1. 文本颜色

color 属性用于定义文本的颜色

div {
	color: red;
}
1
2
3

表示	属性值
预定义的颜色值	red, green, blue
十六进制	#FF0000, #FF6600, #29D794
RGB代码	rgb(255,0,0) 或 rgb(100%,0%,0%)

开发中最常用的是十六进制

2. 对齐文本

text-align 属性用于设置元素内文本内容的水平对齐方式

语法格式如下：

div {
	text-align: center;
}
1
2
3

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之文本对齐</title>
    <style>
        h1 {
            /* 本质是让h1盒子里面的文字水平居中对齐 */
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>居中对齐的标题</h1>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这里插入图片描述

3. 装饰文本

text-decoration 属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等

语法格式如下：

div {
	text-decoration: underline;
}
1
2
3

属性值	描述
none	默认，没有装饰线（最常用）
underline	下划线，链接 a 自带下划线（常用）
overline	上划线（几乎不用）
line-through	删除线（不常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体外观之装饰文本</title>
    <style>
        div {
            text-decoration: underline;
        }
        /* 去掉链接自带的下划线  */
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>起风了</div>
    <a href="#">起风了</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述
重点记住如何添加、删除下划线即可

4.文本缩进

text-indent 属性用来指定文本第一行的缩进，通常是将段落的首行缩进

语法格式如下：

div {
	text-indent: 10px;
}
1
2
3

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值

p {
	text-indent: 2em;
}
1
2
3

em 是一个相对单位，就是当前元素（font-size）1 个文字的大小，如果当前元素没有设置大小，则会按照父元素的 1 个文字大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之文本缩进</title>
    <style>
        p {
            /* text-indent: 20px; */
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <P>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉。汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃共相辅佐。时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。</P>
 
    <p>建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起。只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十余丈，飞入温德殿中。秋七月，有虹现于玉堂；五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。</p>
 
    <p>时巨鹿郡有兄弟三人，一名张角，一名张宝，一名张梁。那张角本是个不第秀才，因入山采药，遇一老人，碧眼童颜，手执藜杖，唤角至一洞中，以天书三卷授之，曰：“此名《太平要术》，汝得之，当代天宣化，普救世人；若萌异心，必获恶报。”角拜问姓名。老人曰：“吾乃南华老仙也。”言讫，化阵清风而去。角得此书，晓夜攻习，能呼风唤雨，号为“太平道人”。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述

5. 行间距

line-height 属性用于设置行间的距离（行高），可以控制文字行与行之间的距离

语法格式如下：

p {
	line-height: 26px;
}
1
2
3

行间距由上间距、文本高度和下间距组成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之行间距</title>
    <style>
        p {
            text-indent: 2em;
            line-height: 26px;
        }
    </style>
</head>
<body>
    <P>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉。汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃共相辅佐。时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。</P>
 
    <p>建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起。只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十余丈，飞入温德殿中。秋七月，有虹现于玉堂；五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。</p>
 
    <p>时巨鹿郡有兄弟三人，一名张角，一名张宝，一名张梁。那张角本是个不第秀才，因入山采药，遇一老人，碧眼童颜，手执藜杖，唤角至一洞中，以天书三卷授之，曰：“此名《太平要术》，汝得之，当代天宣化，普救世人；若萌异心，必获恶报。”角拜问姓名。老人曰：“吾乃南华老仙也。”言讫，化阵清风而去。角得此书，晓夜攻习，能呼风唤雨，号为“太平道人”。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述

6. 文本属性总结

属性	表示	注意点
color	文本颜色	我们通常用十六进制表示，而且是简写形式 #fff
text-align	文本对齐	可以设定文字水平的对齐方式
text-indent	文本缩进	通常我们用于段落首行缩进 2 个字的距离 `text-indent: 2em;`
text-decoration	文本修饰	记住添加下划线 underline，取消下划线 none
line-height	行高	控制行与行之间的距离

🌠CSS 的引入方式

按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：

行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

1. 内部样式表

内部样式表（内嵌样式表）是写到 HTML 页面内部，是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中

语法格式如下：

<style>
	div {
		color: red;
		font-size: 12px;
	}
</style>
1
2
3
4
5
6

● <style> 标签理论上可以放到 HTML 文档的任何地方，但一般会放在文档的 <head> 标签中
● 通过此方式，可以方便控制当前整个页面中的元素样式设置

2. 行内样式表

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式，适合于修改简单样式

语法格式如下：

<div style="color: red; font-size: 12px;">衣带渐宽终不悔，为伊消得人憔悴</div>
1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内样式表</title>
</head>
<body>
    <P>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉。汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃共相辅佐。时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。</P>
 
    <p style="color: red; font-size: 26px;">建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起。只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十余丈，飞入温德殿中。秋七月，有虹现于玉堂；五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。</p>
 
    <p>时巨鹿郡有兄弟三人，一名张角，一名张宝，一名张梁。那张角本是个不第秀才，因入山采药，遇一老人，碧眼童颜，手执藜杖，唤角至一洞中，以天书三卷授之，曰：“此名《太平要术》，汝得之，当代天宣化，普救世人；若萌异心，必获恶报。”角拜问姓名。老人曰：“吾乃南华老仙也。”言讫，化阵清风而去。角得此书，晓夜攻习，能呼风唤雨，号为“太平道人”。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这里插入图片描述
● style 其实就是标签的属性
● 在双引号中间，写法要符合 CSS 规范
● 可以控制当前的标签设置样式
● 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素加简单样式的时候，可以考虑使用

3. 外部样式表

实际开发都是外部样式表，适合于样式比较多的情况，核心是样式单独写到 CSS 文件中，之后把 CSS 文件引入到 HTML 页面中使用

引入外部样式表分为两步：

新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中
在 HTML 页面中，使用 <link> 标签引入这个文件
<link rel="stylesheet" href="css文件路径">

外部样式表.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>Is life always this hard, or is it just when you're a kid</div>
    <div>Always like this</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

style.css 文件

/* CSS文件里面只有样式没有标签 */
div {
    color: red;
}
1
2
3
4

在这里插入图片描述

4. CSS 引入方式总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	需要引入	最多，吐血推荐	控制多个页面

🌠综合案例

案例：新闻页面

制作页面整体可以分为两步：

搭建 HTML 结构页面
修改 CSS 样式

综合案例-新闻页面.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>近期天气状况</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>6月我国多地降水量突破历史极值 7月华北华南等地降水仍偏多</h1>
    
    <div class="gray">
        2022-07-05 15:32 
        来源: <a href="http://www.weather.com.cn/" target="_blank">中国天气网</a>
        <input type="text" value="请输入查询条件..." class="search"/> 
        <button class="btn">搜索</button>
    </div>
    <hr>


    <p>中国天气网讯 在今天(7月5日)上午召开的中国气象局7月新闻发布会上, 中国气象局应急减灾与公共服务司副司长王亚伟表示, 今年6月, 我国平均降水量较常年同期偏多9.1%, 多地降水量突破历史极值, 强对流天气频发。预计7月, 华北大部、华南等地降水量仍较常年同期偏多, 另外可能有1至2个热带气旋登陆或影响我国。</p>

    <h4>6月广东等地降水量破纪录 河北江苏等地遭遇雷暴大风</h4>

    <p class="pic">
        <img src="http://image.nmc.cn/product/2022/07/05/STFC/medium/SEVP_NMC_STFC_SFER_ER24_ACHN_L88_P9_20220705060002400.JPG?v=1656988202173" alt="图片显示错误" width="600"/>
    </p>

    <p>今年6月, 全国平均降水量112.1毫米, 较常年同期偏多9.1%。暴雨导致多地降水量突破历史极值。其中南方出现4次区域性暴雨过程, 广东英德(292.9毫米)等12个国家气象站日降水量突破历史极值。6月26-30日, 北方出现入汛以来首次大范围降雨过程, 山东、河北、河南有26个国家气象站日降水量突破6月极值。</p>

    <p class="pic">
        <img src="https://pic.rmb.bdstatic.com/bjh/news/dbb7c556b2a50a29f346e2448f933277.jpeg" alt="图片显示错误"  width="600"/> <br />
        6月22日, 广东省英德市地标文峰塔孤悬江中, 周围汪洋一片。（邱新生/人民视觉版权图片 来源视觉中国）
    </p>

   

    <p>此外6月强对流天气也呈现频发态势。全国共发生8次强对流天气过程。11-14日, 华北、黄淮等地遭遇雷暴大风、冰雹和短时强降水; 22-24日, 河北、江苏等地遭遇雷暴大风、冰雹和短时强降水, 南京江宁最大小时雨量达118.8毫米, 河北保定出现36米/秒的大风。</p>

    <h4>7月预计有1至2个热带气旋登陆或影响我国</h4>

    <p>预计7月, 东北、内蒙古中部、华北大部、华东北部局部和南部、华中南部、华南、西南地区东南部、西藏西部降水较常年同期偏多。其中黑龙江大部、吉林、辽宁、北京、天津、河北大部、福建南部、广东、广西、海南、云南东南部、西藏西部偏多2~5成。</p>

    <p>台风方面, 预计7月,台风数量接近常年到偏少。在西北太平洋和南海海域可能有2~4个热带气旋(中心风力 8级)生成, 接近常年同期(3.8)到偏少; 其中1~2个热带气旋登陆或影响我国, 登陆个数接近常年同期(1.8个)。</p>

    <p>专家提醒, 东北、内蒙古中部、华北大部、华东北部局部和南部、华中南部、华南、西南地区东南部、西藏西部等地, 应加强防范强降水等灾害性天气过程对生产生活的影响及可能引发的次生灾害。东南沿海需防御台风可能带来的强降水、大风和风暴潮灾害。</p>

    <p class="footer">本文来源 : 中国天气网</p>
</body>
</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
41
42
43
44
45
46
47
48
49
50
51

style.css 文件

/* 改变整个页面行间距、字体 */
body {
    font: 16px/28px 'Microsoft YaHei';
}
/* 让标题居中不加粗 */
h1 {
    text-align: center;
    font-weight: 400;
}
.gray {
    color: #666666;
    font-size: 12px;
    text-align: center;
}
/* 去掉链接默认的下划线 */
a {
    text-decoration: none;
}
/* 改变搜索框字体颜色和宽度 */
.search {
    color: #666;
    width: 170px;
}
/* 让按钮的字体加粗 */
.btn {
    font-weight: 700;
}
/* 所有段落首行缩进2个字的距离 */
p {
    text-indent: 2em;
}
/* 想要让图片居中对齐，则是让它的父亲p标签添加水平居中的代码 */
.pic {
    text-align: center;
}
/* 修改文章最好的小字 */
.footer {
    color: #888;
    font-size: 12px;
}
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

效果图

在这里插入图片描述

🌠调试工具

1. 打开调试工具

打开你的浏览器，按下F12键或者右击页面空白处➔检查

在这里插入图片描述

2. 使用调试工具

① Ctrl + 滚轮可以放大开发者工具代码大小
② 左边是 HTML 元素结构，右边是 CSS 样式
③ 右边 CSS 样式可以改变数值（左右箭头或者直接输入）和查看颜色
④ Ctrl + 0 复原浏览器大小
⑤ 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
⑥ 如果有样式，但是样式前面有黄色感叹号提示，则是样式属性书写错误

🧸这次的分享就到这里啦，继续加油哦^^
🍭有出错的地方欢迎在评论区指出来，共同进步，谢谢啦

相关阅读:
Mysql和ES、Redis数据同步方案汇总
 Linux操作系统 Vim编辑器基础操作指令
 C++多重、多层、分层继承
 【Java】 java | nacos | nacos使用注意事项
 2023浙沪地区MEM项目提前批面试申请最后时间表（8-11月）
QT之OpenGL 计算机图形学线性代数基本知识
 源码分析 – MyBatis Plus 多数据源踩坑
 Kafka3.0.0版本——消费者（Range分区分配策略以及再平衡）
PDF文档怎么变成链接发给别人
 全流量分析应用运行和访问情况
原文地址：https://blog.csdn.net/weixin_62511863/article/details/125599353

【前端】保姆级的CSS简介

阅读指南

🌠学习目标

🌠CSS 简介

1. HTML 的局限性

2. CSS-网页的美容师

3. CSS 语法规范

4. CSS 代码风格

🌠CSS 基础选择器

1. CSS 选择器的作用

2. 选择器分类

3. 标签选择器

4. 类选择器

5. id 选择器

6. 通配符选择器

7. 基础选择器总结

🌠CSS 字体属性

1. 字体系列

2. 字体大小

3. 字体粗细

4. 文字样式

5. 字体复合属性

6. 字体属性总结

🌠CSS 文本属性

1. 文本颜色

2. 对齐文本

3. 装饰文本

4.文本缩进

5. 行间距

6. 文本属性总结

🌠CSS 的引入方式

1. 内部样式表

2. 行内样式表

3. 外部样式表

4. CSS 引入方式总结

🌠综合案例

🌠调试工具

1. 打开调试工具

2. 使用调试工具