css a标签去掉下划线_CSS 文本样式

本节我们讲文本样式，像比如设置文本颜色呀，首行缩进、水平对齐等，可以对网页进行排本设置等。

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

color

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

示例：

例如给下面的

标签中的 标签中的文本，颜色设置为粉色：

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

CSS 样式代码：

span{    color: pink;}

或者使用十六进制颜色值：

span{    color: #FFC0CB;}

text-index

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

text-index 属性直接将缩进距离以数字表示，单位为 em 或 px。一般我们使用 em 更多，通常将值设置为 2em，表示缩进两个字符。

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

text-index 属性允许使用负值，如果使用负值，那么首行会被缩进到左边。

示例：

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

            CSS学习(9xkd.com)

蒹葭苍苍，白露为霜。所谓伊人，在水一方。

溯洄从之，道阻且长。溯游从之，宛在水中央。

蒹葭萋萋，白露未晞。所谓伊人，在水之湄。

溯洄从之，道阻且跻。溯游从之，宛在水中坻。

蒹葭采采，白露未已。所谓伊人，在水之涘。

溯洄从之，道阻且右。溯游从之，宛在水中沚。

CSS 样式代码：

.index{    text-indent: 2em;}

在浏览器中的演示：

text-align

text-align 属性用于设置元素中文本的水平对齐方式。

属性值有下面几种：

示例：

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

            CSS学习(9xkd.com)

内容居中

内容居左

内容居右

内容不添加样式

CSS 样式代码：

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

在浏览器中的演示：

line-height

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

属性值可以是下面几种：

一般我们使用数字来表示，单位为 px，如果不添加单位，则表示按倍数表示，这时行高是字体大小的倍数。

示例：

例如下面第一个

标签中的内容字体大小为14px，将行高设置为 21px，和将行高设置为 2(字体大小的两倍) 是一样的效果：

鲁迅的成功，有一个重要的秘诀，就是珍惜时间。鲁迅十二岁在绍兴城读私塾的时候，父亲正患着重病，两个弟弟年纪尚幼，鲁迅不仅经常上当铺，跑药店，还得帮助母亲做家务，为免影响学业，他必须作好精确的时间安排。

此后，鲁迅几乎每天都在挤时间。他说过：「时间，就像海绵里的水，只要你挤，总是有的。」鲁迅读书的兴趣十分广泛，又喜欢写作，他对于民间艺术，特别是传说、绘画，也深切爱好。

CSS 样式代码：

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

在浏览器中的演示：

text-decoration

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;}

在浏览器中的演示：

总结：本节所学习的文本样式，在实际应用中我们会经常用到，所以大家要弄清楚这几个属性的使用，以及当赋值不同的属性值时，展示出来的效果是什么。

想看更多可以：https://www.9xkd.com/