CSS设置文本

概述：

text-aling:

text-decoration:

text-transform:

text-indent:

line-height:

letter-spacing:

word-spacing:

text-shadow:

vertical-align:

white-space:

direction:

概述：

在CSS中我们可以设置文本的属性，就像Word文档那样可以定义网页中的文本间距或者对齐方式又或者缩进等等。CSS文本常用的属性如下所示：

text-aling:用来控制文本水平的对齐方式。
text-decoration:用来控制文本的装饰。
text-transform：用来控制文本中英文大小写转换方式。
text-indent:用来控制文本的缩进方式。
line-height:用来控制行高。
letter-spacing:用来控制字符之间的间距。
word-spacing:用来控制单词和单词之间的间距(中文无效)。
text-shadow:用来控制文本的阴影。
vertical-align:用来控制文本的垂直和对齐的方式。
white-space:用来控制对文本中空白的处理方式。
direction:用来控制文本的方向。

初识CSS-CSDN博客 CSS设置字体样式-CSDN博客 CSS设置字体样式-CSDN博客

如下就来一一对上述的属性进行说明和使用：

text-aling:

text-align属性是用来控制元素里文本的水平对齐方式，其可选值如下所示：

值	说明
left	默认值，左对齐。
right	右对齐。
center	居中对齐。
justify	两端对齐。
inherit	从父元素中继承text-align属性值。

如下是text-align个值的使用代码，如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            border: 1px solid red;
            width: 500px;
        }

        .left {
            text-align: left;
        }

        .right {
            text-align: right;
        }

        .center {
            text-align: center;
        }

        .inherit {
            text-align: inherit;

        }
    </style>
</head>

<body>
    <ul class="parent">
        默认
        <li class="left">left</li>
        <li class="right">right</li>
        <li class="center">center</li>
        <li class="inherit">inherit</li>
    </ul>

</body>

</html>

上述代码运行结果如下所示：其中默认文本并无变化以及继承父元素的inherit根默认也是相同的，而left也靠左对齐了(可能是大多数文本默认是靠左对齐的所以很难看出来变化但left是被设置靠左对齐的)，而right文本也是靠近最右边了，其中center居中了，inherit继承父元素，而这里的父元素并无太多属性所以并无太大变化。

text-decoration:

在CSS中我们如果要装饰文本可以使用text-decoration属性，其可以设置下划线，~~删除线~~ 当然我可以也可以使用此属性来消除<a>标签自带的下划线。其可选值如下所示：

值	说明
none	默认值，啥都没得，就是正常的文本，一般用来消除已经设置的属性。
underline	就是在文本下面加下划线。
overline	就是在文本上面加上划线。
line-through	就是在文本的中间加一条线效果像~~删除线~~。
inherit	从元素里继承对text-decoration的设置。

如下是CSS使用text-decoration为文本设置装饰的示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .none {
            text-decoration: none;
        }

        .underline {
            text-decoration: underline;
        }

        .overline {
            text-decoration: overline;
        }

        .line-through {
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <ol>
        <li class="none">啥都没有</li>
        <li class="underline">有一条下划线</li> <br>
        <li class="overline">有一条上划线</li>
        <li class="line-through">有一条中划线类似删除线</li>
        inherit不设置了，因为父元素没啥好继承的
    </ol>
</body>

</html>

上述代码的运行结果如下所示：其中第一条是默认的文本，第二条的文本有一条下划线第三条的文本有一条上划线，第四条的文本有一条~~删除线~~，最后inherit则不设置了因为父元素没设置啥text-decoration属性。

text-transform:

在CSS中我们若要控制中英文字母的大小写可以使用text-transform属性来设置，该属性可以把字母都变成小写字母或者大写字母等等，其属性的值如下所示：

值	说明
none	默认的值，文本将以原本的形式显示在网页中。
capitalize	把文本每个单词的首字母大写。如：Add，Class。
uppercase	把字母改为全部大写，如：ADD，CLASS。
lowercase	把字母全部改为小写，如：DOCTYPE变成doctype.
inherit	此属性是继承父元素中对于text-transform的设置。

示例代码如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .none {
            text-transform: none;
        }

        .capitalize {
            text-transform: capitalize;
        }

        .uppercase {
            text-transform: uppercase;
        }

        .lowercase {
            text-transform: lowercase;
        }
    </style>
</head>

<body>
    <ol>
        <li>none变为：<span class="none">none</span></li>
        <li>capitalize变为：<span class="capitalize">capitalize</span></li>
        <li>uppercAsE变为：<span class="uppercase">uppercase</span></li>
        <li>LOWERCASe变为：<span class="lowercase">lowercase</span></li>
    </ol>
</body>

</html>

上述代码的运行结果如下所示：此处并无难点所以不过多解释。

text-indent:

我们若要给文本的首行添加缩进就需要用到CSS中的text-indent属性，该属性的值如下所示：

值	说明
length	可以使用数值单位来设置缩进的距离，如像素px，如果不设置那么默认值是0。也可以设置为负数这样会导致溢出。
%	基于父元素的宽度和百分比来设置缩进。也可以设置为负数这样会导致溢出。
inherit	从父元素中继承关于text-indext的设置

如下是使用text-indent的示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: red 1px solid;
            width: 200px;

        }

        .length {
            text-indent: 20px;
        }

        .unit {
            text-indent: 5%;
        }
    </style>
