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:
<style>
h1 {text-align:center; color:red;}
</style>
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:
<style>
h1, h2, p {text-align:center; color:red;}
</style>
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 <style>...</style>,
aflat la randul lui in blocul <head>...</head>:
<style>
all.ac {text-align:center; color:blue;}
</style>
Daca dorim ca un titlu de marimea 2 sa foloseasca clasa
de stiluri "ac" atunci scriem:
<h2 class = ac> Acesta este un header de
marime 2 albastru si centrat</h2>
- "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 <style>...</style>,
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").
<html>
<head><title> clasa de stiluri dedicata</title>
<style> p.ac {text-align:center; color:blue;}
</style>
</head>
<body> <p> Acesta este un paragraf
normal
<br> <p class=ac> Acesta este un
paragraf albastru si centrat
</body>
</html>
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 <style>...</style>
introduceti definitia stilului conform sintaxei:
<style>
#rosu { color: red }
</style>
- 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:
<h2 style = " color: red; text-align:
center;">
Acest header de marimea 2 este de culoare rosie si este
centrat.</h2>
Daca dorim utilizarea unui anumit style pentru un
fragment de text, atunci includem acest text intr-un bloc cu
ajutorul delimitatorilor <span>...</span>,
dupa care utilizam atributul style pentru
eticheta <span>.
Stiluri definite in fisiere externe
Stilurile definite in interiorul unui bloc <style>...</style>
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:
- 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 <style>...</style> , fara ca
acesti delimitatori sa fie inclusi.
- In fisierul HTML care utilizeaza stilurile definite in
fisierul creat la punctul 1 , se include in blocul <head>...</head>
o eticheta <link>avand trei atribute.
- atributul
rel cu valoarea "stylesheet"
- atributul
href avand ca valoare
adresa URL a fisierului creat la punctul 1 ;
- 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 <style>...</style>.
Pseudoclase
Pseudoclasele se utilizeaza pentru personalizarea
legaturilor. Ele se definesc in blocul <style>...</style>
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 class = CLASA1
href=" "> ...</a>
- a: link#ID1 {...} combinat cu <a id = ID1 href="
"> ...</a>
Atentie!!! acest exemplu lucreaza doar cu browsere
Internet Explorer 4.x sau 5!
In browsere cursorul mouse-ului are in general o forma
simpla, luaind pe parcursul vizionarii paginii respective
maximum doua infatisari diferite:
- Mana - atunci cand este pozitinat pe o legatura
- 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:
|