字体的属性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>

效果如下