Html 如何使这些按钮不显示为蓝色链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10143357/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make these buttons not appear as blue links
提问by alpha_nom
So I'm just trying to create a small website. (Don't worry that's not going to be the title) Right now the "Home" "News" "Gallery" and "About us" are not actual buttons that direct to another page. When I do
所以我只是想创建一个小网站。（别担心这不是标题）现在“主页”“新闻”“画廊”和“关于我们”并不是指向另一个页面的实际按钮。当我做
<a href="Mainpage.htm"> Home </a>
The button turns into color purple and it is underlined. (I know this is how links are shown) But is there a way that I can make these buttons stay color orange like in the picture without them turning blue and underlined. Thanks http://imgur.com/Czsk4
按钮变为紫色并带有下划线。（我知道这就是链接的显示方式）但是有没有一种方法可以让这些按钮保持图片中的橙色，而不会变成蓝色和带下划线。谢谢 http://imgur.com/Czsk4
回答by Ricketts
You can set the styles inline, but the best way to do it is through a css class.
您可以内联设置样式，但最好的方法是通过 css 类。
To do it inline:
内联执行：
<a href="Mainpage.htm" style="color: #fb3f00; text-decoration: none;">Home</a>
To do it through a class:
要通过一个类来做到这一点：
<a href="Mainpage.htm" class="nav-link">Home</a>
a.nav-link:link
{
color: #fb3f00;
text-decoration: none;
}
a.nav-link:visited
{
color: #fb3f00;
text-decoration: none;
}
a.nav-link:hover
{
color: #fb3f00;
text-decoration: none;
}
a.nav-link:active
{
color: #fb3f00;
text-decoration: none;
}
To do it through a class, you need to put the css code in a separate css file and link it in or you can put it in the head of the document. The best practice is to put it in an external css file so it can be used throughout.
要通过一个类来做，你需要把css代码放在一个单独的css文件中并链接进去，或者你可以把它放在文档的头部。最佳做法是将它放在一个外部 css 文件中，以便它可以在整个过程中使用。
If you want the orange to be on every link throughout, just remove the ".nav-link" part of the classes and remove the class="nav-link" from the link tag. This will make all links orange unless you have defined a another class and explicitly applied it to a link tag.
如果您希望橙色始终出现在每个链接上，只需删除类的“.nav-link”部分并从链接标签中删除 class="nav-link"。这将使所有链接变为橙色，除非您定义了另一个类并将其显式应用于链接标记。
Good Luck!
祝你好运！
回答by gregmac
Using CSS instead of inline styles will work much better:
使用 CSS 而不是内联样式会更好地工作：
a {
color:orange;
text-decoration:none;
}
You can also get fancier and have the underline appear when you hover:
您还可以变得更漂亮，并在悬停时显示下划线：
a:hover, a:focus {
text-decoration:underline;
}
This can help improve user experience (UX), though if the links are in the header it may be naturally apparent that they are links. (UX design is more complex than this of course, because you have to consider things like touchscreen users that have no "hover". :) )
这有助于改善用户体验 (UX)，但如果链接位于标题中，则它们可能很明显是链接。（UX 设计当然比这更复杂，因为您必须考虑诸如没有“悬停”的触摸屏用户之类的事情。:)）
回答by Andres Ilich
All links come with different states so if you want them to stay with just one color you can modify all the states together like so:
所有链接都有不同的状态，因此如果您希望它们只保留一种颜色，您可以像这样一起修改所有状态：
a:link, a:visited, a:hover, a:active { color: orange }
回答by Tommyke
You can do that by using CSS. to set this in your code right at the end of the head-section
你可以通过使用 CSS 来做到这一点。在您的代码中将其设置在 head-section 的末尾
<style TYPE="text/css">
a:link, a:visited, a:hover, a:active { color: #ff8080;
text-decoration: none;
}
</style>
and change the #ff8080 in your color
并更改颜色中的 #ff8080
回答by Blvckwolf
I have the perfect solution for you!
我有一个完美的解决方案给你！
I'm copying and pasting straight from my code. make it relevant to you. This definitely works for what you are trying to achieve.
我直接从我的代码中复制和粘贴。让它与你相关。这绝对适用于您想要实现的目标。
<style type="text/css" media="screen">
a:link { color:#ffffff; text-decoration: none; }
a:visited { color:#33348e; text-decoration: none; }
a:hover { color:#91ac48; text-decoration: none; }
a:active { color:#7476b4; text-decoration: underline; }
</style> <a href="/shop">Order Now</a>
