CSS——＞文本样式

省级干饭王

于 2021-05-12 17:35:47 发布

阅读量191

点赞数 1

分类专栏： css 笔记

本文链接：https://blog.csdn.net/qq_55016379/article/details/116716281

版权

笔记同时被 2 个专栏收录

94 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

文本样式

文本样式简介

文本样式属性

属性	说明
text-indent	首行缩进
text-align	水平对齐
text-decoration	文本修饰
text-tranform	大小写转换
text-height	行高
letter-spacing , word-spacing	字母间距、此间距

首行缩进：text-indent

语法结构：

text-indent:像素值

属性说明：

建议使用像素作为单位

代码实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首行缩进</title>
		<style>
			p{font-size: 14px; text-indent: 28px;}
		</style>
	</head>
	<body>
		<h3>《临江仙》</h3>
					<p>
			滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。
		　　白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。
					</p>
	</body>
</html>

建议使用像素（px）作为单位

中文段落一般首行需要缩进两个字的空间，想实现这种效果，将text-indent值应该是font-size的两倍

水平对齐

语法结构：

text-align:取值

text-align属性：

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

text-align属性不仅仅可以对文字使用，也可以对图片使用

文本修饰

在CSS中，我们使用text-decoration属性来定义文本的修饰效果

语法结构：

text-decoration:取值

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本修饰</title>
		<style>
			#p1{text-decoration: none;}
			#p2{text-decoration: underline;}
			#p3{text-decoration: line-through;}
			#p4{text-decoration: overline;}
			a{text-decoration: none;}
		</style>
	</head>
	<body>
		<p id="p1">这是没有下划线</p>
		<p id="p2">这是下划线</p>
		<p id="p3">这是中划线</p>
		<p id="p4">这是定划线</p>
		<!--处理超链接下划线的方法-->
		<a href="demo01.html">《临江仙》</a>
	</body>
</html>

*text-decoration属性：

属性值	说明
none	去除所有的划线效果
underline	下划线
line-through	中划线
overline	上划线

大小写：text-transform

text-transform属性来实现将文本进行大小写转换

语法结构：

text-transform

text-transform属性

属性值	说明
none	无转换
uppercase	转换为大写
lowercase	转换为小写
capitalize	只将每个应为单词的首字母转换成大写

代码实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大小写</title>
		<style>
			#p1{text-transform: none;}
			#p2{text-transform: uppercase;}
			#p3{text-transform: lowercase;}
			#p4{text-transform: capitalize;}
		</style>
	</head>
	<body>
		<p id="p1">rome was't built in a day</p>
		<p id="p2">rome was't built in a day</p>
		<p id="p3">rome was't built in a day</p>
		<p id="p4">rome was't built in a day</p>
	</body>
</html>

行高：line-height

行高指的是一行的高度，行间距指的是两行文本之间的距离，两者是不同的概念

间距：letter-spacing、 word-spacing

字间距：letter-spacing

语法结构：文本样式

letter-spacing:像素值;

注意：对于英文，这里的字指的是每个英文字母，对于中文，这里的字就是字

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>间距</title>
		<style>
			#p1{letter-spacing: 0px}
			#p2{letter-spacing: 3px;}
			#p3{letter-spacing: 5px;}
			#p4{word-spacing: 0px;}
			#p5{word-spacing: 3px;}
			#p6{word-spacing: 5px;}
		</style>
	</head>
	<body>
		<div>
		<p id="p1">rome was't built in a day.罗马不是一天建成的</p>
		<p id="p2">rome was't built in a day.罗马不是一天建成的</p>
		<p id="p3">rome was't built in a day.罗马不是一天建成的</p>
		<div>
		<hr/>
		<div>
			<p id="p4">rome was't built in a day.罗马不是一天建成的</p>
			<p id="p5">rome was't built in a day.罗马不是一天建成的</p>
			<p id="p6">rome was't built in a day.罗马不是一天建成的</p>
		</div>
	</body>
</html>

词间距：word-spacing

这里的词就是指的是英文单词，所有这个属性是对于英文单词而言的

语法结构：

word-spacing:像素值;

省级干饭王

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS——＞文本样式

文本样式文本样式简介文本样式属性属性说明text-indent首行缩进text-align水平对齐text-decoration文本修饰text-tranform大小写转换text-height行高letter-spacing , word-spacing字母间距、此间距首行缩进：text-indent语法结构：text-indent:像素值属性说明：建议使用像素作为单位代码实例:<!DOCTYPE html&gt
复制链接

扫一扫