Linkuri HTML - Culori Diferite
Un link HTML se afișează într-o culoare diferită în funcție de faptul dacă a fost vizitat, nu a fost vizitat, sau este activ.
Culorile Linkurilor HTML
Implicit, un link nevizitat este subliniat și albastru, un link vizitat este subliniat și mov, iar un link activ este subliniat și roșu. Poți schimba aceste culori de stare cu CSS, folosind a:link, a:visited, a:hover și a:active.
Exemplu
Culori personalizate pentru fiecare stare de link, plus un efect la hover.
Prompt
O pagină care folosește CSS pentru a colora cele patru stări ale linkului: nevizitat verde fără subliniere, vizitat roz fără subliniere, hover roșu cu subliniere și activ galben cu subliniere. Include un link exemplu în body.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<p><a href="https://prompt-cookbook.com">Acesta este un link</a></p>
</body>
</html>
Butoane din Linkuri
Un link poate fi stilizat și pentru a arăta ca un buton, folosind CSS.
Exemplu
Un link stilizat ca un buton.
Prompt
O pagină care stilizează un link să arate ca un buton folosind CSS (fundal roșu, text alb, padding, fără subliniere, inline-block), cu un roșu mai închis la hover/active. Include un link exemplu cu textul „Acesta este un link”.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">Acesta este un link</a>
</body>
</html>
Tag-uri HTML pentru Linkuri
Tag-ul principal de aici este <a>, care definește un hyperlink.