Links sinn allgemeng op Websäiten, mä vill Webdesigner wëssen net d'Kraaft, datt se mat CSS fir hir Links effizient manipuléieren an ze verwalten. Dir kënnt Links mat Besuch, Hiwwel a aktive Staaten definéieren. Dir kënnt och mat Grenzen an Hannergrënn matmaachen, fir Är Links méi pizzaz ze ginn oder se wéi Butten oder souguer Biller.
Déi meescht Webdesigner starten duerch eng Definitioun vum Stil op "a" -Tag:
a {Faarf: rout; }}Dëst wäert all Aspekter vum Link hunn (hover, besicht an aktiv). Fir all Deel getrennt Stil ze benotzen, musst Dir Link Pseudo-Klassen benotzen.
Link Pseudo-Coursen
Et gi véier Basis Typen vu Linke Pseudo-Klassen déi Dir definéieren kanns:
- : Link - dat ass de Standardformat fir de Link
- : besicht - no engem Link geklickt
- : hover - als Maus gitt iwwer e Link (pre klick)
- : aktiv - genau wéi de Link geklickt gëtt
Fir eng Link Pseudo-Klasse ze definéieren, benotzt se mat der Zuel an Ärem CSS-Selektor . Also, fir d'besicht Faarf vun all Äre Verknüpfungen ze änneren, schreift:
a: besicht {color: grey; }}Wann Dir eng Link pseudo-Klasse benotzt, ass et eng gutt Iddi fir all ze Stil ze stylen. Daat Dir wäert net auslännesch Resultater iwwerrascht ginn. Wann Dir nëmmen déi besicht Faarf a Grau ännere wëllt, wa all aner Pseudo-Eegeschafte vun Äre Linken schwaarz blu sinn, da wësst Dir:
a: Link, a: Schwämm, e: aktiv {color: black; } a: besicht {color: grey; }}Ändern de Link Colors
Déi populär Manéier fir Stil Linke ass fir d'Faarf ze änneren wann d'Maus driwwer hënnert:
a {color: # 00f; } a: hover {color: # 0f0; }}Awer net vergiessen datt Dir beaflosse kann wéi de Link sou gutt wéi se klickt op d'Aktivitéit:
a {color: # 00f; } a: aktiver {color: # f00; }}Oder wéi de Link denkt, datt Dir et mat der besichtiger Immobilie besicht hutt:
a {color: # 00f; } a: besicht {color: # f0f; }}Fir all zesummen ze setzen:
a {color: # 00f; } a: besicht {color: # f0f; } a: hover {color: # 0f0; } a: aktiver {color: # f00; }}Fëllt Backgrounds op de Links fir Icons oder Bullets ze addéieren
Dir kënnt e Link op e Link wéi an der Stylic Backgrounds Artikele setzen, awer wann Dir e puer Biller spillt, kënnt Dir e Link benotze fir eng Associatioun. Kuckt eng Ikon déi kleng ass, ongeféier 15px ëm 15px, ausser Äre Text ass méi grouss. Plaz den Hannergrond op enger Säit vum Link a setze d'Wiederholungsoptioun fir no -widderhuelen. Da paddelen de Link fir datt de Text am Link relativ wäit genuch ass lénks oder riets fir d'Ikon ze gesinn.
a {padding: 0 2px 1px 15px; Hannergrond: #fff url (ball.gif) lénks center no-repeat; Faarf: # c00; }}Wann Dir Är Ikon hutt, kënnt Dir e anere Image setzen wéi Ären Schwämm, aktiv a besicht d'Ikonen, fir de Link z'änneren:
a {padding: 0 2px 1px 15px; Hannergrond: #fff url (ball.gif) lénks center no-repeat; Faarf: # c00; } a: hover {background: #fff url (ball2.gif) lénks center no-repeat; } a: aktiver {background: #fff url (ball3.gif) lénks center no-repeat; }}Gitt Är Links look Like Buttons
Buttons sinn ganz populär, awer bis CSS ass komm, musst Knäppt mat Biller benotzen , déi Är Säite méi laang daueren léisst. Glécklech, et ass e Grenzstil, deen Iech hëllefe kann mat engem CSS e Knäppchen ähnlech Effekt erstellen.
{border: 4px unzefänken; Padding: 2px; Text-Dekor: Keen; } a: aktive {border: 4px Inset; }}Remarque, wann Dir Är Faarwen am Ufank a Stéck Stiler setzen, browsert se net esou wahrscheinlech fir se ze vermëttelen. Also, hei ass eng Fancier-Schaltfläch mat faarwegen Grenzen:
a {border style: fest; D'Grenzbreed: 1px 4px 4px 1px; Text-Dekor: Keen; Polsterei: 4px; Grenzfaarf: # 69f # 00f # 00f # 69f; }}An Dir kënnt d'Schwieregkeeten an aktive Stile vun enger Knäppelverknäpp ze beaflossen, just dës Pseudo-Klassen benotzen:
a: Link {border style: solid; D'Grenzbreed: 1px 4px 4px 1px; Text-Dekor: Keen; Polsterei: 4px; Grenzfaarf: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }}