Home Web Front-end HTML Tutorial Set the font color of hyperlinks and the font color after clicking through HTML

Set the font color of hyperlinks and the font color after clicking through HTML

Jun 12, 2018 am 11:39 AM
font color Hyperlink

This article mainly introduces about setting the font color of hyperlinks and the font color after clicking in HTML. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

CSS for some Special effects prepare specific tools, which we call "pseudo-classes". There are several of them that we often use. Below we will introduce in detail the four pseudo-classes that are often used to define link styles.

Definition of link styles
CSS has prepared specific tools for some special effects. , we call it "pseudo-class". There are several of them that we often use. Below we will introduce in detail the four pseudo-classes that are often used to define link styles. They are:
:link
:visited
:hover
:active
Because we want to define the link style, the anchor tag in the hyperlink - a is essential. The method of writing the anchor tag and pseudo-class link is the basic method of defining the link style. Their The writing method is as follows:
a:link, defines the style of normal links;
a:visited, defines the style of visited links;
a:hover, defines the style when the mouse is hovering over the link;
a:active, defines the style when the mouse clicks on the link.
Example:

a:link { 
color:#FF0000; 
text-decoration:underline; 
} 
a:visited { 
color:#00FF00; 
text-decoration:none; 
} 
a:hover { 
color:#000000; 
text-decoration:none; 
} 
a:active { 
color:#FFFFFF; 
text-decoration:none; 
}
Copy after login

The link color defined in the above example is red, the visited link is green, the link is black when the mouse is hovering over it, and the link is white when clicked.
If the normal link has the same style as the visited link, and the style when the mouse is hovering and clicking is the same, they can also be combined to define:

a:link, 
a:visited { 
color:#FF0000; 
text-decoration:underline; 
} 
a:hover, 
a:active { 
color:#000000; 
text-decoration:none; 
}
Copy after login

The order of link definition
There is no rule without rules. , although the link definition has been written, it also has rules. If the writing order of these four items is slightly wrong, the effect of the link may be lost, so be sure to confirm the order of definition every time you define a link style, link-- visited--hover-active, which is what we often call the LoVe HAte principle (the capital letters are their first letters).
Define local link style
Writing a definition like a:link{} in CSS will change the link style of the entire page, but some local links need to be specialized. This problem is not difficult to solve, as long as the link Just add the specified id or class in front of the style definition.
Example:

#sidebar a:link, 
#sidebar a:visited { 
color:#FF0000; 
text-decoration:none; 
} 
#sidebar a:hover, 
#sidebar a:active { 
color:#000000; 
text-decoration:underline; 
}
Copy after login

Calling method:


The definition method of class is the same as id. Just change #sidebar to .sidebar. Another method is to directly define the link style, which is more Direct, but it is more troublesome to call, as you need to add defined code to each specific link.
Example:

 a.redlink a:link, 
a.redlink a:visited { 
color:#FF0000; 
text-decoration:none; 
} 
a.redlink a:hover, 
a.redlink a:active { 
color:#000000; 
text-decoration:underline; 
background:#FFFFFF; 
}
Copy after login

Calling method:

Link to Script House 1


The definition of the link mainly has three attributes, color (color), text decoration (text-decoration) and background (background)

above That’s the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

CSS Introduction to the use of Border attribute solid

#css Explanation of background:transparent

The role of meta in the html page and the analysis of the cache and non-caching settings of the page

The above is the detailed content of Set the font color of hyperlinks and the font color after clicking through HTML. 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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to change the font color of win7 desktop icons How to change the font color of win7 desktop icons Jan 02, 2024 pm 11:17 PM

The default desktop icon font of win7 is generally white. If we use a white desktop background, the desktop icon text may not be visible. At this time, we can customize the desktop font color through the advanced appearance settings in the personalization settings. The following is Let’s take a look together. Tutorial on changing the font color of win7 desktop icons 1. Right-click a blank space on the desktop and open the "Personalization" settings. 2. Under Theme, we can directly select the desired theme to change the font color of desktop icons. 3. If you are not satisfied with these themes, you can also turn on the "Window Color" as shown in the picture. 4. Click "Advanced Appearance Settings" below 5. Change the "Project" at the icon location to "Desktop" 6. Then you can change various attributes such as font color and size in the red box

Solve the problem that hyperlinks cannot be opened 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

4 Ways to Change Font Color on iPhone 4 Ways to Change Font Color on iPhone Feb 02, 2024 pm 04:18 PM

Color plays an important role in visual processing, so using a variety of colors in documents, emails, lock screens, and other elements can make them more beautiful. Choosing a different font color, just like choosing a font style, can prevent text on your phone from looking monotonous. In this article, we will help you change font color on iPhone in various applications. How to Change Font Color on iPhone [4 Methods] Method 1: Use the Pages app You can change the text color of a document on your iPhone, or you can open the Pages app to do it. In Pages, tap the document you want to open. If the document is open in screen view, click the Edit button in the upper right corner. Selected text

What should I do if WPS cannot open a hyperlink? Solution to WPS hyperlink not opening 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 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

Why can't the hyperlink be opened? 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.

Outlook freezes when inserting hyperlink Outlook freezes when inserting hyperlink Feb 19, 2024 pm 03:00 PM

If you encounter freezing issues when inserting hyperlinks into Outlook, it may be due to unstable network connections, old Outlook versions, interference from antivirus software, or add-in conflicts. These factors may cause Outlook to fail to handle hyperlink operations properly. Fix Outlook freezes when inserting hyperlinks Use the following fixes to fix Outlook freezes when inserting hyperlinks: Check installed add-ins Update Outlook Temporarily disable your antivirus software and then try creating a new user profile Fix Office apps Program Uninstall and reinstall Office Let’s get started. 1] Check the installed add-ins. It may be that an add-in installed in Outlook is causing the problem.

How to replace a URL address in a string with a hyperlink in PHP using regular expressions How to replace a URL address in a string with a hyperlink in PHP using regular expressions Jun 22, 2023 pm 02:22 PM

With the popularity of the Internet, people are increasingly inseparable from the Internet in their daily lives, and they increasingly need the support of web pages. In web pages, a very common operation is to convert the URL address into a hyperlink. In PHP, we can use regular expressions to achieve this operation. Next, let us take a look at the specific implementation method. 1. Use regular expressions to match URLs. Before using regular expressions to replace URLs with hyperlinks, we need to use regular expressions to match URLs. The specific matching rules are as follows: $patter

See all articles