CSS文本样式值

作者: 图恩分类: 编程开发阅读: 634发布时间： 2020-12-31 06:30:38

字体样式针对的是“文字本身”的形体效果，而文本样式针对的是“整个段落”的排版效果。字体样式注重个体，文本样式注重整体。常见的文本样式如下表。

属性	说明
text-indent	首行缩进
text-align	水平对齐
text-decoration	文本修饰
line-height	行高
text-transform	大小写转换
letter-spacing、word-spacing	字母间距、词间距

接下来，我们一起来看看这些属性的运用。

text-indent

p元素的首行是不会自动缩进的，因此我们在HTML中往往使用6个 （空格）来实现首行缩进两个字的空格。但是这种方式会导致冗余代码很多。因此使用text-indent属性来定义p元素的首行缩进。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>首行缩进</title>
        <style type="text/css">
            p{
                font-size: 14px;
                text-indent: 28px;
            }
        </style>
    </head>
    <body>
        <p>从明天起，做一个幸福的人，喂马，劈柴，周游世界；从明天起，关心粮食和蔬菜，我有一所房子，面朝大海，春暖花开；从明天起，和每一个亲人通信，告诉他们我的幸福。那幸福的闪电告诉我的，我将告诉每一个人；给每一条河每一座山取一个温暖的名字。陌生人，我也为你祝福，愿你有一个灿烂的前程；愿你有情人终成眷属；愿你在尘世获的幸福；我也愿面朝大海，春暖花开。</p>
    </body>
</html>

text-align

使用text-align属性来控制文本在水平方向上的对齐方式。

text-align属性值：

left（左对齐）
center（居中对齐）
right（右对齐）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>水平对齐</title>
        <style type="text/css">
            .p1{
                text-align: center;
            }
            .p2{
                text-align: right;
            }
            .p3{
                text-align: left;
            }
        </style>
    </head>
    <body>
        <p class="p1">我爱学习</p>
        <p class="p2">我爱学习</p>
        <p class="p3">我爱学习</p>
    </body>
</html>

text-decoration

使用text-decoration属性来定义文本的修饰效果（下划线、中划线、顶划线）。text-decoration属性取值有4个，如下表。

属性值	说明
none	去掉所有划线效果
underline	下划线
line-through	中划线
overline	顶划线

在HTML中，可以使用s元素实现中划线，用u元素实现下划线。但是有了CSS之后，都是使用text-decoration属性来实现。结构用html标签，外观一般都要用CSS。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>文本修饰</title>
        <style type="text/css">
            .p1{
                text-decoration: underline;
            }
            .p2{
                text-decoration: line-through;
            }
            .p3{
                text-decoration: overline;
            }
        </style>
    </head>
    <body>
        <p class="p1">我爱学习</p>
        <p class="p2">我爱学习</p>
        <p class="p3">我爱学习</p>
    </body>
</html>

line-height

可以使用line-height属性来控制一行文本的高度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>行高</title>
        <style type="text/css">
            .p1{
                line-height: 15px;
            }
            .p2{
                line-height: 30px;
            }
            .p3{
                line-height: 50px;
            }
        </style>
    </head>
    <body>
        <p class="p1">我爱学习</p><hr />
        <p class="p2">我爱学习</p><hr />
        <p class="p3">我爱学习</p>
    </body>
</html>

text-transform

可以使用text-transform属性来将文本进行大小写转换。text-transform属性取值有4个，如下表。

属性值	说明
none	无转换
uppercase	转换为大写
lowercase	转换为小写
capitalize	只将每个英文单词首字母大写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>大小写</title>
        <style type="text/css">
            .p1{
                text-transform: uppercase;
            }
            .p2{
                text-transform: lowercase;
            }
            .p3{
                text-transform: capitalize;
            }
        </style>
    </head>
    <body>
        <p class="p1">Study hard and make progress every day</p>
        <p class="p2">Study hard and make progress every day</p>
        <p class="p3">Study hard and make progress every day</p>
    </body>
</html>

letter-spacing

可以使用letter-spacing属性来控制字与字之间的距离。每一个中文汉字都被当作一个“字”，而每一个英文字母也被当作一个“字”。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>字间距</title>
        <style type="text/css">
            .p1{
                letter-spacing: 0px;
            }
            .p2{
                letter-spacing: 5px;
            }
            .p3{
                letter-spacing: 10px;
            }
        </style>
    </head>
    <body>
        <p class="p1">Study hard and make progress every day.好好学习，天天向上</p>
        <p class="p2">Study hard and make progress every day.好好学习，天天向上</p>
        <p class="p3">Study hard and make progress every day.好好学习，天天向上</p>
    </body>
</html>

word-spacing

使用word-spacing属性来定义两个单词之间的距离。一般来说，word-spacing只针对英文单词而言。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>词间距</title>
        <style type="text/css">
            .p1{
                word-spacing: 0px;
            }
            .p2{
                word-spacing: 5px;
            }
            .p3{
                word-spacing: 10px;
            }
        </style>
    </head>
    <body>
        <p class="p1">Study hard and make progress every day.好好学习，天天向上</p>
        <p class="p2">Study hard and make progress every day.好好学习，天天向上</p>
        <p class="p3">Study hard and make progress every day.好好学习，天天向上</p>
    </body>
</html>

本文章由javascript技术分享原创和收集