文本样式

文本缩进

属性名：text-indent

取值：

1、数字+px

2、数字+em(推荐：1em=当前标签font-size的大小)(推荐使用)

<style>
        p{
            /* text-indent: 32px; */  //第一种
            text-indent: 2em;
        }
    </style>

文本水平对齐方式

属性名：text-align

取值：

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

注意点：如果需要让文本水平居中，text-align属性给文本所在标签(文本的父元素)设置。例如：

<style>
      .box{
          width: 400px;
          height: 400px;
          background-color: red;
          text-align:center;
      }
    </style>
</head>
<body>
   <div class="box">   //div标签相当于是文本的父元素，所以text-align设置在父元素中。
       我是一行文本    //这里的文本相当于是div标签的子元素
   </div>

文本修饰

属性名：text-decoration

取值：

属性值	效果
underline	下划线(常用)
line-through	删除线(不常用)
overline	上划线(几乎不用)
none	无装饰线(常用)

注意点：在开发中会使用text-decoration：none；清除a标签默认下的下划线。例如：

<style>
      div{
         text-decoration: underline;
          color: red;
      }
      a{
          text-decoration: none;   //在此把下划线去掉
      }
    </style>
</head>
<body>
     <div>我是一个标签</div>
     <a href="#">我是一个链接标签</a>    //在刷新时会默认带有下划线
</body>

水平居中的方法

1、text-align属性

可以使文本，span，a，input，img标签水平居中。例如：

<style>
      div{
     width: 400px;
     height: 400px;
     background-color: skyblue;
     text-align: center;
      }
      span{
          color: red;
      }
      a{
       color:orangered
      }
    </style>
</head>
<body>
     <div>
         <!-- 我是一个标签 -->
         <!-- <span>我是一个span标签</span> -->
         <!-- <a href="#">我是一个a标签</a> -->
         <!-- <input type="text"> -->
         <img src="images1/a74e3e6f7ba6cdd52e9cd9fbd0ffca81.jpg">
        </div>
</body>