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 oznaci "a":
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 oznake u CSS selektoru . 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
Pozadinu možete staviti na vezu kao u članku Stilizirani pozadini, ali 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 zakvačite 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; }