关于前端:CSS-文本样式

本节咱们讲文本款式，像比方设置文本色彩呀，首行缩进、程度对齐等，能够对网页进行排本设置等。

将要学习的文本属性有如下几个：

属性	形容
color	设置文本色彩
text-index	设置首行文本的缩进
text-align	设置文本程度对齐形式
line-height	设置文本行高
text-decoration	设置文本的装璜

首先咱们来讲文本色彩设置，后面咱们讲过一节对于如何设置色彩，所以想必大家对如何给文本设置色彩不会。

示例：

例如给上面的 <p> 标签中的 <span> 标签中的文本，色彩设置为粉色：

 <p> 盛年不重来，<span> 一日难再晨 </span>。及时宜自勉，岁月不待人。</p>

CSS 款式代码：

span{color: pink;}

或者应用十六进制色彩值：

span{color: #FFC0CB;}

个别咱们在写作文的时候，所有段落的首行都会首行缩进两个字，而咱们如果心愿在网页中的段落也能实现首行缩进呢，这就能够通过 CSS 中的 text-index 属性来设置首行文本的缩进。

text-index 属性间接将缩进间隔以数字示意，单位为 em 或 px。个别咱们应用 em 更多，通常将值设置为 2em，示意缩进两个字符。

em 是绝对单位，示意的长度相当于文本中字符的倍数，会依据字符的大小，主动适应，空出设置字符的倍数。

text-index 属性容许应用负值，如果应用负值，那么首行会被缩进到右边。

示例：

实现第一个段落和最初一个段落的首行缩进：

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS 学习 (9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <p class="index"> 蒹葭苍苍，白露为霜。所谓伊人，在水一方。</p>
        <p> 溯洄从之，道阻且长。溯游从之，宛在水中央。</p>
        <p> 蒹葭萋萋，白露未晞。所谓伊人，在水之湄。</p>
        <p> 溯洄从之，道阻且跻。溯游从之，宛在水中坻。</p>
        <p> 蒹葭采采，白露未已。所谓伊人，在水之涘。</p>
        <p class="index"> 溯洄从之，道阻且右。溯游从之，宛在水中沚。</p>
    </body>
</html>

CSS 款式代码：

.index{text-indent: 2em;}

在浏览器中的演示：

text-align 属性用于设置元素中文本的程度对齐形式。

属性值有上面几种：

属性值	形容
left	默认值，把文本排列到右边
right	把文本排列到左边
center	把文本排列到两头
justify	实现两端对齐文本成果
inherit	规定应该从父元素继承 text-align 属性的值

示例：

看一下不同属性值能实现的成果：

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS 学习 (9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <p class="text1"> 内容居中 </p>
        <p class="text2"> 内容居左 </p>
        <p class="text3"> 内容居右 </p>
        <p> 内容不增加款式 </p>
    </body>
</html>

CSS 款式代码：

.text1{text-align: center;}
.text2{text-align: left;}
.text3{text-align: right;}

在浏览器中的演示：

line-height 用于设置行高，也就是设置行间的间隔。

属性值能够是上面几种：

属性值	形容
normal	默认，设置正当的行间距
number	设置数字，此数字会与以后的字体尺寸相乘来设置行间距
length	设置固定的行间距
%	基于以后字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值

个别咱们应用数字来示意，单位为 px，如果不增加单位，则示意按倍数示意，这时行高是字体大小的倍数。

示例：

例如上面第一个 <p> 标签中的内容字体大小为 14px，将行高设置为 21px，和将行高设置为 2（字体大小的两倍）是一样的成果：

 <body>
    <p class="text"> 鲁迅的胜利，有一个重要的秘诀，就是珍惜工夫。鲁迅十二岁在绍兴城读私塾的时候，父亲正患着重病，两个弟弟年纪尚幼，鲁迅不仅常常上当铺，跑药店，还得帮忙母亲做家务，为免影响学业，他必须作好准确的工夫安顿。</p>
    <p> 尔后，鲁迅简直每天都在挤时间。他说过：「工夫，就像海绵里的水，只有你挤，总是有的。」鲁迅读书的趣味非常宽泛，又喜爱写作，他对于民间艺术，特地是传说、绘画，也深切喜好。</p>
</body>

CSS 款式代码：

.text{
    font-size: 14px;
    line-height: 28px;
    /* 相当于 line-height:2; */
}

在浏览器中的演示：

text-decoration 属性用于设置文本的装璜，也就是给文本设置某种成果，例如下划线、删除线等。

属性值能够是上面几种：

属性值	形容
none	默认，规范的文本
underline	设置文本的下滑线
overline	设置文本的上滑线
line-through	设置文本的删除线
blink	设置文本闪动
inherit	规定应该从父元素继承 text-decoration 属性的值

示例：

除了给文本增加装璜，咱们还能够通过 text-decoration 属性去掉链接上面的下划线：

<p> 默认文本 </p>
<p class="p1"> 设置下划线 </p>
<p class="p2"> 设置上划线 </p>
<p class="p3"> 设置删除线 </p>
<p class="p4"> 文本闪动 </p>
<a href="#"> 去掉链接的下划线 </a>

CSS 款式代码：

.p1{text-decoration: underline;}
.p2{text-decoration: overline;}
.p3{text-decoration: line-through;}
.p4{text-decoration: blink;}
a{text-decoration: none;}

在浏览器中的演示：

总结：本节所学习的文本款式，在理论利用中咱们会常常用到，所以大家要弄清楚这几个属性的应用，以及当赋值不同的属性值时，展现进去的成果是什么。

想看更多能够：https://www.9xkd.com/