AgerNic.com/ro
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
Tutorial

Link-uri CSS


Next Page >>
HTML images

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

Exemplu
<!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>
Notă: În general, ordinea pseudo-claselor trebuie să fie următoarea: a: link, a: vizitat, a: hover, a: activ, a: focus pentru ca acestea să funcționeze corect.

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.

Exemple
<!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.

Exemplu
<!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.

Tags: Cum se creaza stiluri pentru linkuri CSS link fara subliniere, link-uri vizitate, mouse over link

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


analytics piwika