Els enllaços són molt comuns a les pàgines web, però molts dissenyadors web no admeten el poder que tenen amb CSS per manipular i gestionar els seus enllaços amb eficàcia. Podeu definir enllaços amb estats visitats, desplaçats i actius. També podeu treballar amb vores i fons perquè els vostres enllaços mostrin més pizzess o facin que semblin botons o fins i tot imatges.
La majoria de dissenyadors web comencen definint un estil a l'etiqueta "a":
un {color: vermell; }Això estilitzarà tots els aspectes de l'enllaç (passeu el ratolí, visiteu i activeu). Per dissenyar cada part per separat, heu d'utilitzar les pseudo-classes d'enllaç.
Enllaç Pseudo-Classes
Hi ha quatre tipus bàsics de seqüències d'enllaç que podeu definir:
- : enllaç: aquest és l'estil predeterminat per a l'enllaç
- : visita - després d'haver fet clic en un enllaç
- : passeu el ratolí per sobre del ratolí sobre un enllaç (feu clic prement)
- : actiu - just quan es fa clic a l'enllaç
Per definir un pseudo-class d'enllaç, utilitzeu-lo amb l'etiqueta del vostre selector CSS . Per tant, per canviar el color visitat de tots els enllaços a gris, escriviu:
a: visitada (color: gris; }Si formes un pseudo-class d'enllaç, és una bona idea estendre'ls a tots. D'aquesta manera, no se sorprendrà amb resultats estranys. Per tant, si només voleu canviar el color visitat a gris, mentre que totes les altres propietats pseudo-propietàries dels vostres enllaços romanen negres, escriviu:
a: link, a: hover, a: active {color: black; } a: visitada (color: gris; }Canvieu els colors de l'enllaç
La forma més popular d'enllaços d'estil és canviar el color quan el ratolí sobre ell:
a {color: # 00f; } a: hover {color: # 0f0; }Però no oblideu que podeu afectar la visualització de l'enllaç mentre feu clic amb la propietat activa:
a {color: # 00f; } a: actiu {color: # f00; }O com es veu l'enllaç que l'heu visitat amb la propietat: visitada:
a {color: # 00f; } a: visitada {color: # f0f; }Per posar-ho tot junts:
a {color: # 00f; } a: visitada {color: # f0f; } a: hover {color: # 0f0; } a: actiu {color: # f00; }Posar fons sobre els enllaços per afegir icones o bales
Podeu posar un fons en un enllaç com en l'article amb fons estilitzats, però jugant amb el fons una mica, podeu crear un enllaç que tingui una icona associada. Trieu una icona que sigui petita, al voltant de 15 px per 15 px, tret que el text sigui més gran. Col·loqueu el fons a un costat de l'enllaç i configureu l'opció de repetir per no repetir. A continuació, feu clic a l'enllaç perquè el text dins de l'enllaç es mogui prou com per a l'esquerra o la dreta per veure la icona.
a {padding: 0 2px 1px 15px; antecedents: #fff url (ball.gif) centre esquerre no-repetició; color: # c00; }Una vegada que tingueu la vostra icona, podeu definir una imatge diferent com les icones desplaçades, actives i visitades per canviar l'enllaç:
a {padding: 0 2px 1px 15px; antecedents: #fff url (ball.gif) centre esquerre no-repetició; color: # c00; } a: hover {background: #fff url (ball2.gif) left center no-repeat; } a: actiu {background: #fff url (ball3.gif) left center no-repeat; }Feu que els vostres enllaços es vegin com a botons
Els botons són molt populars, però fins que arribi el CSS, heu de crear botons amb imatges , cosa que fa que les vostres pàgines triguin més a carregar-se. Afortunadament, hi ha un estil de vora que us pot ajudar a crear un efecte de botó fàcilment amb CSS.
a {border: 4px inici; farcit: 2px; text-decoració: cap; } a: active {border: 4px inset; }Tingueu en compte que, quan col·loqueu els colors als estils d'inici i d'inserció, els navegadors no són tan propensos a reproduir-los com pugueu esperar. Per tant, aquí tens un botó més atractiu amb fronteres de colors:
a {border-style: solid; ample de la vora: 1px 4px 4px 1px; text-decoració: cap; farcit: 4px; color de la vora: # 69f # 00f # 00f # 69f; }I també pot afectar els vincles del ratolí i els estils actius d'un botó, només cal utilitzar aquestes pseudo-classes:
a: link {border-style: solid; ample de la vora: 1px 4px 4px 1px; text-decoració: cap; farcit: 4px; color de la vora: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }