Web开发——文字样式

TSUKI_Yu

已于 2022-10-23 17:02:30 修改

阅读量2.9k

点赞数 21

分类专栏：前端文章标签：前端 css

于 2022-10-23 17:00:49 首次发布

本文链接：https://blog.csdn.net/TSUKI_Yu/article/details/127354750

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

由于Web是HTML文档的集合体，有动态的元素、静态的元素、功能展示的元素，它们的呈现不能够是杂乱无章的，这就需要对各种文字样式进行排版。

排版是对文本样式进行各种操作（例如改变文本的颜色、字符间距、行高、文字对齐方式等，并需实现文本缩进、字体装饰等内容）。

· 文本样式：

一、color

color属性规定文本的颜色。

这个颜色还会应用到元素的所有边框，除非被border-color或另外某个边框颜色属性覆盖。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="文本颜色">
<title>文本颜色</title>
<style type="text/css">
body{ 
	color:#015B00;		/*网页字体颜色*/
}
p{ 
	width:250px; 
	height:20px; 
	font-size:12px;
	
}
</style>
</head>

<body>
	<p style="color:red">轻轻的我走了，正如我轻轻的来；</p>
	<p style="color:#F00">我轻轻的招手，作别西天的云彩。</p>
	<p style="color:rgb(33,119,199)">那河畔的金柳，是夕阳中的新娘；</p>
	<p style="color:inherit">波光里的艳影，在我的心头荡漾。</p>
</body>
</html>

二、text-indent

text-indent属性规定文本块中首行文本的缩进。

该属性值可以为像素值、百分比或相对值em，也可以为正值或负值，如果使用负值，那么首行会被缩进到左边。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="文本缩进">
<title>文本缩进</title>
<style type="text/css">
body{ 
	color:#015B00; 
	margin:50px;
}
p{ 
	width:250px; 
	height:20px; 
	font-size:12px;
	
}
</style>
</head>
<body>
	<p style="text-indent:24px;">轻轻的我走了，正如我轻轻的来；</p>
	<!--当前段落字体大小的3倍-->
	<p style="text-indent:3em;">我轻轻的招手，作别西天的云彩。</p>
	<p style="text-indent:3%;">那河畔的金柳，是夕阳中的新娘；</p>
	<p style="text-indent:-24px;">波光里的艳影，在我的心头荡漾。</p>
</body>
</html>

三、line-height

line-height属性用来设置行间的距离（行高）。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="行高">
<title>行高</title>
<style type="text/css">
p {
	width:200px;
	height:100%;
	margin:0 auto;
	font-size:12px;
}
.p1 {
	line-height:22px;
	background:#0CF;
}
.p2 {
	line-height:4;
	background:#C9F;
}
.p3 {
	line-height:250%;
	background:#F93;
}
.p4 {
	line-height: normal;
	background:#ccc;
}
</style>
</head>

<body>
	<p class="p1">轻轻的我走了，正如我轻轻的来；</p>
	<p class="p2">我轻轻的招手，作别西天的云彩。</p>
	<p class="p3">那河畔的金柳，是夕阳中的新娘；</p>
	<p class="p4">波光里的艳影，在我的心头荡漾。</p>
</body>
</html>

四、letter-spacing

letter-spacing属性用来定义字符间的空白大小（字符间距）。

该属性定义了在文本字符框之间插入多少空间，由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔，normal就相当于值为0。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="字母间隔">
<title>字母间隔</title>
<style type="text/css">
p {
	width:400px;
	height:100%;
	font-size:12px;
}
.p1 {
	letter-spacing:normal;
}
.p2 {
	letter-spacing:1px;
}
.p3 {
	letter-spacing:3px;
}
</style>
</head>

<body>
	<h3>see you again</h3>
	<p class="p1">It's been a long day without you my friend</p>
	<p class="p2">It's been a long day without you my friend</p>
	<p class="p3">It's been a long day without you my friend</p>
	<h3>再别康桥</h3>
	<p class="p1">我轻轻的招手，作别西天的云彩。</p>
	<p class="p2">那河畔的金柳，是夕阳中的新娘；</p>
	<p class="p3">波光里的艳影，在我的心头荡漾。</p>
</body>
</html>

五、text-align

text-align属性规定元素中文本的水平对齐方式。

该属性通过指定行框与某点对齐，来设置块级元素内文本的水平对齐方式。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="水平对齐">
<title>水平对齐</title>
<style type="text/css">
p {
	width:200px;
	height:100%;
	line-height:18px;
	margin:0 auto;
	font-size:12px;
}
	
