css之字体属性和文字属性

在这里插入图片描述

1. 字体属性

1.1 定义

字体属性（Css Fonts）包括：字体类型、大小、粗细、文字样式（如斜体）

1.2 字体类型

1.2.1 定义

字体类型就是：宋体、楷体这些。

css使用 font-famliy 来定义字体类型。

1.2.2 语法

<p font-family: 字体类型;>p>
<p font-family: 字体类型1, 字体类型2, 字体类型3;>p>
1
2

注意点：

不同的字体之间需要用 , 隔开
注意如果是字体类型是多个单词或者中文最好加一个引号
写了多字体后，在显示时会从前到后依次判定（即从字体类型1开始依次判定），直到选择到计算机拥有的字体。如果都没有的话，就用默认字体。所以我们应该尽量使用系统默认自带的字体，以保证在任何浏览器都能正确显示。

1.2.3 使用实例

html 文本（以下实例正常使用该文本）

<body>
    <p>你好呀，世界！p>
body>
1
2
3

单字体 css

<style>
    p {
        /* 字体类型font-family */
        font-family: '仿宋';
    }
style>
1
2
3
4
5
6

在这里插入图片描述

多字体 css（常用）

<style>
    p {
        /* 字体类型font-family */
        font-family: '自创字体','自创字体2','楷体';
    }
style>
1
2
3
4
5
6

在这里插入图片描述

自创字体什么的在我电脑是不存在的，所以只有楷体起作用了，字很小看上去也好像仿宋…

当我们去掉上面代码里的楷体，就是浏览器默认字体了。

在这里插入图片描述

我们把他们放在一起看，还是能看出很大区别的。

在这里插入图片描述

1.3 字体大小

1.3.1 定义

字体大小顾名思义就是：文字的大小。

css使用 font-size 来定义字体类型。

1.3.2 语法

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

注意点：

文字的绝对大小用一般用 px（像素，简单理解为文字的高度占多少个像素）来表示。
文字的相对大小用 em，它是相对于父元素的字体大小。
谷歌浏览器默认的文字大小为16px，不同浏览器默认文字大小可能不同，所以我们尽量要给文字设置具体的值，所以我们一般都会给 <body> 标签设置这个属性，来指定整个页面的字体大小。
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html），则使用浏览器默认样式。

1.3.3 使用实例

<style>
    p {
        font-size: 50px;
    }
style>
1
2
3
4
5

在这里插入图片描述

1.4 字体粗细

1.4.1 定义

字体粗细顾名思义就是：文字的粗细 ~~废话文学~~

css使用 font-weight 来定义字体粗细。

1.4.2 语法

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

属性值	描述
normal	默认值（正常样式，不加粗）
bold	粗体
100-900	400 = normal，700 = bold，这个是纯数字不带任何单位

注意点：

属性值100-900不带任何单位

1.4.3 使用实例

加粗

<style>
    p {
        font-weight: 700;
    }
style>
1
2
3
4
5

在这里插入图片描述

1.5 文字样式

1.5.1 定义

文字样式包括主要指的是斜体和标准字体。

css使用 font-style 来定义字体粗细。

1.5.2 语法

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

属性值	描述
normal	默认值，浏览器会显示标准的字体样式
italic	斜体

注意点：

平常一般不给文字加斜体，一般会把倾斜标签（em、i）改为标准字体。

1.5.3 使用实例

斜体

<style>
    p {
        font-style: italic;
    }
style>
1
2
3
4
5

在这里插入图片描述

1.6 复合属性

1.6.1 定义

我们发现如果我们要对字体属性进行设置实在太麻烦了，调个大小需要 font-size，调个粗细要 fone-weight…

所以这里出现了字体属性的复合属性 font，将这些属性融合在一个属性中。

1.6.2 语法

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

注意点：

使用 font 属性，必须按照以上顺序书写，不能更换，各属性间以空格隔开。
必须要用 font-size 和 font-family 这两个属性，否则 font 属性不会起作用。

1.6.3 使用实例

要求：对一段文本（文本内容：你好呀，世界！）设置字体属性（字体大小为30px，字体类型为仿宋，字体加粗并倾斜）

复合属性 font

在这里插入图片描述

有些小伙伴可能会说，这个复合属性的顺序好难记，其实不用担心。

熟能生巧，用久了就知道了。
即使忘记，我们仍然可以查阅手册。
vscode 它代码提示已经提醒我们了。

在这里插入图片描述

2. 文本属性

2.1 定义

文本属性（Css Text）主要定义文字外观，字体属性主要定义的是文字的结构。

文本属性包括：文本颜色、文本对齐、文本装饰、文本缩进、行间距等。

2.2 文本颜色

2.2.1 定义

文本的颜色由 color 属性来定义。

2.2.2 语法

p {
	color: red;
}
1
2
3

颜色表示	属性值
单词	red、black、blue等单词
十六进制	#ff0000，#00ff00，#0000ff
RGB	rgb(255,255,0)或rgb(100%,0,0)

RGB 就是：光学三原色（红 red、绿 green、蓝 blue），每个颜色可以使用0-255之间的数字来表达。

而十六进制表示就是将 rgb 的每个颜色的值转化成十六进制，所以十六进制在六位的情况下，每两位表示其中一个颜色分量的值。即 #ff0000 = rgb(255,0,0)，并且如果16进制中1和2，3和4，5和6位相同的话是可以简写的，比如 #ff0000 简写为 #f00

2.2.3 使用实例

还是熟悉的 html

<body>
    <p>你好呀，世界！p>
body>
1
2
3

文本颜色

<style>
    p {
        /* 文本颜色color */
        color: red;
    }
style>
1
2
3
4
5
6

在这里插入图片描述

2.3 文本对齐

2.3.1 定义

文本对齐这边是设置元素的文本内容水平对齐方式，用 text-align 这个属性来定义。

2.3.2 语法

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

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

2.3.3 使用实例

文本对齐方式

<style>
    p {
        /* 文本水平对齐text-align */
        text-align: center;
    }
style>
1
2
3
4
5
6

在这里插入图片描述

2.4 文本装饰

2.4.1 定义

文本装饰如下划线，删除线等，用 text-decoration 属性定义。

2.4.2 语法

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

属性值	描述
none	没有装饰线（默认，常用）
underline	下划线（常用）
overline	上划线（不常用）
line-through	删除线（不常用）

2.4.3 使用实例

下划线

<style>
    p {
        /* 文本装饰下划线text-decoration */
        text-decoration: underline;
    }
style>
1
2
3
4
5
6

在这里插入图片描述

2.5 文本缩进

2.5.1 定义

文本缩进一般用于段落的首行缩进，用 text-indent 来表示，如图所示：

在这里插入图片描述

2.5.2 语法

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

注意点

可以使用单位 px，但这样无法保证文字缩进就是自己想要的字符数。
一般使用相对单位 em，1em 表示是当前元素1个文字的大小，如果当前元素没有设置，就会按照父元素的1个文字大小。

2.5.3 使用实例

html

<body>
    <p>你好呀，世界！p>
    <p>中国古建筑单个建筑比起其他宗教建筑来说，确实相对低矮，比较平淡，但建筑群整体却是结构方正、气势磅礴，依靠整体的布局配合取胜，由简单的基本单位组成了复杂的结构。 而中国古建筑群在严格对称中，却仍有变化，形成了多样却又统一的美。p>
body>
1
2
3
4

首行缩进两个字符

<style>
    p {
        /* 字体大小 */
        font-size: 20px;
        /* 文本缩进 */
        text-indent: 2em;
    }
style>
1
2
3
4
5
6
7
8

在这里插入图片描述

2.6 行间距

2.6.1 定义

行间距（行高）可以控制每一行文字与上下行文字之间的距离。

行间距 = 上间距 + 文本高度 + 下间距

在这里插入图片描述

2.6.2 语法

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

2.6.3 使用实例

行间距为 50px 且字体大小为 20px

<style>
    p {
        font-size: 20px;
        line-height: 50px;
    }
style>
1
2
3
4
5
6

