CSS中的链接没有装饰
在CSS中，链接是通过使用<a>标签来创建的。默认情况下，链接会带有一些装饰，如下划线和颜色变化。然而，如果你想要去除链接的装饰，可以使用CSS样式来实现。
要去除链接的装饰，可以使用以下CSS样式：
a {
text-decoration: none;
color: inherit;
}上述样式中的text-decoration: none;用于去除下划线，color: inherit;用于保持链接的颜色与其父元素的颜色一致。
这样设置后，链接将不再有下划线，并且颜色将与其父元素保持一致。
应用场景：
- 当你希望链接在页面中不突出显示时，可以去除链接的装饰。
- 在一些特定的设计需求中，可能需要自定义链接的样式，去除默认的装饰是实现自定义样式的第一步。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发：https://cloud.tencent.com/product/mobile
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云元宇宙：https://cloud.tencent.com/product/tencent-metaverse
相关·内容
4回答
请描述您的问题
标题：腾讯云云产品新购特惠，五折上云！
地址：https://cloud.tencent.com/act/first_purchase?utm_source=portal&utm_medium=cdb&utm_campaign=firstpurchase&utm_term=0110
浏览器信息
Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
浏览 488提问于2018-03-12
请描述您的问题
标题：存储桶概述 - 对象存储 - 产品文档 - 帮助与文档 - 腾讯云
地址：https://cloud.tencent.com/document/product/436/6244
浏览 987提问于2018-01-31
4回答
之前买的服务器可以退款么？你这活动力度好大啊
标题：腾讯云云产品新购特惠，五折上云！
地址：https://cloud.tencent.com/act/first_purchase?utm_source=portal&utm_medium=banner&utm_campaign=firstpurchase&utm_term=0109
浏览器信息
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
浏览 1602提问于2018-01-20
4回答
我已经为h2标签设置了一些样式(颜色、字体大小等)，但是当我把"A“标签放在里面时，样式就变成了链接。我的html：
<h2>
<a class="no-decor" href="http://localhost/xxx/">Link</a>
</h2>
所以，如你所见，我创建了"no-decor“类。它应该继承h2的"a“标签的样式。
a.no-decor {
color:inherit;
font-family:inherit;
font-size:inherit;
浏览 5提问于2009-02-04得票数 34
回答已采纳
1回答
我不明白为什么text-decoration: none在下面的代码中不能工作。它不能删除单词yes的下划线。
.button {
color: black;
text-decoration: none;
}
body {
font-family: 'Roboto', 'Microsoft JhengHei', sans-serif;
font-size: 24px;
}
<a href="www.example.com">
<div class="button" id="yes&
浏览 7提问于2016-04-29得票数 4
回答已采纳
3回答
(它在FF中有效)如何使用CSS删除已访问链接的下划线？我试过了：
a:visited {
color: rgb(255, 255, 255);
text-decoration: none !important;
}
和
a:visited {
color: rgb(255, 255, 255);
text-decoration: none;
}
浏览 0提问于2011-02-06得票数 2
回答已采纳
19回答
我正在尝试有一个链接显示在白色，没有下划线。文本颜色正确地显示为白色，但蓝色下划线顽固地保持不变。我在CSS中尝试了text-decoration: none;和text-decoration: none !important;来删除链接下划线。两种方法都不起作用。
.boxhead .otherPage {
color: #FFFFFF;
text-decoration: none;
}
<div class="boxhead">
<h2>
<span class="thisPage">Current
浏览 6提问于2010-05-07得票数 639
回答已采纳
3回答
为什么我的超链接不能改变颜色或加下划线？我在我的CSS中有一个标准的VS2010站点：
a:link, a:visited
{
color: #034af3;
outline: none;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
outline: none;
}
a:active
{
color: #034af3;
outline: none;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
我做错了什么？我来错地方了吗？谢谢!
浏览 2提问于2012-06-06得票数 0
回答已采纳
1回答
我有一些html和css，我试着去掉锚标签的蓝色和下划线。 #title-bar {
background-color: rgba(34, 70, 136, 0.87);
color: black;
font-size: 3em;
}
a {
color: inherit;
text-decoration: none;
}
a:visited {
color: inherit
}
a:hover {
text-decoration: none;
color: inherit;
}
a:focus {
浏览 30提问于2020-05-03得票数 0
4回答
我有一个链接，我想在其中更改文本的颜色，而不是我为超链接设置的颜色。我的代码是：
<span class="button"><%= link_to "Create new scenario", :action => "create" %></span>
我的CSS是：
a:link {
color:rgb(50%, 15%, 5%);
text-decoration:none;
}
.button {
-moz-border-radius-bottomleft:6px;
-moz
浏览 0提问于2009-05-24得票数 1
4回答
我尝试用图片实现工具提示。这是可行的。但我有两个问题：
如果我在word TooltipText上移动鼠标，应该只显示虚线。但这个词也有下划线(因为Link)。
我想禁用链接，因为它是一个工具提示。CSS属性‘指针-事件:无；’禁用链接，但工具提示不起作用。
HTML:
<div class="col-lg-4">
<a href="#">
<div class="hover-img"><strong class="dotted">Toolti
浏览 0提问于2019-01-19得票数 0
回答已采纳
2回答
我正在处理一个HTML电子邮件签名，这必须使用基本的HTML。我必须使用非常简单的CSS，表格和声明内联CSS的一切。总之，它的工作很好，但我有一个问题的链接。我可以用条纹表示链接没有下划线或颜色：
<a style="text-decoration: none; color:inherit!important;" href="https://#">link</a>
但不知道是否可以添加:悬停实体内联？
a: hover {text-decoration: underline;}
任何想法都欢迎！
浏览 3提问于2022-01-13得票数 0
4回答
在Bootstrap 4中，我理解它将默认的文本装饰设置为none。
但是使用Bootstrap 5，如果我只是添加一个原始的锚标记，它现在显示的是蓝色书写和下划线。
我只想在悬停的时候展示神仙。这是引导5在发行版中改变的东西吗？我找不到任何说明它的文件。
目前我使用：
a {
text-decoration: none;
color: inherit;
}
a:hover {
text-decoration: underline;
color: inherit
}
但这也影响了任何按钮的链接。
<a href="{% url '
浏览 6提问于2020-12-28得票数 11
回答已采纳
3回答
标签上的文字装饰不起作用
、、、
我正在尝试从<a>标记中删除所有链接样式。我试过各种各样的东西，但都没有用。我可以让下划线离开，但访问的链接仍然是不同的颜色。简单的解决办法是先设置文本的颜色(这很有效)，但我不想那样做。我在这里转载了这个问题：
我假设这与我在<h2>标记中有一个<a>标记有关？
<a href="http://google.com"><h2>
Google
</h2></a>
a:link {
text-decoration: none !important;
}
a:visited {
浏览 4提问于2016-03-11得票数 0
回答已采纳
我已经尝试了我能想到的所有方法，但不管我怎么做，MailChimp要求任何带有href的<a>都有color: inherit !important; text-decoration: inherit !important，因为Outlook绝对是垃圾，这意味着我所有的链接都会显示为蓝色并带有下划线。
在这个例子中，我可以添加一个链接，它会变成蓝色：
<td style="color:#27646a;font-family:Georgia, serif;font-size:16px;font-weight:bold;" mc:edit="button&
浏览 0提问于2019-06-05得票数 0
在顺风css中，默认的下划线颜色是黑色。例如，如何将此颜色更改为浅绿色。它们列出了一种方法，用于更改基本样式中默认的下划线颜色，如下所示
@tailwind base;
a {
color: theme('colors.blue');
text-decoration: underline;
}
@tailwind components;
@tailwind utilities;
如何更改默认的正常下划线颜色，例如span标记
浏览 2提问于2020-04-19得票数 9
回答已采纳
7回答
我有一个链接，比如：
HTML:
<a href="#" title=""> <img src="stack.png" alt="" title="" /> stackoverflow </a>
CSS:
a { text-decoration: underline}
我想从图像中删除underline。
我试过：
a img {text-decoration:none}
但这不管用。
B:如果我向display:block添加了一个img，我就可以做到这一点，但这可能会对站
浏览 5提问于2011-06-07得票数 7
回答已采纳
3回答
我有下面的HTML和CSS片段，我想要"!“不要划下划线，但事实是这样的。我做错了什么？
p {
color:red;
text-decoration:
underline;
font-size: 1.2em;
}
span.none {
text-decoration: none;
}
<p class="p">Click the thumb<span class="none">!</span></p>
浏览 4提问于2016-11-27得票数 5
回答已采纳
在使我的标题徽标文本成为一个链接后，它变成了这个颜色。我不能在我的生活中在CSS中瞄准它，我如何将它的颜色改回白色？请帮帮忙，我什么都试过了，不知道该怎么办。谢谢。 ? HTML： <header>
<div class"container">
<div id"branding">
<a href="index.html"/>
<h1><span class="highlight"
浏览 140提问于2017-10-28得票数 1
回答已采纳
当将wordpress主题与woocommerce集成时，当在产品框中悬停游标时，不能显示“添加到购物车”按钮，而只在产品框中将光标悬停到底部时才显示问题，如下面的GIF：
woocommerce.css
.woocommerce ul.products li.product .button {
margin: 1em 0 3px 0.3em;
}
.woocommerce a.button {
/* font-size: 100%; */
/* margin: 0; */
/* line-height: 1; */
/* cursor: poi
浏览 1提问于2015-12-10得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
