Linkovi su vrlo česti na web stranicama, ali mnogi web dizajneri ne shvaćaju moć koju imaju kod CSS-a da učinkovito manipuliraju i upravljaju svojim vezama. Možete definirati veze s posjećenim, lebdećim i aktivnim državama. Također možete raditi s granicama i pozadinama kako bi vaše veze više pizzaz ili učiniti ih izgledaju kao gumbi ili čak slike.
Većina web dizajnera započinje definiranjem stila na označiti:
a {boja: crvena; }
To će oblikovati sve aspekte veze (lebdjeti, posjetiti i aktivno). Da biste svaki dio zasebno oblikovali, morate koristiti pseudo-klase veze.
Link Pseudo-klase
Postoje četiri osnovne vrste pseudo-klasa koje možete definirati:
- : link - ovo je zadani stil za vezu
- : posjećeno - nakon što kliknete vezu
- : zadržite pokazivač miša - dok miš stoji iznad veze (prije klika)
- : aktivno - pravo kao klik na vezu
Da biste definirali pseudo-klasu vezu, upotrijebite ga pomoću oznaku u izborniku CSS-a. Stoga, da biste promijenili posjećenu boju svih svojih veza na sivu, pišite:
a: posjetio {boja: siva; }
Ako stilizirate pseudo-klasu jednu vezu, dobro je stilirati ih sve. Na taj način nećete biti iznenađeni stranim rezultatima. Dakle, ako samo želite promijeniti promijenjenu boju sivom, a sve ostale pseudo-svojstva vaših veza ostaju crne, pisali biste:
a: link, a: zadržite pokazivač miša, a: active {color: black; } a: posjetio {boja: siva; }
Promijenite boje veze
Najpopularniji način povezivanja stilova je promjena boje kada miš prebaci preko nje:
{color: # 00f; } a: hover {color: # 0f0; }
Ali nemojte zaboraviti da možete utjecati na to kako veza izgleda kao da kliknu na njega: aktivna nekretnina:
{color: # 00f; } a: aktivno {color: # f00; }
Ili kako se veza izgleda nakon što ste ga posjetili sa svojstvom posjećene:
{color: # 00f; } a: posjetio {color: # f0f; }
Sve to zajedno:
{color: # 00f; } a: posjetio {color: # f0f; } a: hover {color: # 0f0; } a: aktivno {color: # f00; }
Stavite pozadine na veze za dodavanje ikona ili metaka
S malom igranjem s pozadinom možete stvoriti vezu koja ima povezanu ikonu. Odaberite ikonu koja je malena, oko 15 x 15 x, osim ako vaš tekst nije veći. Postavite pozadinu na jednu stranu veze i postavite opciju ponavljanja na ne-ponavljanje. Zatim poništite vezu tako da se tekst unutar veze pomakne dovoljno daleko da li je lijevo ili desno da biste vidjeli ikonu.
a {padding: 0 2px 1px 15px; pozadina: #fff url (ball.gif) lijevo središte ne-ponavljanje; boja: # c00; }
Nakon što dobijete ikonu, možete postaviti drugu sliku kao ikone za pokazivanje miša, aktivne i posjećene kako biste promijenili vezu:
a {padding: 0 2px 1px 15px; pozadina: #fff url (ball.gif) lijevo središte ne-ponavljanje; boja: # c00; } a: lebdjeti {pozadina: #fff url (ball2.gif) lijevo središte ne-ponavljanje; } a: aktivno {background: #fff url (ball3.gif) lijevo središte ne-ponavljanje; }
Neka vaši linkovi izgledaju poput gumba
Gumbi su vrlo popularni, ali sve dok se nije pojavio CSS, morali ste izraditi gumbe pomoću slika, što čini vaše stranice duže vrijeme za učitavanje. Srećom, postoji stil granica koji vam može olakšati stvaranje jednostavnog sličnog učinka pomoću CSS-a.
{border: 4px početak; padding: 2px; tekst ukrašavanja: none; } a: active {border: 4px umetnuta; }
Napominjemo, kada stavite boje na početak i umetnite stilove, preglednici ih ne mogu prikazati kao što biste ih očekivali. Dakle, ovdje je bolji gumb s obojanim obrubima:
granični stil: čvrsta; granična širina: 1px 4px 4px 1px; tekst ukrašavanja: none; padding: 4px; granična boja: # 69f # 00f # 00f # 69f; }
I možete utjecati na privjesak i aktivne stilove veze na gumb, samo upotrijebite one pseudo-klase:
a: link {border-style: solid; granična širina: 1px 4px 4px 1px; tekst ukrašavanja: none; padding: 4px; granična boja: # 69f # 00f # 00f # 69f; } a: zadržite se {border-color: #ccc; }
