搜索
首页web前端css教程利用CSS,链接下划线也玩自定义_CSS/HTML

  原文链接:CSS Design: Custom Underlines

  由 A List Apart 杂志及作者授权翻译。(Translated with the permission of A List Apart Magazine and the author[s].)

  说明:文章中“[补充]”内容系译者所补充添加(来自 CSS 2.0 中文手册),目的是方便读者理解相关内容。

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

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

开始

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

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

p { line-height: 1.5; }

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

[补充]

语法:

  line-height : normal | length

取值:

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

说明:

  检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。
  行高是字体下延与字体内部高度的顶端之间的距离。为负值的行高可用来实现阴影效果。
  假如一个格式化的行包括不止一个对象,则最大行高会被应用。在这种情况下,此属性不可以为负值。
  此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
  对应的脚本特性为 lineHeight 。

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

  在能为链接创建自定义下划线之前,我们需要移除已经存在的下划线:

a { text-decoration: none; }

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

[补充]

语法:

  text-decoration : none || underline || blink || overline || line-through

取值:

  none  : 默认值。无装饰
  blink  : 闪烁
  underline  : 下划线
  line-through  : 贯穿线
  overline  : 上划线

说明:

  检索或设置对象中的文本的装饰。
  有 href 特性的 a ,以及 u , ins 对象默认值为 underline 。
  对象 strike , s , del ,默认值是 line-through 。
  假如 none 值在属性声明的最后,所有的先前的其他取值都会被清除。例如,声明 text-decoration: underline overline blink none 等于声明 text-decoration: none 。
  假如对象没有文本(如 img 元素)或者是空元素(如:), 此属性不会发生作用。
  假如你设置 body 对象的此属性值为 none , a 对象将依然保持其原有的下划线样式。除非你针对 a 对象声明此属性值。
  指定块对象的此属性将影响其所有内联子对象。而此影响一旦发生,块对象容器最终会受到影响。
  在IE4+中可用的值为 overline 和 blink 。虽然 blink 值被提供,但它不会被作用。
  此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
  对应的脚本特性为 textDecoration 。

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

  为了创建自定义的下划线,我们为链接元素设置背景图像:

a { background-image: url(underline.gif); }

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

[补充]

语法:

  background-image : none | url ( url )

取值:

  none  : 默认值。无背景图
  url ( url )  : 使用绝对或相对 url 地址指定背景图像

说明:

  设置或检索对象的背景图像。
  当背景图像与背景颜色( background-color )都被设定了时,背景图片将覆盖于背景颜色之上。
  此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
  对应的脚本特性为 backgroundImage 。

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

  我们希望这个图像在文本底部顺着水平方向重复而不是垂直方向,否则它就将显示在链接文本自身的后面。我们限制背景图像沿着X轴重复:

a { background-repeat: repeat-x; }

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

[补充]

语法:

background-repeat : repeat | no-repeat | repeat-x | repeat-y

取值:

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 : Valeur par défaut. Méthode de traitement par défaut. Le texte gère automatiquement les sauts de ligne. Si la limite du conteneur est atteinte, le contenu ira à la ligne suivante
 pre : Les nouvelles lignes et autres caractères d'espacement seront protégés. Cette valeur nécessite IE6+ ou !DOCTYPE déclaré comme prise en charge du mode conforme aux normes. Si la déclaration !DOCTYPE ne spécifie pas de mode conforme aux standards, cet attribut peut être utilisé, mais n'aura aucun effet. Le résultat est équivalent à la normale. Voir objet pré
 nowrap : Force tout le texte à être affiché sur la même ligne jusqu'à ce que la fin du texte ou qu'un objet br soit rencontré. Voir l'attribut noWrap

Description :

