利用CSS,链接下划线也玩自定义(2)

repeat  : 默认值。背景图像在纵向和横向上平铺
no-repeat  : 背景图像不平铺
repeat-x  : 背景图像仅在横向上平铺
repeat-y  : 背景图像仅在纵向上平铺

说明:

  设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像( background-image )。
  此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
  对应的脚本特性为 backgroundRepeat 。

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

  不管字体的大小如何,为了保证我们的图像都出现在链接文本的下面,我们将要使用background-position(背景定位)属性定位图像至链接元素的底部。对于某些背景图形,例如箭头,对图像对齐元素的哪一边,你或许有自己的偏好。就我们这个例子而言,我们将背景置于底部的右边:

a { background-position: 100% 100%; }

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

[补充]

语法:

  background-position : length || length
  background-position : position || position

取值:

  length  : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 
  position  : top | center | bottom | left | center | right

说明:

  设置或检索对象的背景图像位置。必须先指定 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属性可以合并为:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzdfzs.html