</head>

<body>
    <div>
        <p class="unit">此行是设置了%的缩进</p>
        <p class="length">此行设置了单位的缩进，这里使用像素单位。</p>
    </div>
</body>

</html>

上述代码的运行结果如下所示：为文本设置text-indent属性时需要注意的是，缩进是按照文本的text-direction属性来决定的。

line-height:

在CSS中我们可以使用 line-height属性来为文本设置行高，其属性的可选值如下所示：

值	说明
normal	默认值，文本按照正常的方式显示。
number	用具体的数字设置行高，这个数字会跟当前字体大小相乘，得到的值就是行高。
length	用数字加单位的形式来设置固定的行高。
%	用百分比来设置基于字体尺寸百分比的行高。
inherit	从父元素中继承对line-height属性的设置。

如下是使用line-height来为文本设置行高：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .number {
            line-height: 0.6;
        }

        .P {
            line-height: 180%;
        }
    </style>
</head>

<body>
    <ol>
        <li>默认的</li>
        <li>默认的</li>
        <li>默认的</li>
        <li>默认的</li>
    </ol>

    <ol class="number">
        <li>比较紧</li>
        <li>比较紧</li>
        <li>比较紧</li>
        <li>比较紧</li>
    </ol>

    <ol class="P">
        <li>有点松</li>
        <li>有点松</li>
        <li>有点松</li>
        <li>有点松</li>
    </ol>

</body>

</html>

上述代码的示例如下：下图可以明显看到，如果行与行之间的距离如果是0到1之间的小数的他们会叠加在一起，并不会挤开。

letter-spacing:

letter-spacing属性用来设置字符之间的间距，该属性的值如下所示：

值	说明
normal	默认值，正常显示，字符之间没额外的有间距。
length	用数值加单位来设置字符之间的固定间距(可以使用负值)。
inherit	从父元素中继承letter-spacing的值。

用letter-spacing属性来设置字符之间的间距示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            letter-spacing: 7px;
        }
    </style>
</head>

<body>
    默认的字符没有啥额外的间距
    <p>
        被设置了间距的字符
    </p>

</body>

</html>

上述代码运行结果如下所示：可以看出第二行中文字之间的间距。

word-spacing:

如若你要设置单词与单词之间的距离，就可以使用word-spacing属性，其对中文无效，此属性的可选值如下所示：

值	说明
normal	默认值，也就是正常显示，没有设置间距。
length	用数值加单位来设置单词跟单词之间的间距。
inherit	从父元素中继承对word-spacing的设置。

word-spacing代码的示例如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            word-spacing: 13px;
        }
    </style>
</head>

<body>
    默认的字符没有啥额外的间距<br>
    word word spacingadd
    <p>
        word word spacingadd
    </p>

</body>

</html>

上述代码的运行结果如下所示：可以明显看到最后一行中单词之间的间距。

text-shadow:

我们若要设置有阴影或者默认的字体效果就需要使用text-shadow属性来设置，其语法格式如:

text-shadow:h-shadow v-shadow blur color; 语法说明如下：

h-shadow:必须设置，其影响的是阴影的水平位置，可以设置为负数。
v-shadow:必须设置，其影响的是垂直的位置，也可以设置为负数。
blur:可选的值，其影响的是模糊的距离。
color:可选的值，其影响的是阴影的颜色。

text-shadow属性可以设置多个阴影效果，不过要用 , 号分隔，如下是此属性的示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* p {
            word-spacing: 13px;
        } */

        p {
            text-shadow: 1px 3px yellow, 0px -3px 5px aqua;
        }

        span {
            text-shadow: 5px 10px violet;
        }
    </style>
</head>

<body>
    默认的字符没有啥额外的阴影效果<br>
    <p>
        text-shadow被设置了的
    </p>
    <span>
        text-shadow第二个示例
    </span>

