Povezave so zelo pogoste na spletnih straneh, vendar mnogi spletni oblikovalci ne zavedajo moči, ki jo imajo s CSS, da učinkovito manipulirajo in upravljajo svoje povezave. Določite lahko povezave s obiskanimi, lebdnimi in aktivnimi stanjem. Prav tako lahko delate z mejami in ozadji, da bi vaše povezave daleč več pizzazov ali jih naredili videti kot gumbe ali celo slike.
Večina spletnih oblikovalcev začenja z določitvijo sloga na oznaki »a«:
{barva: rdeča; }S tem boste oblikovali vse vidike povezave (lebdenje, obiskane in aktivne). Če želite vsak del posebej oblikovati, morate uporabiti povezavo pseudo-razrede.
Povezava pseudo-razredov
Obstajajo štiri osnovne vrste povezav psevdo-razredov, ki jih lahko določite:
- : link - to je privzeti slog za povezavo
- : obiskano - po kliku povezave
- : premaknite miškin kazalec miške na miško nad povezavo (pred-klik)
- : aktiven - desno, ko kliknete povezavo
Če želite določiti povezavo pseudo-class, jo uporabite s oznako v izbirniku CSS . Torej, če želite spremeniti obiskano barvo vseh vaših povezav do sive barve, napišite:
a: obiskali {barva: siva; }Če oblikujete eno povezavo pseudo-razred, je dobra ideja, da vse slog. Na ta način ne boste presenečeni nad tujimi rezultati. Torej, če želite obiskati barvo spremeniti samo v sivo barvo, medtem ko vse druge psevdokartnosti povezav ostanejo črne, bi napisali:
a: link, a: lebdenje, a: aktivna {barva: črna; } a: obiskali {barva: siva; }Spremenite barve povezav
Najbolj priljubljen način povezovanja slogov je sprememba barve, ko miška nad njimi:
{bar: # 00f; } a: hover {barva: # 0f0; }Toda ne pozabite, da lahko vplivate na to, kako izgleda povezava, ko jo kliknete z aktivno:
{bar: # 00f; } a: aktivna {barva: # f00; }Ali kako se povezava prikazuje, ko ste jo obiskali z: obiskano znamko:
{bar: # 00f; } a: obiskali {color: # f0f; }Vse skupaj:
{bar: # 00f; } a: obiskali {color: # f0f; } a: hover {barva: # 0f0; } a: aktivna {barva: # f00; }Postavite ozadja na povezave, če želite dodati ikone ali oznake
Ozadje lahko postavite na povezavo, kot v članku Stylish Backgrounds, vendar z malo igranja z ozadjem lahko ustvarite povezavo s povezano ikono. Izberite ikono, ki je majhna, približno 15 pik za 15 pik, razen če je vaše besedilo večje. Ozadje postavite na eno stran povezave in nastavite možnost ponovitve, da se ne ponovi. Nato postavite povezavo, tako da se besedilo znotraj povezave premakne dovolj daleč, da se levo ali desno vidi ikona.
{padding: 0 2px 1px 15px; ozadje: #fff url (ball.gif) levo središče no-repeat; barva: # c00; }Ko dobite svojo ikono, lahko nastavite drugo podobo kot svoje hover, aktivne in obiskane ikone, da bi se povezava spremenila:
{padding: 0 2px 1px 15px; ozadje: #fff url (ball.gif) levo središče no-repeat; barva: # c00; } a: hover {ozadje: #fff url (ball2.gif) levo središče no-repeat; } a: aktivno {ozadje: #fff url (ball3.gif) levo središče brez ponavljanja; }Naredite svoje povezave kot gumbe
Gumbi so zelo priljubljeni, vendar dokler ni prišel CSS, ste morali ustvariti gumbe z uporabo slik , zaradi česar so vaše strani trajale dlje. Na srečo obstaja robni slog, ki vam lahko pomaga pri ustvarjanju učinka, podobnega tipkam, s CSS.
{border: 4px začetek; padding: 2px; tekst-dekoracija: nič; } a: aktivna {border: 4px vstavka; }Upoštevajte, ko postavite barve na začetek in vstavite sloge, brskalniki ne bodo tako verjetno, da bi se lahko pojavili, kot bi lahko pričakovali. Torej, tukaj je boljši gumb z barvnimi robovi:
{border-style: solid; border-width: 1px 4px 4px 1px; tekst-dekoracija: nič; padding: 4px; barvna meja: # 69f # 00f # 00f # 69f; }In lahko vplivate tudi na lebdenje in aktivne sloge povezave gumba, samo uporabite te pseudo-razrede:
a: povezava {border-style: solid; border-width: 1px 4px 4px 1px; tekst-dekoracija: nič; padding: 4px; barvna meja: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }