目录
字体的属性2
文字对齐、文字装饰、首行缩进、文字之间的距离
文字对齐
需要用到属性text-align，该属性是用于规定元素中的文本水平对齐方式。
然后就是text-align的属性值：
| 值 | 描述 |
|---|---|
| left | 左边对齐默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
实例代码如下
以p标签为例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p1{
text-align: left;
color: aqua;
}
#p2{
text-align: right;
color: red;
}
#p3{
text-align: center;
color: greenyellow;
}
#p4{
text-align: justify;
color: blue;
}
</style>
</head>
<body>
<p id="p1">麻辣烫</p>
<p id="p2">小火锅</p>
<p id="p3">担担面</p>
<p id="p4">剁椒鱼头</p>
</body>
</html>
p1的text-align是left，p2的text-align是right，p3的text-align是center，p4的text-align是justify。
效果如图
文字的装饰
需要用到text-decoration属性来给文字添加效果。
下面是它的属性值
| 值 | 描述 |
|---|---|
| none | 默认，定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| inherit | 继承父元素的text-decoration属性的值。 |
这里以p标签为例子
代码如下
<!--text-decoration属性-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p1{
text-decoration: none;
color: aqua;
}
#p2{
text-decoration: underline;
color: red;
}
#p3{
text-decoration: overline;
color: greenyellow;
}
#p4{
text-decoration: line-through;
color: blue;
}
#p5{
text-decoration: inherit;
color: deeppink;
}
</style>
</head>
<body>
<p id="p1">麻辣烫</p>
<p id="p2">小火锅</p>
<p id="p3">担担面</p>
<p id="p4">剁椒鱼头</p>
<p id="p5">金汤肥牛</p>
</body>
</html>
这个代码里面p1的text-decoration属性的值为none，p2的text-decoration属性的值为underline，p3的text-decoration属性的值为overline，p4的text-decoration属性的值为line-through，p5的text-decoration属性的值为inherit。
效果如图
最常给a标签去掉自划线。
代码如下：
<!--text-decoration属性与a标签-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#a1{
text-decoration: none;
color: deeppink;
}
</style>
</head>
<body>
<a href="https://www.bilibili.com/" target="_blank" id="a1">娱乐</a><br>
<a href="https://music.163.com/?from=infinity" target="_blank">音乐</a>
</body>
</html>
这个代码里面将第一个a标签赋一个id的值，用于修改，第二个a标签则是用于区分。
效果如图
首行缩进
这里需要用到text-indent属性，这个代码是将第一行缩进n个像素
代码如下
<!--text-indent属性-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p1{
text-indent: 32px;
}
</style>
</head>
<body>
<p id="p1">君问归期未有期</p>
<p>巴山夜雨涨秋池</p>
</body>
</html>
这个代码里面将id为p1的p标签首行缩进了32像素的大小，与没有赋id的p标签做对比
效果如图
文字的距离设置
需要用到letter-spacing这个属性。该属性可以将文字的间距调整为指定的像素
<!--letter-spacing属性-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
letter-spacing: 32px;
}
</style>
</head>
<body>
<p>君问归期未有期</p>
<p>巴山夜雨涨秋池</p>
</body>
</html>
效果如图
块级标签的另一个作用
现在我有一个背景颜色，我在这个背景颜色的中间添加了文字，但是我想让这个文字就在正中心显示，这就要用到块级标签了。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-size: 400px 200px;
background-color:blue;
background-repeat: no-repeat;
height:400px;width: 200px;
text-align: center;
line-height: 400px;outline-width: revert;
font-weight:900
}
</style>
</head>
<body>
<div>这是一个蓝色背景</div>
</body>
</html>
效果如下
