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

BillySturate

已于 2022-11-11 09:42:53 修改

阅读量1k

点赞数 3

分类专栏： CSS+HTML+JavaScript 文章标签： css css3 html

于 2022-09-12 18:23:40 首次发布

本文链接：https://blog.csdn.net/qq_59084325/article/details/126820599

版权

CSS+HTML+JavaScript 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

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>