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.