Link-uri CSS
CSS Tutorial » Link-uri CSS
Linkurile sau hyperlinkurile sunt o parte esențială a unui site web. Permite vizitatorilor să navigheze pe site. Prin urmare, proiectarea corectă a linkurilor este un aspect important al construirii unui site web ușor de utilizat.
Consultați tutorialul pentru linkuri HTML pentru mai multe informații despre linkuri și despre cum să le creați.
Un link are patru stări diferite: link, vizitat, activ și plutitor(float). Aceste patru stări ale unei legături pot fi proiectate diferit utilizând următorii selectori de pseudo-clasă ancoră.
- a:link - definește stilurile pentru linkurile normale sau nevizitate.
- a:visited - definește stilurile pentru linkurile pe care utilizatorul le-a vizitat deja.
- a:hover - definește stilurile pentru un link atunci când utilizatorul trece cu mouse-ul peste acesta.
- a:active - definește stilurile pentru linkuri atunci când se face clic.
Puteți specifica orice proprietate CSS doriți, de ex. De exemplu, culoare, font, fundal, chenar etc. către fiecare dintre aceste selectoare pentru a personaliza stilul link-urilor, la fel cum faceți cu textul normal.
Stil de legătură CSS
Când setați stilul pentru diferite stări de legătură, există câteva reguli de ordine:
a: hover TREBUIE să vină după un: vizitat
a: active TREBUIE să vină după a: hover
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Proiectați diferite stări de legătură folosind CSS.</title>
<style>
/*linkul nu a fost vizitat */
a:link {
color: #F90000;
text-decoration: none;
font-size: 18px;
}
/* enlace visitado */
a:visited {
color: #ff00ff;
font-size: 18px;
}
/* mouse peste link */
a:hover {
color: #00E800;
border-bottom: none;
font-size: 18px;
}
/* link activ */
a:active {
color: #09F;
font-size: 18px;
}
</style>
</head>
<body>
<p><a href="https://www.agernic.com/css.es/fondos.html"
target="_blank">Accesați tutorialul AgerNic.com</a></p>
</body>
</html>
Tags: link-uri CSS fără subliniere, creare linkuri vizitate, culoare linkuri, cum ar fi butoane stilizate pentru link, stiluri, centrare, proprietăți Link-uri CSS
Link-uri CSS fără subliniere
Eliminați sublinierea implicită din linkuri
Dacă nu vă place sublinierea implicită din linkuri, puteți utiliza pur și simplu proprietatea de decorare a textului CSS pentru a scăpa de ea.
Alternativ, puteți aplica un alt stil pe linkuri, cum ar fi culoarea de fundal, marginea de jos, fontul aldin etc. pentru a-l scoate în evidență un pic mai bine față de textul normal.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Eliminați sublinierea implicită din linkuri folosind CSS</title>
<style>
a:link, a:visited {
text-decoration: none;
font-size: 18px;
}
a:hover, a:active {
text-decoration: underline;
font-size: 18px;
}
</style>
</head>
<body>
<p><a href="#">Plasați-vă mausul peste acest link</a></p>
</body>
</html>
Cum se fac link-uri (legături) CSS ca butoane
De asemenea, puteți face ca link-urile dvs. text obișnuite să arate ca un buton folosind CSS.
Pentru a face acest lucru, trebuie să folosim câteva proprietăți CSS, cum ar fi culoarea de fundal, chenarul, afișajul, umplerea etc.
Veți afla despre aceste proprietăți în detaliu în următoarele capitole.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Personalizați un link ca buton folosind CSS</title>
<style>
a:link, a:visited {
color: white;
background-color: #1CAA95;
display: inline-block;
padding: 10px 20px;
border: 2px solid #067161;
text-decoration: none;
text-align: center;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
}
a:hover, a:active {
background-color: #8A4EDC;
border-top-color: #4D2C78;
border-right-color: #4D2C78;
border-bottom-color: #4D2C78;
border-left-color: #4D2C78;
color: #DDD;
font-weight: bold;
}
</style>
</head>
<body>
<p><a href="#">Buton de legătură CSS</a></p>
</body>
</html>
Cum se creaza stiluri pentru linkuri CSS.
Link fara subliniere, link-uri vizitate, mouse over link
Mouse over link.
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.