Detailed graphic explanation on how to remove the underline of HTML hyperlinks-CSS Tutorial-php.cn

Detailed graphic explanation on how to remove the underline of HTML hyperlinks

yulia

Release： 2018-09-19 17:48:59

Original

9609 people have browsed it

In page layout, the a tag is often used. Everyone knows that the a tag is underlined by default and has different colors. Sometimes for the beauty of the page, it is necessary to remove the underlines of some hyperlinks or change the color of the hyperlinks. , do you know how to achieve this effect? This article will tell you how to remove the underline of HTML hyperlinks. Friends who don't know about this can refer to it. I hope it will be useful to you.

Let’s take an example first: When this hyperlink is not clicked, the hyperlink text is not underlined and appears in blue; when the mouse passes over the link, it is underlined and the link text appears in red; when After clicking the link, the link is not underlined and appears in green. The implementation method is very simple. Add the following CSS code between

and :

<style type="text/css">
	a:link { text-decoration: none;color: blue} 
	a:active { text-decoration:blink} 
	a:hover { text-decoration:underline;color: red} 
	a:visited { text-decoration: none;color: green} 
</style>

Copy after login

Among them:

a:link refers to the normal one that has not been visited The link;

a:active refers to the link being clicked;

a:hover refers to the mouse on the link;

a:visited refers to the link that has been visited;

Text-decoration means the text modification effect;

The none parameter indicates that the hyperlink text will not be underlined;

The underline parameter indicates that the hyperlink text will be underlined

Rendering of the mouse passing over:

Detailed graphic explanation on how to remove the underline of HTML hyperlinks

How to remove the underline of a hyperlink

We only need to use a{ text-decoration:none;} You can set the hyperlink label to remove underlines by default. The code is as follows:

<style type="text/css">
	a{text-decoration: none;color: red;}
</style>
<body>
	生活不止眼前的苟且，<a href="#">还有诗和远方的田野</a>
</body>

Copy after login

The effect of not removing the underline:

Detailed graphic explanation on how to remove the underline of HTML hyperlinks

The effect of removing the underline and setting the color to red:

Detailed graphic explanation on how to remove the underline of HTML hyperlinks

Summary: Removing the underline of an HTML hyperlink is very simple, just add the attribute text-decoration:none to it. As for other text-decoration attributes, I won’t introduce too much here. Friends who need it can go to the website to see how to use it.

The above is the detailed content of Detailed graphic explanation on how to remove the underline of HTML hyperlinks. For more information, please follow other related articles on the PHP Chinese website!