How to use CSS to manipulate link styles

Source: Internet
Author: User
This article will take a detailed look at controlling hyperlink styles through CSS. We mainly speak text-type hyperlinks, including hyperlinks with or without underscores, hyperlink text color, and other styles.

What is a hyperlink?

Hyperlinks commonly refer to a connection relationship from a Web page to a target, which can be another page, a different location on the same page, a picture, an e-mail address, a file, or even an application. The object that is used to hyperlink in a Web page can be a piece of text or a picture. When a viewer clicks a text or picture that has been linked, the link target is displayed on the browser and is opened or run depending on the type of target.

Code for hyperlinks

<a href= "http://www.php.cn/" target= "_blank" title= "about DIV CSS sites" >DIV+CSS</a>

The parsing is as follows:

HREF followed by linked address destination website address this is http://www.php.cn/.

Target

_blank--Open a link in a new window

_parent--open link in parent form

_self--Opens the link in the current form, which is the default value

_top--Opens the link in the current form and replaces the current entire form (frames page)

The title is followed by a link target description, which is a brief description of the hyperlink being linked URL, or the title

CSS controls hyperlink style-CSS link style is as follows

A:link is the initial state of the hyperlink

A:hover is hovering when you put the mouse on it.

A:active is when the mouse clicks

A:visited is the situation after the visit


1, usually the whole station hyperlink style method

A{color: #333; text-decoration:none;}//The text color style of the whole station is colored: #333, and immediately without underline text-decoration:none;

a:hover {color: #CC3300; text-decoration:underline;} The text color style on the hyperlink to the mouse is changed to color: #CC3300, and the text links underline text-decoration:underline;

2. Control hyperlink style CSS method by setting class in link

Case Hyperlink Code <a href= "http://www.php.cn/" class= "Yangshi" >CSS</a>

Corresponding CSS code

A.yangshi{color: #333; text-decoration:none;}

a.yangshi:hover {color: #CC3300; text-decoration:underline;}

This allows you to control the style of the CSS class name "Yangshi" hyperlink within the link

3. Control the style of hyperlinks by CSS styles that correspond to the parent CSS class outside the hyperlink

Case Hyperlink Code <div class= "Yangshi" ><a href= "http://www.php.cn/" >CSS</a></a>

Corresponding CSS code

. Yangshi A{color: #333; text-decoration:none;}

. Yangshi a:hover {color: #CC3300; text-decoration:underline;}

It is noteworthy here that the A.yangshi and. Yangshi a style CSS code differences

Here is often CSS to the hyperlink style settings, the need for friends can be saved, but also please continue to follow the site's other updates.


Related reading:

Why HTML is garbled and how to fix it


How to learn the div and CSS


css position how to use

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.