Ferwizings binne hiel gewoanlik op websiden, mar in soad webûntwikkelders realisearje net de krêft dat se hawwe mei CSS om har keppel effektiv te hanipulearjen en te behearen. Jo kinne keppelingen fine mei besocht, hoverje, en aktive steaten. Jo kinne ek wurkje mei rânen en eftergrûnen om jo keppelings mear pizzaz te jaan of se meitsje as knoppen of sels ôfbyldings.
De measte webûntwerpers begjinne mei it definiearjen fan in styl op 'e "tag":
in {kleur: read; }Dit sil alle aspekten fan 'e keppeling styl meitsje (hover, besocht en aktyf). Om elke diel apart te styl te meitsjen, moatte jo link pseudo-klassen brûke.
Link pseudo-klassen
Der binne fjouwer basistypen fan link pseudo-klassen dy't jo definiearje kinne:
- : link - dit is de standert styl foar de link
- : besykje - nei in keppeling klikke
- : hover - as mûs wurdt oer in link ferwidere (pre-klik)
- : aktyf - krekt as de keppeling klikke
Om in keppeling pseudo-klasse te bepalen, brûk it mei de in tag yn jo CSS seleksje . Dus, om de besochte kleur fan alle jo links nei wite te feroarjen, skriuw:
a: besocht {kleur: grij; }As jo in pseudo-klasse keppelje, is it in goeie idee om se alle te stylen. Op dy manier wurde jo net ferrast troch ekstreksresultaten. As jo allinich de besochte kleur nei griis wizigje wolle, wylst alle oare pseudo-eigenskippen fan jo keppelings swart bliuwe, kinne jo skriuwe:
a: link, a: hover, a: aktyf {kleur: swart; } a: besocht {kleur: grij; }Feroarje de keppelkleuren
De meast populêre manier om styl links te feroarjen is om de kleur te feroarjen as de mûs hoverje oer:
in {color: # 00f; } a: hover {kleur: # 0f0; }Mar ferjit jo net dat jo kinne ynfloed op hoe't de keppeling sjocht as se klikke op it mei: aktive eigendom:
in {color: # 00f; } a: aktyf {kleur: # f00; }Of hoe't de keppeling nei't jo it besocht hawwe mei it: besochte eigendom:
in {color: # 00f; } a: besocht {kleur: # f0f; }Om allegear tegearre te setten:
in {color: # 00f; } a: besocht {kleur: # f0f; } a: hover {kleur: # 0f0; } a: aktyf {kleur: # f00; }Sjoch eftergrûnen op 'e keppelings om Icons of Bullets ta te foegjen
Jo kinne in eftergrûn meitsje op in link as yn it artikel fan Stylish Backgrounds, mar troch it spyljen mei de eftergrûn in bytsje te meitsjen kinne jo in keppeling meitsje dy't in oansluten byldkaike hat. Kies in byldkaike dat lyts is, om 15px by 15px, as jo jo tekst grutter is. Plak de eftergrûn oan ien side fan 'e keppeling en set de werhelling opnij nei gjin-werhelje. Dêrnei paddje de keppeling sadat de tekst binnen de keppeling oer fier genôch nei de linker of rjochts ferpleatst is om it byldkaike te sjen.
a {padding: 0 2px 1px 15px; eftergrûn: #fff url (ball.gif) loftsintrum no-werhelje; kleur: # c00; }As jo jo byldkaike hawwe, kinne jo in oare ôfbylding sette as jo hover, aktive en besochte byldkaikes om de link te feroarjen:
a {padding: 0 2px 1px 15px; eftergrûn: #fff url (ball.gif) loftsintrum no-werhelje; kleur: # c00; } a: hover {eftergrûn: #fff url (ball2.gif) links sintrum no-werhelje; } a: aktyf {eftergrûn: #fff url (ball3.gif) lofter sintrum no-werhelje; }Meitsje jo links as knoppen
Knoppen binne tige populêr, mar oant CSS kaam tegearre, moasten jo knoppen oanmeitsje om gebrûk te meitsjen fan foto's , wêrtroch jo siden langer duorje om te laden. Soarch, is der in rânestyl dy't jo helpe kin maklik in knop-like effekt meitsje mei CSS.
in {rigel: 4px útein; padding: 2px; tekst-dekoraasje: gjin; } a: aktyf {border: 4px ynset; }Tink derom, as jo kleuren op 'e begjin- en ynsletten stilen plakken sette, blêder kinne net sa wierskynlik meitsje om se te fertsjinjen lykas jo kinne ferwachtsje. Dus, hjir is in fancier knop mei farieare grinzen:
in {grûnstyl: solid; border-width: 1px 4px 4px 1px; tekst-dekoraasje: gjin; padding: 4px; border-color: # 69f # 00f # 00f # 69f; }En jo kinne ek ynfloed op de hover en aktive stilen fan in knopblokje, brûk jo gewoan de pseudo-klassen:
a: link {border-style: solid; border-width: 1px 4px 4px 1px; tekst-dekoraasje: gjin; padding: 4px; border-color: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }