巧妙利用CSS自定义网页下划线样式
实现方法很简单，在源代码的<head>和<head>之间加上如下的CSS语法控制：
<style type="text/css">
<!--
a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red}
a:visited { text-decoration: none;color: green}
-－>
</style>
其中：
a:link 指正常的未被访问过的链接；
a:active 指正在点的链接；
a:hover 指鼠标在链接上；
a:visited 指已经访问过的链接；
text-decoration是文字修饰效果的意思；
none参数表示超链接文字不显示下划线；
underline参数表示超链接的文字有下划线
下面这行文字就是我们刚才做的效果。
效果演示
同样，如果讲none替换成overline则给超链接文字加上划线，换成line-through给超链接文字加上删除线，blink则使文字在闪烁。
巧妙利用CSS自定义网页下划线样式
CSS为网页设计者们提供了丰富而灵活的页面元素表现形式的控制手段。但是，或许你可能注意到了，对于下划线，CSS提供的可选操作却不是很多。一般情况下，人们看到的下划线基本上都是横直线，缺少生气和灵动。不过，路并不是死的，通过一些绝妙的改造，我们还是可以做出富有创意的下划线来使页面更为美观。
这是一个自定义下划线的例子：自定义的下划线 。是不是很酷呢？除了能让你的网页呈现出一个与众不同的风格之外，它还能对于文档中不同的文字类型给与不同的视觉外观，起到提醒或者着重的作用。
下面我们就来一起学习如何自定义与众不同的下划线。
首先，我们得先准备一幅作为下划线的图片。你可以利用先成的，也可以自己动手绘制。需要提醒注意的是，你所准备的图片应该适合水平方向上的重复，最好还能使透明的GIF格式，这样能够确保背景不被遮挡。
另外，如果你所准备的下划线图片在高度（粗细）上占用比较多的像素，那么，应当增加该行文本和下行文本之间的行距（line-height）空间，可以这么设定：
p { line-height: 1.5; }
接下来要做的事情是取消原来默认的下划线，这样我们才能把自定义的下划线应用到指定文本，使用如下的CSS设定（它的含义是让超链接文字没有任何修饰）：
a { text-decoration: none; }
好了，现在可以来创建自定义的下划线了，这里，我们用准备的图片设定为超链接元素的背景图片，如下：
a { background-image: url(underline.gif); }
当然，文字的长度未必和原图的长度相等，这就需要考虑图片重复的问题，也就是说，应当把重复限定在水平方向的X轴上，可以如下设定：
a { background-repeat: repeat-x; }
还有个必须考虑的问题，就是字的大小改变怎么办？要让下划线的图片始终显示在超链接文字的下方，而不必理会文字大小的话，我们应当使用CSS中的背景位置（background-position）属性来定位图片位于超链接元素色底部。而对于如箭头这样的下划线图片，还得考虑超链接的文本边缘和图片边对齐。 下面的这个例子将下划线背景图片的位置限定在右下角：
a { background-position: 100% 100%; }
如何控制自定义的下划线图片和文字之间的空白呢？这个可以通过增加填充（padding）来做到。下划线图片相对于超链接文本基线（baseline）的确切位置以来与所用的字的大小。建议你一开始将底部填充（bottom-padding）的大小设定同下划线图片的高度相等，然后再慢慢调整到合适位置（下面这个CSS设定超链接的底部填充为4像素）：
a { padding-bottom: 4px; }
因为下划线的图片被定位在超链接元素的底部，所以需要确保所用的超链接文本没有跨行，否则，只有处在最下面的超链接文本会出现自定义的下划线了。怎么解决呢，那就是阻止超链接文本跨行产生，可以通过CSS的white-space属性来完成：
a { white-space: nowrap; }
好了，把上面提到的这些超链接标记的CSS设定合并起来，结果如下：
a {
text-decoration: none;
background: url(underline.gif) repeat-x 100% 100%;
padding-bottom: 4px;
white-space: nowrap;
}
还记得有些超链接文本没有下划线，但是当鼠标移到它的上面的时候，下划线就浮现出来的情况么？自定义的下划线也可以做到这个效果，那就在:hover上设定超链接背景，而不是在超链接标记a上设定，如下：
a {
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}
a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}
怎么样，是不是很简单呢？在来看看一些例子和它们对应的CSS设定：
静态下划线
a#example3a {
text-decoration: none;
background: url(''http://tech.tom.com/images/computer/2004/02/04/diagonal.gif'') repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 2px
}
浮动效果下划线
a#example3b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 2px;
}
a#example3b:hover {
background: url(''http://tech.tom.com/images/computer/2004/02/04/diagonal.gif'') repeat-x 100% 100%;
}
静态下划线
a#example4a {
text-decoration: none;
background: url(''http://tech.tom.com/images/computer/2004/02/04/flower.gif'') repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 10px
}
浮动花朵效果下划线
a#example4b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 10px;
}
a#example4b:hover {
background: url(''http://tech.tom.com/images/computer/2004/02/04/flower.gif'') repeat-x 100% 100%;
}
静态箭头下划线
a#example1a {
text-decoration: none;
background: url(''http://tech.tom.com/images/computer/2004/02/04/arrow.gif'') repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 5px
}
浮动动画箭头下划线 （这里箭头会出现滚动，不过这一滚动图片的效果只在部分浏览器中看得到）
a#example2b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 5px;
}
a#example2b:hover {
background: url(''http://tech.tom.com/images/computer/2004/02/04/animarrow.gif'') repeat-x 100% 100%;
}
相关推荐
在网页设计中，CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括SVG、XHTML等）文档中元素外观、布局和结构的语言。...通过CSS，我们可以完全自定义超链接的外观和行为，使得网页设计更加个性化和专业。
解压密码：RJ4587 超链接和按钮在网页中是最为基本的元素了，我们可以通过设置CSS样式将链接外观做一些简单的调整，比如文本大小、颜色和下划线。今天我们分享的一个基于CSS3的自定义样式超链接按钮，并且鼠标滑过...
在CSS（层叠样式表）中，`<a>`元素用于创建超链接，它能够将文本或图像与其他网页、文件或页面内的位置关联起来。在设计网页时，我们经常需要自定义这些超链接的外观，使其符合整体设计风格。这里我们将深入探讨CSS...
利用CSS，我们可以实现各种视觉效果，包括创建浮雕式的超链接，这使得网页元素更具交互性和吸引力。在本主题中，我们将深入探讨如何使用CSS创建浮雕效果的超链接，并分享一些实用技巧。 首先，让我们理解浮雕效果。...
然而，在某些设计中，我们可能希望去除超链接的默认下划线，并根据超链接的不同状态自定义颜色和下划线样式。 要实现这一目标，可以通过CSS（层叠样式表）来控制超链接的显示样式。CSS为开发者提供了一系列的伪类...
此外，还可以通过CSS实现更多高级效果，如添加过渡动画、自定义下划线样式、设置链接的边框等。例如，如果想要去除默认的下划线，可以使用`text-decoration: none;`；如果想在鼠标悬停时改变下划线样式，可以利用伪...
CSS允许我们对网页元素进行精细化的样式控制，包括字体、颜色、布局以及我们关注的下划线样式。 要将链接的下划线改为虚线，可以使用CSS的`text-decoration-style`属性。这个属性定义了文本装饰线的样式，其值可以...
【CSS控制超链接样式】是Web前端开发中的一个重要部分，它允许我们自定义HTML中`<a>`标签的外观和行为。以下是对这个主题的详细解释： ### 一、CSS伪类 伪类是CSS中一种特殊的声明，用于指定元素在特定状态下的...
本资源“18种基于html5 svg和css3的神奇超链接动画效果”正是利用这两者的强大力量，创新性地展示了超链接的多样化动画表现形式，突破了传统单一的下划线高亮效果。 SVG（Scalable Vector Graphics）是一种基于XML...
### JavaScript与CSS去除超链接下划线方法 在网页设计中，经常需要对超链接进行样式调整以适应整体页面的设计风格。其中，去除超链接默认的下划线效果是一种常见的需求。下面将详细介绍如何通过JavaScript和CSS来...
【CSS3】是一种强大的网页样式语言，它是对CSS2的扩展和增强，为网页设计师提供了更丰富的视觉表现力。在本资源中，我们探讨的是如何利用CSS3来创建七种不同的鼠标滑过超链接时的动画特效。这些特效能够极大地提升...
本篇将深入探讨标题提及的“CSS样式文件设置网页中的页面元素”以及在描述中提到的“超链接样式”和“表格样式”。 1. **CSS样式文件**： CSS样式文件通常以`.css`为扩展名，它包含了针对HTML或XML文档中各个元素...
- `css`: 文件夹，存放CSS样式表，用于定义页面的布局和样式，包括Underliner的动画效果样式。 - `related`: 可能包含与Underliner相关的其他文件，如额外的示例或插件版本。 - `fonts`: 字体文件夹，可能存储用于...
去除超链接下划线示例 <style type="text/css"> a:link, a:visited { color: #0063c6; text-decoration: none; } a:active { color: #4da6ff; text-decoration: none; } a:hover { color: red; text-...
3. **CSS样式**：CSS用于控制超链接和SVG元素的初始状态和悬停状态。通过使用`:hover`伪类，可以指定鼠标悬停时发生的变化，例如显示隐藏的SVG图像。 4. **JavaScript**：虽然CSS可以处理简单的悬停效果，但更复杂...
### Android TextView 支持CSS样式详解 #### 一、引言 在Android开发过程中，为了增强界面的表现力和可维护性，开发者常常需要利用到HTML和CSS的技术来丰富`TextView`的内容展示。虽然原生的Android SDK并没有直接...
在实际应用中，超链接的样式可以通过CSS（Cascading Style Sheets）进行自定义，包括颜色、下划线、鼠标悬停效果等。例如： ```css a { color: blue; text-decoration: none; } a:hover { color: red; } ``` ...
在这个案例中，这些伪元素被用来创建超链接的下划线，使得我们可以独立地对这些元素进行样式控制和动画处理，而不影响链接文本本身。 接着，CSS3的`animation`属性是实现动画效果的核心。它包括了多个子属性，如`...
为了使超链接看起来更美观，可以通过CSS去除下划线，并自定义其颜色： ```html <style type="text/css"> a { color: #007bff; /* 蓝色 */ text-decoration: none; /* 去除下划线 */ } a:hover { color: #0056...
- **链接样式**：探讨如何使用CSS美化超链接，包括更改颜色、添加下划线等。 - **状态控制**：讲解`:hover`、`:active`等伪类的使用。 - **2.5 CSS列表** - **列表样式**：介绍如何自定义列表项符号及布局方式。 ...