How to add additional styles to hyperlinks

Example analysis:

● Set different font colors for links in different states.

a.one:link {color:#ff0000;}

a.one:visited {color:#0000ff;}

a.one:hover {color:#ffcc00;}

##● Set different font sizes and colors for links in different states .

a.two:link {color:#ff0000;}

a.two:visited {color:#0000ff;}

a.two:hover {font-size:150%;}

##● Set different background colors for links in different states .

a.three:link {color:#ff0000;}

a.three:visited {background:#0000ff;}

a.three:hover {background:#66ff66;}

● Set different font styles or font colors for links in different states .

a.four:link {color:#ff0000;}

a.four:visited {color:#0000ff;}

a.four:hover {font-family:Georgia, serif;}

● The link displays or removes the underline in different states.

a.five:link {color:#ff0000;text-decoration:none;}

a.five:visited {color: #0000ff;text-decoration:none;}

##a.five:hover {text-decoration:underline;color:coral;}

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> a.one:link {color:#ff0000;} a.one:visited {color:#0000ff;} a.one:hover {color:#ffcc00;} a.two:link {color:#ff0000;} a.two:visited {color:#0000ff;font-size:50px;} a.two:hover {color:pink;font-size:150%;} a.three:link {color:#ff0000;} a.three:visited {background:#0000ff;} a.three:hover {background:#66ff66;} a.four:link {color:#ff0000;} a.four:visited {color:#0000ff;} a.four:hover {font-family:Georgia, serif;} a.five:link {color:#ff0000;text-decoration:none;} a.five:visited {color:#0000ff;text-decoration:none;} a.five:hover {text-decoration:underline;color:coral;} </style> </head> <body> 将鼠标移至链接上改变样式. <a class="one" href="#">这个链接改变颜色</a> <a class="two" href="#">这个链接改变字体大小</a> <a class="three" href="#">这个链接改变背景颜色</a> <a class="four" href="#">这个链接改变字体类型</a> <a class="five" href="#">这个链接改变文字修饰</a> </body> </html>

submit Reset Code

Automatic operation

How to add additional styles to hyperlinks

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]