Question

我想知道你是否可以将链接显示为普通文本。

<a id="" href="" target="_parent"><img src="" width="121" height="20" alt="">
<div style="position:absolute;left:163px;top:1px;font-size: 12px; display: block">
<font color="white">Log in</font></a>

我正在尝试重叠一个也是一个按钮的图像，文本“登录”，它与上面的代码一样工作，但我想知道我是否可以更改显示的“登录”如蓝色和下划线显示为普通文本。

Answer 1

在css中：

a {
  color: inherit;
  text-decoration: inherit;
}

这些值也可能会卡在锚标记的style属性中。

应该导致您的锚标记看起来与父文本的文本颜色和装饰相同。

Answer 2

如果查看层叠样式表（CSS），可以更改链接的颜色和文本样式。

在您的示例中，您可以使用

<a id="" href="" target="_parent" style="color: white; text-decoration: none;"><img src="" width="121" height="20" alt="">
    <div style="position:absolute; sleft:163px;top:1px;font-size: 12px; display: block">
        <font color="white">Log in</font>
    </div>
</a>

但是，我会学习如何使用外部样式表，并通过html <link>中的<head>标记将其链接到HTML。然后，您可以通过标记名称，id或css类来设置单个标记的样式。所以更新的例子是：

<link rel="stylesheet" href="link-to-your-css-file" />

你的css文件中的

有

a.imgLink{
    color: white; text-decoration: none;
}
div.imgLink{ 
    position: absolute; left: 163px; top: 1px; font-size: 12px; display: block;
}

那你的html就是

<a class="imgLink" id="" href="" target="_parent">
    <img src="" width="121" height="20" alt="">
    <div class="imgLink">
         Log In
    </div>
</a>

它不仅使你的HTML“干”，而且只通过更改css文件就可以更好地控制html的样式。

Answer 3

如果您不希望链接加下划线，设置“text-decoration：none”

Answer 4

简答：是的。

更长的回答：是的，这是fiddle，但您可能不想隐藏用户的链接。

stslavik在“text-decoration：inherit”中提出了一个很好的观点。这是另一个fiddle。在我的浏览器中，“blam”和“stslavic”都显示有删除，但我会选择“继承”而不是“无”;对我来说似乎更好。

Answer 5

在html文件中使用此代码

<style>
a {
text-decoration: none;
color: #000; /* or whatever colour your text is */
}
</style>

Answer 6

当然 - 只需调整页面上'a'元素的CSS。

Answer 7

只是一个简单的snippit来显示一些大小/着色的可能性，以便在文本的其余部分更好时使链接适合主题。

＆＃13;

<a href="https://www.website.com/">Wow, Look at this website! It's called Website! It's a shame that this link looks horrible, though!</a>

<h2><a style="color: #A52A2A;; text-decoration: none;" href="https://www.website.com/">Oh, boy! You can now click here to visit Website's website without the link looking bad!</a></h2>

<h2><a style="color: #A52A2A;; text-decoration: none;" href="https://www.bing.com/">Uh oh, the Website website is broken! Visit the pinnacle of innovation, Bing, instead!</a></h2>

＆＃13;

Answer 8

（PS不做广告且没有垃圾邮件。单击“讨厌的AI”进入我的项目）您可以这样做=>

<h1><a style="text-decoration: none; color: inherit;" href="https://obnoxiousnerd.github.io/hate-ai">Hate AI</a></h1>
        <p>A personal assistant that hates you but still helps you.</p>

这里的逻辑是向包含以下内容的标签添加样式：-

text-decoration: none; 
color: inherit;

text-decoration用于删除文本下方的下划线。 color: inherit用于删除链接通常的紫色。

html，将链接显示为普通文本

8 个答案: