CSS 文本样式

字体样式和文本样式的区别：字体样式针对的是字体本身的效果，而文本样式注重整个段落的效果，所以在使用过程中用 font 和 text 来区分。

一、首行缩进 text-indent

p 元素的首行不会自动缩进的，如果使用 &nbsp；来代替，会出现很多冗余代码，所以可以使用 text-indent 来实现文字缩进的效果。有如下代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            p{
                font-size: 20px;
                text-indent: 40px;
                width: 300px;
            }
        </style>
    </head>
    <body>
        <p>
            p 元素的首行不会自动缩进的，如果使用 & nbsp ；来代替，会出现很多冗余代码，所以可以使用 text-indent 来实现文字缩进的效果。
        </p>
    </body>
</html>

在浏览器中显示为：

注：缩进值的大小应该为字体大小的两倍，想要缩进几个字符，就把缩进值改为字体大小的几倍。

二、水平对齐 text-align

使用 text-align 控制文本在水平方向上的对齐方式（对图片也有效），取值有三个，如下表：

属性值	说明
left	左对齐（默认值）
center	居中对齐
right	右对齐

有如下代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            div{
                width: 200px;
            }
            .p1{
                text-align: left;
            }
            .p2{
                text-align: center;
            }
            .p3{
                text-align: right;
            }
        </style>
    </head>
    <body>
        <div>
            <p class="p1">左对齐</p>
            <p class="p2">居中对齐</p>
            <p class="p3">右对齐</p>
        </div>
    </body>
</html>

展示了左对齐、居中对齐、右对齐的效果：

三、文本修饰 text-decoration

使用 text-decoration 来定义文本的修饰效果，取值如下：

属性值	说明
none	去除所有的划线效果（默认值）
underline	下划线
line-through	中划线
overline	上划线

示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            div{
                width: 200px;
            }
            .p1{
                text-decoration: underline;
            }
            .p2{
                text-decoration: line-through;
            }
            .p3{
                text-decoration: overline;
            }
        </style>
    </head>
    <body>
        <div>
            <p class="p1">下划线</p>
            <p class="p2">中划线</p>
            <p class="p3">上划线</p>
        </div>
    </body>
</html>

展示了三种划线效果：

在 HTML 中，可以使用 s 标签、u 标签来实现文字的划线效果，但是为了保证结构与样式分离的原则，一般使用 CSS 来实现样式，提高代码的可读性和可维护性；
超链接默认带下划线，可以用 text-decoration：none 来清除超链接的下划线；
下划线常用于文章的重点标明，中划线用于促销时划掉原价，上划线基本没有应用场景。

四、文本大小写 text-transform

此属性用来进行英文字母大小写的转换，属性值有四个：

属性	说明
none	无转换（默认值）
uppercase	转换成大写
lowercase	转换为小写
capitalize	将每个英文单词的首字母转换为大写

示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            div{
                width: 200px;
            }
            .p1{
                text-transform: uppercase;
            }
            .p2{
                text-transform: lowercase;
            }
            .p3{
                text-transform: capitalize;
            }
        </style>
    </head>
    <body>
        <div>
            <p class="p1">hello world</p>
            <p class="p2">hello world</p>
            <p class="p3">hello world</p>
        </div>
    </body>
</html>

在浏览器中效果如下：

五、行高 line-height

使用此属性来控制一行的高度，示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            div{
                width: 700px;
            }
            .p1{
                line-height: 20px;
            }
            .p2{
                line-height: 40px;
            }
            .p3{
                line-height: 60px;
            }
        </style>
    </head>
    <body>
        <div>
            <p class="p1">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </p>
            <p class="p2">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </p>
            <p class="p3">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </p>
        </div>
    </body>
</html>

在浏览器中可以看到，三段文本的行高不同：

注：注意区分行高和行间距（虽然视觉效果上看起来是行间距的变化，但这样说是不准确的）

六、字母间距和单词间距：letter-spacing、word-spacing

letter-spacing 是字母间距，每一个汉字和每一个英文字母被当做一个字；
word-spacing 是单词间距，只针对英文单词；
一般说来，这两个属性常用于英文网站，在中文站中应用较少。有如下示例：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            div{
                width: 700px;
            }
            .p1{
                word-spacing: 10px;
            }
            .p2{
                letter-spacing: 10px;
            }
        </style>
    </head>
    <body>
        <div>
            <p class="p1">Hello World! 你好，世界！</p>
            <p class="p2">Hello World! 你好，世界！</p>
            <p>Hello World! 你好，世界！</p>
        </div>
    </body>
</html>

在浏览器中显示如下：