HTML：将链接显示为普通文本

Question

HTML：将链接显示为普通文本

16

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

<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>

我想把一个既是图片又是按钮的东西和“登录”文本重叠，用上面的代码可以实现，但我想知道是否能将显示为蓝色下划线的“登录”改成普通文本。

- Foxticity

3

您正在使用早已过时的 <font> 标签，并且缺少一个 </div> 的闭合标签。 - thirtydot

8个回答

11

如果您查看层叠样式表（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>

不过，我建议学习如何使用外部样式表并通过 <link> 标签将它们链接到 HTML 文件的 <head> 中。这样，您可以通过标签名称、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更加DRY，而且通过只更改CSS文件，它还可以让你更好地控制HTML的样式。

- Tim B James

3

如果您不想链接有下划线，可以设置 "text-decoration:none"。

- user975343

2

在你的HTML文件中使用这段代码

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

- Michael

2

简短回答：是的。

更长的回答：是的，这里有一个fiddle，但您可能不想隐藏链接以供用户使用。

stslavik提出了“text-decoration: inherit”的好点。这里是另一个fiddle。在我的浏览器上，“blam”和“stslavic”都显示为中划线，但我会选择“inherit”而不是“none”；对我来说似乎更好。

- DwB

1

我不是在做广告，也不会垃圾邮件。点击“Hate 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>

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

text-decoration: none; 
color: inherit;

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

- Pranav

0

只是一个简单的片段，展示了一些大小/着色的可能性，使得你的链接在整体文本稍微好一点时更符合主题。

<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>

- sparkholiday

0

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

- Hanny

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- stslavik · Accepted Answer

在 CSS 中：

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

这些值也可以嵌入到锚点标签的style属性中。

这将使您的锚点标签看起来与其父元素的文字颜色和装饰相同。