CSS文本属性

CSS文本属性可定义文本的外观

通过文本属性，您可以改变文本的颜色，字符间距，对齐文本，装饰文本，对文本进行缩进等等。

1.文本缩进

text-indent属性将页面上的段落的第一行进行缩进（首行缩进），这是一种最常用的文本格式化效果。

取值：用长度值指定文本的缩进。可以为负值

           用百分比指定文本的缩进。可以为负值

p {
    text-indent:20px;
}
p {
    text-indent:20%;
}

 2.文本对齐

text-align属性设置文本水平对齐方式。

取值：left：内容左对齐。

           center：内容居中对齐。

           right：内容右对齐。

           justify：内容两端对齐，对最后一行生效（注意：样式应用的最后一行文字不会生效）

li-01 {
    text-align:left;
}

li-02 {
    text-align:right;
}

li-03 {
    text-align:center;
}

li-04 {
    text-align:justify;
}

3.文本修饰

text-decoration 属性设置文本装饰线条的位置，综合属性

可以单独设置 text-decoration-line、 text-decoration-color、和 text-decoration-style属性

text-decoration-

        none 指定文字无装饰（一般用于去除超链接的下划线）

        underline 指定文字的装饰是下划线

        overline 指定文字的装饰是上划线

        line-through 指定文字的装饰是贯穿线

注：还可以组合多个值，比如underline和overline，在文本上下方向同时显示线条

text-decoration-style+

        solid 线条显示为单行

        double 线条显示为双线

        dotted 线条显示为点线

        dashed 线条显示为虚线

        wavy 线条显示为波浪线

.under {
    text-decoration: underline red;
}

.over {
    text-decoration: wavy overline orange;
}

.lineThough {
    text-decoration: line-through;
} 

.none {
    text-decoration: none;
}

.under01 {
    text-decoration-line: overline underline;
}

4.单词间距

word-spacing 属性设置英文单词之间的间距

取值：

        normal：默认距离

        ：用长度值指定间隔，可以为负值

p {
    word-spacing:20px;
}

5.文本间距

letter-spacing 属性设置字符之间的间距，适用于中英文文本

取值：

         normal：默认距离

        ：用长度值指定间隔，可以为负值

p {
    letter-spacing:20px;
}

6.文字阴影 text-shadow【css3】

text-shadow 属性向文本设置阴影

        语法：text-shadow：x-shadow y-shadow blur color

/* 单层阴影 */
p.info {
    text-shadow: -5px -5px 3px black;
    font-size: 50px;
}
/* 多层阴影 */
p {
    text-shadow: 5px 5px 3px red,8px 8px 3px orange,11px 11px 3px yellow,14px 14px 3px green,17px 17px 3px yellowgreen,20px 20px 3px greenyellow,23px 23px 3px blue;
    font-size: 50px;
}
/* 正阴影 */
div {
    text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 40px #ff00de,0 0 70px #ff00de;
    font-size: 50px;
}

7.盒子阴影 box-shadow【css3】

box-shadow：h-shadow v-shadow blur spared color inset

.box2 {
    width: 150px;
    height: 200px;
    background-color: antiquewhite;
    /* 
    内阴影
    box-shadow: 0px 0px 15px 0px #000 inset; 
    */
}

/* 小米商品鼠标悬浮阴影 */
.box2:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
}