</body>

</html>

上述代码的运行结果如下所示：可以看到第二行有两种效果叠加，也就是上述设置的而设置时一定要用,逗号隔开。第三行只设置了一种效果所以非常明显。

vertical-align:

我们可以使用vertical-align来给文本设置其的对齐方式，其可选的值如下所示：

值	说明
baseline	默认值，将元素的基线与父元素的基线对齐。
sub	下标对齐，将元素的基线相对于父元素的基线降低。
super	上标对齐，将元素的基线相对于父元素的基线升高。
top	顶部对齐，将元素行内框的顶端与行框的顶端对齐。
text-top	文本顶部对齐，把元素的顶端与父元素字体的顶端对齐。
middle	居中对齐，通常使用在图片上，将图片垂直方向的中线与文本的中线（文字元素行内框的中线）对齐。
bottom	底部对齐，将元素行内框的顶端与行框的底端对齐。
text-bottom	文本底部对齐，是将元素行内框的底端与行框的底线对齐。
length	以数字加单位的形式设置元素基线距离父元素基线的距离（可以为负值）。
%	使用 "line-height" 属性的百分比值来排列此元素，允许使用负值。
inherit	从父元素中继承对vertical-align属性的设置。

上述中的基线、底线、顶线、中线等，他们指的是：

顶线：中文汉字的上边沿；
中线：贯穿小写英文字母 x 中间的线；
基线：小写英文字母 x 的下边沿；
底线：中文汉字的下边沿；
内容区：指底线与顶线包裹的区域；
行高：包括内容区与以内容区为基础对称拓展的空白区域，我们称之为行高，也可以认为是相邻文本行基线间的距离；
行距：指相邻文本行间上一个文本行底线和下一文本行顶线之间的距离；
行内框：是一个浏览器渲染模型中的概念，无法显示出来，但是它又确实存在，它的高度与行高相同；
行框：同行内框类似的概念，行框是指本行的一个虚拟的矩形框，也是浏览器渲染模式中的一个概念。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度）。

示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sub {
            vertical-align: sub;
        }

        .middle {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <p>
        此文本设置了vertical-align属性，<img class="sub" src="../img/96x96.png" alt=""> 其文本定义了垂直和对齐的方式。
    </p>
    <p>
        此文本设置了vertical-align属性，<img class="middle" src="../img/96x96.png" alt=""> 其文本定义了垂直和对齐的方式。
    </p>
</body>

</html>

上述代码运行结果如下所示：从第一个标签可以看出来设置sub使得文本在最下面显示，可以根据图片来看。第二个中的middle值对文本的影响，让文本居中显示了

white-space:

在文本中如果内容在同一个元素内，但是不在同一行，并且元素前面有空格，比如几个Tab，此时我们可以使用white-space属性来控制。其属性如下所示：

值	说明
normal	默认值，直接忽略，跟以往的显示没啥区别。
pre	会保留文本中的空白，比如字体前面的空格。
nowrap	文本不会换行，全部在一行显示，如果遇到<br>才会换行。
pre-wrap	保留空格，换行跟以往一样。
pre-line	合并空格，但会保留换行符。
inherit	从父元素中继承对white-space属性的设置。

其示例代码如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .white-space1 {
            white-space: pre;
        }

        .white-space2 {
            white-space: nowrap;
        }
    </style>
</head>

<body>
    这段文本啥都
    没有设置
    <p class="white-space1">
        我们使用
        white-space
        属性就可以
        去除掉其中的空白
    </p>
    <p class="white-space2">
        这里
        啥都<br>
        没得
        了。
    </p>

</body>

</html>

上述代码的运行结果如下所示：从第一个标签可以看出来其明显保留了代码里面对文本的空格，从第二个也可以看出来设置了nowrap之后其遇到 才会换行不然不会。

direction:

我们可以使用direction来设置文本从哪开始输出，其值如下所示：

值	说明
ltr	默认值，从左往右输出。
rtl	文本从右到左输出。
inherit	从父元素中继承对direction的设置。

此属性的示例代码如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ltr {
            direction: ltr;
        }

        .rtl {
            border: 1px solid red;
            width: 200px;
            direction: rtl;
        }
    </style>
</head>

<body>
    正常的
    <p class="ltr">设置了ltr的</p>
    <p class="rtl">设置了rtl的</p>

</body>

</html>

上述代码运行结果如下所示：这里我们直接看最后一行，我给他这个属性设置了宽度200px，其内的文本也是按照rtl值，也就是从右到左的输出。