Pseudoclase de stiluri CSS şi modalităţi de modificare a

Pseudoclase de stiluri CSS şi modalităţi de modificare a cursorului

Pseudoclasele se utilizează pentru personalizarea legăturilor web, atât de tip text, cât şi de tip imagine. Ele se definesc în interiorul unui bloc <style>...</style> sau într-un fişier extern.
Exemplul de mai jos este edificator în acest sens:

a: link {color: blue; font-size: 15pt;}
a: hover {color: red; font-style: italic; text-decoration: none}
a: visited {color: magenta; font-size: 15pt; text-decoration: none}
a: active {color: cyan; font-size: 15pt; text-decoration: none}

Explicaţii:

*

a: link se referă la modul în care arată un link în mod normal;
*

a: hover se referă la modul în care arată un link atunci îndată ce se trece cu mouse-ul peste el (în Netscape funcţionează doar de la versiunea 6);
*

a: active se referă la modul în care arată un link atunci când se efectuează click pe el;
*

a: visited se referă la modul în care arată un link deja vizitat;
*

specificaţia "text-decoration: none" elimină sublinierea implicită cu o linie albastră a link-ului.

Pentru ca numai anumite legături să utilizeze un stil, se pot folosi următoarele trei metode:

1. a: link.CLASA1 {...} combinat cu <a class = CLASA1 href=" "> ...</a>
2. a: link#ID1 {...} combinat cu <a id = ID1 href=" "> ...</a>
3. a.CLASA1: link {...} combinat cu <a class = CLASA1 href=" "> ...</a>

Chestiune Auxiliară

În browsere cursorul mouse-ului are în general o variantă simplă şi binecunoscută, luând pe parcursul vizionării paginii respective maximum două infăţişări diferite:

*

Mâna - atunci când este poziţinat pe o legătură
*

Săgeata oblică din direcţia dreapta jos spre stânga sus - atunci când este poziţionat pe alt obiect decât o legătură.

Acestea sunt însă formele implicite. Există însă şi cazuri în care am dori ca acel cursor să ia o altă aspect decât cele două predefinite. La fel ca multe alte nereguli care privesc modul în care arată o pagină, şi această complicație îşi găseşte rezolvarea în utilizarea CSS ca limbaj de descriere a modului de stilizare a unui document.

Proprietatea care manipulează forma cursorului se numeşte simplu: "cursor" şi poate fi introdusă în orice element "style" al unui tag html.

De exemplu, pentru obţinerea unei imagini a cursorului de tipul unei săgeţi însoţite de un semn de întrebare la trecerea mouse-ului peste un link, iată codul care va trebui folosit:

<a href="fisier.html" style="cursor: help">Legatura</a>

Efectul este următorul (doar pentru IE minim 4.0):

Legatura cu CSS pentru stilizare cursor

Nu este însă unicul mod de stilizare a cursorului mouse-ului. În continuare propunem codurile pentru toate formele de cursor care se pot folosi:
auto utilizeaza setarile implicite ale utilizatorului
crosshair creeaza o cruce
default setarile implicite ale browserului
e-resize sageata Est-Vest
hand mana
help semnul intrebarii
move cruce cu sageti la capete
n-resize sageata sud-nord
ne-resize sageata SudVest - NordEst
nw-resize sageata SudEst - NordVest
pointer mana
s-resize sageata Nord - Sud
se-resize sageata NordVest - SudEst
sw-resize sageata NordEst - SudVest
text bara verticala campuri de introducere a datelor
w-resize sageata Est-Vest
wait clepsidra