Web Front-end
CSS Tutorial
How to set the color of html a tag? Summary of color settings for hyperlinks (css style)
How to set the color of html a tag? Summary of color settings for hyperlinks (css style)
Everyone should be familiar with the
hyperlinka tag. This article mainly talks about the basic css style settings of the a tag. It introduces four color changes. I hope you can practice more. Below Let us read this article together
First we need to know the color setting of the html a tag:
We all know that in html the a tag is in the web page What does the default color look like? Now try the code to see:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>PHP中文网</title> </head> <body> <a href="#">php中文网</a> </body> </html>
This is the code for a basic html document. Look at the display effect in the browser:
The unclicked URL above is blue like this, and after being clicked, it is purple. Such a link does not look good. We need to set a color for the a tag. For example, if I want to set a color for unclicked URLs, let's say red. Before being clicked, it is red, and after being clicked, it is black. Let’s do the effect:
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
a:link{color:red;}
a:visited{color:black;}
</style>
</head>
<body>
<a href="#">php中文网</a>
</body>This is a simple css code, let’s take a look at the effect:
This is The style that has not been accessed is red;
This is the style that has been accessed and is black. Let’s explain the code:
a:link: It is an unvisited style. You can add many things to it, such as removing underlines, changing colors and other functions. ;
a:visited: It is the style after being clicked. You can also add many elements to it, and you can underline, change color, zoom in and other functions;
a:hover: This is the mouse hover style. There will be examples of this later. Let’s get to know it first. You can set the color to change when the mouse is parked at the position of the hyperlink;
a:active: This is said to be an activated style. To put it simply, it is a style that will appear instantly when you click the mouse. This style is found on many websites;
Now let’s take a look at an example, the effect of putting all the above four in:
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
a:link{color:red;}
a:visited{color:black;}
a:hover{color:pink;}
a:active{color:#ccc;}
</style>
</head>
<body>
<a href="#">php中文网</a>
</body>Let’s take a look now at the browser The effect shown in:
This is the effect of mouse hovering, made
This is the click moment Effect. (Want to see more, please click css video tutorial)
Summary of hyperlink a tag:
So there are four types of a tag Now that we have introduced the CSS styles of anchor pseudo-classes, let’s recall the four uses. One is the unclicked style, which is the style that is displayed normally without being clicked. The style after being clicked is the style after you click the tag. , and another one is the mouse hover style, which changes when you put the mouse on it. This effect is very useful. You will know its use later. The last one is the effect at the moment of click. These four This effect can be said to be the four necessary styles for a tags, so the settings can be better.
【Editor’s Recommendation】
html5 What is the usage of datalist tag? Here are usage examples of the datalist tag
#What is the include tag in html? html include implements configuration parsing
The above is the detailed content of How to set the color of html a tag? Summary of color settings for hyperlinks (css style). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What file is index.html?
Feb 19, 2024 pm 01:36 PM
index.html represents the home page file of the web page and is the default page of the website. When a user visits a website, the index.html page is usually loaded first. HTML (HypertextMarkupLanguage) is a markup language used to create web pages, and index.html is also an HTML file. It contains the structure and content of a web page, as well as tags and elements used for formatting and layout. Here is an example index.html code: <
Solve the problem that hyperlinks cannot be opened
Feb 18, 2024 am 09:57 AM
How to solve the problem that hyperlinks cannot be opened. With the rapid development of the Internet, hyperlinks have become an indispensable part of our daily lives. We often see and use hyperlinks on various platforms such as web pages, emails, and social media. However, sometimes we may encounter problems with hyperlinks not opening, which makes us confused and frustrated. In this article, we will discuss the reasons why hyperlinks cannot be opened and their solutions, hoping to help you solve this problem. First, let us understand the possible reasons why hyperlinks cannot be opened. The following are some common
What should I do if WPS cannot open a hyperlink? Solution to WPS hyperlink not opening
Mar 13, 2024 pm 08:40 PM
When many of our friends use WPS to edit content, they sometimes add hyperlinks to specific text. Recently, some friends have reported that WPS hyperlinks cannot be opened and cannot be clicked to access after using many methods. About this How to solve the problem? In this software tutorial, the editor will share the specific solutions, hoping to help the majority of users. Solution to WPS hyperlink not opening: Method 1: Move the mouse over the hyperlink to see if it becomes clickable. 1. Open the software, click "File" in the upper left corner of the page, and select "Options" in the menu below. 2. After entering the new interface, click "Edit&rdq" on the left
Can't open hyperlink in word document
Feb 18, 2024 pm 06:10 PM
In recent years, with the continuous development of network technology, our lives are inseparable from various digital tools and the Internet. When processing documents, especially in writing, we often use word documents. However, sometimes we may encounter a difficult problem, that is, the hyperlink in the word document cannot be opened. This issue will be discussed below. First of all, we need to make it clear that hyperlinks refer to links added in word documents to other documents, web pages, directories, bookmarks, etc. When we click on these links, I
How to remove the color of a tag in css
Apr 25, 2024 pm 05:42 PM
To remove the inherent color of the a tag, you can use the following method: Use the CSS color property to specify the text color. Use the CSS link-color property to specify link color. Use the CSS text-decoration property to remove underline and default text color. Use the CSS hover color property to change the text color on mouseover. Use the CSS visited color property to change the text color of visited a tags.
How to jump to another page using a tag
Sep 11, 2023 pm 04:01 PM
a tag to create a hyperlink, and then through the a tag, you can link one page to another page. Detailed introduction: To achieve page jump, you need to fill in the URL of the target page into the href attribute. The URL can be a relative path or an absolute path. The relative path is the path relative to the current page, and the absolute path is the complete URL. address.
Why can't the hyperlink be opened?
Feb 22, 2024 pm 03:33 PM
As one of the common elements in web pages, hyperlinks are often used to point to other web pages, files or specific locations. However, sometimes we encounter a situation where a hyperlink cannot be opened, which can be caused by a number of reasons. First, the failure to open a hyperlink may be caused by an incorrect link address. When creating a hyperlink, we need to make sure that the link's address is correct. If the address contains special characters or spaces, the link may not open. In addition, if the link address changes or the target file has been moved or deleted, the link will not be opened.
How to implement PHP code to jump to a specified page
Mar 07, 2024 pm 02:18 PM
When writing a website or application, you often encounter the need to jump to a specific page. In PHP, we can achieve page jump through several methods. Below I will demonstrate three common jump methods for you, including using the header() function, using JavaScript code, and using meta tags. Using the header() function The header() function is a function used in PHP to send original HTTP header information. This function can be used in combination when implementing page jumps. Below is a
