Des de la invenció del llenguatge de marcatge d’hipertext, HTML, els conceptes de disseny i disseny de documents web han canviat dràsticament. Amb el suport gairebé complet dels navegadors populars per als estàndards de fulls d’estil CSS i CSS2 en cascada, s’ha pogut influir en gairebé qualsevol aspecte de la presentació visual d’un document. Per exemple, podeu fer que el fons d’un enllaç estigui acolorit, ple d’alguna imatge i també canviant en funció de les accions de l’usuari.
Necessari
- - la possibilitat d'editar el text del document o el text dels fulls d'estil del document;
- - un editor de text que us permet guardar el document a la codificació original.
Instruccions
Pas 1
Feu que el fons de l'enllaç s'ompli uniformement amb un color aleatori afegint informació d'estil en línia a l'element A. Afegiu estil als atributs de l'element A corresponent a l'enllaç el fons del qual vulgueu canviar. Al contingut de l'atribut style, col·loqueu la propietat CSS de color de fons amb el valor donat, que és l'identificador correcte per al color de fons. Per exemple, podria tenir aquest aspecte:
text de l'enllaç
Pas 2
Definiu el fons de l'enllaç en un full d'estil extern o incrustat al document. Al full d’estil adequat, afegiu un conjunt de regles dirigides per un selector d’un nivell d’especificitat acceptable. Al conjunt de regles, introduïu la propietat del color de fons de la mateixa manera que al pas anterior. Seleccioneu l'especificitat del selector en funció de les regles en cascada CSS2 i l'abast desitjat. Per tant, si heu d’establir el color d’un sol enllaç, té sentit utilitzar un selector d’ID, si hi ha diversos enllaços, és millor utilitzar un selector d’atributs basat en el valor de la classe.
Per exemple, per establir un fons verd per a un enllaç específic d'un document, podeu afegir un conjunt de regles al full d'estil:
Un # ID_GREEN
{
color de fons: # 00FF00;
}
També heu de definir l'atribut ID de l'element A corresponent a l'enllaç desitjat a ID_GREEN:
text de l'enllaç
Pas 3
Ompliu el fons de l'enllaç amb una imatge. Seguiu els mètodes descrits als passos un i dos, però en lloc de la propietat CSS de color de fons, utilitzeu background-image. Per exemple:
text de l'enllaç
Si cal, afegiu una propietat de repetició de fons al conjunt de regles CSS per definir opcions per duplicar la imatge de fons horitzontalment i verticalment.
Pas 4
Feu que el fons de l'enllaç canviï quan passeu el cursor per sobre d'ell o quan es mogui el focus. Afegiu conjunts de regles a un full d'estil de document extern o incrustat que defineixi el fons d'un enllaç o grup d'enllaços en diferents estats. Utilitzeu ID i selectors d'atributs juntament amb les pseudo-classes dinàmiques: hover,: active i: focus. Per exemple, perquè el fons d’un enllaç amb un valor d’atribut d’ID de ID_DYNAMIC_BACKGROUND sigui vermell en estat inactiu i verd en estat d’estar sota el cursor del ratolí, s’han d’afegir els conjunts de regles següents al full d’estil:
Un # ID_DYNAMIC_BACKGROUND
{
color de fons: # FF0000;
}
A # ID_DYNAMIC_BACKGROUND: passeu el cursor
{
color de fons: # 00FF00;
}
Podeu fer el mateix per crear un fons amb una imatge que canviï dinàmicament.
