How to set link style with CSS-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to set link style with CSS

(*-*)浩

Nov 30, 2019 pm 02:13 PM

css

How to set link style with CSS

We can style links in different ways.

# Set the link of link (Recommended Learning: CSS entry tutorial )

There are many CSS attributes that can set the link style ( For example color, font-family, background, etc.).

The special thing about links is the ability to style them based on the state they are in.

Four states of links:

a:link - ordinary, unvisited link

a:visited - user Visited link

a:hover - the mouse pointer is above the link

a:active - the moment the link was clicked

Example

<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#FF0000;}    /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}  /* 正在被点击的链接 */
</style>
</head>

<body>
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！</p>
<p><b>注释：</b>为了使定义生效，a:active 必须位于 a:hover 之后！！</p>
</body>
</html>

When styling the different states of a link, follow these ordering rules:

a:hover must come after a:link and a:visited

a:active must be located after a:hover

The above is the detailed content of How to set link style with CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement

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

Building the Web We WantApr 11, 2025 am 10:55 AM

On the Microsoft Edge team, we’re committed to an open web and helping to drive innovation forward, which is why we’ve kicked off a new initiative in

Understanding Web Accessibility Color Contrast Guidelines and RatiosApr 11, 2025 am 10:51 AM

What should you do when you get a complaint about the color contrast in your web design? It might seem perfectly fine to you because you’re able to read

Do This to Improve Image Loading on Your WebsiteApr 11, 2025 am 10:32 AM

In the video embedded below, Jen Simmons explains how to improve image loading by using width and height attributes. The issue is that there’s a lot of jank

Getting Acquainted With Svelte, the New Framework on the BlockApr 11, 2025 am 10:29 AM

For the last six years, Vue, Angular, and React have run the world of front-end component frameworks. Google and Facebook have their own sponsored frameworks,

Why JavaScript is Eating HTMLApr 11, 2025 am 10:28 AM

Web development is always changing. One trend in particular has become very popular lately, and it fundamentally goes against the conventional wisdom about

Console Commands GuideApr 11, 2025 am 10:14 AM

The developer’s debugging console has been available in one form or another in web browsers for many years. Starting out as a means for errors to be reported

The Case of the Stolen Domain NamesApr 11, 2025 am 10:12 AM

Back in 2011, the domain name for this site, css-tricks.com, was stolen. "Domain Hijacking," they call it. It wasn't just this site, but around 12 others in

Full-Width Elements By Using Edge-to-Edge GridApr 11, 2025 am 10:09 AM

If you have a limited-width container, say a centered column of text, "breaking out" of that to make a full-width element involves trickery. Perhaps the best

See all articles