.p1 {
	text-align:left;
}
.p2 {
	text-align:center;
}
.p3 {
	text-align:right;
}
</style>
</head>

<body>
	<p class="p1">轻轻的我走了，正如我轻轻的来；</p>
	<p class="p2">我轻轻的招手，作别西天的云彩。</p>
	<p class="p3">那河畔的金柳，是夕阳中的新娘；</p>
	<p>波光里的艳影，在我的心头荡漾。</p>
</body>
</html>

六、text-decoration

text-decoration属性规定添加到文本的修饰，修饰的颜色由“color”属性设置。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="水平对齐">
<title>文字装饰</title>
<style type="text/css">
p {
	width:200px;
	height:100%;
	line-height:22px;
	font-size:12px;
}
.p1 {
	text-decoration:underline;
}
.p2 {
	text-decoration:overline;
}
.p3 {
	text-decoration:line-through;
}
.p4 {
	text-decoration:blink;
}
</style>
</head>

<body>
<h3>再别康桥</h3>
<p class="p1">轻轻的我走了，正如我轻轻的来；</p>
<p class="p2">我轻轻的招手，作别西天的云彩。</p>
<p class="p3">那河畔的金柳，是夕阳中的新娘；</p>
<p class="p4">波光里的艳影，在我的心头荡漾。</p>
</body>
</html>

七、text-transform

text-transform属性用来对文本的大小写进行转换处理。该属性会改变元素中的字母大小写，而不管源文本的大小写。如果值为capitalize，则要对某些字母大写，但是并没有明确定义如何确定哪些字母要大写，这取决于浏览器如何识别出各个“词”。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="字符转换">
<title>字符转换</title>
<style type="text/css">
p {
	width:400px;
	height:100%;
	font-size:12px;
}
.p1 {
	text-transform:uppercase;
}
.p2 {
	text-transform:lowercase;
}
.p3 {
	text-transform:capitalize;
}
</style>
</head>

<body>
	<h3>see you again</h3>
	<p class="p1">It's been a long day without you my friend</p>
	<p class="p2">It's been a long day without you my friend</p>
	<p class="p3">It's been a long day without you my friend</p>
</body>
</html>

八、white-space

white-space属性设置如何处理元素内的空白。该属性声明建立布局过程中如何处理元素中的空白符，其中值pre-wrap和pre-line是CSS2.1中新增的。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="元素空白处理">
<title>元素空白处理</title>
<style type="text/css">
p {
	width:150px;
	height:100%;
	line-height:22px;
	font-size:12px;
		}
.p1 {
	white-space: nowrap;
}
.p2 {
	white-space: pre-wrap;
}
.p3 {
	white-space: pre-line;
}
</style>
</head>

<body>
	<h3>再别康桥</h3>
	<p class="p1">轻轻的我走了，          正如我轻轻<br>的来；</p>
	<p class="p2">我轻轻的招手，     作别西天的云彩 。</p>
	<p class="p3">那河畔的金柳，     是夕阳中的新娘；</p>
	
</body>
</html>

九、word-spacing

word-spacing属性用来增加或减少单词（英文）间的空白（即字间隔）。针对这个属性，“字”定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔，normal就等同于设置为0，允许指定负长度值，这会让字之间挤得更紧。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="文字间隔">
<title>文字间隔</title>
<style type="text/css">
p {
	width:400px;
	height:100%;
	font-size:12px;
}
.p1 {
	word-spacing:normal;
}
.p2 {
	word-spacing:2px;
}
.p3 {
	word-spacing:6px;
}
</style>
</head>

<body>
	<h3>see you again</h3>
	<p class="p1">It's been a long day without you my friend</p>
	<p class="p2">It's been a long day without you my friend</p>
	<p class="p3">It's been a long day without you my friend</p>
	<h3>再别康桥</h3>
	<p class="p1">我轻轻的招手，作别西天的云彩。</p>
	<p class="p2">那河畔的金柳，是夕阳中的新娘；</p>
	<p class="p3">波光里的艳影，在我的心头荡漾。</p>
</body>
</html>

十、first-letter

first-letter属性用来实现文本首字下沉效果，此伪对象仅作用于块对象。 :first-letter选择器用来指定元素第一个字母的样式。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="首字下沉">
<title>首字下沉</title>
<style type="text/css">
p {
	width:200px;
	height:200px;
	font-size:12px;
}
p:first-letter {
	color:red;
	font-size:24px;
	float:left;
}
</style>
</head>

<body>
<p>轻轻的我走了，正如我轻轻的来；我轻轻的招手，作别西天的云彩。那河畔的金柳，是夕阳中的新娘；波光里的艳影，在我的心头荡漾。</p>
</body>
</html>

