css实现下划线与文字不同颜色

最新推荐文章于 2023-10-29 10:06:34 发布
置顶 最新推荐文章于 2023-10-29 10:06:34 发布
阅读量3.2k 收藏
点赞数
文章标签： css xhtml class html url
<style>
.icool{
COLOR: green;
}
a{text-decoration:none}
A:hover
{
COLOR: red;
TEXT-DECORATION: underline
}
</style>
<a href=http://blog.imoso.net ><font class=icool >实现下划线与文字不同颜色</font></a>




<style>
a{text-decoration: none;}
a:hover{
color:red;
background: url('http://tech.tom.com/images/computer/2004/02/04/diagonal.gif') repeat-x 100% 100%;
white-space: nowrap;
padding-bottom:-1px;
}
</style>
<a href="blog.imoso.net">实现下划线与文字不同颜色</a>




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.webjx.com</title>
<style type="text/css">
<!--
a.texta {
 text-decoration:underline;
 color:#c00;
}
a.texta:hover {
 color:#666;
}
a.textb {
 text-decoration:overline;
 color:#069;
}
a.textb:hover {
 color:#000;
}
-->
</style>
</head>
<body>
<a href="http://www.webjx.com/" class="texta">www.webjx.com</a>----underline<br /><br />
<a href="http://www.webjx.com/" class="textb">www.webjx.com</a>----overline<br /><br />
</p>
</body>
</html>





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.webjx.com</title>
<style type="text/css">
<!--
a.texta {
 border-bottom:#ccc solid 1px;
 text-decoration:none;
 color:#c00;
}
a.texta:hover {
 border-bottom:#069 solid 1px;text-decoration:none;
 color:#000;
}
a.textb {
 border-top:#ccc solid 1px;
 text-decoration:none;
 color:#c00;
}
a.textb:hover {
 border-top:#069 solid 1px;text-decoration:none;
 color:#000;
}
-->
</style>
</head>
<body>
<a href="http://www.webjx.com/" class="texta">www.webjx.com</a> <br /><br />
<a href="http://www.webjx.com/" class="textb">www.webjx.com</a>
</p>
</body>
</html>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.webjx.com</title>
<style type="text/css">
<!--
a{ color:#c00; text-decoration:none;}
a:hover { color:#666; text-decoration:underline;}
a span { color:#c00;}
-->
</style>
</head>
<body>
<a href="http://www.webjx.com/" class="textb"><span>www.webjx.com</span></a>
</body>
</html>












//下划虚线

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.webjx.com</title>
<style type="text/css">
<!--
a.texta {
 text-decoration:none;
 border-bottom:1px dashed #ccc;
 color:#c00;
}
a.texta:hover {
 border-bottom:1px solid #c00;
 color:#666;
}
a.textb {
 text-decoration:none;
 border-bottom:1px dashed #ccc;
 color:#069;
}
a.textb:hover {
 border-bottom:1px dashed #c00;
 color:#000;
}
-->
</style>
</head>
<body>
<a href="http://www.webjx.com/" class="texta">www.webjx.com</a><br /><br />
<a href="http://www.webjx.com/" class="textb">www.webjx.com</a>
</p>
</body>
</html>
kangyanwen2003
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS定义下划线样式
04-28
CSS定义下划线样式_莱茵河的小鱼_新浪博客.mht
html链接文字颜色下划线,为什么超链接的下划线会和字体颜色不一样呢？
weixin_39976499的博客
06-07 454
新手学HTML/CSS写静态网页的时候，发现li中的超链接，当鼠标悬停在上面时，下划线的颜色和字体不一样，没有找出CSS代码中哪里设置了颜色。Voluptate cillum fugiat.Chess, tomato, mushroom, onions$50.menu-list .title, .menu-list .line{float: left;}.menu-list .price{floa...
HTML（字体，下划线颜色）
最新发布
weixin_74754014的博客
10-29 719
字体加颜色，颜色
【CSS】下划线与文字间距，下划线粗细以及下划线颜色的设置
热门推荐
向着光芒的女孩
09-28 9万+
最开始的时候了解下划线的属性是：text-decoration:underline;但是，很遗憾的是，对于设计做的下划线用浏览器默认属性样式很难调整，使用这个属性并不能调整下划线与文字的间距，而且对于下划线的颜色也不好调整，而使用<u></u>这个标签也是同样的效果。例子：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti
css3下划线跟随文字导航菜单特效
06-05
一款个性的js+css3下划线文字导航菜单特效代码，鼠标经过导航文字时显示下划线效果，还可以改变颜色。
css教程之css设置字体颜色
12-13
font-size:18px;...:设置行与行之间的距离font-weight:bold:设置字体的粗细（粗：bold 正常：normal）font—style:设置字体样式(normal正常，italic斜体)text-decoration:修饰文字(none正常，underline下划线，ov
js+css3下划线文字导航菜单特效
06-24
js+css3下划线文字导航菜单特效是一款个性的网站导航菜单，鼠标经过显示下划线效果，还可以改变颜色。
纯CSS实现导航栏下划线跟随的示例代码
09-24
总之，纯CSS实现的导航栏下划线跟随效果是一种实用的交互设计，它可以增强用户对导航的感知。通过掌握这些CSS技术，设计师可以创造出更多富有创意和用户体验友好的网页设计。在实际项目中，你可以根据需求调整颜色、...
css3下划线跟随文字导航菜单特效.zip
07-11
css3下划线跟随文字导航菜单特效是 一款个性的js css3下划线文字导航菜单特效代码，鼠标经过导航文字时显示下划线效果，还可以改变颜色。
css3下划线跟随文字导航菜单特效特效代码
03-20
css3下划线跟随文字导航菜单特效是一款个性的js+css3下划线文字导航菜单特效代码，鼠标经过导航文字时显示下划线效果，还可以改变颜色。
CSS实现让文字半透明显示在图片上的方法
09-25
标题中的“CSS实现让文字半透明显示在图片上”是一个常见的网页设计技巧，它涉及到CSS层叠样式表的多个属性和技巧。以下是对这个主题的详细说明： 首先，要实现文字半透明显示在图片上，我们需要创建一个包含图片和...
css实现背景半透明文字不透明的效果示例
09-24
总结来说，通过CSS的`rgba()`函数和合理的颜色搭配，我们可以轻松实现背景半透明而文字不透明的效果。在实际应用中，可以根据需求调整颜色值和透明度，以适应不同的设计风格和品牌要求。同时，保持良好的代码习惯，...
HTML基础与层叠样式单CSS课件
06-21
HTML基础知识点涵盖了HTML文档的基本结构、头元素、标题标记、主体元素标记、页面背景颜色与图像设置、HEAD头元素的属性、HTML的常用标记等，而层叠样式单CSS知识点则涵盖了CSS的特点、CSS选择符的定义及使用方法、...
js实现移动端tab切换时下划线滑动效果
10-16
为了实现下划线滑动和颜色变化的过渡效果，我们使用了CSS的`transition`属性。此外，我们还为`<li>`添加了`cursor: pointer`，使其在鼠标悬停时显示为手型，提示用户可以点击。 最后，使用JavaScript来处理Tab的...
html中加个有颜色横线,关于html：更改下划线颜色
weixin_39654322的博客
06-02 5209
我在这里有此代码：echo"$username";首先，如您所见，它带有下划线()。 其次，所有文字均为红色。 那么，是否有将文本($ username)留为红色而下划线为黑的情况？因此，标签。HTML4不推荐使用现在有一个新的css3属性：text-decoration-color因此，您现在可以使用一种颜色的文本和带有文本装饰的下划线-使用另一种颜色...，而无需额外的"换行"元素p {tex...
html更改超链接下划线颜色,超链接去掉下划线_WORD中不取消超链接，只改超链接的颜色和去掉下划线...
weixin_35731579的博客
06-07 3445
ppt超链接去掉下划线1、首先打开PPT。2、“插入”“文本框”“横排文本框”，在空白处写字，调整字的大小等。3、插入”“超链接”，会出现“插入超链接”对话框，在这里选择需要链接到的位置，点击确定。4、这时出现的超链接字体就会有下划线。 5、我们在这里选中超链接字体右击选择字体。6、在弹出的对话框中，选择“下划线线型”为“单线”，将“下划线颜色”设置为和背景色一样的颜色。7、最后超链接字体的下划线...
CSS改变字体下划线颜色
刘晓春
06-29 7103
下图是网页中一个很普通的列表。              这次去见客户的时候，客户觉得下划线的颜色可以变变，网页就变得不单调了（据后来了解，客户上学时出板报，所以对网站的布局和细节非常的重视）。做网站那么久，第一次要换下划线颜色，客户就是上帝，提出这个需求，立马查阅相关资料，发现下划线颜色是随着字体的颜色改变的，不能单独改变。     额，那怎么办？     办法总比困难多，通过使用c
html a 下划线
逐日者
01-08 6639
用代码来实现,找到和这两句了吗？ 样式表语句就加在它们中间。 仅仅加入 a{TEXT-DECORATION:none} 这一句就去掉超链接下划线了 如何让超链接去掉下划线，鼠标停留在上面时有下划线？ style>a{TEXT-DECORATION:none}a:hover{TEXT-DECORATION:underline} 就可以了
css 实现文字下划线颜色粗细
07-15
要实现文字下划线的颜色和粗细，可以使用 CSS 的 text-decoration 属性。具体的实现方法是设置 text-decoration-color 和 text-decoration-style 属性。 下面是一个示例代码： ```html .underline { text-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值