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

　　设置或检索对象的背景图像位置。必须先指定 background-image 属性。
　　该属性定位不受对象的补丁属性( padding )设置影响。
　　默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
　　如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。
　　如果设置值为 right center ，因为 right 作为横坐标值将会覆盖 center 值，所以背景图片将被居右定位。
　　对应的脚本特性为 backgroundPosition 。

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

　　为了给链接文本正文的自定义下划线图形创建空间，我们将增加一些padding（填充）。依赖于所使用字体的大小，下划线图形的精确位置将会相对于链接文本的基线发生改变。建议你从bottom-padding开始，与下划线图形高度同高，调整以适合于你的需要：

a { padding-bottom: 4px; }

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

[补充]

语法：

　　padding-bottom : length

取值：

　　length  :? 由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。不允许负值。 

说明：

　　检索或设置对象底边的内补丁。对于 td 和 th 对象而言默认值为 1 。其他对象的默认值为 0 。
　　在IE5.5+中此属性支持内联对象使用。而在此前的版本中，内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。
　　此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
　　对应的脚本特性为 paddingBottom 。

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

　　因为下划线图形是定位于链接元素的底部，所以我们需要保证链接不能横跨多行（如果他们被允许跨越多行，那么只有最低的一行链接文本显示自定义下划线）。我们将使用CSS的white-space属性禁止链接文本换行。

a { white-space: nowrap; }

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

[补充]

语法：

　　white-space : normal | pre | nowrap

取值：

　　normal  :? 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
　　pre  :? 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。参阅 pre 对象
　　nowrap  :? 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。参阅 noWrap 属性

说明：

　　设置或检索对象内空格字符的处理方式。
　　空格字符，像换行，空格，TAB，在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时，你可以使用不换行空格的命名实体   来添加空格，用 br 元素来添加换行。
　　此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。
　　此属性作用于块对象。
　　此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
　　对应的脚本特性为 whiteSpace 。

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

　　链接元素的所有CSS属性可以合并为：

a {
    text-decoration: none;
    background: url(underline.gif) repeat-x 100% 100%;
    padding-bottom: 4px;
    white-space: nowrap;
}

　　如果你想自定义下划线的效果只在鼠标滑过链接时出现，只需设置CSS背景属性为:hover伪类，取代直接设置于链接元素上的样式即可。

a {
    text-decoration: none;
    padding-bottom: 4px;
    white-space: nowrap;
}

a:hover {
    background: url(underline.gif) repeat-x 100% 100%;
}

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!