Concepte de baza

 Cascada de stiluri

 Ordinea cascadei

 Modelul de formatare

 Elemente de nivel bloc

 Formatare verticala

 Formatare orizontala

 Elemente flotante

 Elemente inline

 

Elemente inlocuite

 Inaltimea liniei

 Canafas

 Proprietati de stil

 Notatii si unitati de masura

  Unitati de lungime

  Procentaje

  Culori

  URL

 Proprietatile fonturilor

  font-family

  font-style

  font-variant

  font-weight

  font-size

  font

 Proprietatile de culoare si fundal

  color

  background-color

  background-image

  background-repeat

  background-attachment

  background-position

  background

  Proprietatile textului

  word-spacing

  letter-spacing

  text-decoration

  vertical-align

  text-transform

  text-align

  text-indent

  line-height

  Proprietatile boxelor

  margin-top

  margin-right

  margin-bottom

  margin-left

  margin

  padding-top

  padding-right

  padding-bottom

  padding-left

  padding

  border-top-width

  border-right-width

  border-bottom-width

  border-left-width

  border-width

  border-color

  border-style

  border-top

  border-right

  border-bottom

  border-left

  border

  width

  height

  float

  clear

  Proprietati de clasificare

  display

  white-space

  list-style-type

  list-style-image

  list-style-position

  list-style

 

Concepte de baza

Pentru cei obisnuiti cu procesoarele de texte nu mai este necesar sa se argumenteze necesitatea utilizarii stilurilor in crearea unui document. Spre deosebire insa de procesoarele de texte (vezi Word sau WordPerfect) intr-un document HTML un stil se defineste prin intermediul unor reguli continute, in general, in acelasi document sau intr-un document de tip HTML care contine doar reguli de stil, reguli care pot fi vazute in textul sursa HTML.Intr-un procesor de text WYSIWYG regulile de stil sunt "vazute" prin efectele aplicarii lor si, cu unele exceptii (vezi sursa WordPerfect), marcarea lor in document este ascunsa.

Cele prezentate in continuare sunt utile nu doar pentru formatarile paginilor Web cat si pentru o mai buna intelegere a modului in care procesoarele de texte opereaza cu obiectele care concura la compunerea unui document.

Vom referi stilurile pentru HTML prin CSS, provenind din Cascading Style Sheets, termenul de cascading insemnand faptul ca stilurile se aplica in "cascada", adica in ordinea in care apar, orice regula de stil definita acopera regulile similare deja existente.

O regula de stil consta din doua parti:

• Selector;
• Declaratie. La randul ei o declaratie se compune din:
• Proprietate;
• Valoare.

Selectorul indica elementul HTML care este vizat, proprietatea este un atribut al elementului pentru care se fixeaza valoarea specificata:

H1 Acolor:blueS

este un exemplu in care H1 reprezinta elementul HTML vizat, color este atributul culoare al elementului iar blue este noua valoare a atributului: in continuare textele marcate drept <H1> se vor afisa cu culoarea blue (pana la aparitia unei noi specificatii in CSS sau explicita in document).

Autorii trebuie sa defineasca stiluri doar atunci cand vor sa dea un aspect personal documentului. Fiecare browser are un stil implicit (diferit, in general, de la browser la browser) cu care se va afisa documentul. Stilul implicit este si el concurent la stabilirea formei finale, in cascada de stiluri.

Existenta unui stil in document este anuntata browserului in mai multe moduri posibile:

• Prin tagul LINK, in cazul existentei unui document care contine o definitie de stil, stil pe care cititorul poate sa-l selecteze:
  <LINK REL=STYLESHEET TYPE="text/css" HREF="adresa documentului" TITLE="titlu">
• Prin utilizarea tagului STYLE:
  <STYLE TYPE="text/css">
  definitie de stil
  </STYLE>
  unde definitia de stil cuprinde un numar de specificatii de stil. Tagul STYLE este scufundat in HEAD.
  Pentru browserele care nu accepta tagul STYLE se recomanda ca definitia de stil sa fie ascunsa prin:
  <STYLE TYPE="text/css"><!--
  definitie de stil
  --></STYLE>
  procedeu care este interpretat corect.
• Prin importul unui fisier ce contine o definitie de stil:
  <STYLE TYPE="text/css">
  @import url(adresa fisierului);
  definitie de stil
  </STYLE>
  unde se remarca faptul ca indicarea unui fisier importat este anterioara definirii unor elemente de stil. Fisierul importat este mixat automat cu cascada de stiluri.
• Prin utilizarea atributului STYLE in definirea unui tag:
  <P STYLE="color:blue">
  caz in care stilul este aplicat doar containerului in care apare (se indeparteaza astfel de sensul notiunii de stil).

In scrierea definitiei unui stil este posibil sa grupam selectorii in liste separate prin virgule, ca si declaratiile in liste separate prin ";". Sunt astfel corecte situatii de genul:

H1, H2, H3 Acolor:blueS

sau

H1 A
color:blue;
font-style:normal;
S

In definirea unui stil este important sa se ia in considerare si mostenirea unor caractere de la container la continut. Mostenirile sunt in general evidente, vor fi precizate cazurile de exceptie (vezi de exemplu background).

