【CSS基础】基础选择器+字体文本相关样式

1.CSS基础选择器
- 1.1 标签选择器
- 1.2 类选择器
- 1.3 id选择器
- 1.4 通配符选择器
- 1.5 基础选择器总结
2.CSS字体样式
- 2.1 字体大小
- 2.2 字体粗细
- 2.3 字体样式（是否倾斜）
- 2.4 字体系列 font-family
- 2.5 字体font相关属性的连写
- 2.6 字体属性总结
3.CSS文本样式
- 3.1 文本缩进
- 3.2 文本水平对齐方式
- 3.3 文本修饰
- 3.4 行间距（行高）
- 3.5 文本颜色
- 3.6 小例子
4.CSS引入方式
5.综合案例

1.CSS基础选择器

1.1 标签选择器

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

语法：

标签名 {属性1: 属性值1;属性2: 属性值2;属性3: 属性值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>Document</title><style>/* 选择器 {} *//* 标签选择器 就是 以标签名命名的选择器 */p {color: red;}/* 标签选择器 选中所有的这个标签都生效css */</style>
</head>
<body><p>pppppppp</p><p>这个p是什么颜色呢</p><p>2222</p>
</body>
</html>

1.2 类选择器

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

CSS 语法：

.类名 {属性1: 属性值1;...
}

HTML 语法：

<div class="red">变红色</div>

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

作用：

通过类名，找到页面中所有带有这个类名的标签，设置样式

注意：

所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

<!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>Document</title><style>.red {color: red;}.size {font-size: 66px;}</style>
</head>
<body><!-- 类: 定义 和 使用才能生效 --><p>111</p><!-- 一个标签可以使用多个类名 , 需要空格隔开即可 --><p class="red size">222</p><div class="red">这个标签文字也要变红</div>
</body>
</html>

1.3 id选择器

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

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

语法：

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

注意：

所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签

id 选择器和类选择器的区别：

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

<!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>Document</title><style>/* 定义id选择器 */#blue {color: skyblue;}</style>
</head>
<body><div id="blue">这个div文字是蓝色的</div><p id="blue">111</p>
</body>
</html>

再次强调：同一 id 只能定义一次，同一 id 选择器也只能调用一次！（对于 CSS 修改样式来说，最好使用类选择器，id 选择器主要与后面的 JS 搭配使用）。

1.4 通配符选择器

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

语法：

* {属性1: 属性值1;...
}

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

// 利用通配符选择器清除所有的元素标签的内外边距，后期讲
* {margin: 0;padding: 0;
}

<!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>Document</title><style>* {color: red;}</style>
</head>
<body><div>div</div><p>pppp</p><h1>h1</h1><span>span</span><p>pppp</p><h2>h2</h2>
</body>
</html>

1.5 基础选择器总结

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

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

2.CSS字体样式

2.1 字体大小

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

p {font-size: 20px;
}

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>Document</title><style>p {font-size: 30px;}</style>
</head>
<body><!-- 默认字号是16 --><p>段落文字</p>
</body>
</html>

2.2 字体粗细

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

p {font-weight: bold;
}

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

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

<!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>Document</title><style>div {/* 加粗 */font-weight: 700;}h1 {/* 不加粗 */font-weight: 400;}</style>
</head>
<body><div>这是div</div><h1>一级标题</h1>
</body>
</html>

2.3 字体样式（是否倾斜）

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

p {font-style: normal;
}

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

注意： 平时我们很少给文字加斜体，反而要给斜体标签 (em、i) 改为不倾斜字体。

<!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>Document</title><style>div {/* 倾斜 */font-style: italic;}em {/* 正常的, 不倾斜 */font-style: normal;}</style>
</head>
<body><div>div文字</div><em>em</em>
</body>
</html>

2.4 字体系列 font-family

属性名： font-family

常见取值： 具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列

具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等……
字体系列：sans-serif、serif、monospace等……

渲染规则：

从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注意点：

如果字体名称中存在多个单词，推荐使用引号包裹
最后一项字体系列不需要引号包裹
网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

<!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>Document</title><style>div {/* font-family: 宋体; *//* 如果用户电脑没有安装微软雅黑, 就按黑体显示文字 *//* 如果电脑没有安装黑体, 就按任意一种非衬线字体系列显示 */font-family: 微软雅黑, 黑体, sans-serif;}</style>
</head>
<body><div>这是一个div标签</div>
</body>
</html>

2.5 字体font相关属性的连写

属性名： font (复合属性)

取值：

font : style weight size family;

省略要求：

只能省略前两个，如果省略了相当于设置了默认值

注意点：

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

<!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>Document</title><style>p {/* font-size: ;font-style: ;font-weight: ;font-family: ; *//* font: style   weight   size    字体; *//* font: italic 700 66px 宋体;font-style: normal; */font: 100px 微软雅黑;/* 一个属性冒号后面书写多个值的写法 -- 复合属性 */}</style>
</head>
<body><p>这是p标签</p>
</body>
</html>

2.6 字体属性总结

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

3.CSS文本样式

3.1 文本缩进

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

div {text-indent: 10px;
}

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

p {text-indent: 2em;
}

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>Document</title><style>p {/* text-indent: 50px; *//* 首行缩进2个字的大小 *//* 默认字号: 16px ; 32 *//* text-indent: 40px;font-size: 20px; *//* em: 一个字的大小 */text-indent: 2em;font-size: 40px;}</style>
</head>
<body><p>2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。</p>
</body>
</html>

3.2 文本水平对齐方式

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

div {text-align: center;
}

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

注意点：

如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

<!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>Document</title><style>h1 {/* text-align: left; *//* text-align: right; */text-align: center;}body {text-align: right;}</style>
</head>
<body><h1>新闻标题</h1><img src="./images/1.jpg" alt="">
</body>
</html>

水平居中方法总结 text-align : center

text-align : center 能让哪些元素水平居中？

文本
span标签、a标签
input标签、img标签

注意点：

如果需要让以上元素水平居中， text-align : center 需要给以上元素的父元素设置

3.3 文本修饰

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

div {text-decoration: underline;
}

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

注意点：

开发中会使用 text-decoration : none ; 清除a标签默认的下划线

<!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>Document</title><style>div {text-decoration: underline;}p {text-decoration: line-through;}h2 {text-decoration: overline;}a {text-decoration: none;}</style>
</head>
<body><div>div</div><p>ppp</p><h2>h2</h2><a href="#">我是超链接, 点呀</a>
</body>
</html>

3.4 行间距（行高）

作用： 控制一行的上下行间距

属性名： line-height

取值：

数字+px
倍数（当前标签font-size的倍数）

应用：

让单行文本垂直居中可以设置 line-height : 文字父元素高度
网页精准布局时，会设置 line-height : 1 可以取消上下间距

行高与font连写的注意点：

如果同时设置了行高和font连写，注意覆盖问题
font : style weight size/line-height family ;

<!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>Document</title><style>p {/* line-height: 50px; *//* 自己字号的1.5倍 *//* line-height: 1.5; *//* 66px 宋体 倾斜 加粗 行高是2倍 */font: italic 700 20px/2 宋体;}</style>
</head>
<body><p>2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析</p>
</body>
</html>

3.5 文本颜色

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

div {color: red;                             /*定义字体颜色*/  background-color: pink      /*定义背景颜色*/
}

表示方式	属性值
预定义的颜色值	red，green，blue，black，white，gray
十六进制	#FF0000，#FF6600，#29D794（每两位对应：#红R绿G蓝B）
RGB 代码	rgb(255, 0, 0) 或 rgb(100%, 0%, 0%)

注意： 开发中最常用的是十六进制。

3.6 小例子

内容垂直居中

<!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>Document</title><style>div {width: 552px;height: 400px;background-color: pink;/* background-color: green; */text-align: center;/* 文字是单行的 *//* 垂直居中技巧: 设置行高属性值 = 自身高度属性值 */line-height: 400px;font-size: 61px;}</style>
</head>
<body><div>文字</div>
</body>
</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>Document</title><style>div {width: 300px;height: 300px;background-color: pink;margin: 0 auto;}</style>
</head>
<body><div></div>
</body>
</html>

4.CSS引入方式

内嵌式： CSS 写在style标签中

提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中

<style type="text/css">div {color: red;font-size: 12px;}
</style>

外联式： CSS 写在一个单独的.css文件中

提示：需要通过link标签在网页中引入

<link rel="stylesheet" type="text/css" href="css文件路径">

属性	作用
`rel`	定义当前文档与被链接文档之间的关系，在这里需要指定为 “stylesheet”，表示被链接的文档是一个样式表文件
`type`	定被链接文档的 MIME 类型，该属性最常见的 MIME 类型是 “text/css”，该类型描述样式表，目前的浏览器已经支持省略 “type” 属性
`href`	定义所链接外部样式表文件的 URL，可以是相对路径，也可以是绝对路径

行内式： CSS 写在标签的style属性中

提示：不推荐使用，之后会配合js使用

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱
</div>

5.综合案例

<!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>Document</title><style>div {width: 800px;height: 600px;background-color: pink;margin: 0 auto;}h1 {text-align: center;}/* 类选择器,设置段落居中 */.center {text-align: center;}.color1 {color: #808080;}.color2 {color: #87ceeb;font-weight: 700;}a {text-decoration: none;}.suojin {text-indent: 2em;}</style>
</head>
<body><div><h1>Linux系统编程之守护进程、线程</h1><p class="center"><span class="color1"> 2022-9-05 18:24</span><span class="color2">Jay Chou</span><a href="#">原文链接</a></p><hr><p class="suojin">守护进程（Daemon Process），也就是通常说的Daemon(精灵)进程，是 Linux 中的后台服务进程，通常独立于控制终端并且周期性地执行某种任务或等待处理 某些发生的事件。一般采用以 d 结尾的名字。Linux 后台的一些系统服务进程，没有控制终端，不能直接和用户交互。不受用户登录、注销的影响，一直在运行着，他们都是守护进程。如：预读入缓输出机制的实现；ftp 服务器；nfs 服务器等。 创建守护进程，最关键的一步是调用 setsid 函数创建一个新的 Session，并成为 Session Leader。</p><p class="suojin">多个进程的集合就是进程组，也称之为作业。BSD 于 1980 年前后向 Unix 中增加的一个新特性。代表一个或多个进程的集合。每个进程都属于一个进程组。在waitpid函数和 kill 函数的参数中都曾使用到。操作系统设计的进程组的概念，是为了简化对多个进程的管理。</p><p class="suojin">线程是轻量级的进程（LWP：light weight process），在 Linux 环境下线程的本质仍是进程。在计算机上运行的程序是一组指令及指令参数的组合，指令按照既定的逻辑控制计算机运行。操作系统会以进程为单位，分配系统资源，可以这样理解，进程是资源分配的最小单位，线程是操作系统调度执行的最小单位。</p></div></body>
</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>Document</title><style>body {background-color: #f5f5f5;}.goods {width: 234px;height: 300px;background-color: #fff;/* 标签居中 */margin: 0 auto;/* 内容居中 */text-align: center;}img {width: 160px;}.title {font-size: 14px;line-height: 25px;}.info {font-size: 12px;color: #ccc;line-height: 30px;}.view {font-size: 14px;color: #ffa500;}</style>
</head>
<body><!-- div用来网页布局,一个界面可能使用无数次,原则:如果使用div,尽量使用类名控制样式 --><div class="goods"><img src="C:/Users/LH/Pictures/Jay/jay.jpg" alt=""><div class="title">周杰伦</div><div class="info">Jay Chou</div><div class="view">love you forever</div></div>
</body>
</html>