Skakels is baie algemeen op webblaaie, maar baie webontwerpers besef nie die krag wat hulle het met CSS om hul skakels doeltreffend te manipuleer en te bestuur nie. U kan skakels definieer met besoeke, hover en aktiewe state. Jy kan ook met grense en agtergronde werk om jou skakels meer pizzaz te gee of hulle soos knoppies of selfs beelde te laat lyk.
Die meeste webontwerpers begin met die definisie van 'n styl op die "a" -tag:
'n (kleur: rooi; }Dit sal alle aspekte van die skakel styl (beweeg, besoek en aktief). Om elke deel afsonderlik te styl, moet jy skakel-pseudoklasse gebruik.
Skakel Pseudo-klasse
Daar is vier basiese tipes skakel pseudo-klasse wat jy kan definieer:
- : skakel - dit is die standaard styl vir die skakel
- : besoek - nadat 'n skakel gekliek is
- : hover - as 'n muis is oor 'n skakel (vooraf kliek)
- : aktief - net soos die skakel gekliek word
Om 'n skakel-pseudoklas te definieer, gebruik dit met die a-tag in jou CSS-kieser . Dus, om die besoekende kleur van al jou skakels na grys te verander, skryf:
a: besoek (kleur: grys; }As jy een skakel pseudoklas styl, is dit 'n goeie idee om hulle almal te styl. Op hierdie manier sal jy nie verbaas wees deur vreemde resultate nie. So as jy net die besoekende kleur na grys wil verander, terwyl al die ander pseudo-eienskappe van jou skakels swart bly, skryf jy:
a: skakel, a: beweeg, a: aktief {kleur: swart; } a: besoek (kleur: grys; }Verander die skakel kleure
Die gewildste manier om skakels te styl, is om die kleur te verander wanneer die muis daaroor beweeg:
'n {kleur: # 00f; } a: hover {kleur: # 0f0; }Maar moenie vergeet dat jy kan beïnvloed hoe die skakel lyk as hulle daarop klik met die: aktiewe eiendom:
'n {kleur: # 00f; } a: aktief {kleur: # f00; }Of hoe die skakel kyk nadat jy dit besoek het met die: besoekte eiendom:
'n {kleur: # 00f; } a: besoek {kleur: # f0f; }Om dit alles saam te stel:
'n {kleur: # 00f; } a: besoek {kleur: # f0f; } a: hover {kleur: # 0f0; } a: aktief {kleur: # f00; }Sit agtergrond op die skakels om ikone of kolletjies by te voeg
Jy kan 'n agtergrond op 'n skakel soos in die Stylvolle Agtergrond-artikel plaas, maar deur die agtergrond 'n bietjie te speel, kan jy 'n skakel skep wat 'n gepaardgaande ikoon het. Kies 'n ikoon wat klein is, ongeveer 15px teen 15px, tensy jou teks groter is. Plaas die agtergrond aan een kant van die skakel en stel die herhaal-opsie in om nie te herhaal nie. Vervolgens, skakel die skakel sodat die teks binne die skakel ver genoeg beweeg links of regs om die ikoon te sien.
'n {padding: 0 2px 1px 15px; agtergrond: #fff url (ball.gif) left center no-repeat; kleur: # c00; }Sodra jy jou ikoon het, kan jy 'n ander prent as jou hover, aktief en ikone besoek om die skakel te verander:
'n {padding: 0 2px 1px 15px; agtergrond: #fff url (ball.gif) left center no-repeat; kleur: # c00; } a: hover (agtergrond: #fff url (ball2.gif) linker sentrum nie-herhaal; } a: aktief (agtergrond: #fff url (ball3.gif) linker sentrum geen herhaling; }Maak jou skakels soos knoppies
Knoppies is baie gewild, maar totdat CSS saamgevat het, moes jy knoppies maak met beelde wat jou bladsye langer neem om te laai. Gelukkig is daar 'n grensstyl wat jou kan help om 'n knoppie-effek maklik met CSS te skep.
'n {grens: 4px aanvang; vulling: 2px; teks versiering: geen; } a: aktiewe {grens: 4px inset; }Let wel, wanneer jy kleure aan die begin en insetstyle plaas, is blaaiers nie so geneig om hulle te gee soos wat jy sou verwag nie. So, hier is 'n fyner knoppie met gekleurde grense:
'n (grens-styl: soliede; grenswydte: 1px 4px 4px 1px; teks versiering: geen; vulling: 4px; grens-kleur: # 69f # 00f # 00f # 69f; }En jy kan ook die hover en aktiewe style van 'n knoppie skakel beïnvloed, gebruik net die pseudoklasse:
a: skakel {grens-styl: soliede; grenswydte: 1px 4px 4px 1px; teks versiering: geen; vulling: 4px; grens-kleur: # 69f # 00f # 00f # 69f; } a: hover (grens-kleur: #ccc; }