· 字体样式

一、font-family

font-family规定元素的字体系列。

font-family可以把多个字体名称作为一个“回退”机制。

在CSS中，有两种不同类型的字体系列。通用字体系列：拥有相似外观的字体系统组合。

特定字体系列：具体的字体系列（如黑体、微软雅黑等）。

除了各种特定的字体系列外，CSS定义了5种通用字体系列，分别是Serif字体、Sans-serif字体、Monospace字体、Cursive字体、Fantasy字体。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="字体系列">
<title>字体系列</title>
<style type="text/css">
p {
	width:400px;
	height:100%;
	line-height:22px;
	font-size:12px;
}
.p1 {
	font-family: "宋体";
}
.p2 {
	font-family: "微软雅黑";
}
.p3 {
	font-family: "黑体";
}
.p4 {
	font-family:"微软雅黑", "宋体";
}
.p5 {
	font-family:"Arial Black";
}
.p6 {
	font-family:Georgia;
}
.p7 {
	font-family: "Microsoft YaHei UI", "Arial Unicode MS", Calibri;
} 
</style>
</head>

<body>
<h3>再别康桥</h3>
<p class="p1">轻轻的我走了，正如我轻轻的来；</p>
<p class="p2">我轻轻的招手，作别西天的云彩。</p>
<p class="p3">那河畔的金柳，是夕阳中的新娘；</p>
<p class="p4">波光里的艳影，在我的心头荡漾。</p>
<h3>see you again</h3>
<p class="p5">It's been a long day without you my friend</p>
<p class="p6">It's been a long day without you my friend</p>
<p class="p7">It's been a long day without you my friend</p>
</body>
</html>

二、font-size

font-size属性用来定义文本的大小。

该属性值可以为绝对值或相对值。绝对值是将文本设置为指定的大小，此时不允许用户在所有浏览器中改变文本大小（不利于可用性），绝对大小在确定了输出的物理尺寸时很有用。相对值是相对于周围的元素来设置大小，允许用户在浏览器改变文本大小。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="字体大小">
<title>字体大小</title>
<style type="text/css">
body {
	font-size:12px;
}
p {
	width:400px;
	height:100%;
	line-height:22px;
}
.p1 {
	font-size:12px;
}
.p2 {
	font-size:14px;
}
.p3 {
	font-size:1.5em;
}
.p4 {
	font-size:180%;
}
</style>
</head>

<body>
	<h3>再别康桥</h3>
	<p class="p1">轻轻的我走了，正如我轻轻的来；</p>
	<p class="p2">我轻轻的招手，作别西天的云彩。</p>
	<p class="p3">那河畔的金柳，是夕阳中的新娘；</p>
	<!--相对于父容器中的字体大小的180%-->
	<p class="p4">波光里的艳影，在我的心头荡漾。</p>
</body>
</html>

三、font-weight

font-weight属性用来定义字体的粗细。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="字体加粗">
<title>字体加粗</title>
<style type="text/css">
body {
	font-size:12px;
	font-weight:bold;
}
p {
	width:400px;
	height:100%;
	line-height:22px;
}
h3 {
	font-weight:normal;
}
.p1 {
	font-weight:bold;
}
.p2 {
	font-weight:inherit;
}
.p3 {
	font-weight:100;
}
.p4 {
	font-weight:600;
}
</style>
</head>
<body>
	<h3>see you again</h3>
	<p class="p1">It's been a long day without you my friend</p>
	<p class="p2">It's been a long day without you my friend</p>
	<p class="p3">It's been a long day without you my friend</p>
	<p class="p4">It's been a long day without you my friend</p>
</body>
</html>

四、font-style

font-style属性用来定义字体的风格，该属性值有三种：normal、italic、oblique。

normal：默认值，对文本不做任何改动。

italic：定义文本斜体显示。斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。

oblique：定义文本倾斜显示。倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 文字样式">
<meta content="字体风格">
<title>字体风格</title>
<style type="text/css">
body {
	font-style:oblique;
}
p {
	width:400px;
	height:100%;
	line-height:22px;
}
.p1 {
	font-style:normal;
}
.p2 {
	font-style:italic;
}
.p3 {
	font-style:inherit;
}
</style>
</head>

<body>
	<h3>再别康桥</h3>
	<p class="p1">轻轻的我走了，正如我轻轻的来；</p>
	<p class="p2">我轻轻的招手，作别西天的云彩。</p>
	<p class="p3">那河畔的金柳，是夕阳中的新娘；</p>
	<p class="p4">波光里的艳影，在我的心头荡漾。</p>
</body>
</html>