La ligiloj estas tre komunaj en retpaĝoj, sed multaj retpaĝistoj ne rimarkas la potencon, ke ili havas kun CSS por manipuli kaj administri iliajn ligojn efike. Vi povas difini ligojn kun vizititaj, ŝvebado kaj aktivaj statoj. Vi ankaŭ povas labori kun limoj kaj fonoj por doni viajn ligilojn pli pizzaz aŭ fari ilin aspekti kiel butonoj aŭ eĉ bildoj.
La plimulto de la diseñadores retejo komencas difini stilon sur la "etikedo":
{koloro: ruĝa; }Ĉi tio stiligos ĉiujn aspektojn de la ligo (ŝvebado, vizitita kaj aktiva). Por stiri ĉiun parton aparte, vi devas uzi ligajn pseŭdoklasojn.
Ligilo Pseudo-Klasoj
Estas kvar bazaj tipoj de ligaj pseŭdoklasoj kiujn vi povas difini:
- : ligilo - ĉi tiu estas la defaŭlta stilo por la ligilo
- : vizitita - post kiam ligo estas klakita
- : ŝvebi - kiel muso estas preta super ligo (antaŭ-klako)
- : aktiva - ĝuste kiel la ligilo estas klakita
Por difini ligon pseŭdoklasan, uzu ĝin per etikedo en via CSS-elektilo . Do, ŝanĝi la vizititan koloron de ĉiuj viaj ligoj al griza, skribu:
a: vizitita {koloro: griza; }Se vi stiligas unu ligon pseŭdoklasan, ĝi estas bona ideo stiligi ĉiujn. Tiel vi ne surprizos per fremdaj rezultoj. Do se vi nur volas ŝanĝi la vizititan koloron al griza, dum ĉiuj aliaj pseŭdaj proprietoj de viaj ligiloj restas nigraj, vi skribus:
a: ligilo, a: ŝvebado, a: aktiva {koloro: nigra; } a: vizitita {koloro: griza; }Ŝanĝi la ligajn kolorojn
La plej populara maniero al la ligiloj de stilo estas ŝanĝi la koloron, kiam la muso trapasas ĝin:
a {koloro: # 00f; } a: ŝvebu {koloro: # 0f0; }Sed ne forgesu, ke vi povas influi kiel la ligilo aspektas kiel ili alklakas ĝin per la: aktiva propraĵo:
a {koloro: # 00f; } a: aktiva {koloro: # f00; }Aŭ kiel la ligilo rigardas post kiam vi vizitis ĝin per la: vizitita propraĵo:
a {koloro: # 00f; } a: vizitis {koloron: # f0f; }Meti ĝin ĉiujn kune:
a {koloro: # 00f; } a: vizitis {koloron: # f0f; } a: ŝvebu {koloro: # 0f0; } a: aktiva {koloro: # f00; }Metu fonojn sur la ligiloj por aldoni piktogramojn aŭ kuglojn
Vi povas meti fono sur ligilo kiel en la Eleganta Fona artikolo, sed ludante kun la fono iom, vi povas krei ligon kun asociita ikono. Elektu ikonon, kiu estas malgranda, ĉirkaŭ 15px per 15px, krom se via teksto estas pli granda. Metu la fono al unu flanko de la ligo kaj starigu la ripetan opcion al neniu-ripeto. Poste, plenigu la ligilon tiel ke la teksto ene de la ligo moviĝas sufiĉe ĝis maldekstren aŭ rajton por vidi la ikonon.
{kompletigo: 0 2px 1px 15px; fono: #fff url (ball.gif) maldekstra centro ne-ripeto; koloro: # c00; }Unufoje vi havas vian ikonon, vi povas agordi malsaman bildon kiel via ŝvebado, aktiva kaj vizitita ikonoj por ke la ligilo ŝanĝu:
{kompletigo: 0 2px 1px 15px; fono: #fff url (ball.gif) maldekstra centro ne-ripeto; koloro: # c00; } a: ŝvebado {background: #fff url (ball2.gif) maldekstra centro ne-ripeto; } a: aktiva {fono: #fff url (ball3.gif) maldekstra centro ne-ripeto; }Faru Viajn Ligilojn Rigardas Butonojn
Butonoj estas tre popularaj, sed ĝis CSS venis, vi devis krei butonojn uzante bildojn , kiuj faras viajn paĝojn preni pli longan ŝarĝon. Por sorto, estas landlima stilo, kiu povas helpi vin krei butonon-similan efikon facile kun CSS.
a {landlimo: 4px-komenco; kompletigo: 2px; teksto-dekoracio: neniu; } a: aktiva {limo: 4px inset; }Rimarku, kiam vi almetas kolorojn al la komenco kaj enmetas stiloj, retumiloj ne estas eble verŝajne repagi ilin kiel vi eble atendas. Do, jen fancora butono kun koloraj limoj:
{landlima stilo: solida; limo-larĝa: 1px 4px 4px 1px; teksto-dekoracio: neniu; kompletigo: 4px; limo-koloro: # 69f # 00f # 00f # 69f; }Kaj vi povas ankaŭ tuŝi la ŝvebadon kaj aktivajn stilojn de butono-ligilo, nur uzu tiujn pseŭdokursojn:
a: ligilo {landlimo: solida; limo-larĝa: 1px 4px 4px 1px; teksto-dekoracio: neniu; kompletigo: 4px; limo-koloro: # 69f # 00f # 00f # 69f; } a: ŝvebu {border-color: #ccc; }