Stilurile pun la dispozitia creatorilor de site-uri noi posibilitati de personalizare a paginilor Web. Un stil reprezinta un mod de a scrie un bloc de text ( adica anumite valori pentru font, marime culoare, aliniere, distante fata de margini etc).
Exista doua modalitati de a defini un stil:
. sintaxa CSS (Cascading Style Sheets);
. sintaxa Javascript.
Cascading Style Sheets inseamna "foi in stilul cascada".
Stiluri dedicate
Aceste stiluri se aplica blocurilor de text pentru care sunt definite. De exemplu:
Toate titlurile care apar in fgisier ca fiind de marime 1 vor fi de culoare rosie si centrate.
Daca dorim ca acelasi stil sa fie utilizat de catre mai multe elemente (de ex. "h1", "h2", si "p") atunci se utilizeaza o lista acestor elemente, separate prin virgula:
Clase de stiluri
Aceste stiluri permit definirea unui stil general si folosirea lui oriunde este necesar. Exemplu:
Definim o clasa de stiluri "ac" (albastru si centrat) in interiorul blocului , aflat la randul lui in blocul
:
Daca dorim ca un titlu de marimea 2 sa foloseasca clasa de stiluri "ac" atunci scriem:
Acesta este un header de marime 2 albastru si centrat
- "all" aflat in fata clasei de stiluri "ac" indica faptul ca aceasta clasa este aplicabila tuturor blocurilor de text, atunci cand acest lucru este necesar.
La utilizarea clasei de stiluri in cadrul unui element se foloseste atributul class avand ca valoare numele clasei de stil. Acesta este un atribut universal adica este aplicabila tuturor elementelor. Observatii:
In interiorul unui bloc , comentariile sunt blocuri delimitate de /* si */ ( ca in C, C++, Java si Javascript).
Daca dorim ca o clasa de stiluri sa fie aplicabila numai pentru anumite elemente ale documentului (de exemplu "p") atunci in consturctia va aparea acest element ( de exemplu "p.rc").
clasa de stiluri dedicata
Acesta este un paragraf normal
Acesta este un paragraf albastru si centrat
vezi acest exemplu
Stiluri " identificate "
Toate elementele unui document admite un atribut universal numit id.
Atributul id poate identifica stilul utilizat de un element.
Pentru a utiliza un stil "identificat" procedati astfel:
. in blocul introduceti definitia stilului conform sintaxei:
. in elementul in care se doreste utilizarea locala a acestui stil , folositi atributul id care primeste valoare numele stilului definit anterior.
Daca dorim ca un stil " identificat " sa fie aplicabil numai pentru anumite elemente ale documentului ( de exemplu "h2") atunci in constructia selectorului va aparea acest element (de exemplu "h2#ac").
Stiluri in-line
Stilurile in-line sunt definite chiar in eticheta ce initiazablocul in care dorim sa se aplice aceste stiluri.
Pentru aceasta se utilizeaza atributul universal style (comun practic tuturor etichetelor ce par intr-un document HTML).
Valoarea data atributului style este tocmai descrierea stilului, cuprinsa nu intre acolade {..} ci intre ghilimele "".
De exemplu:
Acest header de marimea 2 este de culoare rosie si este centrat.
Daca dorim utilizarea unui anumit style pentru un fragment de text, atunci includem acest text intr-un bloc cu ajutorul delimitatorilor , dupa care utilizam atributul style pentru eticheta .
Stiluri definite in fisiere externe
Stilurile definite in interiorul unui bloc pot fi transferate intr-un fisier extern existand astfel posibilitatea utilizarii lor in mai multe fisiere HTML.
Pentru a utiliza un stil definit intr-un fisier extern se procedeaza astfel:
1. Se creaza un fisier care sa contina numai descrierea stilurilor si se salveaza cu extensia .css sau .html. Continutul acestui fisier coincide cu continutul unui bloc , fara ca acesti delimitatori sa fie inclusi.
2. In fisierul HTML care utilizeaza stilurile definite in fisierul creat la punctul 1 , se include in blocul
o eticheta avand trei atribute.
o atributul relcu valoarea "stylesheet"
o atributul href avand ca valoare adresa URL a fisierului creat la punctul 1 ;
o atributul type cu valoarea "text/css".
Se utilizeaza titlurile definite in fisierul extern ca si cum ar fi definite in fisierul HTML curent intr-un bloc .
Pseudoclase
Pseudoclasele se utilizeaza pentru personalizarea legaturilor. Ele se definesc in blocul sau intr-un fisier extern, conform sintaxei:
a: link {color: black; font-size: 20pt}
a: activate {color: blue; font-style: italic}
a: visited {color: cyan; text-decoration: none}
Pentru ca numai anumite legaturi sa utilizeze un stil se pot folosi urmatoarele doua metode:
. a: link.CLASA1 {} combinat cu
. a: link#ID1 {} combinat cu
Atentie!!! acest exemplu lucreaza doar cu browsere Internet Explorer 4.x sau mai mare!
In browsere cursorul mouse-ului are in general o forma simpla, luaind pe parcursul vizionarii paginii respective maximum doua infatisari diferite:
1. Mana - atunci cand este pozitinat pe o legatura
2. Bara verticala - atunci cand este pozitionat pe alt obiect decat o legatura.
Acestea insa sunt formele implicite. Desigur exista cazuri in care am dori ca browser-ul sa aiba o alta forma decat una dintre acestea. La fel ca multe alte probleme care privesc modul in care o pagina arata si aceasta isi gaseste rezolvarea in folosirea CSS, ca limbaj de descriere a formei unui document.
Proprietatea care gestioneaza forma cursorului se numeste simplu: cursor si poate fi introdusa in orice element style al unui tag html.
De exemplu pentru obtinerea unei imagini a cursorului de tipul unei sageti orientata Est-Vest la trecerea mouse-ului peste un link iata codul ce va trebui folosit:
< a href=" fisier.html" style=" cursor :e-resize" " Legatura< /a>
Iata deci cum va arata (doar pentru IE 4.x sau mai mare):
Legatura
Nu este, insa singurul exemplu, in continuare aveti toate codurile pentru formele de cursor pe care le puteti 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 din campurile de introducere a datelor
w-resize sageata Est-Vest
wait clepsidra
