How to use CSS to manipulate link styles

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