CSS Remove underline

Source: Internet
Author: User
We can use CSS syntax to control the form of hyperlinks, color changes.

Below we do a link: The hyperlink text is not underlined when clicked, the display is blue, when the mouse is underlined on the link, the link text is displayed in red, and when the link is clicked, the link is not underlined and displayed as green.

The implementation method is simple, with the following CSS syntax control 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}
-->
</style>

which
A:link refers to the normal links that have not been visited;
A:active refers to the point of the link;
A:hover refers to the mouse on the link;
A:visited refers to a link that has been visited;
Text-decoration is the meaning of the effect of text modification;
The None parameter indicates that the hyperlink text does not show an underscore;
The underline parameter indicates that the text of the hyperlink is underlined




<style>
A:visited{text-decoration:none; COLOR: #009999}
A:link{text-decoration:none}
A:hover{text-decoration:color: #FF0000; Font-weight:bold; Font-style:italic}
A.1:link{text-decoration:none}
A.1:visited{text-decoration:none; COLOR: #000000}
A.1:hover{text-decoration:none; COLOR: #FFffff; Font-weight:bold; Font-style:italic}
The above sentence text-decoration: no value assigned
</style>

<a class= "1" href= "..." >adfadfas</a>

Class refers to a custom class, you use the name of the category directly, that is. The latter part, although I do not know to use pure numbers directly to define whether there is a bug, but it should be a good habit to define a string containing letters.

The order of the definition is link,visited,active,hover, for the appearance of the page, usually only link and hover can be







When we visit a page, we find that when the mouse is moved to a text with a hyperlink, there is a corresponding underline. However, some Web pages are not. How do I get rid of the underline of the hyperlink in the homepage?

We insert the following code between <HEAD>...</HEAD>.

<style>b {font-weight:700;}
P {padding:5px 0px;
margin:0px;
font-family: XXFarEastFont-Arial, blackbody, XXFarEastFont-Arial;
}
A {Text-decoration:none}
TD {font-family: XXFarEastFont-Arial, Bold, Arial;}
</style>
<script language= "JavaScript" >
var contents = true;
</script>

A simpler approach is to:

<style>
<!--
a {Text-decoration:none}
a:hover {Color:red;text-decoration:none}
--! >
</style>

Below we look at the effect, try to move the mouse to the following hyperlink up, is not the hyperlink will not be underlined.

3, some pages of the link, the original did not underline, you put the mouse point to the link, it will appear underlined, the mouse moved down the line and then there is no. How to achieve this effect.

Can be implemented using cascading style sheets (CSS), editing cascading style sheets in Dreamweaver3 without writing code, as follows:

1 in the Quick Launch bar, click on the cascading Style sheet button (that is, put the mouse to display "Show CSS Styles" button), in the pop-up CSS styles panel double-click (none);

2 At this point, you can see the pop-up edit Style Sheet panel, press the New button on the panel;

3 and then click on the new Style panel pop-up redefine HTML tag (redefine the HTML tag) and then select "A" (hyperlink tag) in the tag and press OK button;

4 at this point you can see the pop-up style dehinition for a dialog box where you can set many properties of the hyperlink, you can set it according to your will, but we are here to remove the annoying underline, so we select "None" in the decoration attribute , so that the underline is removed; then we choose the color: #339966. Press the OK button to return to the edit Style Sheet panel;

5 Press the New button on the edit Style Sheet panel;

6 Click the Use CSS Selector on the new Style panel that pops up, and then select "A:hover" in the Selector selection box on the panel (define the properties of the link when the mouse is over the hyperlink), press OK button;

7 in the pop-up style dehinition for a:hover dialog box, we select "Underline" in the decoration attribute so that the underscore is added; then we choose the color: #FF3300. Press the OK button to return to the edit Style Sheet panel;

8 Press the Don button on the edit Style Sheet panel so that all settings are complete, and you will see the code in Dreamweaver3 's Source check window as shown below between
<style type= "Text/css" >

<!--

A {color: #339966; Text-decoration:none}

a:hover {color: #FF3300; Text-decoration:underline}

-->

</style>

With this code, all of the text links you have on the page are not underlined when you point to the link in the browser, and you will not be underlined until the mouse is crossed. If you want to have this effect on other pages, you can use the above method to set or simpler, copy the code directly and paste it between

Related Article

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.