6 CSS文本属性

1 text-decoration

属性值：

image

<style type="text/css">
	body{
		text-decoration: line-through;
	}
</style>

// 使用text-decoration可以设置文本内容的装饰线条，正常的文本是没有线条的，常用的值有none，underline，overline，line-through四种。

看图：

image


2 text-indent

文本缩进：默认一个文字是16px

如果自己设置字体大小为20px，那么文本缩进就是40px

<head>
	<meta charset="utf-8">
	<title>文本属性</title>
	<style type="text/css">
		p{
			text-indent: 40px;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<p>
		在人类漫长的历史长河中,推动社
		会向前的从不会是那些甘于平凡的
		多数人,相反,他们往往都是一群
		特立独行桀骜不驯的疯子!这一群
		疯子中有位传奇的人物,他颠覆性
		地将人文与科技完美融合,极大地
		改变了人类计算机领域,改变了人
		们的生活方式，其一手创建的计算
		机公司到如今仍是手机行业的传奇
		没错!他就是乔布斯!
	</p>

</body>

如果想要随着字体大小变化，首行自动缩进那么就用到em

<head>
	<meta charset="utf-8">
	<title>文本属性</title>
	<style type="text/css">
		p{
			text-indent: 2em;  /*自动计算font-size的字体大小缩进*/
			font-size: 20px;
		}
	</style>
</head>

3 line-height

行高行与行距离的设置；字体行高即字体最底端与字体内部顶端之间的距离。值可以是normal、px、number、%。

行高 = 字体大小 + 上半行距 + 下半行距

line-height: 60px; 行高

letter-spacing: 5px; 字与字的间距，只对中文

word-spacing: 10px; 单词与单词之间的距离，只对单词

<head>
	<meta charset="utf-8">
	<title>文本属性</title>
	<style type="text/css">
		p{
			text-indent: 2em;
			font-size: 20px;
			line-height: 40px;
            letter-spacing: 5px;
			word-spacing: 10px;
		}
		div{
			line-height: 60px;
			background-color: blue;  /*背景颜色 红色*/
		}
	</style>
</head>
<body>
	<p>
		hello world在人类漫长的历史长河中,推动社
		会向前的从不会是那些甘于平凡的
		多数人,相反,他们往往都是一群
		特立独行桀骜不驯的疯子!这一群
		疯子中有位传奇的人物,他颠覆性
		地将人文与科技完美融合,极大地
		改变了人类计算机领域,改变了人
		们的生活方式，其一手创建的计算
		机公司到如今仍是手机行业的传奇
		没错!他就是乔布斯!
	</p>
	<div>他就是乔布斯!</div>

</body>

一般情况下，文本大小不的超过行高的大小

4 text-align

文本对齐

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

image

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文本属性</title>
	<style type="text/css">
		div{
			text-align: justify;
		}
	</style>
</head>
<body>
	<div>他就是乔布斯!</div>

</body>
</html>

5 vertical-align

vertical-align 属性设置元素的垂直对齐方式。

<img src="" alt=""><span>yuan</span>
posted @ 2022-08-04 16:26  角角边  Views(71)  Comments(0)    收藏  举报