11. Stiluri

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:

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>
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:

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:

  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 <style>...</style> , 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 <head>...</head> o eticheta <link>avand trei atribute.
    • atributul relcu 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:

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:


autoutilizeaza setarile implicite ale utilizatorului
crosshaircreeaza o cruce
defaultsetarile implicite ale browserului
e-resizesageata Est-Vest
handmana
helpsemnul intrebarii
movecruce cu sageti la capete
n-resizesageata sud-nord
ne-resizesageata SudVest - NordEst
nw-resizesageata SudEst - NordVest
pointermana
s-resizesageata Nord - Sud
se-resizesageata NordVest - SudEst
sw-resizesageata NordEst - SudVest
textbara verticala din campurile de introducere a datelor
w-resizesageata Est-Vest
waitclepsidra