利用CSS 链接下划线也玩自定义

利用CSS 链接下划线也玩自定义,利用CSS，链接下划线也玩自定义

由 A List Apart 杂志及作者授权翻译。（Translated with the permission ofA List Apart Magazineand the author[s].）

说明：文章中“[补充]”内容系译者所补充添加（来自CSS2.0 中文手册），目的是方便读者理解相关内容。

虽然网页设计师通常有大量的方法控制文档如何呈现，但是基本的CSS不能为页面中链接下方的下划线样式提供很多选择。不过只需一点小技巧，你就能获得链接样式显示方式的创作控制。

自定义下划线给一些合适的网站以新的创作机会。自定义下划线还能够被用于为包含在同一个页面中的不同链接提供额外的视觉线索。

开始

你应该从为你下划线创建图形开始。该图将会水平的重复，而如果你希望（网页）背景能够完全显示的话，你需要创建一个透明的.gif文件。

如果你的下划线图形有几像素高，那么你应该增加的文本的line-height（行距），以增加上一行底部与下一行顶部的之间的空间。

p { line-height: 1.5; }

-------------------------------------------------

[补充]

语法：

line-height : normal | length

取值：

normal : 默认值。默认行高

length : 百分比数字 | 由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。请参阅长度单位

说明：

检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。

行高是字体下延与字体内部高度的顶端之间的距离。为负值的行高可用来实现阴影效果。

假如一个格式化的行包括不止一个对象，则最大行高会被应用。在这种情况下，此属性不可以为负值。

此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

对应的脚本特性为 lineHeight 。

本新闻共4页,当前在第1页 1 2 3 4