本节我们讲一下文本样式，比如设置文本颜色、首行缩进、水平对齐方式等，以及设置网页的布局。
需要学习的文本属性如下：
颜色
首先css设置下划线，我们来谈谈文字颜色设置。 上一节我们讲了如何设置颜色，所以你一定不知道如何设置文本颜色。
例子：
例如，对于以下
标签内标签中的文本，颜色设置为红色：
盛年不重来，一日难再晨。及时宜自勉，岁月不待人。
CSS样式代码：
span{
color: pink;
}
或者使用十六进制颜色值：
span{
color: #FFC0CB;
}
文本索引
通常我们写作文的时候，所有段落的首行都会缩进两个字，如果我们希望网页中的段落也实现首行缩进，可以通过CSS中的文本 -index 属性来实现设置文本第一行的缩进。
text-index属性直接用数字表示缩进距离，单位是em或px。 通常我们用em比较多，一般设置值为2em，表示缩进两个字符。
Em是相对单位，表示的宽度相当于文本中字符的倍数。 会根据字符大小手动进行适配，设定字符的倍数会空出。
text-index 属性允许使用负值。 如果使用负值，第一行将向右缩进。
例子：
实现第一段和最后一段的第一行缩进：
CSS学习(9xkd.com)
蒹葭苍苍，白露为霜。所谓伊人，在水一方。
溯洄从之，道阻且长。溯游从之，宛在水中央。
蒹葭萋萋，白露未晞。所谓伊人，在水之湄。
溯洄从之，道阻且跻。溯游从之，宛在水中坻。
蒹葭采采，白露未已。所谓伊人，在水之涘。
溯洄从之，道阻且右。溯游从之，宛在水中沚。
CSS样式代码：
.index{
text-indent: 2em;
}
浏览器中的演示：
文本对齐
text-align 属性用于设置元素中文本的水平对齐方式。
属性值如下：
例子：
看看不同属性值可以达到的疗效：
CSS学习(9xkd.com)
内容居中
内容居左
内容居右
内容不添加样式
CSS样式代码：
.text1{
text-align: center;
}
.text2{
text-align: left;
}
.text3{
text-align: right;
}
浏览器中的演示：
行高
line-height用于设置列宽，也就是设置行与行之间的距离。
属性值可以是以下之一：
通常我们用数字来表示，单位是px。 如果不加单位，则表示以倍数表示。 此时，列宽是字体大小的倍数。
例子：
比如下面第一个
标签中的内容字体大小为14pxcss设置下划线，将列宽设置为21px与将列宽设置为2（字体大小的两倍）效果相同：
鲁迅的成功，有一个重要的秘诀，就是珍惜时间。鲁迅十二岁在绍兴城读私塾的时候，父亲正患着重病，两个弟弟年纪尚幼，鲁迅不仅经常上当铺，跑药店，还得帮助母亲做家务，为免影响学业，他必须作好精确的时间安排。
此后，鲁迅几乎每天都在挤时间。他说过：「时间，就像海绵里的水，只要你挤，总是有的。」鲁迅读书的兴趣十分广泛，又喜欢写作，他对于民间艺术，特别是传说、绘画，也深切爱好。
CSS样式代码：
.text{
font-size: 14px;
line-height: 28px;
/* 相当于 line-height:2; */
}
浏览器中的演示：
文字装饰
text-decoration属性用于设置文本的装饰，即对文本设置某种效果，如逗号、删除线等。
属性值可以是以下之一：
例子：
不仅可以给文本添加装饰，我们还可以通过text-decoration属性删除链接下面的逗号：
默认文本
设置下划线
设置上划线
设置删除线
文本闪烁
去掉链接的下划线
CSS样式代码：
.p1{
text-decoration: underline;
}
.p2{
text-decoration: overline;
}
.p3{
text-decoration: line-through;
}
.p4{
text-decoration: blink;
}
a{
text-decoration: none;
}
浏览器中的演示：
总结：本节学习的文本样式在实际应用中经常用到，因此需要弄清楚这些属性的用途以及形式参数具有不同属性值时所显示的疗效。
发表评论