How to use css to manipulate link styles

This article will explain in detail how to control hyperlink style through css. We mainly talk about text-type hyperlinks, including whether the hyperlink is underlined, the color of the hyperlink text, and other styles.

What is a hyperlink?

Hyperlinks generally refer to the connection relationship from a web page to a target. This target can be another web page, or a different location on the same web page, or it can be a picture, an email address, A file or even an application. The object used for hyperlinks in a web page can be a piece of text or an image. When the viewer clicks on the linked text or image, the link target will be displayed on the browser and opened or run based on the type of target.

The code of the hyperlink

<a href="http://www.php.cn/" target="_blank" title="关于div css的网站">DIV+CSS</a>

is parsed as follows:

href followed by the linked address, the target website address here is http://www.php.cn/

target

_blank -- Open the link in a new window

_parent -- Open the link in the parent form

_self -- Open the link in the current form, This is the default value

_top -- Open the link in the current form and replace the entire current form (frame page)

title followed by the link target description, which is the URL of the hyperlink. Brief description of the situation, or title

CSS can control the hyperlink style -css linkThe style is as follows

a:link is the initial state of the hyperlink

a:hover is the situation when the mouse is placed on it

a:active is the situation when the mouse is clicked

a:visited is the situation after the visit

1. Usually the method of styling hyperlinks throughout the site

a{color:#333;text-decoration:none ; } //The color style of text with links to the entire site is color:#333; and directly ununderlined text-decoration:none;

a:hover {color:#CC3300;text-decoration:underline; }//When the mouse is placed on the hyperlink, the text color style changes to color:#CC3300; and the text link is underlined text-decoration:underline;

2. Control the hyperlink style css method by setting the class in the link

Case hyperlink codeCSS

Corresponding CSS code

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

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

Through this setting, you can control the style of the hyperlink with the css class name "yangshi" within the link

3. Control the style of the hyperlink through the css style of the css class corresponding to the parent outside the hyperlink

Case hyperlink code

CSS

Corresponding CSS code

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

.yangshi a:hover {color:#CC3300;text-decoration:underline } Please continue to pay attention to other updates on this site.

Related reading:

Why is the html garbled and the solution

How to learn Div and CSS

How to use position in css

The above is the detailed content of How to use css to manipulate link styles. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn