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:<style>a{ TEXT-DECORATION:none }a.xh{ TEXT-DECORATION:none } a:hover.xh{ TEXT-DECORATION:underline }</style>, which is equivalent to <style> a,a.xh{ TEXT-DECORATION:none }a:hover.xh{ TEXT-DECORATION:underline }</style> 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
Recommend
uniapp dynamic modification of element node style detailed explanation
Table of contents 1. Modify by binding the style ...
HTML Tutorial: Collection of commonly used HTML tags (4)
Related articles: Beginners learn some HTML tags ...
The complete version of the common Linux tool vi/vim
Why learn vim Linux has a large number of configu...
A simple way to achieve scrolling effect with HTML tag marquee (must read)
The automatic scrolling effect of the page can be...
Solution to the problem that the docker container cannot be stopped
The solution is as follows: 1. Force delete conta...
Use personalized search engines to find the personalized information you need
Many people now live on the Internet, and searchin...
Detailed usage of Vue more filter widget
This article example shares the implementation me...
HTML scroll bar textarea attribute setting
1. Overflow content overflow settings (set whether...
Web design dimensions and rules for advertising design on web pages
1. Under 800*600, if the width of the web page is...
Use Xshell to connect to the Linux virtual machine on VMware (graphic steps)
Preface: I recently started to study the construc...
A brief analysis of the differences and functions between transition, transform, and translate in CSS3
transform and translate Transform refers to trans...
9 code optimization tips to improve website usability that webmasters should pay attention to
1. Add alternative text to your logo This has two...
Detailed explanation of how to mount remote file systems via SSH on Linux
Features of SSHFS: Based on FUSE (the best usersp...
Solutions to MySql crash and service failure to start
I have been in contact with PHP for so long, but ...
CSS animation combined with SVG to create energy flow effect
The final effect is as follows: The animation is ...