Home > Developer > Web Develop

CSS Styles-Links

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

There are many CSS properties that can set the link style. The peculiarity of a link is that it can be styled according to the state in which they are located. Four states of the link:

    • A:link Common, inaccessible links
    • a:visited user has visited the link
    • A:hover the mouse pointer is over the link
    • A:active the moment the link was clicked

When setting styles for different states of a link, follow these order rules:

    • A:hover must be located after A:link and a:visited
    • A:active must be located after a:hover

Common Link Properties:

    • The Color property specifies the colors of the link display
    • The Text-decoration attribute is mostly used to remove underscores from links
    • Background-color attribute specifies the background color of the link
<!--This example shows how to add a variety of styles to a link -<!DOCTYPE HTML><HTML><Head><style>A.one:link{Color:#ff0000;}a.one:visited{Color:#0000ff;}A.one:hover{Color:#ffcc00;}A.two:link{Color:#ff0000;}a.two:visited{Color:#0000ff;}A.two:hover{font-size:150%;}A.three:link{Color:#ff0000;}a.three:visited{Color:#0000ff;}A.three:hover{background:#66ff66;}A.four:link{Color:#ff0000;}a.four:visited{Color:#0000ff;}A.four:hover{font-family:' Microsoft Ya Black ';}A.five:link{Color:#ff0000;text-decoration:None;}a.five:visited{Color:#0000ff;text-decoration:None;}A.five:hover{text-decoration:Underline;}</style></Head><Body><P>Please move the mouse pointer over the links below to see their style changes.</P><P><b><aclass= "One"href= "/index.html"Target= "_blank">This link changes color</a></b></P><P><b><aclass= "both"href= "/index.html"Target= "_blank">This link changes the font size</a></b></P><P><b><aclass= "three"href= "/index.html"Target= "_blank">This link changes the background color</a></b></P><P><b><aclass= "Four"href= "/index.html"Target= "_blank">This link changes the font</a></b></P><P><b><aclass= "Five"href= "/index.html"Target= "_blank">This link changes the decoration of the text</a></b></P></Body></HTML>
<!--This example shows a more advanced example, and we combine several CSS properties to show the link as a box -<!DOCTYPE HTML><HTML><Head><style>a:link,a:visited{Display:Block;Font-weight:Bold;font-size:14px;font-family:Verdana, Arial, Helvetica, Sans-serif;Color:#FFFFFF;Background-color:#98bf21;width:120px;text-align:Center;padding:4px;text-decoration:None;}a:hover,a:active{Background-color:#7A991A;}</style></Head><Body><ahref= "/index.html"Target= "_blank">W3school</a></Body></HTML>

CSS Styles-Links

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More