前端学习：css文本相关属性使用

对于html中有很多对于文本的调整，对此进行总结

常用为：文本中的单词间距，字母间距，文本的修饰加上中下划线，进行文本的缩进以及位置的调整。

1.文本字母间距：

使用：letter-spacing：40px；

2.文本单词间距：（注意：对于中文，中间用空格隔开才能被识别是一个词，因为有可能是成语）

使用：word-spacing: 40px;

3.文本上划线，中划线，下划线：

使用：text-decoration:overline（上划线，line-through中划线，underline下划线） 颜色  线的形状；  例如 ：text-decoration:overline red dotted；就是文本的上划线红色且为虚线

4.文本缩进：（此处为文本的首前缩进，常用em单位，与当前的font-size使用，以免调整文本字体大小而首行缩进不合适）

使用：text-indent: 40px;

5.文本对齐

使用：text-align:center;

        .rich {
            letter-spacing: 10px;
        }
        /* 单词间距:如果是中文就不会扩大间距，因为不能识别是否为成语之类的
   识别方法是中间的空格 */
        .rich01 {
            word-spacing: 40px;
        }

        /* ************************************************************************* */
        /* 文本修饰:overline上划线  underline下划线  line-through中间划线  none没有线（a标签有下划线，用none可以干掉下划线） */
        .rich02 {
            text-decoration: overline dotted blue;
        }
        .rich03{
            text-decoration: line-through dotted blue;
        }

/* ******************************************************************************** */

/* 首行缩进text-indent */
        .rich04{
            font-size: 20px;
            text-indent: 40px;
        }

        /* 文本对齐 */
        /* center中间对齐 left左边对齐 */
        .rich05{
            background-color: black;
            color: yellow;
            text-align:center;
        }




body：

    <div>无样式nononoonon进行对比</div>
    <div class="rich"> letter-spacing(字母间距) nininininiinininni</div>
    <br>
    <div class="rich01">word-spacing（单词间距） ad ad ada da dad ad英文单词有间距，此时的中文间距没有改变</div>
    <br>
    <div class="rich01">word-spacing（单词间距） mzm zm zmz mzmzmz zmzmz' 你好 你好</div>
    <br>

    <div class="rich02">text-decoration（文本修饰加线） 文本上划线</div>
    <div class="rich03">文本修饰中间线加颜色</div>
    <br>

    <div class="rich04">文本缩进：首行缩进</div>
    <br>
    <div class="rich05">文本居中</div>

运行结果：