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