Introduction to how to use CSS to remove the underline of hyperlinks

Source: Internet
Author: User
We can use CSS syntax to control the form of hyperlinks, color changes, why links must be underlined and color to distinguish it? The main reason is to consider 1, poor eyesight 2, color-blind people ...

Let's do a link like this: The hyperlink text is not underlined when clicked, it appears blue, the link text appears red when the mouse is on the link, and when the link is clicked, the link is not underlined and appears green.

The implementation method is simple, with the following CSS syntax controls between the

<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}--</styl E>

which
A:link refers to a normal link that has not been visited;
A:active refers to the link being point;
A:hover refers to the mouse on the link;
A:visited means a link that has been visited;
Text-decoration is the meaning of the text modification effect;
The None parameter indicates that the hyperlink text does not appear underlined;
The underline parameter indicates that the text of the hyperlink is underlined
-------------------------------------------------------------------------
Demo: Make links in Web pages drop underscores

<style type= "Text/css" > <!--A {Text-decoration:none}--</style>

Insert code between

-------------------------------------------------------------------------

Use CSS to implement linked dashed underline \ Normal underline effect

A {color: #3399FF; font-weight:normal;/*css font effect normal can be changed to bold bold if you remove this line then the default is not to display an underscore */text-decoration:none; */ CSS underline effect: no underline */}
a:hover {color: #4499EE; text-decoration:none;/*css underline effect: No underline */border-bottom:1px #0099CC dotted/*css plus one bottom border is dashed * /}
a{}: is used to control the effect of the connection a:hover{}: is used to control the effect of the mouse move up.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.