链接我们已经学习过了,不过我们写出来的链接十分具有年代感,因为它的样子还和20年前一样,蓝色的文字加个下划线。

我们现在已经学了许多关于文字的样式,那么对链接做一些修改,也是挺方便的。换一换颜色,总比那浓郁的化不开的蓝色要舒服。

a {
  color: #2683F5;
}

就是选择器发生了一点变化,因为我们现在要选择的是所有链接标签(a)。这样程度的修改,想必大家都已经做到了。然后链接的下划线如何去掉呢?

我们来认识一个新的属性:text-decoration,它说的是文字上的装饰物,主要的就是一些线[1]

来介绍一下它的取值:

  • none: 默认。没有装饰物,普通文本。
  • underline: 文字底部有一条横线,即下划线。
  • overline: 文字顶部有一条横线,这个我们很少遇到。
  • line-through: 文字中间有一条横线,即贯穿线或者删除线。

那么我们知道,链接默认情况下是有下划线的,就是浏览器给这种元素默认设置了一个 underline 的取值。现在我们想把它去掉,就把这个值改为 none 就可以了。

如果只是这样,就太普通了,所以我们来玩一些复杂的。上面都是给某一些文字设置一种装饰,而事实上,我们可以给同一段文字加上多种装饰:

p {
  text-decoration: underline overline;
}

这些文字同时具有上划线和下划线。

我们可以使用空格分隔多个值,虽然事实上这种用法很少遇到,但这确实很有意思。

然后再来说一些稍微前卫一点的。这个属性本身就是一个简写属性,或者说复合属性。不过它不是一开始就是这个样子的,而是 CSS3 中新增加的定义。以前呢,它只是能够像上面这样定一下装饰。到了 CSS3,我们可以对这些装饰进行更加细致的定义了:

text-decoration-color 装饰线的颜色

以前装饰线的颜色都是和文字颜色相同的,但有的时候,比如删除线就会很不明显。现在我们可以单独设置它的颜色了。这很好,然而浏览器们才刚刚开始支持这个属性……所以稍微老一点的浏览器,或者 IE 都是不支持的,说到这里,我们也只能是望梅止渴。

text-decoration-style 装饰线的样式

可以有实线、双实线、点划线,虚线,波浪线。这些线型我们会在后面讲边框的时候进行介绍。现在的问题在于这个属性和上面颜色一样,还只有部分比较新的浏览器才能够支持。所以,一起来继续望梅止渴吧。

text-decoration-line 装饰线的类型

这个和我们上面所介绍的 text-decoration 取值是一样的。兼容性么,也只有部分比较新的浏览器认识它。


我们认真的讲了一些 CSS3 属性,然而,除非你能保证你的读者使用的都是最新的浏览器,而且不能是 IE(Edge),这样才可以使用这些属性。

所以,前景很美好,现实很骨感。我说过,前端技术是为用户体验服务的,如果你的网页不能够兼容大部分的用户浏览器,无论效果做得多么梦幻,那么它的用户体验都是打折的。你可以有你的坚持,但是你写网页的用途是什么呢?让大部分用户都无法正常访问吗?

所以我们要学习掌握新技术,也要了解现实状况,知道我们在什么情况下可以应用哪些技术。一味的追新,就是闭着眼睛撞南墙。

【本章助记卡片:卡片 for 第四十一章

>注释 1:blink 说的是文本闪烁,但是大部分浏览器并不支持。