Linkuri CSS
Cu CSS, linkurile pot fi stilizate în multe moduri diferite.
Stilizarea linkurilor CSS
Linkurile pot fi stilizate cu orice proprietate CSS, cum ar fi color, font-family și background.
Exemplu
Culoarea linkului este setată la roz aprins.
Prompt
O pagină HTML care stilizează un link cu o proprietate CSS de bază.
Într-un bloc
<style> intern, setați a { color: hotpink; }. Adăugați un link în body.
Rezultat: pagină HTML completă "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a {
color: hotpink;
}
</style>
</head>
<body>
<p>Style a link with the color property:</p>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>
Stilizarea linkurilor în funcție de stare
Linkurile pot fi stilizate diferit și în funcție de starea lor. Cele patru stări ale unui link sunt:
a:link— un link normal, nevizitat.a:visited— un link pe care utilizatorul l-a vizitat.a:hover— un link atunci când utilizatorul mută mausul peste el.a:active— un link în momentul în care este apăsat.
Când setați stiluri pentru mai multe stări, ordinea contează: a:hover trebuie să vină după a:link și a:visited, iar a:active trebuie să vină după a:hover.
Exemplu
Fiecare stare a linkului primește o culoare diferită, în ordinea necesară.
Prompt
O pagină HTML care stilizează un link diferit pentru fiecare dintre cele patru stări ale sale.
Într-un bloc
<style> intern, setați a:link la roșu, a:visited la verde, a:hover la roz aprins și a:active la albastru. Păstrați-le în această ordine. Adăugați un link în body.
Rezultat: pagină HTML completă "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>
Linkuri CSS - Decorarea textului
Proprietatea text-decoration este folosită de obicei pentru a elimina sublinierea de la linkuri.
Exemplu
Sublinierea este eliminată pentru linkurile normale și vizitate, și adăugată la hover și active.
Prompt
O pagină HTML care folosește text-decoration pentru a controla sublinierea linkurilor în funcție de stare.
Într-un bloc
<style> intern, eliminați sublinierea pentru a:link și a:visited (text-decoration: none) și adăugați-o pentru a:hover și a:active (text-decoration: underline). Adăugați un link în body.
Rezultat: pagină HTML completă "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>
Linkuri CSS - Culoarea fundalului
Proprietatea background-color poate seta o culoare de fundal pentru linkuri.
Exemplu
Fiecare stare a linkului primește o culoare de fundal diferită.
Prompt
O pagină HTML care dă linkurilor o culoare de fundal în funcție de stare.
Într-un bloc
<style> intern, setați fundalul a:link la galben, a:visited la cyan, a:hover la verde deschis și a:active la roz aprins. Adăugați un link în body.
Rezultat: pagină HTML completă "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>
Mai multe exemple
Puteți combina aceste proprietăți pentru a face linkurile să arate ca niște butoane.
Link-buton plin
Un link stilizat ca un buton roșu solid care se întunecă la hover.
Prompt
O pagină HTML care stilizează un link astfel încât să arate ca un buton plin.
Într-un bloc
<style> intern, dați a:link și a:visited un fundal roșu, text alb, padding, text centrat, fără subliniere și afișare inline-block. La a:hover și a:active, întunecați fundalul la roșu. Adăugați un link în body.
Rezultat: pagină HTML completă "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 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">This is a link</a>
</body>
</html>
Link-buton cu bordură
Un link stilizat ca un buton cu bordură care se umple cu verde la hover.
Prompt
O pagină HTML care stilizează un link astfel încât să arate ca un buton cu bordură, care se umple la survolare.
Într-un bloc
<style> intern, dați a:link și a:visited un fundal alb, text negru, o bordură verde, padding, text centrat, fără subliniere și afișare inline-block. La a:hover și a:active, setați un fundal verde și text alb. Adăugați un link în body.
Rezultat: pagină HTML completă "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: green;
color: white;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">This is a link</a>
</body>
</html>