How to remove the underline of a hyperlink using three simple examples

To remove the underline of a hyperlink, you need to use the style sheet CSS. If you don't want to learn the concept of CSS in depth for the time being, here are three simple examples to illustrate how to control the underline of a hyperlink. Use Notepad to open the source code of the web page (you can also open the web page with IE first, and then click "View → Source File" on the IE menu bar), and then the Notepad window will pop up.

Find the <head> and </head> lines and add the style sheet statement between them. as follows:

Copy code

The code is as follows:

<html>
<head>
<style>a{TEXT-DECORATION:none}</style>
</head><body>

1. Just add <style>a{ TEXT-DECORATION:none }</style> between head and head
This sentence removes the underline of the hyperlink. This is the simplest example. You will succeed if you try it.

2. The above example only tells you how to remove the underline of hyperlinks at one time. What should you do if some hyperlinks on your web page need to be underlined and some do not? First of all, you need to think about whether most of the hyperlinks on your web pages are underlined or not?
If most hyperlinks do not need to be underlined, you can add
<style> a{ TEXT-DECORATION:none }</style>, and then use this method in a few hyperlinks that need to be underlined, and they will be underlined:
<a href=****><u>Text</a>.
If most hyperlinks are to be underlined, you don’t need to include the above sentence. Change it to: <style>.n{ TEXT-DECORATION:none }</style>,
Note: There is a dot in front of n, which indicates a class selector. Then it can be referenced multiple times in the hyperlinks of a web page, and individual hyperlinks can be removed separately, for example:

Copy code

The code is as follows:

<a class=n href=http://www.webshu.com>Web Tree</a>
<a class=n href=http://www.cctv.com>China Central Television</a>
<a class=n href=http://www.ziyy.com>Freestyle Swimming Network</a>

3. How to remove the underline of a hyperlink so that it remains underlined when the mouse hovers over it?
You can add a sentence like this between head and head: <style>a{ TEXT-DECORATION:none}a:hover{TEXT-DECORATION:underline }</style>
Note: a represents a hyperlink, and a:hover is a pseudo-class in the style sheet, indicating the state when the mouse is hovering.
Determine what effect you want for most of the hyperlinks on your web pages. Let me give you another example:

Copy code

The code is as follows:

After adding this sentence, all hyperlinks in the web page will not be underlined.
As can be seen above, we have used CSS pseudo-classes again. Its definition format is: selector.class selector {attribute;attribute value}, for example,
a.xh{ TEXT-DECORATION:none }.

<<: Solve the problem that ElementUI custom CSS style does not take effect

>>: Implementing a simple Christmas game with JavaScript