讲给后台程序员看的前端系列教程(17)——文本样式

最新推荐文章于 2023-04-29 16:20:05 发布

谷哥的小弟

最新推荐文章于 2023-04-29 16:20:05 发布

阅读量548

点赞数 1

分类专栏：讲给后台程序员看的前端系列教程文章标签： CSS样式文本样式 font

本文链接：https://blog.csdn.net/lfdfhl/article/details/100587874

版权

讲给后台程序员看的前端系列教程专栏收录该内容

63 篇文章 53 订阅

订阅专栏

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

在前端开发中经常需要对文本设定样式。故，在本节中专门讨论与文本相关的属性及其设置方式。

字体样式属性

CSS中常用字体样式属性如下：

font-size

font-size属性用于设置字号，常用单位为px

font-family

font-family 属性用于设置字体。常用字体有：微软雅黑，宋体，黑体等

font-weight

font-weight 属性用于设置字体粗细，其常用属性值如下：

normal：标准字符
bold：粗体字符
bolder：加粗字符
lighter：纤细字符
整数n*100：取值范围为100-900，值越大字体越粗

font-style

font-style 属性用于设置字体风格，其常用属性值如下：

normal：标准字体
italic：斜体字体
oblique：倾斜字体

书写顺序

我们可利用font对字体进行一系列的设置，基本语法如下：

选择器{font:font-style font-weight font-size font-family;}

在使用font属性时请务必按照该顺序书写，各个属性之间以空格隔开。

示例

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>fon属性</title>
		<style type="text/css">
			p {
				font: italic 25px "隶书";
				color: yellowgreen;
			}
		</style>

	</head>
	<body>
		<p>好雨知时节，当春乃发生。随风潜入夜，润物细无声。</p>
		<p>千里莺啼绿映江，水村山郭酒旗风。南朝四百八十寺，多少楼台烟雨中。</p>
		<p>本文作者：谷哥的小弟</p>
		<p>博客地址：http://blog.csdn.net/lfdfhl</p>
	</body>
</html>

效果如下：
在这里插入图片描述

文本外观属性

CSS中常用文本外观属性如下：

color

color 属性用于设置文本的颜色

text-decoration

text-decoration 属性用于设置文本的装饰效果，其常用属性值如下：

none：无装饰效果
underline：下划线
overline：上划线
line-through：删除线

text-align

text-align属性用于设置文本内容的对齐方式，其常用属性值如下：

left：左对齐(默认值)
right：右对齐
center：居中对齐

text-indent

text-indent属性用于设置首行文本的缩进，其常用单位为em。

文本属性示例

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本属性</title>
		<style type="text/css">
			.p1 {
				font-family: "微软雅黑";
				font-size: 16px;
				color: red;
			}

			.p2 {
				text-indent: 2em;
			}

			.p3 {
				text-indent: 50px;
			}
		</style>

	</head>
	<body>
		<p class="p1">段落1：这是正常显示的文本内容，即未设置段落1文本的首行缩进效果。</p>
		<p class="p2">段落2：使用text-indent:2em;设置段落2文本首行缩进2个字符的效果。</p>
		<p class="p3">段落3：使用text-indent:50px;设置段落3文本首行缩进50像素的效果。</p>
	</body>
</html>

效果如下：
在这里插入图片描述

综合示例

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本属性示例</title>
		<style type="text/css">
			h2 {
				color: red;
				text-align: center;
			}

			p {
				font-size: 16px;
				color: seagreen;
				text-align: center;
			}

		</style>
	</head>
	<body>
		<h2>山居秋暝</h2>
		<p>空山新雨后，天气晚来秋。</p>
		<p>明月松间照，清泉石上流。</p>
		<p>竹喧归浣女，莲动下渔舟。</p>
		<p>随意春芳歇，王孙自可留。</p>
	</body>
</html>