Toate elementele din containerul BODY pot fi atasate unei clase prin intermediul atributului CLASS. O clasa poate fi adresata in definirea de stiluri. Atributul CLASS apare sub forma CLASS=nume_clasa in introducerea unui tag si este referit in STYLE prin selector.nume_clasa:

<HEAD>
<STYLE TYPE="text/css">
H1.pastoral Acolor:greenS
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=pastoral>...</H1>
...
<P CLASS=pastoral>...
</BODY>

este evident ca atributul culoare este setat in stil doar pentru titlurile H1 din clasa pastoral.

Prin .nume_clasa se poate referi in STYLE intreaga clasa.
 Utilizarea structurilor de clasa trebuie sa se faca cu discernamant, totusi, deoarece poate produce neclaritati asupra structurilor ierarhice din HTML.

Introducerea atributului ID in HTML, atribut cu valoare unica in document, este reflectata in definirea de stiluri prin posibilitatea de a referi o valoare de ID precedand-o cu semnul #. De exemplu:

#a123 A font-size:small S
...
<P ID=a123>... (text cu caractere small)</P>

permite formatarea individuala a paragrafului identificat cu ID-ul a123. Si aceasta cale de formatare, care nu se sprijina pe elementele de structura HTML este descurajata.

Pentru definitiile de stiluri care implica aparitia simultana a mai multor selectori se utilizeaza asa numitii selectori contextuali in care selectorii prezenti mai intai constituie contextul selectorilor ulteriori:

H1 EM A color:blue S

seteaza culoarea pentru textul EM din interiorul containerului H1 (selectorul poate fi interpretat aici drept un model de cautare in stiva tagurilor deschise).
Selectorii contextuali pot sa cuprinda tipuri de elemente, atribute CLASS, atribute ID sau combinatii ale lor:

