Formatiranje hiperlinkov – CSS slogi za povezave

Hiperteksti so osrednji element na spletu. Vsaka spletna stran jih uporablja za povezovanje različnih vsebin in olajšanje navigacije. Vendar pa je privzeti dizajn povezav pogosto malo privlačen. Hipertekste lahko s CSS enostavno popestrimo in jih naredimo bolj prijazne do uporabnika. V tem vadbenem gradivu ti bom pokazal, kako lahko različne stanje povezav privlačno oblikuješ s CSS.

Najpomembnejši poudarki

• Obstajajo tri glavne države povezav: normalna, hover in visited.
• CSS omogoča, da izgled teh stanj prilagodimo po svoje.
• Uporaba pseudoklas:hover,:visited in:active je nujna za privlačno oblikovanje.

Navodila po korakih

Osnove stanj povezav

Najprej je pomembno razumeti tri glavne države hipertekstop:

1. Normalna (neobiskana)
2. Hover (ko miška lebdi nad povezavo)
3. Visited (že obiskane povezave)

Za ponazoritev obišči katerokoli spletno stran, kot je w3.org, in opazuj obnašanje povezav. V privzetem stanju se pojavijo v modri barvi. Po kliku se njihova barva pogosto spremeni v vijolično ali lila, kar pomeni, da si povezavo že obiskal.

CSS selektorji za povezave

Za oblikovanje stanj povezav v CSS lahko uporabiš selektorje a, a:hover in a:visited.

• Selektor a se nanaša na normalno stanje.
• Selektor a:hover skrbi za izgled, ko uporabnik s miško prehaja nad povezavo.
• Selektor a:visited se uporablja za povezave, ki so že bile obiskane.

Dodajanje učinkov pri hoverju

Za izboljšanje uporabniške izkušnje je priporočljivo dodati učinek hover. Tukaj lahko na primer igraš z robovi in spremeniš barvo ozadja, ko se miš premakne nad povezavo. To uporabniku zagotavlja vizualno povratno informacijo o tem, kje se nahaja kazalec miške.

Prilagoditev dekoracije besedila

Še en način za izboljšanje oblikovanja povezav je prilagoditev dekoracije besedila. Namesto da bi bila povezava vedno podčrtana, lahko to podčrtanje aktiviraš le, ko uporabnik z miško prehaja nad povezavo. To zagotavlja sodoben in urejen videz.

a:hover { text-decoration: underline; }

Dodajanje aktivnega stanja

Stanje, v katerem se povezava trenutno klikne, opredeljuje selektor a:active. To stanje nakazuje, da uporabnik aktivno izbira povezavo.

Povezovanje vseh stanj

Zdaj si obravnaval vse potrebne state za oblikovanje povezav.

a:visited { color: green; }

a:hover { background-color: #aaa; padding: 5px 15px; text-decoration: underline; }

a:active { background-color: lightgrey; }

Povzetek – Lepši hiperteksti s CSS

V tej vadnici si se naučil, kako učinkovito oblikovati različna stanja hipertekstop z uporabo CSS. Sedaj veš, da je pomembno pravilno uporabiti stanja:hover,:visited in:active, da ustvariš privlačno in uporabniku prijazno spletno okolje. S preprostimi prilagoditvami, kot so spremembe barv in robovi, lahko povezave narediš bolj privlačne in intuitivne.