由行间距 = 上间距 + 文本高度 + 下间距，由于行间距是 50px，文本高度（文字的高度基本等同于字体大小）是 20px，得到上下间距和应该是 30px，上下间距和就是行与行的距离。

所以：行与行的距离 = 行间距 - 文本高度

在这里插入图片描述

3. 综合案例

3.1 要求

在这里插入图片描述

3.2 文本准备

北方高温明日达鼎盛 京津冀多地地表温度将超60℃
2019-07-03 16:31:47 来源: 中国天气网　 

中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。

气温41.4℃！地温66.5！北京强势迎七月首个高温日


今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。

在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。

明日热度再升级！京津冀携手冲击38℃+
中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。 明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。

不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）

本文来源：中国天气网 责任编辑：刘京_NO5631
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3.3 图片准备

pic.jpeg

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>Documenttitle>
    <style>
        body {
            font: 16px/28px 'Microsoft YaHei';
        }

        h1 {
            font-weight: normal;
            text-align: center;
        }

        .search {
           color: #666;
           width: 170px;
       }

        button {
            font-weight: 700;
        }

        a {
            text-decoration: none;
        }

        p {
            text-indent: 2em;
        }

        .gray {
            color: #888888;
            font-size: 12px;
            text-align: center;
        }

        .pic {
            text-align: center;
        }

        .footer {
            color: #888888;
            font-size: 12px;
        }

    style>
head>
<body>
    
    <h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃h1>

    
    <div class="gray"> 
        2019-07-03 16:31:47 来源:<a href="#">中国天气网a>   
        <input type="text" value="请输入查询条件..." class="search"> <button>搜索button>
    div> 

    

    <hr/>

    
    <p>
        中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。
    p>

       
    <h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日h4>

    
    <div class="pic">
        <img src="./img/pic.jpeg">
    div>  

    
    <p>
        今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。
    p>
    <p>
        在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。
    p>

    
    <h4>明日热度再升级！京津冀携手冲击38℃+h4>

    
    <p>
        中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。 明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。
    p>
    <p>
        不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）
    p>

    <p class="footer">本文来源：中国天气网 责任编辑：刘京_NO5631p>
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

本文主要学习黑马程序员pink老师的视频

如有错误，敬请指正，欢迎交流🤝，谢谢♪(･ω･)ﾉ

相关阅读:
4604. 集合询问
 idea Plugins 搜索不到插件
 模板学堂丨DataEase用户操作日志分析大屏
 2023华为HCIA+HCIP最全Datacom题库解析
 yolov5训练与模型量化
 9.1.3 定点数类型
 echarts进阶配置
 打破信息获取的界限：灵雀云推出自主研发智能文档机器人KnowledGenie
必备表格软件-FineReport正则表达式简介
 面试官：bind、call、apply 区别？如何实现一个bind?
原文地址：https://blog.csdn.net/m0_51302822/article/details/127620793

css之字体属性和文字属性

文章目录

1. 字体属性

1.1 定义

1.2 字体类型

1.2.1 定义

1.2.2 语法

1.2.3 使用实例

1.3 字体大小

1.3.1 定义

1.3.2 语法

1.3.3 使用实例

1.4 字体粗细

1.4.1 定义

1.4.2 语法

1.4.3 使用实例

1.5 文字样式

1.5.1 定义

1.5.2 语法

1.5.3 使用实例

1.6 复合属性

1.6.1 定义

1.6.2 语法

1.6.3 使用实例

2. 文本属性

2.1 定义

2.2 文本颜色

2.2.1 定义

2.2.2 语法

2.2.3 使用实例

2.3 文本对齐

2.3.1 定义

2.3.2 语法

2.3.3 使用实例

2.4 文本装饰

2.4.1 定义

2.4.2 语法

2.4.3 使用实例

2.5 文本缩进

2.5.1 定义

2.5.2 语法

2.5.3 使用实例

2.6 行间距

2.6.1 定义

2.6.2 语法

2.6.3 使用实例

3. 综合案例

3.1 要求

3.2 文本准备

3.3 图片准备

3.4 代码