巧妙利用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%;
}
相关推荐
7款CSS3鼠标滑过超链接时下划线动画展示特效是一款使用伪元素来制作超链接的下划线,并使用CSS3 animation来制作各种动画效果。
css自定义文件上传按钮样式
解压密码:RJ4587 超链接和按钮在网页中是最为基本的元素了,我们可以通过设置CSS样式将链接外观做一些简单的调整,比如文本大小、颜色和下划线。今天我们分享的一个基于CSS3的自定义样式超链接按钮,并且鼠标滑过...
css 浮雕式 超链接 简单实用 还好看呢
CSS定义下划线样式_莱茵河的小鱼_新浪博客.mht
CSS自定义鼠标显示的形状,CSS自定义鼠标显示的形状
CSS改变超链接属性 .doc
Sass mixin准备切换到使用CSS自定义属性(又名CSS变量)
去掉html超链接下划线的CSS代码。三局简洁的css代码就能让超链接没有下划线。
CSS自定义图片热区示例代码,直接在HTML里,查看代码
css伪类 超链接 连接的用法 描述 link的样式说明
jQuery+CSS实现淡入效果的超链接样式,代码简单,容易使用!
使用CSS样式美化超链接和鼠标指针PPT学习教案.pptx
CSS自定义表单美化JS代码源码下载 CSS自定义表单美化JS代码源码下载 CSS自定义表单美化JS代码源码下载 CSS自定义表单美化JS代码源码下载 CSS自定义表单美化JS代码源码下载
一款用纯CSS3打造的自定义Tooltip边框的应用,之前我们讨论过如何用CSS3来实现不同样式的Tooltip,今天的这款Tooltip却可以用CSS3来自定义边框,边框呈涂鸦风格。用CSS3实现自定义边框的好处是可以自适应边框内部的...
css中关于超链接的四个属性一般正常顺序为:link,visited,hover,active,即: a:link 链接平常的状态 a:visited 链接被访问过之后 a:hover 鼠标放到链接上的时候 a:active 链接被按下的时候
jQuery+animate.css自定义弹窗动画插件,带有多种弹窗方式,具体看下方说明。
这个是我花了20分钟自己从设计图片,写CSS,到调整,来完成的一个自己认为很漂亮的自定义下来菜单,使用起来非常简单,只需外调一个css和一个js文件,页面中仍然按照原来的写标签,另外,只在IE6.0的版本上测试通过...
CSS自定义属性ExpressionCSS自定义属性Expression