Définir ou récupérer la méthode de traitement des caractères d'espacement dans l'objet.
Les caractères d'espace, tels que les nouvelles lignes, les espaces et les tabulations, sont ignorés par défaut dans les documents HTML. Lorsque cette propriété est définie sur normal ou nowrap, vous pouvez utiliser l'entité nommée avec espace insécable pour ajouter des espaces et l'élément br pour ajouter des nouvelles lignes.
Cette propriété a le même impact sur le contenu que vous manipulez à l'aide du modèle d'objet de document (DOM) que sur le contenu affiché par IE.
Cette propriété fonctionne sur les objets bloc.
 Cette propriété est en lecture seule pour l'objet currentStyle. Il est lisible et inscriptible par d'autres objets.
La fonctionnalité de script correspondante est whiteSpace .

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

Toutes les propriétés CSS des éléments de lien peuvent être combinées en :

a {
décoration de texte : aucune ;
arrière-plan : url(underline.gif) répéter-x 100 % 100 % ;
padding-bottom : 4px;
espace blanc : nowrap ;
}

Si vous souhaitez personnaliser l'effet de soulignement pour qu'il n'apparaisse que lorsque la souris glisse sur le lien, définissez simplement l'attribut CSS background sur la pseudo-classe :hover pour remplacer le style directement défini sur l'élément de lien.

a {
text-decoration : none;
padding-bottom : 4px;
espace blanc : nowrap;
}

a:hover {
background: url(underline.gif) répéter-x 100% 100%;
}

Exemple

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
丢失的CSS技巧cohost.org丢失的CSS技巧cohost.orgApr 25, 2025 am 09:51 AM

在这篇文章中,布莱克·莫里(Blackle Mori)向您展示了一些骇客,同时试图推动同位HTML支持的极限。如果您敢于使用这些,以免您也被标记为CSS罪犯。

光标的下一个CSS样式光标的下一个CSS样式Apr 23, 2025 am 11:04 AM

具有CSS的自定义光标很棒,但是我们可以将JavaScript提升到一个新的水平。使用JavaScript,我们可以在光标状态之间过渡,将动态文本放置在光标中,应用复杂的动画并应用过滤器。

世界碰撞:使用样式查询的钥匙帧碰撞检测世界碰撞:使用样式查询的钥匙帧碰撞检测Apr 23, 2025 am 10:42 AM

互动CSS动画和元素相互启动的元素在2025年似乎更合理。虽然不需要在CSS中实施乒乓球,但CSS的灵活性和力量的增加,可以怀疑Lee&Aver Lee&Aver Lee有一天将是一场

使用CSS背景过滤器进行UI效果使用CSS背景过滤器进行UI效果Apr 23, 2025 am 10:20 AM

有关利用CSS背景滤波器属性来样式用户界面的提示和技巧。您将学习如何在多个元素之间进行背景过滤器,并将它们与其他CSS图形效果集成在一起以创建精心设计的设计。

微笑吗?微笑吗?Apr 23, 2025 am 09:57 AM

好吧,事实证明,SVG的内置动画功能从未按计划进行弃用。当然,CSS和JavaScript具有承载负载的能力,但是很高兴知道Smil并没有像以前那样死在水中

'漂亮”在情人眼中'漂亮”在情人眼中Apr 23, 2025 am 09:40 AM

是的,让#039;跳上文字包装:Safari Technology Preview In Pretty Landing!但是请注意,它与在铬浏览器中的工作方式不同。

CSS-tricks编年史XLIIICSS-tricks编年史XLIIIApr 23, 2025 am 09:35 AM

此CSS-tricks更新了,重点介绍了年鉴,最近的播客出现,新的CSS计数器指南以及增加了几位新作者,这些新作者贡献了有价值的内容。

tailwind的@Apply功能比听起来更好tailwind的@Apply功能比听起来更好Apr 23, 2025 am 09:23 AM

在大多数情况下,人们展示了@Apply的@Apply功能,其中包括Tailwind的单个property实用程序之一(会改变单个CSS声明)。当以这种方式展示时,@Apply听起来似乎很有希望。如此明显

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具