乐趣区

关于css:CSS文本样式值

字体款式针对的是“文字自身”的形体成果,而文本款式针对的是“整个段落”的排版成果。字体款式重视个体,文本款式重视整体。常见的文本款式如下表。

属性 阐明
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>
退出移动版