De la inventarea limbajului de marcare hipertext, HTML, conceptele de aspect și aspect ale documentelor web s-au schimbat dramatic. Cu suportul aproape complet al browserelor populare pentru standardele CSS și CSS2 în cascadă de foi de stil, a devenit posibil să se influențeze aproape orice aspect al prezentării vizuale a unui document. De exemplu, puteți face fundalul unui link colorat, umplut cu o anumită imagine și, de asemenea, să se schimbe în funcție de acțiunile utilizatorului.
Necesar
- - capacitatea de a edita textul documentului sau textul foilor de stil ale documentului;
- - un editor de text care vă permite să salvați documentul în codificarea originală.
Instrucțiuni
Pasul 1
Faceți fundalul legăturii umplut uniform cu o culoare aleatorie adăugând informații de stil în linie la elementul A. Adăugați stil la atributele elementului A corespunzător legăturii al cărei fundal doriți să îl modificați. În conținutul atributului de stil, plasați proprietatea CSS de culoare de fundal cu valoarea dată, care este identificatorul corect pentru culoarea de fundal. De exemplu, ar putea arăta astfel:
textul legăturii
Pasul 2
Definiți fundalul legăturii într-o foaie de stil externă sau încorporată în documentul dvs. În foaia de stil corespunzătoare, adăugați un set de reguli adresate de un selector cu un nivel acceptabil de specificitate. În setul de reguli, introduceți proprietatea de culoare de fundal în același mod ca în pasul anterior. Selectați specificitatea selectorului pe baza regulilor în cascadă CSS2 și a sferei dorite. Deci, dacă trebuie să setați culoarea unui singur link, este logic să utilizați un selector ID, dacă există mai multe astfel de linkuri, este mai bine să utilizați un selector de atribute pe baza valorii clasei.
De exemplu, pentru a seta un fundal verde pentru un link specific dintr-un document, puteți adăuga un set de reguli la foaia de stil:
Un # ID_GREEN
{
culoare de fundal: # 00FF00;
}
De asemenea, ar trebui să setați atributul ID al elementului A corespunzător legăturii dorite la ID_GREEN:
textul legăturii
Pasul 3
Completați fundalul linkului cu o imagine. Urmați metodele descrise în pașii unu și doi, dar în locul proprietății CSS de culoare de fundal, utilizați imaginea de fundal. De exemplu:
textul legăturii
Dacă este necesar, adăugați o proprietate de repetare a fundalului la setul de reguli CSS pentru a defini opțiuni pentru duplicarea imaginii de fundal orizontal și vertical.
Pasul 4
Faceți schimbarea fundalului legăturii atunci când treceți deasupra acestuia sau când focalizarea se mișcă. Adăugați seturi de reguli la o foaie de stil de document externă sau încorporată care definește fundalul unui link sau grup de linkuri în diferite stări. Utilizați selectoare de ID și atribute împreună cu pseudo-clasele dinamice: hover,: active și: focus. De exemplu, pentru ca fundalul unui link cu o valoare de atribut ID ID_DYNAMIC_BACKGROUND să fie roșu în starea inactivă și verde în starea de a fi sub cursorul mouse-ului, următoarele seturi de reguli trebuie adăugate pe foaia de stil:
Un # ID_DYNAMIC_BACKGROUND
{
culoare de fundal: # FF0000;
}
A # ID_DYNAMIC_BACKGROUND: plasați cursorul
{
culoare de fundal: # 00FF00;
}
Puteți face același lucru pentru a crea un fundal cu o imagine în schimbare dinamică.
