原文链接:CSS Design: Custom Underlines
由 A List Apart 杂志及作者授权翻译.(Translated with the permission of A List Apart Magazine and the author[s].)
说明:文章中“[补充]”内容系译者所补充添加(来自 CSS 2.0 中文手册),目de是方便读者理解相关内容.
虽然网页设计师通常有大量de方法控制文档如何呈现,但是基本deCSS不能为页面中链接下方de下划线样式提供很多选择.不过只需一点小技巧,您就能获得链接样式显示方式de创作控制.
自定义下划线给一些合适de网站以新de创作机会.自定义下划线还能够被用于为包含在同一个页面中de不同链接提供额外de视觉线索.
开始
您应该从为您下划线创建图形开始.该图将会水平de重复,而如果您希望(网页)背景能够完全显示de话,您需要创建一个透明de.gif文件.
如果您de下划线图形有几像素高,那么您应该增加de文本deline-height(行距),以增加上一行底部与下一行顶部de之间de空间.
p { line-height: 1.5; }
————————————————-
[补充]
语法:
line-height : normal | length
取值:
normal : 默认值.默认行高
length : 百分比数字 | 由浮点数字和单位标识符组成de长度值,允许为负值.其百分比取值是基于字体de高度尺寸.请参阅 长度单位
说明:
检索或设置对象de行高.即字体最底端与字体内部顶端之间de距离.
行高是字体下延与字体内部高度de顶端之间de距离.为负值de行高可用来实现阴影效果.
假如一个格式化de行包括不止一个对象,则最大行高会被应用.在这种情况下,此属性不可以为负值.
此属性对于 currentStyle 对象而言是只读de.对于其他对象而言是可读写de.
对应de脚本特性为 lineHeight .
————————————————-
在能为链接创建自定义下划线之前,我需要移除已经存在de下划线:
a { text-decoration: none; }
————————————————-
[补充]
语法:
text-decoration : none || underline || blink || overline || line-through
取值:
none : 默认值.无装饰
blink : 闪烁
underline : 下划线
line-through : 贯穿线
overline : 上划线
说明:
检索或设置对象中de文本de装饰.
有 href 特性de a ,以及 u , ins 对象默认值为 underline .
对象 strike , s , del ,默认值是 line-through .
假如 none 值在属性声明de最后,所有de先前de其他取值都会被清除.例如,声明 text-decoration: underline overline blink none 等于声明 text-decoration: none .
假如对象没有文本(如 img 元素)或者是空元素(如:), 此属性不会发生作用.
假如您设置 body 对象de此属性值为 none , a 对象将依然保持其原有de下划线样式.除非您针对 a 对象声明此属性值.
指定块对象de此属性将影响其所有内联子对象.而此影响一旦发生,块对象容器最终会受到影响.
在IE4 中可用de值为 overline 和 blink .虽然 blink 值被提供,但它不会被作用.
此属性对于 currentStyle 对象而言是只读de.对于其他对象而言是可读写de.
对应de脚本特性为 textDecoration .
————————————————-
为了创建自定义de下划线,我为链接元素设置背景图像:
a { background-image: url(underline.gif); }
————————————————-
[补充]
语法:
background-image : none | url ( url )
取值:
none : 默认值.无背景图
url ( url ) : 使用绝对或相对 url 地址指定背景图像
说明:
设置或检索对象de背景图像.
当背景图像与背景颜色( background-color )都被设定了时,背景图片将覆盖于背景颜色之上.
此属性对于 currentStyle 对象而言是只读de.对于其他对象而言是可读写de.
对应de脚本特性为 backgroundImage .
————————————————-
我希望这个图像在文本底部顺着水平方向重复而不是垂直方向,否则它就将显示在链接文本自身de后面.我限制背景图像沿着X轴重复:
a { background-repeat: repeat-x; }
————————————————-
[补充]
语法:
background-repeat : repeat | no-repeat | repeat-x | repeat-y
取值:
repeat : 默认值.背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像仅在横向上平铺
repeat-y : 背景图像仅在纵向上平铺
说明:
设置或检索对象de背景图像是否及如何铺排.必须先指定对象de背景图像( background-image ).
此属性对于 currentStyle 对象而言是只读de.对于其他对象而言是可读写de.
对应de脚本特性为 backgroundRepeat .
————————————————-
不管字体de大小如何,为了保证我de图像都出现在链接文本de下面,我将要使用background-position(背景定位)属性定位图像至链接元素de底部.对于某些背景图形,例如箭头,对图像对齐元素de哪一边,您或许有自己de偏好.就我这个例子而言,我将背景置于底部de右边:
a { background-position: 100% 100%; }
————————————————-
[补充]
语法:
background-position : length || length
background-position : position || position
取值:
length : 百分数 | 由浮点数字和单位标识符组成de长度值.请参阅 长度单位
position : top | center | bottom | left | center | right
说明:
设置或检索对象de背景图像位置.必须先指定 background-image 属性.
该属性定位不受对象de补丁属性( padding )设置影响.
默认值为: 0% 0% .此时背景图片将被定位于对象不包括补丁( padding )de内容区域de左上角.
如果只指定了一个值,该值将用于横坐标.纵坐标将默认为 50% .如果指定了两个值,第二个值将用于纵坐标.
如果设置值为 right center ,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位.
对应de脚本特性为 backgroundPosition .
————————————————-
为了给链接文本正文de自定义下划线图形创建空间,我将增加一些padding(填充).依赖于所使用字体de大小,下划线图形de精确位置将会相对于链接文本de基线发生改变.建议您从bottom-padding开始,与下划线图形高度同高,调整以适合于您de需要:
a { padding-bottom: 4px; }
————————————————-
[补充]
语法:
padding-bottom : length
取值:
length : 由浮点数字和单位标识符组成de长度值 | 或者百分数.百分数是基于父对象de宽度.不允许负值.
说明:
检索或设置对象底边de内补丁.对于 td 和 th 对象而言默认值为 1 .其他对象de默认值为 0 .
在IE5.5 中此属性支持内联对象使用.而在此前de版本中,内联要素要使用该属性,必须先设定对象de height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block .
此属性对于 currentStyle 对象而言是只读de.对于其他对象而言是可读写de.
对应de脚本特性为 paddingBottom .
————————————————-
因为下划线图形是定位于链接元素de底部,所以我需要保证链接不能横跨多行(如果他们被允许跨越多行,那么只有最低de一行链接文本显示自定义下划线).我将使用CSSdewhite-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 属性
说明:
设置或检索对象内空格字符de处理方式.
空格字符,像换行,空格,TAB,在HTML文档中默认de是被忽略de.当此属性设置为 normal 或者 nowrap 时,您可以使用不换行空格de命名实体 来添加空格,用 br 元素来添加换行.
此属性对您使用文档对象模型(DOM)操作de内容de影响与其对IE显示内容de影响一样.
此属性作用于块对象.
此属性对于 currentStyle 对象而言是只读de.对于其他对象而言是可读写de.
对应de脚本特性为 whiteSpace .
————————————————-
链接元素de所有CSS属性可以合并为:
a {
text-decoration: none;
background: url(underline.gif) repeat-x 100% 100%;
padding-bottom: 4px;
white-space: nowrap;
}
如果您想自定义下划线de效果只在鼠标滑过链接时出现,只需设置CSS背景属性为:hover伪类,取代直接设置于链接元素上de样式即可.
a {
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}
a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}
示例