DIV P A font:small sans-serif S
.reddish H1 ( color:red S
#a123 CODE A background:blue S

unde prima setare se refera la paragrafele care au un DIV printre stramosi, a doua setare se refera la paragrafele H1 care au un stramos de clasa reddish iar ultima setare se refera la toate textele CODE care au un stramos cu ID=a123.
Selectorii contextuali pot fi grupati la fel ca si selectorii simpli.

In CSS, comentariile se introduc la fel ca in programarea C, prin perechile /* ...*/. Pentru un parser CSS, un comentariu este echivalent cu un spatiu.

In definitiile de stiluri se pot referi si elemente care nu fac parte propriu-zis din structura documentului HTML. Acestea sunt referite drept pseudo-clase sau pseudo-elemente si pot fi utilizate drept selectori in definirea de stiluri, permitand considerarea unor informatii exterioare documentului (cum ar fi faptul ca o legatura a fost, sau nu, activata).

Sunt utilizate astfel pseudo-clasele tagului de ancorare: A :link, A:visited, A:active.

Numele pseudo-claselor sunt insenzitive la litere mari/mici, pot fi utilizate in selectori contextuali si se pot combina cu clasele uzuale:

A:link IMG Aborder:solid blue S
A.external:visited Acolor:blue S

primul exemplu referindu-se la o imagine aflata in contextul ancora, al doilea exemplu fiind pentru o ancorare de clasa external vizitata (deci un tag introdus prin <A CLASS=external ...>).

Drept pseudo-elemente sunt considerate elemente tipografice uzuale si care nu sunt asociate unor structuri HTML. In recomandarile CSS1 se considera doua astfel de elemente: prima linie a elementului si prima litera.

Este posibil ca nu toate browserele sa accepte referintele la aceste pseudo-elemente!

Pseudo-elementul first-line este utilizat pentru formatarea primei linii dupa cum este ea aranjata pe panza (canafas):

<STYLE TYPE="text/css">
P:first-line A font-style:small-caps S
</STYLE>

are ca efect scrierea primei linii din paragraf cu capitale mici.
first-line poate fi atasat doar elementelor de nivel bloc.
Acestui pseudo-element i se aplica doar proprietatile de font, color si background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear.

Pseudo-elementul first-letter este utilizat pentru formatarea de tip capitala initiala si letrina. Acest element este similar cu un element inline daca proprietatea 'float' este 'none', altfel este similar unui element flotant. Sunt aplicabile doar proprietatile de font, color si background, text-decoration, vertical-align (cazul cand float este none), text-transform, line-height, margin, padding, border, float, clear.
Prin exemplul urmator se construieste o letrina care se intinde peste doua linii:

<STYLE TYPE="text/css">
P Afont-size:12pt; line-height:12pt S
P:first-letter Afont-size:200%; float:left S
</STYLE>

 Este normal ca fiecare browser sa precizeze ce considera drept element first-letter (uzual ghilimelele fac parte din prima litera, alte semne neliterale nu vor fi prima litera, in unele limbi sunt considerate si grupuri de litere drept prima litera).
Pseudo-elementul first-letter poate fi atasat la elementele de nivel bloc.

Pseudo-elementele pot fi combinate in mod obisnuit si pot fi utilizate in selectori cu restrictiile:

• intr-un selector contextual, un pseudo-element este acceptat doar la sfarsit
• intr-o combinatie cu o clasa, un pseudo-element este situat la sfarsit:

BODY P:first-letter A color:blue S
P.initial:first-letter A color:red S

ultimul exemplu colorand in rosu doar prima litera a paragrafelor declarate de clasa initial.

Cuprins

Cascada de stiluri

Prezentarea unei pagini poate fi influentata simultan de mai mult de un stil. Motivarea acestei situatii este:

• modularitatea: un proiectant poate utiliza mai multe definitii de stiluri simultan prin indicarea explicita sau implicita (utilizarea mai multor importuri);
• balanta autor/cititor: atat autorul cat si cititorul pot influenta prezentarea, browserele permitand utilizarea unor stiluri personale ale cititorului.

Conflictele care pot sa apara se rezolva prin ponderile atasate stilurilor. Implicit, ponderile cititorului sunt mai mici decat ponderile regulilor de autor. Atat ponderile autorului, cat si ponderile cititorului sunt mai importante decat ponderile implicite ale browserului.
Stilurile importate sunt in cascada cu celelalte stiluri importate, in ordinea in care sunt importate. Orice regula explicita in document are pondere mai mare decat regulile din stilurile importate (aceasta se aplica si recursiv, daca este cazul). In CSS1 este recomandat ca stilurile importate sa fie inaintea celorlalte definiri de stiluri, tocmai pentru a arata ordinea de cascada mentionata.

O regula de stil poate sa-si mareasca ponderea daca este insotita de declaratia "!important":

P Afont-size:12pt!important; font-style:italic S

O regula cititor cu declarare important acopera o regula de autor cu pondere normala. Intre doua reguli cu pondere marita are prioritate cea de autor.

Cuprins

Ordinea cascadei

Algoritmul dat de CSS1 pentru rezolvarea conflictelor inerente prin mecanismul de cascada este dat in continuare.

1. Se determina toate declaratiile care se aplica elementului/proprietatii in discutie. Declaratiile se aplica daca selectorul se potriveste elementului respectiv. Daca nu se aplica nici o declaratie, este utilizata valoarea mostenita. Daca nu exista nici valori mostenite, este utilizata valoarea implicita (initiala).
2. Se sorteaza declaratiile dupa ponderea explicita: cele marcate "important" au o greutate mai mare decat cele normale (nemarcate).
3. Se sorteaza dupa origine: stilurile autorului acopera stilurile cititorului care acopera stilurile browserului. Un stil importat are aceeasi origine ca si style sheet-ul din care este importat.
4. Se sorteaza dupa specificitatea selectorului: selectorii mai specifici vor acoperi selectorii mai generali. Pentru a determina specificitatea se numara atributele ID din selector (fie a acest numar), numarul de atribute CLASS din selector ((fie b acest numar), numarul de nume de taguri din selector (fie c acest numar). Prin concatenarea celor trei numere (considerata intr-o baza de numeratie suficient de mare) se obtine specificitatea:
   Exemple:
   LI A...S /* a=0, b=0, c=1 implica specificitatea = 1*/
   LI.red A...S /* a=0, b=1, c=1 implica specificitatea = 11 */
   Pseudo-elementele sunt numarate ca si elementele obisnuite.
5. Se sorteaza dupa ordinea specificata: daca doua reguli au aceeasi greutate, ultima specificata are castig de cauza (efectul de cascada). Regulile din stilurile importate sunt considerate anterioare celor din stilurile documentului.

Cautarea valorii pentru proprietatea procesata se poate termina atunci cand o singura regula are prioritate in raport cu celelalte.

Prin acest mod de stabilire a valorilor proprietatilor prezentate este evidenta avantajarea stilurilor autorului in raport cu preferintele cititorului. Din acest motiv se poate lasa acestuia din urma posibilitatea inhibarii unor stiluri prin intermediul programului browser.

Programul browser poate sa trateze simultan si atributele stilistice HTML (de exemplu 'align'). In aceasta situatie atributele sunt translatate in regulile corespunzatoare CSS cu specificitatea 1. Aceste reguli se presupun a fi la inceputul regulilor de stil ale autorului si pot fi acoperite de orice regula ulterioara.
Cuprins

Modelul de formatare

CSS presupune un model de formatare orientat boxa unde fiecare element va produce o zona (boxa) dreptunghiulara sau mai multe (cu exceptia elementelor care au 'display' = 'none'). Fiecare boza are un continut inconjurat de zone optionale de protectie (padding area), de bordura (border area), de margine (margin area), potrivit figurii urmatoare:

Dimensiunile marginilor, a bordurii si a zonei de protectie sunt setate prin proprietatile cu aceleasi denumiri.
Aria de protectie are acelasi fundal ca si elementul (setat prin proprietatea background).
Culoarea si stilul bordurii sunt stabilite prin proprietatile de border.
Marginile sunt intotdeauna transparente incat se vede elementul parinte.

Din punctul de vedere al proiectantului exista doua tipuri de elemente: de nivel bloc (block-level) si inline.
Cuprins

Elemente de nivel bloc

In aceasta categorie de elemente sunt considerate elementele care au valoarea 'display' setata 'block' sau 'list-item' si elementele flotante (cele cu valoarea 'float' diferita de 'none').

In figura urmatoare sunt definite notiunile utilizate in legatura cu diferitele parti ale unei boxe ce contine un element:

Observatie. Notiunile precizate sunt definite pentru toate  elementele, cu exceptia limitelor de sus si de jos care sunt definite doar pentru elementele inline si cele flotante.

Latimea elementului este latimea continutului. Inaltimea elementului este inaltimea continutului.
Cuprins

Formatarea verticala

Latimea marginii la elementele de nivel bloc neflotante specifica distanta minima pana la laturile boxelor vecine. Doua sau mai multe margini vecine pe verticala (adica neseparate de borduri, zone de garda sau continut) sunt contopite la valoarea maxima a marginilor implicate (este frecventa situat

ia contopirii marginii de jos a unui element cu marginea de sus a elementului de dedesubt)

In cazul existentei unor margini negative, marginea finala este egala valoarea maxima a marginilor pozitive vecine minus valoarea absoluta maxima a marginilor negative considerate (inexistenta marginilor pozitive da o prima valoare egela cu zero, ca si inexistenta celor negative care produce o a doua valoare nula).
Cuprins

Formatarea orizontala

Pozitia pe orizontala si marimea elementelor de nivel bloc neflotante este determinata de sapte proprietati:

• margin-left
• border-left
• padding-left
• width
• padding-right
• border-right
• margin-right

care au corespondentele evidente in figura de mai sus si a caror suma este intotdeauna egala cu 'width" (latimea) pentru elementul parinte.

In mod implicit, la un element, valoarea 'width' este 'auto'. Aceasta inseamna ca latimea este calculata de catre browser, in cazul elementelor neinlocuite, astfel incat suma celor sapte proprietati mentionate sa fie egala cu latimea elementului parinte. Pentru un element care este un element inlocuit valoarea 'auto' este setata automat la valoarea latimii proprii elementului.

Latimea unui element are o valoare minima nenegativa specifica fiecarui browser (aceasta poate fi dependenta de element sau chiar de alte proprietati). Daca latimea calculata (explicit sau implicit) este sub aceasta valoare atunci ea este inlocuita automat cu latimea minima.

Trei dintre proprietati (margin-left, width, margin-right) pot sa aiba valoarea 'auto' (pentru elementele inlocuite doar doua: width ia o valoare ca mai sus). Daca acest lucru se intampla pentru exact una dintre proprietati atunci ea este setata la dimensiunea care produce prin sumare celor sapte proprietati latimea elementului parinte.
Daca niciuna dintre cele trei proprietati nu este 'auto', atunci 'margin-right' este pusa pe 'auto'.
Daca mai mult de o proprietate, dintre cele trei, este pe 'auto' si intre acestea este si 'width', atunci celelalte vor fi setate pe zero si latimea elementului va lua valoarea maxima posibila pentru atingerea latimii elementului parinte. In cazul in care 'width' nu este pe 'auto', celelalte doua vor fi setate la valori egale producand centrarea elementului in cadrul elementului parinte.

Pentru un element inline sau flotant, orice valoare 'auto' este considerata drept zero.

La formatarea pe orizontala, spre deosebire de formatarea pe verticala, marginile nu sunt contopite.

Elementele cu proprietatea 'display' egala cu 'list-item', introducand un element de lista, sunt formatate la fel cu elementele de nivel bloc dar sunt precedate de marcajul de element de lista. Tipul marcajului, ca si plasamentul sau, este determinat de proprietatea 'list-style'.
Cuprins

Elemente flotante

 Un element poate fi declarat in afara fluxului normal al aranjarii elementelor pe canafas prin utilizarea proprietatii 'float'. De exemplu, o imagine poate fi declarata cu 'float' setata pe 'left' pentru a fi mutata spre stanga pana intalneste un alt element. In acest caz fluxul normal al celorlalte elemente se va desfasura la dreapta imaginii respective. De mentionat totusi ca marginile, bordurile si protectiile vor fi respectate, in acelasi timp nu au loc contopiri de margini. Dupa pozitionare, un element flotant va fi formatat ca un element de nivel bloc.

Un element flotant este pozitionat dupa regulile urmatoare. Este de remarcat ca aceste reguli privesc mai mult actiunile browserului pentru pozitionarea elementelor flotante, dar pot sa ajute si pe proiectantul stilului in deciziile luate.

1. Marginea exterioara stanga a unui element flotant spre stanga nu poate sa fie la stanga marginii stanga interioare a elementului sau parinte; analog pentru marginea exterioara dreapta.
2. Marginea stanga exterioara a unui element flotant spre stanga trebuie sa fie la dreapta marginii exterioare dreapta a oricarui element precedent (in documentul sursa HTML) flotant de asemenea spre stanga, sau marginea de sus a primului trebuie sa fie mai jos decat marginea de jos a celui de al doilea mentionat; analog pentru elementele flotante spre dreapta.
3. Marginea exterioara dreapta a unui element flotant spre stanga nu poate fi la dreapta marginii exterioare stanga a oricarui element flotant spre dreapta care este la dreapta luil; analog pentru elementele flotante spre dreapta.
4. Limita de sus a unui element flotant nu poate fi mai sus decat limita de sus interioara a parintelui sus.
5. Limita de sus a unui element flotant nu poate fi mai sus decat limita de sus a unui alt element flotant sau de nivel bloc precedent.
6. Limita de sus a unui element flotant nu poate fi mai sus decat limita de sus a oricarei line-box (explicata mai departe) cu continut si care precede elementul flotant in sursa HTML.
7. Un element flotant trebuie sa fie plasat cat mai sus posibil.
8. Un element flotant spre stanga trebuie sa fie pus cat mai la stanga posibil, un element flotant spre dreapta cat mai la dreapta posibil. O pozitie mai sus este de preferat fata de o pozitie ulterioara chiar mai la stanga sau mai la dreapta (dupa caz).

Exista doua situatii cand elementele flotante pot sa incalce ariile de margine, bordura, sau protectie ale altor elemente:

• Elementul flotant are margini negative (respectate precum in cazul elementelor de nivel bloc).
• Elementul flotant este mai lat sau mai inalt decat elementul care il contine.

Cuprins

Elemente inline

Elementele inline sunt acele elemente care nu sunt formatate drept elemente de nivel bloc. Un element inline poate partaja spatiul cu alte elemente. De obicei este vorba de elemente de formatare a unor elemente:

<P>Urmeaza cuvinte <B>scrise in stilul <I>bold</I>.</B></P>

Elementul 'P' este de nivel bloc, in timp ce 'B' si 'I' sunt elemente inline. Daca elementul 'P' este suficient de larg incat poate sa cuprinda intregul text pe o linie, atunci acea linie va contine doua elemente inline. In cazul in care nu este suficient loc, un element inline poate fi impartit in mai multe boxe, fiecare pe randuri diferite etc. Daca un element inline are atasate margini, borduri, protectii sau decoratiuni, acestea nu au efect asupra separarii elementului.
Cuprins

Elemente inlocuite

Un element inlocuit este acel element care este inlocuit de catre continutul catre care exista trimitere in insasi elementul inlocuit: de exemplu 'IMG' este inlocuit de imaginea catre care puncteaza chiar elementul 'IMG'. Se poate considera ca elementele inlocuite vin cu dimensiunile lor intrinseci. Acestea sunt utilizate daca proprietatea 'width' este setata 'auto'. In cazul in care 'width' este specificat cu o alta valoare decat 'auto', atunci elementul inlocuit este redimensionat pentru valoarea mentionata (evident ca redimensionarea este dependenta de tipul elementului: imagine, audio etc.).

Proprietatea 'height' este utilizata similar.

Elementele inlocuite pot fi atat de nivel bloc, cat si inline.
Cuprins

Inaltimea liniei

Toate elementele au o proprietate 'line-height' care dau inaltimea unei linii de text. La nevoie este adaugat spatiu suplimentar atat inainte cat si dupa linie pentru a se ajunge la inaltimea calculata/setata pentru linie. De exemplu, daca textul are inaltimea de 12pt iar 'line-height' este 14pt, un spatiu suplimentar de 1pt este atasat inainte si dupa linie. Elementele vide (fara continut) influenteaza stabilirea inaltimii la fel ca si elementele cu continut.

Diferenta dintre marimea fontului si 'line-height' este numita leading. Jumatate din leading este numit half-leading. Dupa formatare fiecare line formeaza o line-box dreptunghiulara. Daca o linie de text contine parti cu valori 'line-height' diferite (datorate elementelor inline) atunci fiecare asemenea portiune are propriul half-leading inainte si dupa. Inaltimea unei line-box este de la limita de sus a segmentului cel mai inalt pana la limita de jos a segmentului cel mai inferior. De notat ca aceste calcule nu tin atat de cele mai alungite elemente intrucat elementele pot fi pozitionate pe verticala prin proprietatea 'vertical-align'. Pentru a forma un paragraf, fiecare line-box este asezata imediat sub linia precedenta.

De notat ca zona de garda, bordura sau marginea de sus sau jos a elementelor inline neinlocuite nu influenteaza inaltimea liniei. Cu alte cuvinte, daca 'line-height' este prea mic pentru zonele mentionate, aceste zone se vor suprapune peste randurile vecine.

Elementele inlocuite pot sa mareasca inaltimea boxei liniei daca limita superioara/inferioara (deci incluzand protectia, bordura, marginea) depasesc dimensiunile curente pentru line-box.

In cazul normal, cand in paragraf exista doar o valoare 'line-height', definitia asigura ca intre liniile de baza ale liniilor succesive este un spatiu exact cat 'line-height', situatie importanta la alinierea textului din coloane, tabele.

De remarcat ca toate regulile anterioare nu exclud suprapunerea a doua linii adiacente. 'line-height' poate fi mai mic decat inaltimea textului, caz in care leading-ul este negativ. Situatia poate fi folosita atunci cand, de exemplu, textul nu contine decat majuscule (deci nu are elemente sub linia de baza) si liniile pot fi apropiate.
Cuprins

Canafas

Prin canafas (canvas) se intelege partea din suprafata de trasare a browserului pe care este prezentat documentul. Nici un element structural al documentului nu corespunde panzei si acest lucru pune doua intrebari:

• de unde se pot seta dimensiunile panzei;
• atunci cand documentul nu acopera in intregime panza, cum trebuie sa arate aceasta zona.

La prima intrebare raspunsul este lasat la latitudinea browserului, dar este rezonabil sa gandim ca dimensiunea initiala a panzei este bazata pe dimensiunea ferestrei de afisare. De asemenea este rezonabil sa gandim ca la redimensionarea ferestrei se va redimensiona de catre browser si panza de prezentare.

La a doua intrebare extensiile HTML asigura ca atributele elementului 'BODY' seteaza backgroundul intregii panze de prezentare. CSS1 introduce o regula speciala pentru a determina fundalul panzei:

Daca valoarea 'background' a elementului 'HTML' este diferita de 'transparent' atunci va fi utilizata valoarea specificata. In caz contrar se va utiliza valoarea 'background' din elementul 'BODY'. Daca valoarea rezultata este 'transparent', prezentarea este nedefinita.

Deci panza are fundalul precizat in BODY pentru tot ce este in containerul BODY, restul fiind cu fundalul precizat in HTML. Se recomanda ca atributele pentru canafas sa se efectueze in BODY.
Cuprins

 

Proprietatile de stil

Definitiile de stiluri influenteaza prezentarea documentelor prin atribuirea/modificarea valorilor propritatilor de stil. In continuare sunt prezentate proprietatile de stil definite in CSS, elementele carora li se pot atasa, valorile pe care le pot lua.

Notatii si unitati de masura

Atribuirea de valori se efectueaza prin constructii sintactice de tipurile urmatoare (prezentate prin exemple):

Value: N | NW | NE
Value: a<length> | thick | thin i A1,4S
Value: a<family-name>,i*<family-name>
Value: <url>?<color> a/<color>i?
Value: <url> || <color>

Cuvintele dintre parantezele unghiulare "< >" dau tipul de valoare. Tipurile uzuale sunt <length>, <percentage>, <url>, <number> si <color>, descrise in continuare. Unele tipuri mai speciale, cum ar fi <font-family>, sunt date la proprietatea corespunzatoare.

Cuvintele cheie, cum ar fi aici thick, thin, trebuie sa apara cum sunt scrise, fara ghilimele. Slash-ul si virgula, acolo unde sunt mentionate, sunt de asemenea obligatorii.

Mai multe lucruri juxtapuse trebuie sa apara toate, in ordinea data. Prin bara verticala, "|", se separa alternative dintre care trebuie sa apara una. O bara dubla, "||", indica faptul ca poate sa apara oricare dintre alternative, in orice ordine, inclusiv ambele. Parantezele patrate sunt pentru grupare.

Juxtapunerea este mai puternica decat bara dubla iar bara dubla este mai puternica decat bara simpla:

Exemplu: "ab | c || de" este echivalent cu "aabi | ac || adeii".

Fiecare tip, cuvant cheie, sau grup poate fi urmat de unul dintre modificatorii:

• un asterisc, *, arata ca elementul precedent este repetat de zero sau mai multe ori;
• un plus, +, arata ca elementul precedent este repetat o data sau de mai multe ori;
• un semn de intrebare, ?, arata elementul precedent este optional;
• o pereche de numere intre acolade, An,mS, arata ca elementul precedent este repetat cel putin de n ori si cel mult de m ori.

(prin element intelegand aici un tip, cuvant cheie sau grup).
Cuprins

Unitati de lungime. Formatul unei unitati de lungime este: semn (+ sau -, +fiind implicit) urmat imediat de numar (cu sau fara punctul zecimal) urmat imediat de identificatorul de unitate (abreviere de doua litere, optionala dupa 0).

Anumite proprietati permit lungimi negative, acestea complica insa formatarea si de aceea sunt specifice implementarii din browser. Daca o valoare negativa nu este suportata, ea este dusa la prima valoare permisa de implementare.

Exista doua tipuri de unitati de lungime:

• relative: exprima o lungime in raport cu alta lungime. Utilizarea unitatilor relative permite o scalare mai simpla de la un mediu la altul (de exemplu de pe ecran pe imprimanta).
  em - ems, 1em este egala cu marimea fontului in uz
  ex - x-height, inaltimea literei 'x' din font
  px - pixels, relativa la canafas.

Unitatile em si ex se refera la marimea fontului elementului respectiv. Singura exceptie este in proprietatea 'font-size' unde em si ex se refera la marimea fontului elementului parinte.

Unitatea px este relativa la rezolutia panzei (cel mai des display-ul calculatorului). Daca densitatea pixelilor este foarte diferita de cea a unui display tipic, browser-ul va rescala valoarea pixelului. Pixelul de referinta sugerat este unghiul vizual al unui pixel pe un device cu densitatea de 90dpi si o distanta de la cititor de lungimea unui brat. Pentru o lungime a bratului de 28in, unghiul vizual este in jur de 0.0227 grade.

Elementele copil mostenesc valorile calculate si nu valorile relative.

• absolute: exprima lungime in dimensiune fixe. Sunt utile atunci cand sunt cunoscute proprietatile fizice ale mediului de iesire.
  in - inch, 1in=2.54cm
  cm - centimetru
  mm - milimetru
  pt - punct, 1pt=1/72in
  pc - pica, 1pc=12pt.

In cazurile cand lungimea specificata nu poate fi suportata, browserul incearca sa o aproximeze. Pentru toate proprietatile CSS1, calculele ulterioare si mostenirile sunt bazate pe valoarea aproximata.

Cuprins

Procentaje. Formatul unei masuri procentuale este: semn (optional, + sau -, + este implicit) urmat imediat de un numar (cu sau fara punct zecimal) urmat imediat de semnul %.

Valorile procentuale sunt relative intotdeauna la o alta valoare. Fiecare proprietate care permite marimi procentuale stabileste si valorile de referinta (cel mai adesea este marimea fontului).

La proprietatile mostenite, daca valoarea este procentuala, elementele copil mostenesc valoarea rezultata si nu valorile procentuale.
Cuprins

Culori. O unitate de culoare este sau un cuvant cheie sau o specificatie numerica RGB. Lista sugerata de cuvinte cheie care denumesc culori: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white si yellow. Acestea sunt luate din paleta VGA Windows.

Specificarea unei culori in forma hexazecimala RGB se face prin caracterul # urmat imediat de trei sau de sase cifre hexazecimale. Notatia RGB cu trei cifre este convertita in sase cifre prin duplicarea fiecarei cifre (nu prin completarea cu zerouri). Avantajul este ca alb poate fi specificat drept #FFF si nu depinde de adancimea de culori a terminalului. 

Notatia functionala a unei valori RGB este rgb( urmat de o lista, separata prin virgule, de trei valori numerice reprezentand sau trei valori intregi intre 0 si 255, sau trei procentaje in domeniul 0.0% - 100.0%, urmata de caracterul ).
De exemplu: rgb(255,0,0), rgb(50%,50%,10%).
In jurul valorilor numerice pot sa fie spatii iar valorile care nu sunt in domeniile specificate vor fi aduse la valoarea cea mai apropiata din domeniu. Diferiti agenti pot sa se deosebeasca in privinta fidelitatii cu care sunt redate culorile.
Cuprins

URL. O adresa Uniform Resource Locator (URL) este identificata cu o notatie functionala: caracterele url( urmate optional de un spatiu urmat optional de un apostrof simplu ' sau ghilimele " urmat de URL-ul propriu-zis urmat optional de un apostrof simplu ' sau ghilimele " urmat optional de un spatiu urmat de caracterul ):
url(https://www.infoiasi.ro/Ival/exemplu.gif)
BODY A background: url(yellow) S

Caracterele apostrof care nu fac parte din URL propriu-zis trebuie sa fie perechi.
Parantezele, virgulele, spatiile, apostrofurile, ghilimelele, care apar intr-un URL trebuie sa fie precedate de un caracter backslash, \, (fiind transformate astfel in secvente escape).

Adresele partiale sunt interpretate relativ la sursa style sheet-ului si nu relativ la document.
Cuprins

Proprietatile fonturilor

Stabilirea proprietatilor pentru fonturile utilizate intr-un document constituie o aplicatie des utilizata in definirea stilurilor. Din pacate nu se poate vorbi de o standardizare in privinta clasificarii fonturilor si a termenilor asociati diferitelor familii de fonturi. Nivelul 1 al CSS defineste proprietatile: font-family, font-style, font-variant, si font-weight, font-size, font.
Potrivirea proprietatilor definite in style sheet cu fonturile de care dispune un browser este o problema de mare interes. Fara a da algoritmul recomandat in aceasta situatie, se poate considera ca aproximarile facute vor asigura un minim de consistenta stilistica documentului.
Cuprins

font-family

Valoare: aa<family-name> | <generic-family>i,i*a<family-name>|<generic-family>i
Initial: specific programului browser
Se aplica la: toate elementele
Mostenita: da
Valori procentuale: nu sunt permise

Valoarea contine o lista de fonturi in care primele enumerate au prioritati mai mari. Spre deosebire de alte proprietati, valorile sunt separate prin virgula pentru a arata ca este vorba de alternative si nu de valori prezente simultan:
BODY A font-family: gill, helvetica, sans-serif S
stabileste ca, in ordinea disponibilitatii lor, se vor utiliza fonturile gill, helvetica. Daca niciunul dintre acestea nu sunt disponibile se va utiliza un font din familia generica sans-serif.

Exista doua tipuri de elemente ale listei de valori: <family-name> se refera la o familie de fonturi iar <generic-family> se refera la numele unei familii generice de fonturi. Sunt definite urmatoarele familii generice:

• serif (de exemplu: Times)
• sans-serif (de exemplu: Helvetica)
• cursive (de exemplu: Zapf-Chancery)
• fantasy (de exemplu: Western)
• monospace (de exemplu: Courier)

Exista recomandarea ca proiectantii de stiluri sa indice ca ultima alternativa o familie de fonturi generica.

Denumirile de fonturi care contin spatii trebuie sa fie cuprinse intre ghilimele.
Cuprins

font-style

Valoare: normal | italic | oblique
Initial: normal
Se aplica la: toate elementele
Mostenita: da
Valori procentuale: nu sunt permise

Prin proprietatea font-style se alege intre modurile normal (referit si ca roman sau drept), italic sau oblic ale unei familii de fonturi.
Este posibil ca un browser sa nu faca distinctia intre italic si oblic, utilizand fontul etichetat oblic, generat uneori electronic prin inclinarea fontului normal.
Cuprins

font-variant

Valoare: normal | small-caps
Initial: normal
Se aplica la: toate elementele
Mostenita: da
Valori procentuale: nu sunt permise

Permite alegerea variantei small-caps a fontului (literele mici arata la fel cu literele mari, dar sunt desenate mai mici si cu proportiile usor modificate). Daca este data valoarea 'normal' atunci nu are loc selectarea variantei 'small-caps'.

Atunci cand este acceptata de programul browser este posibil ca fonturile small-caps sa fie produse prin scalarea majusculelor sau sa fie neglijata scalarea si sa se utilizeze direct majusculele.

Alte variante posibile pentru fonturi, cum ar fi numerale in stil vechi, numerale small-caps, litere condensate sau expandate etc., nu sunt considerate in nivelul 1 din CSS.
Cuprins 

font-weight

Valoare: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Initial: normal
Se aplica la: toate elementele
Mostenita: da
Valori procentuale: nu sunt permise

Selecteaza grosimea fontului. Valorile de la 100 la 900 formeaza o secventa ordonata in care fiecare numar indica o grosime cel putin cat precedenta. Valoarea 'normal' este sinonima cu 400 iar 'bold' este sinonima cu 700. Valorile 'bolder' si 'lighter' selecteaza valori relative (mai accentuate, relativ mai subtiri) in raport cu valoarea mostenita de la elementul parinte.
Elementele copil mostenesc, dupa cum este uzual, valorile calculate.

Deoarece nu exista o standardizare in ceea ce priveste caracteristica de preponderenta (grosime, cantitate de negru etc.) a unui font, maparea pentru un font particular este bazata, in general, pe o euristica. Se va urmari totusi ca valoarea medie, 'normal' sau 'medium', sa fie mapata pe valoarea 400 (eventual 500). In proiectare se poate considera ca valorile vor fi aproximate intr-o ordine relativa corecta.
Cuprins 

font-size

Valoare: <marime-absoluta> | <marime-relativa> | <dimensiune> | <procentaj>
Initial: medium
Se aplica la: toate elementele
Mostenita: da
Valori procentuale: relative la font-size din parinte

Fixeaza marimea fontului. Valorile posibile:

<marime-absoluta>

un cuvant cheie interpretat indice intr-un tabel de marimi de fonturi calculate si memorate de browser. Valorile posibile sunt: xx-small | x-small | small | medium | large | x-large | xx-large. Pentru ecranul calculatorului este sugerat un factor de scalare de 1.5 intre indici adiacenti: daca 'medium' este 10pt, atunci 'large' ar fi 15pt. Pentru alte medii de afisare factorul poate fi diferit. Intervine in acest calcul si calitatea, disponibilitatea fonturilor etc.

<marime-relativa>

un cuvant cheie interpretat relativ la font-size-ul elementului parinte si la tabla dimensiunilor de fonturi. Valorile posibile sunt: larger | smaller. De exemplu, daca elementul parinte are marimea fontului 'medium', o valoare 'larger' produce pentru elementul curent valoarea font-size='large'. Daca valoarea de referinta nu este in tabla de marimi de fonturi, browserul este liber sa interpoleze.

Valorile dimensiunea si procentaj ar trebui sa nu ia in considerare tabla de marimi de fonturi atunci cand calculeaza font-size-ul unui element. Valorile negative sunt interzise.
In toate celelalte proprietati, 'em' si 'ex' se refera la font-size-ul elementului curent. In proprietatea 'font-size', aceste valori se refera la font-size-ul elementului parinte.

De notat ca o aplicatie poate sa reinterpreteze o valoare explicita, dupa context (in interiorul unei scene VR un font poate sa ia valori diferite din cauza perspectivei).
Cuprins 

font

Valoare: a<font-style> || <font-variant> || <font-weight>i? <font-size> a/<line-height>i? <font-family>
Initial: nedefinit
Se aplica la: toate elementele
Mostenita: da
Valori procentuale: permise pentru <font-size> si <line-height>

Permite setarea simultana a proprietatilor font-style, font-variant, font-weight, font-size, line-height si font-family. Sintaxa este inspirata din notatia traditionala tipografica pentru proprietatile fonturilor.

Valorile permise si valorile initiale se vor vedea in definirile fiecarei proprietati. Exemple:

P A font: 12pt/14pt sans-serif S
P A font: 80% sans-serif S
P A font: x-large/110% "new century schoolbook", serif S
P A font: bold italic large Palatino, serif S
P A font: normal small-caps 120%/120% fantasy S

De notat ca proprietatile care nu sunt mentionate se stabilesc pe valorile implicite. De asemenea ca valoarea procentuala pentru 'font-size' se refera la cea a elementului parinte, in timp ce valoarea procentuala a 'line-height' se refera la dimensiunea de font a elementului curent (pentru 'line-height' vezi sectiunea despre proprietatile textului).
Cuprins

Proprietatile de culoare si fundal

Aceste proprietati se refera la culoare in care este reprezentat un element (numita uneori foreground color) si la fundalul pe care este prezentat elementul. Este posibil sa se stabileasca o culoare de fundal si/sau o imagine de fundal. In cazul unei imagini de fundal se pot fixa pozitia, daca si cum este repetata, daca este fixa sau defileaza.

Proprietatea de culoare se mosteneste. Proprietatile de fundal nu se mostenesc, dar fundalul elementului parinte va fi vizibil prin default datorita valorii 'transparent' a proprietatii 'background-color'.
Cuprins

color

Value: <culoare>
Initial: specific browser
Se aplica la: toate elementele
Mostenita: da
Valori procentuale: nu sunt permise

Pentru a vedea modul de declarare a unei culori vezi sectiunea Culori
Cuprins

background-color

Value: <culoare> | transparent
Initial: transpa