html, displaying a link as normal text
I was wondering if you could display a link as normal text.
<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>
I'm trying to overlap an image that is also a button, with the text "Log in", it开发者_StackOverflow社区 works as it is with the code above, but I was wondering if I can change the "log in" which displays as blue and underlined to appear as normal text.
In css:
a {
color: inherit;
text-decoration: inherit;
}
These values can also be stuck in your anchor tag's style attribute.
Should result in your anchor tags looking the same as the text color and decoration of the parent(s).
If you have a look at Cascading Style Sheets (CSS) you can change the colour and the text style of the link.
In your example, you could use
<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>
However I would learn how to use external stylesheets and link them to your HTML through the <link> tag in the <head> of your html. You can then style up individual tags through the tag name, an id or a css class. So an updated example would be:
<link rel="stylesheet" href="link-to-your-css-file" />
in your css file have
a.imgLink{
color: white; text-decoration: none;
}
div.imgLink{
position: absolute; left: 163px; top: 1px; font-size: 12px; display: block;
}
Then your html would be
<a class="imgLink" id="" href="" target="_parent">
<img src="" width="121" height="20" alt="">
<div class="imgLink">
Log In
</div>
</a>
Not only does it make your HTML "dry" but it gives you greater control over the styles of your html by only changing the css file.
If you don't want the link to be underlined, set " text-decoration:none"
use this code in your html file
<style>
a {
text-decoration: none;
color: #000; /* or whatever colour your text is */
}
</style>
Short answer: yes.
Longer answer: Yes, here is a fiddle, but you probably don't want to hide links from your user.
stslavik makes a good point with "text-decoration: inherit". Here is another fiddle. On my browser the "blam" and "stslavic" both show with strike-through, but I'd go with the "inherit" versus the "none"; just seems better to me.
(P.S not advertising this and no spam. Click on 'Hate AI' to reach my project) You can do this =>
<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>The logic here was adding a style to the a tag which contains the following:-
text-decoration: none;
color: inherit;
text-decoration for removing the underline under the text.
color: inherit for removing the usual purple color of links.
Sure - just adjust the CSS for 'a' elements on the page.
Just a simple snippit to show some size/coloring possibilities, to make your link fit thematically when the rest of your text a bit better.
<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>
加载中,请稍侯......
精彩评论