『HTML&CSS』文本格式化

最新推荐文章于 2024-01-09 17:38:28 发布

爱喝可乐的炸鸡

最新推荐文章于 2024-01-09 17:38:28 发布

阅读量1.1k

点赞数

分类专栏：『HTML&CSS』文章标签：字体设置文本设置

本文链接：https://blog.csdn.net/sss_0916/article/details/102480229

版权

『HTML&CSS』专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本篇博客介绍一些文本格式相关的内容，如字体，行间距等相关的设置。

长度单位

首先，我们来了解一下CSS中的长度单位，单位一共有三个，分别是px（像素）、百分比、em：

px（像素）：像素是网页中使用最多的一个单位，一个像素相当于屏幕中的一个小点；
屏幕实际上就是由这些像素点构成的，例如分辨率为1920 × 1080的屏幕，就是横着1920个像素点，竖着1080个像素点，共1920 × 1080 = 2073600个像素点。

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>长度单位：px(像素)</title>
		<style type = "text/css">
			.c1 {
				width: 200px;
				height: 200px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="c1">
		</div>
	</body>
</html>

在这里插入图片描述

百分比：网页中也可以将长度设置为一个百分比的形式，这样浏览器就会根据其父元素的样式来计算该值；
使用百分比的好处是当父元素的属性值放生变化时，子元素也会按照比例发生改变；
创建自适应的页面时，经常使用百分比作为单位。

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>长度单位：百分比</title>
		<style type = "text/css">
			.c1 {
				width: 200px;
				height: 200px;
				background-color: green;
			}

			.c2 {
				width: 90%;
				height: 90%;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="c1">
			<div class="c2">
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

em：和百分比类似，它是相当于当前元素的字体大小来计算的，1em = 1font-size；
使用em时，当字体大小发生改变时，em也会随之变化，当设置字体相关样式时，经常会使用em。

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>长度单位：em</title>
		<style type = "text/css">
			.c1 {
				font-size: 20px;
				width: 10em;
				height: 10em;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="c1"></div>
	</body>
</html>

在这里插入图片描述

颜色表示

同样的，在CSS中，颜色也有三种表示方式：

可以直接使用颜色单词来表示。

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>颜色单位：使用颜色单词</title>
		<style type = "text/css">
			.c1 {
				width: 200px;
				height: 200px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="c1"></div>
	</body>
</html>

在这里插入图片描述

也可以使用RGB值来表示不同的颜色，所谓的RGB值指的是通过Red、Green、Blue三元色，通过这三种颜色的不同的浓度，来表示出不同的颜色；
例如：rgb(红色的浓度, 绿色的浓度, 蓝色的浓度)；
颜色的浓度需要一个0 ~ 255之间的值，255最大，0表示没有浓度；可以使用截屏工具查看某一块的RGB值；三个值全为0表示黑色，全为255表示白色。
浓度也可以采用一个百分数来设置，0% ~ 100%，最终也会转换成0 ~ 255，两种用法一样。

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>颜色单位：使用RGB值表示</title>
		<style type = "text/css">
			.c1 {
				width: 200px;
				height: 200px;
				background-color: rgb(0, 255, 0);
			}
		</style>
	</head>
	<body>
		<div class="c1"></div>
	</body>
</html>

在这里插入图片描述

也可以使用16进制RGB值来表示颜色，原理和上述RGB原理一样，只不过使用16进制数来代替，使用三组两位的16进制数来表示一个颜色；
语法：#00ff00，00表示最小0，ff表示最大255；
#00ff00可以简写为#0f0；

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>颜色单位：使用16进制RGB值表示</title>
		<style type = "text/css">
			.c1 {
				width: 200px;
				height: 200px;
				background-color: #00ff00;
			}
		</style>
	</head>
	<body>
		<div class="c1"></div>
	</body>
</html>

在这里插入图片描述

字体分类

网页中，将字体分为五大类：

serif（衬线字体），有笔锋的字体；
sans-serif（非衬线字体），横平竖直的字体；
monospace（等宽字体），写代码常用等宽字体；
cursive（草书字体）；
fantasy（虚幻字体）；

字体设置

对于字体的设置有很多：包括字体颜色，大小，字体粗细等等：

设置字体颜色：使用color属性可以设置字体颜色。

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>字体设置：字体颜色</title>
		<style type = "text/css">
			.c1 {
				color: green;
			}
		</style>
	</head>
	<body>
		<p class = "c1">
			路漫漫其修远兮，吾将上下而求索。
		</p>
	</body>
</html>

在这里插入图片描述

设置字体大小：默认为16px，font-size属性设置的并不是文字本身的大小；
在页面中，每个文字都是处在一个看不到的框中，我们设置的font-size，实际上设置的是框的高度，并不是字体的大小；
一般情况下，文字都要比这个框小一些，也有时候比框大，根据字体的不同，显示效果也不同。

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>字体设置：字体大小</title>
		<style type = "text/css">
			.c1 {
				color: green;
				font-size: 25px;
			}
		</style>
	</head>
	<body>
		<p class = "c1">
			路漫漫其修远兮，吾将上下而求索。
		</p>
	</body>
</html>

在这里插入图片描述

设置字体：使用font-family属性可以指定文字的字体；
当采用某种字体的时候，如果浏览器支持，则使用；否则使用默认字体；
该属性可以指定多个字体，多个字体之间使用逗号分隔，当采用多个字体时，浏览器会优先使用前边的字体，如果前边的字体浏览器不支持，则使用后面的；
浏览器使用的是计算机中的字体，如果计算机中有，则使用，如果没有就不用；
可以将字体设置为前面介绍的五大类字体中的某个，当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式；
一般会将字体大分类指定位font-family属性的最后一个属性值，兜底用。
查看当前计算机有哪些字体？

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>字体设置：字体</title>
		<style type = "text/css">
			.c1 {
				color: green;
				font-size: 25px;
				font-family: "华文彩云";
			}
		</style>
	</head>
	<body>
		<p class = "c1">
			路漫漫其修远兮，吾将上下而求索。
		</p>
	</body>
</html>

在这里插入图片描述

字体样式：使用font-style属性设置字体样式，有三个属性值：italic（以斜体形式显示），normal（默认值，正常显示），oblique（文字会以倾斜的效果显示）；
大部分浏览器都不会对倾斜和斜体做区分，也就是说我们设置italic和oblique，它们的效果往往是一样的，一般只使用italic。

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>字体设置：字体样式</title>
		<style type = "text/css">
			.c1 {
				color: green;
				font-size: 25px;
				font-family: "华文彩云";
				font-style: italic;
			}
		</style>
	</head>
	<body>
		<p class = "c1">
			路漫漫其修远兮，吾将上下而求索。
		</p>
	</body>
</html>

在这里插入图片描述

字体粗细：使用font-weight属性设置字体的粗细，可以设置多个属性值，如下：

该样式可以指定100 ~ 900中的9个值，但是计算机中没有这么多级别的字体，所以不能达到我们的效果，一般只使用normal和bold。

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>字体设置：字体粗细</title>
		<style type = "text/css">
			.c1 {
				color: green;
				font-size: 25px;
				font-family: "华文彩云";
				font-style: italic;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<p class = "c1">
			路漫漫其修远兮，吾将上下而求索。
		</p>
	</body>
</html>

在这里插入图片描述

设置小型大写字母：使用font-variant属性，属性值small-caps（文本以小型大写字母显示）；
小型大写字母：将所有的字母都以大写形式显示，但小写字母的大写比大写字母的大写要小一点。

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>字体设置：小型大写字母</title>
		<style type = "text/css">
			.c1 {
				color: green;
				font-size: 25px;
				font-family: "华文彩云";
				font-style: italic;
				font-weight: bold;
				font-variant: small-caps;
			}
		</style>
	</head>
	<body>
		<p class = "c1">
			路漫漫其修远兮，吾将上下而求索。Hello, World!
		</p>
	</body>
</html>

在这里插入图片描述

前面，我们介绍了很多字体的相关属性，但是我们发现，要设置一个字体需要很多个属性，太过于麻烦，如下图：
在这里插入图片描述
有没有什么方法，可以简写呢？既然这么说了，那肯定是有的。CSS中为我们提供了一个属性叫做font，使用该属性可以同时设置字体相关的所有样式：

语法示例：font: italic small-caps bold 25px ''华文彩云";
将字体的属性的值，同一写在font属性中，不同的值之间使用空格隔开；
使用font设置字体样式时，斜体，加粗，小型大写字母没有顺序要求，甚至可以不写，不写使用默认值；但是文字的大小和字体必须写，而且字体必须在最后一个，字体大小必须在倒数第二个；
使用font属性，性能也会比前面的写法好，有几个属性浏览器就要解析几次。

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>字体设置：font属性</title>
		<style type = "text/css">
			.c1 {
				color: green;
				font: italic small-caps bold 25px "华文彩云";
			}
		</style>
	</head>
	<body>
		<p class = "c1">
			路漫漫其修远兮，吾将上下而求索。Hello, World!
		</p>
	</body>
</html>

在这里插入图片描述

文本设置

文本设置也有很多，如：行间距设置，文本大小写，文本对齐，文本修饰，首行缩进等等：

设置行间距：CSS中并没有提供一个直接设置行间距的方式，只能通过设置行高来间接的设置行间距；行高越大，行间距越大，使用line-height来设置行高。
行高类似于我们上学时使用的单线本，单线本是一行一行的，线与线之间的距离就是行高；
网页中的文字实际上也是写在一个看不见的线中，而文字会默认在行高中垂直居中显示。
$行间距 = 行高 - 字体大小$ 。

ling-height可以接收的值：可以接收一个大小；也可以接收一个百分比，行高相当于字体的百分比；也可以接收一个正数，如：1、1.5，表示行高为字体的多少倍。

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>文本设置：设置行间距</title>
		<style type = "text/css">
			.c1 {
				color: green;
				font: small-caps bold 25px "楷体";
				/* 行间距 = 行高 - 字体大小 */
				line-height: 50px;
			}
		</style>
	</head>
	<body>
		<p class = "c1">
			夫何瑰逸之令姿，独旷世以秀群；表倾城之艳色，期有德以传闻。佩鸣玉以比洁，齐幽兰以争芬；淡柔情于俗内，负雅志于高云。悲晨曦之易夕，感人生之长勤。同一尽于百年，何欢寡而愁殷！褰朱帏而正坐，泛清瑟以自欣。送纤指之余好，攘皓袖之缤纷。瞬美目以流眄，含言笑而不分。
		</p>
	</body>
</html>

在这里插入图片描述

对于单行文本来说，可以将行高设置为和父元素高度一致，这样可以使单行文本在父元素中居中显示。

在font属性中也可以指定行高，语法如下：font: 30px/50px ''楷体'';，/后的50px表示行高，如果不写的话，使用默认值。
我们将前面代码略作调整，将line-height和font两行交换一下。

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>文本设置：设置行间距</title>
		<style type = "text/css">
			.c1 {
				color: green;
				/* 行间距 = 行高 - 字体大小 */
				line-height: 50px;
				font: small-caps bold 25px "楷体";
			}
		</style>
	</head>
	<body>
		<p class = "c1">
			夫何瑰逸之令姿，独旷世以秀群；表倾城之艳色，期有德以传闻。佩鸣玉以比洁，齐幽兰以争芬；淡柔情于俗内，负雅志于高云。悲晨曦之易夕，感人生之长勤。同一尽于百年，何欢寡而愁殷！褰朱帏而正坐，泛清瑟以自欣。送纤指之余好，攘皓袖之缤纷。瞬美目以流眄，含言笑而不分。
		</p>
	</body>
</html>

在这里插入图片描述
但是，看效果，行间距和前面差别很大，这是因为，font中并没有设置行高，所以使用了默认值，而这个默认值行高将前面设置的line-height值覆盖掉了。

设置文本大小写：使用text-transform属性来设置文本的大小写；
有以下几个属性值：none（默认值，不做任何处理）、capitalize（单词的首字母大写，通过空格来识别单词）、uppercase（所有的字母都大写）、lowercase（所有的字母都小写）。

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>文本设置：设置文本大小写</title>
		<style type = "text/css">
			.c1 {
				color: green;
				font: 25px "consolas";
				text-transform: capitalize;
			}

			.c2 {
				color: green;
				font: 25px "consolas";
				text-transform: uppercase;
			}

			.c3 {
				color: green;
				font: 25px "consolas";
				text-transform: lowercase;
			}
		</style>
	</head>
	<body>
		<p class = "c1">
			text-transform: capitalize; <br />
			It is not enough to be industrious, so are the ants. What are you industrious for? 
		</p>
		<p class = "c2">
			text-transform: uppercase; <br />
			It is not enough to be industrious, so are the ants. What are you industrious for?
		</p>
		<p class = "c3">
			text-transform: lowercase; <br />
			It is not enough to be industrious, so are the ants. What are you industrious for?
		</p>
	</body>
</html>

在这里插入图片描述

设置文本修饰：使用text-decoration属性设置，属性值有：none（默认值）、underline（下划线）、overline（上划线）、line-through（穿过文本的线，删除线）；
超链接的text-decoration默认值是underline，想要去掉下划线，将text-decoration的值设置为none即可。

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>文本设置：文本修饰</title>
		<style type = "text/css">
			.c1 {
				color: green;
				font: 25px "consolas";
				text-decoration: underline;
			}

			.c2 {
				color: green;
				font: 25px "consolas";
				text-decoration: overline;
			}

			.c3 {
				color: green;
				font: 25px "consolas";
				text-decoration: line-through;
			}

			#i1 {
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<p class = "c1">
			text-decoration: underline;
			It is not enough to be industrious, so are the ants. What are you industrious for? 
		</p>
		<p class = "c2">
			text-decoration: orveline;
			It is not enough to be industrious, so are the ants. What are you industrious for? 
		</p>
		<p class = "c3">
			text-decoration: line-through;
			It is not enough to be industrious, so are the ants. What are you industrious for? 
		</p>
		<a id = "i1"; href="#">这是一个超链接</a>
		<a id = "i2"; href="#">这是一个超链接</a>
	</body>
</html>

在这里插入图片描述

还可以使用属性letter-spacing指定字符间距，使用属性word-spacing指定单词间间距（设置空格的长度）。

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>文本设置：文本修饰</title>
		<style type = "text/css">
			.c1 {
				color: green;
				font: 25px "consolas";
				letter-spacing: 5px;
			}

			.c2 {
				color: green;
				font: 25px "consolas";
				word-spacing: 5px;
			}
		</style>
	</head>
	<body>
		<p class = "c1">
			letter-spacing: 5px; <br />
			It is not enough to be industrious, so are the ants. What are you industrious for? 
		</p>
		<p class = "c2">
			word-spacing: 5px; <br />
			It is not enough to be industrious, so are the ants. What are you industrious for? 
		</p>
	</body>
</html>

在这里插入图片描述

设置文本对齐：使用text-align属性设置文本对齐方式；
left（默认值，左对齐）、right（文本靠右对齐）、center（文本居中对齐）、justify（两端对齐，通过调整文本之间空格的大小来达到两端对齐的目的）。

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>文本设置：文本对齐</title>
		<style type = "text/css">
			.c1 {
				color: green;
				font: 25px "consolas";
			}

			.c2 {
				color: green;
				font: 25px "consolas";
				text-align: right;
			}

			.c3 {
				color: green;
				font: 25px "consolas";
				text-align: center;
			}
			.c4 {
				color: green;
				font: 25px "consolas";
				text-align: justify;
			}
		</style>
	</head>
	<body>
		<p class = "c1">
			text-align: left; <br />
			It is not enough to be industrious, so are the ants. What are you industrious for? 
		</p>
		<p class = "c2">
			text-align: right; <br />
			It is not enough to be industrious, so are the ants. What are you industrious for? 
		</p>
		<p class = "c3">
			text-align: center; <br />
			It is not enough to be industrious, so are the ants. What are you industrious for? 
		</p>
		<p class = "c4">
			text-align: justify; <br />
			It is not enough to be industrious, so are the ants. What are you industrious for? 
		</p>
	</body>
</html>

在这里插入图片描述

设置首行缩进：使用text-indent属性设置首行缩进；
给定一个正值时，向右侧缩进指定像素；给定一个负值，向左侧缩进指定像素。
向左侧缩进，可以隐藏内容，让用户看不到，但是搜索引擎可以看到。

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>文本设置：首行缩进</title>
		<style type = "text/css">
			.c1 {
				color: green;
				font: 25px "consolas";
				text-indent: 50px;
			}

			.c2 {
				color: green;
				font: 25px "consolas";
				text-indent: -50px;
			}
		</style>
	</head>
	<body>
		<p class = "c1">
			text-indent: 50px; <br />
			It is not enough to be industrious, so are the ants. What are you industrious for? 
		</p>
		<p class = "c2">
			text-indent: -50px; <br />
			It is not enough to be industrious, so are the ants. What are you industrious for? 
		</p>
	</body>
</html>