Linkovi su vrlo česti na web stranicama, ali mnogi web dizajneri ne shvataju snagu koju imaju sa CSS-om da efikasno manipulišu i upravljaju njihovim vezama. Možete definisati veze sa posećenim, lebdenim i aktivnim stanjima. Takođe možete raditi sa granicama i pozadinama kako biste svoje linkove dali više pizzazima ili učinili da izgledaju kao dugmad ili čak slike.
Većina web dizajnera počinje definisanjem stila na oznaci "a":
a {boja: crvena; }Ovo će oblikovati sve aspekte veze (lebdeći, posećeni i aktivni). Da biste svaki deo posebno oblikovali, morate koristiti link pseudo-klase.
Link Pseudo-klase
Postoje četiri osnovna tipa linkova pseudo-klasa koje možete definisati:
- : link - ovo je podrazumevani stil veze
- : posjetio - nakon što je kliknula veza
- : lebdeći - kada je miš postavljen preko veze (pre-klik)
- : aktivan - desno kada se klikne na link
Da biste definisali link pseudo-klase, koristite ga sa oznakom u CSS selektoru . Dakle, da biste promenili obiđenu boju svih vaših veza na sivu, napišite:
a: posjetio {color: gray; }Ako oblikujete jednu vezu pseudo-klase, dobra je ideja da ih svi stišete. Na taj način nećete biti iznenađeni nepoznatim rezultatima. Dakle, ako želite samo da promenite obiđenu boju na sivo, dok sve ostale pseudo-osobine vaših veza ostanu crne, bi ste napisali:
a: link, a: lover, a: aktivan {color: black; } a: posjetio {color: gray; }Promijenite linije boja
Najpopularniji način povezivanja stilova je promena boje kada miš prelazi preko njega:
a {color: # 00f; } a: hover {boja: # 0f0; }Ali nemojte zaboraviti da možete utjecati na to kako linka izgleda dok kliknu na njega: aktivnom svojinom:
a {color: # 00f; } a: aktivan {color: # f00; }Ili kako se veza računa nakon što ste je posetili sa: posjećenom imovinom:
a {color: # 00f; } a: posjetili {color: # f0f; }Da sve to stvorimo zajedno:
a {color: # 00f; } a: posjetili {color: # f0f; } a: hover {boja: # 0f0; } a: aktivan {color: # f00; }Stavite pozadine na linkove da biste dodali ikone ili metke
Možete postaviti pozadinu na vezu kao u članku Stylish Backgrounds, ali ako igrate sa pozadinom malo, možete kreirati link koji ima pridruženu ikonu. Izaberite ikonu koja je mala, oko 15px po 15px, osim ako je vaš tekst veći. Postavite pozadinu na jednu stranu veze i podesite opciju ponavljanja na ponavljanje. Zatim, postavite vezu tako da se tekst unutar linka premješta dovoljno daleko lijevo ili desno da vidite ikonu.
a {padding: 0 2px 1px 15px; pozadina: #fff url (ball.gif) levo centar no-repeat; boja: # c00; }Jednom kada dobijete svoju ikonu, možete postaviti drugu sliku kao vašu lebdeću, aktivne i posjećene ikone kako biste promijenili link:
a {padding: 0 2px 1px 15px; pozadina: #fff url (ball.gif) levo centar no-repeat; boja: # c00; } a: hover {background: #fff url (ball2.gif) lijevi centar ne ponavlja; } a: aktivna {pozadina: #fff url (ball3.gif) lijevi centar ne ponavlja; }Napravite svoje veze kao dugmad
Dugmad su veoma popularne, ali dok se CSS nije pojavio, morali ste kreirati dugmad pomoću slika , zbog čega se vaše stranice dugotrajno učitavaju. Srećom, postoji stil granica koji vam može pomoći pri kreiranju efekta poput dugmeta pomoću CSS-a.
{border: 4px početak; padding: 2px; tekst-dekoracija: nema; } a: aktivan {border: 4px umetnut; }Imajte na umu da, kada stavljate boje na početak i stilove ubacivanja, pregledači ne veruju da će ih prikazati kao što biste očekivali. Dakle, evo dugmeta za zabavu sa obojenim granicama:
{border-style: solid; border-width: 1px 4px 4px 1px; tekst-dekoracija: nema; padding: 4px; granična boja: # 69f # 00f # 00f # 69f; }I možete utjecati na lebdeće i aktivne stilove veze sa tasterima, samo koristite te pseudo-klase:
a: link {border-style: solid; border-width: 1px 4px 4px 1px; tekst-dekoracija: nema; padding: 4px; granična boja: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }