CSS入门4 文本样式

最新推荐文章于 2024-08-21 23:04:16 发布

Lexi_Alexander

最新推荐文章于 2024-08-21 23:04:16 发布

阅读量213

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/Lexi_Alexander/article/details/109057316

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

4、文本样式

1、文本样式简介

文本样式属性

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

2、首行缩进：text—indent

语法

text-index:像素值

说明
在css中，通常使用像素px作为单位
举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p
			{
				font-size: 14px;
				text-indent: 28px;
			}
		</style>
	</head>
	<body>
		<h3>安装jdk</h3>
		<p>Java要实现“编写一次，到处运行”的目标，就必须提供相应的Java运行环境，既运行Java程序的平台</p>
		<p>学习Java最好选用Java SE提供的Java软件开发工具箱jdk</p>
	</body>
</html>

运行结果：
在这里插入图片描述

3、水平对齐：text-align

语法

text-aligan:取值

说明

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

举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#p1{text-align: left;}
			#p2{text-align: center;}
			#p3{text-align: right;}
		</style>
	</head>
	<body>
		<p id="p1">窗前明月光（左对齐）</p>
		<p id="p2">疑似地上霜（居中对齐）</p>
		<p id="p3">举头望明月（右对齐）</p>
	</body>
</html>

运行结果：
在这里插入图片描述

4、文本修饰text-decoration

语法

text-decoration:取值;

说明
取出所有下划线效果：

text-decortation:none;

举例：去除超链接下划线效果

5、大小写:text-transform

语法
text-transform:取值;
说明
text-transform的取值有4个，如表所示：

属性值	说明
none	无转换（默认值）
uppercase	转换为大写
lowercase	转换为小写
none	无转换（默认值）
capitalize	只将每个英文单词的首字母转换为大写

举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#p1{text-transform: uppercase;}
			#p2{text-transform: lowercase;}
			#p3{text-transform: capitalize;}
		</style>
	</head>
	<body>
		<p id="p1">rome wat's built in a day.</p>
		<p id="p2">rome wat's built in a day.</p>
		<p id="p3">rome wat's built in a day.</p>
	</body>
</html>