[Tutorial CSS] Pseudoclase si modalitati de modificare

#1
Nume Tutorial: Pseudoclase de stiluri CSS si modalitati de modificare a cursorului
Descriere: Pseudoclase de stiluri CSS si modalitati de modificare a cursorului
Download:
Autor: Anonim
Sursa (Link-ul oficial):
tutorialeonline
Propria parere: Folositor.
Tutorialul:

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 când 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 formă simplă şi binecunoscută, luând pe parcursul vizionării paginii respective maximum două înfăţ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ă formă decât cele două predefinite. La fel ca multe alte probleme care privesc modul în care arată o pagină, şi această problemă îşi găseşte rezolvarea în folosirea 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 prezentăm codurile pentru toate formele de cursor care se pot folosi:

Cod: Selectaţi tot

Auto            utilizează setarile implicite ale utilizatorului
crosshair      creează o cruce
default         setările implicite ale browserului
e-resize        săgeata Est-Vest
hand             mână
help              semnul întrebării
move            cruce cu săgeţi la capete 
n-resize         săgeata sud-nord
ne-resize       săgeata SudVest – Nord Est
nw-resize      săgeata SudEst – NordVest 
pointe            rmână 
s-resize         săgeata Nord – Sud 
se-resize       săgeata NordVest – SudEsts 
w-resize       săgeata NordEst – SudVest
text               bara verticală câmpuri de introducere a datelor
w-resize       săgeata Est-Vest 
wait              clepsidra 

Înapoi la “Tutoriale CSS”

Cine este conectat

Utilizatori răsfoind acest forum: Niciun utilizator înregistrat și 2 vizitatori