Suport Curs CSS

SUPORT DE CURS

CSS

Suport de curs: CSS

_______________________________________________________ ___________________________________________

Swiss WebSchool E-mail: [email protected] Telefon: +40 732 815 983

OBIECTIVUL CURSULUI: Dupa studierea acestui curs, studentii vor fi capabili sa realizeze pagini web de complexitate ridicata prin :

- combinarea HTML cu CSS si DHTML

- definirea foilor de stil in cascada

- stabilirea unor proprietati ale fonturilor si textului, in general legate de aspect

- impartirea documentului in sectiuni logice, formatarea acestora, precum si stabilirea diverselor proprietati a

unor elemente componente in mod individual

- controlul fonturilor printr-o gama larga de proprietati in special legate de aspectul acestora

- controlul textului atat din punct de vedere al aspectului cat si din punct de vedere al aranjarii si pozitionarii lui in

pagina sau intr-o anumita sectiune

- crearea unor efecte utilizand DHTML si bazandu-se pe DOM

- includerea de functii in vederea realizarii unor interactiuni cu utilizatorul

Tema finala va consta in reproiectarea site-ului propus ca tema la cursul de HTML, de data aceasta fiind bazat pe

formatarea elementelor utilizand pe cat posibil CSS si incluzand animatie folosind DHTML.

Suport de curs: CSS

_______________________________________________________ ___________________________________________


CUPRINS CUPRINS ........................................................................................................................................................................ 3 CAPITOLUL 1. NOTIUNI INTRODUCTIVE ............................................................................................................................. 5

1.1. Ce sunt foile de stil in cascada ............................................................................................................................. 5 1.2. Tipuri de reguli CSS .............................................................................................................................................. 5 1.3. Componentele unei reguli CSS ............................................................................................................................. 6

CAPITOLUL 2. CREAREA FOILOR DE STIL IN CASCADA.......................................................................................................... 7 2.1. Adaugarea unui stil la o eticheta HTML ............................................................................................................... 7 2.2. CSS adaugat direct in pagina HTML ..................................................................................................................... 7 2.3. CSS extern ........................................................................................................................................................... 9 2.4. Definirea unui selector HTML (Redefinirea unei etichete HTML) ......................................................................... 11 2.5. Definirea unui selector de clasa ......................................................................................................................... 11 2.6. Definirea unui identificator ID............................................................................................................................ 12 2.7. Crearea etichetelor HTML personalizate ............................................................................................................ 13 2.8. Definirea de reguli similare ................................................................................................................................ 16 2.9. Definirea etichetelor in context (imbricate) ........................................................................................................ 16 2.10. Determinarea ordinii cascadei ......................................................................................................................... 18 2.11. Cresterea prioritatii unei definitii ..................................................................................................................... 19 2.12. Mostenirea stilurilor (proprietati mostenite si existente) .................................................................................. 19 2.13. Adaugarea comentariilor................................................................................................................................. 20

CAPITOLUL 3. CONTROALE PENTRU FONTURI .................................................................................................................. 21 3.1. Generalitati ....................................................................................................................................................... 21 3.2. Stabilirea familiei de font .................................................................................................................................. 22 3.3. Font-uri personalizate ....................................................................................................................................... 23 3.4. Stabilirea dimensiunii font-ului .......................................................................................................................... 24 3.5. Text inclinat ...................................................................................................................................................... 26 3.6. Text ingrosat ..................................................................................................................................................... 27 3.7. Majuscule mici .................................................................................................................................................. 29 3.8. Valori multiple pentru font ................................................................................................................................ 30 3.9. Tabel recapitulativ ............................................................................................................................................ 32

CAPITOLUL 4. CONTROALE PENTRU TEXT ........................................................................................................................ 33 4.1. Spatiul intre litere.............................................................................................................................................. 33 4.2. Spatiul intre cuvinte .......................................................................................................................................... 34 4.3. Spatiul intre linii ................................................................................................................................................ 35 4.4. Marimea / tipul literelor .................................................................................................................................... 36 4.5. Alinierea textului pe orizontala .......................................................................................................................... 38 4.6. Alinierea textului pe verticala ............................................................................................................................ 39 4.7. Decalarea paragrafelor ..................................................................................................................................... 41 4.8. Aplicarea elementelor decorative ...................................................................................................................... 43 4.9. Spatiile albe ...................................................................................................................................................... 44 4.10. Text colorat .............................................................................................................................................. 46 4.11. Particularizarea legaturilor ....................................................................................................................... 47 4.12. Directia textului ........................................................................................................................................ 49 4.13. Tabel recapitulativ .......................................................................................................................................... 50

CAPITOLUL 5. CONTROALE PENTRU CULORI SI FUNDAL .................................................................................................... 52 5.1. Configurarea fundalului..................................................................................................................................... 52 5.2. Stabilirea culorii din prim-plan ........................................................................................................................... 59 5.3. Tabel recapitulativ ............................................................................................................................................ 62

CAPITOLUL 6. CONTROALE PENTRU CHENARE SI MARGINI ............................................................................................... 63 6.1. Notiunea de caseta ........................................................................................................................................... 63 6.2. Latimea si inaltimea unui element ..................................................................................................................... 63 6.3. Marginile unui element ..................................................................................................................................... 63 6.4. Chenarul unui element ...................................................................................................................................... 65

Suport de curs: CSS

_______________________________________________________ ___________________________________________


6.5 Linie exterioara pentru un element ..................................................................................................................... 70 6.6. Adaugarea umplerii in jurul elementului ............................................................................................................ 71 6.7. Elemente flotante.............................................................................................................................................. 73 6.8. Locul unde plutesc elementele ........................................................................................................................... 74 6.9. Afisarea si ascunderea elementelor ................................................................................................................... 76 6.10. Tabel recapitulativ .......................................................................................................................................... 78

CAPITOLUL 7. CONTROALE DE POZITIONARE ................................................................................................................... 80 7.1. Stabilirea tipului de pozitionare ......................................................................................................................... 80 7.2. Stabilirea pozitiei in raport cu latura sus, respectiv stanga ................................................................................. 81 7.3. Stabilirea pozitiei in raport cu latura jos, respectiv dreapta ................................................................................ 81 7.4. Stabilirea pozitiei in spatiul 3D........................................................................................................................... 83 7.5. Imbricarea unui element absolut intr-un element relativ .................................................................................... 85 7.6. Imbricarea unui element relativ intr-un element absolut .................................................................................... 86 7.7. Tabel recapitulativ ............................................................................................................................................ 87

CAPITOLUL 8. CONTROALE DE VIZIBILITATE ..................................................................................................................... 88 8.1. Stabilirea vizibilitatii unui element ..................................................................................................................... 88 8.2. Stabilirea suprafetei vizibile a unui element ....................................................................................................... 89 8.3. Stabilirea pozitiei depasirii................................................................................................................................. 90 8.4. Tabel recapitulativ ............................................................................................................................................ 93

CAPITOLUL 9. CONTROALE PENTRU MOUSE .................................................................................................................... 94 9.1. Aspectul indicatorului de mouse ........................................................................................................................ 94 9.2. Tabel recapitulativ ............................................................................................................................................ 96

CAPITOLUL 10. CSS3 ........................................................................................................................................................ 97 10.1. Border ............................................................................................................................................................. 97 10.2. Background ................................................................................................................................................... 100 10.3. Setarea nivelului de transparenta / opacitate ................................................................................................ 103 10.4. Efecte pentru text .......................................................................................................................................... 104 10.5. Transformari 2D si 3D.................................................................................................................................... 105

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Capitolul 1. NOTIUNI INTRODUCTIVE

Crearea paginilor HTML este un lucru relativ simplu, invatarea etichetelor HTML si crearea unor imagini ducand la realizarea documentelor HTML de o complexitate medie. Odata cu patrunderea HTML-ului dinamic (DHTML) si a foilor de stil in cascada (CSS), proiectarea paginilor Web a devenit o sarcina ceva mai dificila, insa totodata ele sunt standarde utilizate in continuare la crearea site-urilor web.

1.1. Ce sunt foile de stil in cascada

Stilurile inglobeaza, sub un anumit nume, atribute de formatare care se aplica asupra unui element individual sau la nivel de document. CSS functioneaza cu HTML, insa nu este HTML. El extinde functionalitatile HTML, permitand printre altele redefinirea etichetelor HTML existente.

1.2. Tipuri de reguli CSS

Configurarea si definirea foilor de stil in cascada este un lucru relativ simplu, nefiind nevoie decat de anumite reguli. Exista trei tipuri de reguli CSS.

1.2.1. Selector HTML

Selectorul HTML se foloseste intr-o regula CSS pentru a redefini modul de afisare a continutului etichetei HTML.

h1 { font:’Verdana’; 14px/24px; bold; }

Un selector HTML reprezinta partea etichetei HTML care indica navigatorului tipul de eticheta. Definirea unui selector HTML folosind CSS implica de fapt redefinirea etichetei HTML. Selectorul si eticheta desi par identice, totusi nu sunt.

1.2.2. Clasa

Clasa este o regula care poate fi aplicata oricarei etichete HTML, fiind cel mai adaptabil tip de selector.

.MyClass {font-family:’Arial’; font-size:12px; font-style:normal;}

O clasa poate fi denumita in orice mod, dupa preferintele utilizatorului.

Suport de curs: CSS

_______________________________________________________ ___________________________________________


1.2.3. Identificator

Regulile de tip identificator (ID) sunt asemanatoare cu selectorii de clasa. Ele pot fi aplicate oricarei etichete HTML.

#MyObject {position: relative; top:10px; left:5px;}

Selectorii ID sunt aplicati, de obicei, o singura data unei etichete HTML.

1.3. Componentele unei reguli CSS

Regulile CSS, indiferent de tipul lor, au in componenta urmatoarele:

Selectorii – identifica o regula; pot fi selectori de etichete HTML, clase sau identificatori.

Proprietatile – identifica o entitate definita; se refera in special la aspect.

Valorile – sunt atributele unei proprietati; pot fi cuvinte cheie, valori numerice sau procentuale, tipul valorii depinzand foarte mult de proprietate.

Sintaxa elementara a unei reguli CSS este urmatoarea:

selector {proprietate: valoare; }

Proprietatile si valorile constituie definitia regulii CSS. Ele se regasesc sub forma de perechi, despartite de ”:”, fiecare pereche fiind urmata de ”;”. Este bine ca si dupa ultima enumerare sa se foloseasca ”;” pentru a impiedica aparitia unor probleme ulterioare la adaugarea unui nou element in definitie. Etichetele HTML nu sunt sensibile la diferenta intre majuscule si litere mici, pe cand cele XHTML, da (astfel ca, toti selectorii trebuie scrisi cu litere mici).

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Capitolul 2. CREAREA FOILOR DE STIL IN CASCADA

Prin utilizarea CSS aspectul documentului per ansamblu, sau a unui element individual din interiorul sau, poate fi controlat mult mai usor. Stilurile pot fi aplicate asupra unui element, asupra unui document, sau chiar asupra unui intreg site web. Exista insa dezavantajul ca unele navigatoare nu sunt compatibile CSS, astfel ca documentele HTML sunt afisate ca si cum CSS n-ar exista. Stilurile pot fi specificate:

- in cadrul unui element HTML cu ajutorul atributului style

- in cadrul sectiunii antet a documentulului HTML

- intr-un fisier CSS extern

2.1. Adaugarea unui stil la o eticheta HTML

CSS ofera posibilitatea de a schimba aspectul fiecarei etichete in parte, prin stabilirea unui anume stil. Adaugarea este utila mai ales in scopul de a anula alte stiluri pentru elementul respectiv sau de a aduce noi elemente de stil etichetei respective. Sintaxa pentru definirea stilurilor in interiorul unei etichete HTML este urmatoarea:

<eticheta style="proprietate:valoare;"> ... text ... </eticheta>

Este bine ca pentru delimitarea listei de definitii sa se foloseasca ghilimele duble (”), iar pentru valori in cadrul listei, ghilimele simple (’).

<h1 style="color:blue;">Antet personalizat</h1>

2.2. CSS adaugat direct in pagina HTML

CSS permite definirea unor reguli aplicabile intr-un document. Acest set de reguli apare in sectiunea de antet (head) a documentului, fiind delimitate cu ajutorul etichetei STYLE, care se comporta ca un container. Sintaxa pentru definirea CSS la nivel de document HTML este urmatoarea:

<style type="text/css"> selector_1 {proprietate1:valoare1; proprietate2:valoare2; ...} ... selector_n {proprietate1:valoare1; proprietate2:valoare2; ...} </style>

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Exemplul 2.1.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>HTML cu CSS definit intern</title> <style type="text/css"> h1{ color: red; } </style> </head> <body> <h1>Adaugarea unui stil la o eticheta HTML</h1> <h2>Heading 2 - format implicit.</h2> <h2 style="color: blue;">Heading 2 formatat cu ajutorul CSS.</h2> </body> </html>

Definirea tuturor stilurilor intr-o locatie comuna faciliteaza modificarea mai rapida a unui document.

<style type="text/css"> h1 {font-family: ’Arial’; font-size: 16px; font-weight: bold; color: red;} p {font-family: ’Arial’; font-size: 12px; color: blue;} </style>

Este bine sa se utilizeze etichetele de comentariu HTML pentru a ascunde codul CSS de navigatoarele care nu recunosc acest limbaj, altfel va fi afisat in fereastra definirea foilor de stil in format text.

Exemplul 2.2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>HTML cu CSS definit intern</title> <style type="text/css">  </style> </head> <body> <h1>Adaugarea unui stil la o eticheta HTML</h1> <h2>Heading 2 - format implicit.</h2> <h2 style="color: blue;">Heading 2 formatat cu ajutorul CSS.</h2> </body> </html>

Suport de curs: CSS

_______________________________________________________ ___________________________________________


2.3. CSS extern

Foile de stil pot fi utilizate nu doar la nivel de pagina web, ci si la nivel de intreg site. Astfel, trebuie creata o foaie de stil externa intr-un fisier separat, care apoi va fi inclus in documentul HTML prin doua procedee: legatura sau import.

2.3.1. Crearea CSS extern

Crearea unui fisier de tip foaie de stil externa implica crearea unui fisier text cu ajutorul unui editor de texte simplu sau specializat in acest sens. In fisierul nou creat se adauga reguli CSS, fara insa ca aceste reguli sa fie incapsulate in etichete STYLE. Dupa definirea regulilor fisierului i se atribuie un nume, iar ca extensie este bine sa se foloseasca ”.css” pentru o identificare mai rapida a tipului de fisier.

2.3.2. Legarea CSS extern

Foile de stil externe pot fi legate la un document HTML folosind urmatoarea sintaxa:

<link rel="stylesheet" href="nume_fisier.css">

Eticheta LINK apare in antetul documentului (sectiunea head), iar atributele folosite transmit navigatorului tipul de legatura (rel – legatura cu o foaie de stil) si locatia inspre fisierul ce contine regulile CSS (href – calea relativa sau absoluta si numele complet al fisierului, inclusiv extensia).

Exemplul 2.3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>HTML cu CSS definit extern</title> <link rel="stylesheet" href="stil-2-3.css"> </head> <body> <h1>Utilizarea foilor de stil in cascada</h1> <h2 style="color: blue;">Adaugarea unui stil la o eticheta HTML</h2> <p>Regulile CSS pot fi definite intr-un document HTML, in sectiunea HEAD, cu ajutorul etichetei STYLE, sau pot fi definite intr-un fisier CSS extern si apelate cu ajutorul etichetei LINK.</p> </body> </html>

stil-2-3.css

body{ background-color:#f0e68c; }

Suport de curs: CSS

_______________________________________________________ ___________________________________________


h1{ color: red; } p{ font-family:"verdana"; font-size:16pt; background-color:#ffffff; }

2.3.3. Importul CSS extern

O alta modalitate de utilizare a foilor de stil externe intr-un document HTML o reprezinta importul acestora folosind comanda @import. Sintaxa pentru importul unei foi de stil externe este urmatoarea:

<style type="text/css"> @import url(nume_fisier.css); </style>

Pentru a importa un fisier CSS extern se foloseste in cadrul sectiunii HEAD a documentului HTML eticheta container STYLE. In cadrul acestei etichete va aparea instructiunea @import, unde ”nume_fisier.css” reprezinta adresa URL a fisierului ce contine regulile CSS definite. Alaturi de instructiunea @import, in cadrul etichetei STYLE pot exista definiti si selectori care definesc reguli CSS suplimentare.

Exemplul 2.4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>HTML cu CSS definit extern</title> <style> @import url('stil-2-3.css'); </style> </head> <body> <h1>Utilizarea foilor de stil in cascada</h1> <h2 style="color: blue;">Adaugarea unui stil la o eticheta HTML</h2> <p>Regulile CSS pot fi definite intr-un document HTML, in sectiunea HEAD, cu ajutorul etichetei STYLE, sau pot fi definite intr-un fisier CSS extern si apelate cu ajutorul etichetei LINK.</p> </body> </html>

stil-2-3.css

Suport de curs: CSS

_______________________________________________________ ___________________________________________


body{ background-color:#f0e68c; } h1{ color: red; } p{ font-family:"verdana"; font-size:16pt; background-color:#ffffff; }

Legarea unui fisier CSS extern sau importul acestuia intr-un document HTML are acelasi efect ca si cum stilurile incluse ar fi fost definire direct in eticheta STYLE din sectiunea HEAD a documentului HTML.

In cadrul unui document HTML se poate face referinta la unul sau mai multe fisiere CSS. De asemenea, un document HTML care are definit un stil CSS intern, poate apela si un fisier CSS extern.

2.4. Definirea unui selector HTML (Redefinirea unei etichete HTML)

Selectorii HTML pot fi definiti prin adaugarea unui numar de definitii practic limitat doar de compatibilitatea proprietatilor cu eticheta HTML la care se refera.

selector_HTML { proprietate1:valoare1; proprietate2:valoare2; ...}

Dupa redefinirea etichetei HTML, toate aparitiile etichetei din documentul HTML vor fi modificate automat. Prin redefinirea unei etichete, proprietatile prestabilite existente nu sunt anulate, ci se adauga altele noi.

h1{color:green; font-size:14pt;}

2.5. Definirea unui selector de clasa

Utilizarea selectorilor de clasa ofera posibilitatea configurarii unor stiluri independente care se pot aplica doar acelor elemente care sunt etichetate cu clasa respectiva. Spre deosebire de un selector HTML, care defineste un anume tip de eticheta, clasele au un nume unic. Sintaxa generala de definire a unei clase CSS este:

.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ...}

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Numele unei clase trebuie sa fie compact (fara spatiu) si nu trebuie sa contina simbolul „.” (punct).

.el_rosu {color:red;}

Exista cazul in care o clasa este asociata unui selector HTML, ceea ce inseamna ca acea clasa poate fi folosita doar cu eticheta HTML respectiva. Pentru a defini o clasa asociata in mod direct unui selector HTML se foloseste urmatoarea sintaxa:

selector_HTML.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ...}

Selectoarele de clasa sunt acceptate de toate navigatoarele. Numele unei clase nu poate fi un cuvant rezervat JavaScript.

2.6. Definirea unui identificator ID

Asemanator cu selectorii de clasa se definesc si identificatorii. Acestia sunt folositi pentru crearea de stiluri care pot fi atribuite oricarei etichete HTML. Sintaxa generala de definire a unui identificator este:

#identificator { proprietate1:valoare1; proprietate2:valoare2; ...}

Identificatorii permit definirea unui element sub forma unui obiect, fiind folositi doar o singura data in cadrul unei pagini web pentru identificarea obiectului unic in scopul manipularii acestuia cu ajutorul functiilor JavaScript. Identificatorii devin functionali doar atunci cand sunt specificati intr-o eticheta HTML individuala, in cadrul unui document. Numele unui identificator nu poate fi cuvant rezervat din JavaScript.

Exemplul 2.5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Ex. definire: selector, clasa, identificator</title> <link rel="stylesheet" href="stil-2-5.css"> </head> <body> <div id="wrapper"> <div class="header"><p>Titlu site</p></div> <div class="header"><h1>Titlu site</h1></div> <p>CSS</p> </div> </body> </html>

Suport de curs: CSS

_______________________________________________________ ___________________________________________


stil-2-5.css

body { background-color:#f0e68c; } #wrapper { margin-left:50px; margin-right:100px; } .header { height:160px; background-color:#c0b870; color:#ffffff; } h1 { color:red; } p { font-family:"verdana"; font-size:20pt; background-color:#908a54; }

2.7. Crearea etichetelor HTML personalizate

Majoritatea etichetelor HTML au unele proprietati prestabilite. Acestea fie raman asa cum sunt, fie pot fi redefinite. Exista insa cazuri in care se doreste crearea unor etichete personalizate, pornind de la zero. In acest caz se folosesc etichetele <SPAN> si <DIV>.

2.7.1. In linie

Eticheta <span> nu are proprietati mostenite. Ea reprezinta doar o locatie vida menita sa creeze o eticheta in linie.

.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ...} #span1 { proprietate1:valoare1; proprietate2:valoare2; ...} span.clasa_span { proprietate1:valoare1; proprietate2:valoare2; ...} ... <span class="nume_clasa"> ... </span> ... <span id="span1"> ... </span> ... <span class="clasa_span"> ... </span> ...

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Pentru a configura o eticheta in linie trebuie configurata o clasa sau identificator care sa poata fi aplicat apoi unei etichete <span>. In cazul in care selectorul de clasa este precedat de selectorul HTML span, definitia respectiva poate fi utilizata doar intr-o eticheta span.

Exemplul 2.6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Etichete HTML personalizate</title> <link rel="stylesheet" href="stil-2-6.css"> </head> <body> <div id="wrapper"> <p>Personalizarea etichetelor HTML <span class="pers_in_line">in linie</span> cu ajutorul etichetei <span class="clasa_pers_inline">span</span>.</p> </div> </body> </html>

stil-2-6.css

body{ background-color:#b8e6e6; } #wrapper{ margin-left:50px; } p{ font-family:"verdana"; font-size:14pt; } .pers_in_line{ background-color:#ffebff; color:red; } span.clasa_pers_inline{ font-size:24pt; color:blue; }

2.7.2. La nivel de bloc

In momentul in care este necesara configurarea unui bloc separat de restul continutului unui document HTML, solutia este eticheta <div>. Aceasta determina un salt atat deasupra sa, cat si dedesubtul sau.

Suport de curs: CSS

_______________________________________________________ ___________________________________________


.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ...} #div1 { proprietate1:valoare1; proprietate2:valoare2; ...} span.clasa_div { proprietate1:valoare1; proprietate2:valoare2; ...} ... <div class="nume_clasa"> ... </div> ... <div id="div1"> ... </div> ... <div class="clasa_div"> ... </div> ...

Pentru crearea etichetelor la nivel de bloc se procedeaza la fel ca si in cazul etichetelor in linie, prin configurarea mai intai a unei etichete de tip clasa sau identificator, urmata apoi de aplicarea ei asupra unei etichete <div>.

Regulile CSS pentru definirea etichetelor personalizate in linie sau la nivel de bloc pot fi plasate in sectiunea head a documentului in cadrul etichetei container style, sau intr-un fisier extern care ulterior este legat sau importat in documentul HTML.

Exemplul 2.7.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Etichete HTML personalizate</title> <link rel="stylesheet" href="stil-2-7.css"> </head> <body> <div id="wrapper"> <div class="pers_niv_bloc">Eticheta DIV.</div> <div class="clasa_pers_bl">Personalizarea etichetelor HTML la nivel de bloc.</div> </div> </body> </html>

stil-2-7.css

body{ background-color:#b8e6e6; } #wrapper{ margin-left:50px; } .pers_niv_bloc{ width:170px; background-color:#ffebff; } div.clasa_pers_bl{

Suport de curs: CSS

_______________________________________________________ ___________________________________________


width:200px; background-color:#adff2f; }

2.8. Definirea de reguli similare

Daca mai multi selectori folosesc aceleasi definitii, acestia se insereaza intr-o lista de elemente separate prin virgule. Sintaxa generala pentru definirea unei liste cu selectori este:

selector1, selector2, ... { proprietate1:valoare1; proprietate2:valoare2; ...}

Impreuna cu selectorii pot fi de asemenea definiti si identificatorii si clasele. Dezavantajul definirii regulilor similare este ca in momentul in care este modificata o valoare a unei proprietati incluse in definitie, valoarea respectiva se va modifica in toate etichetele listei de reguli.

Exemplul 2.8.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Definirea de reguli similare</title> <link rel="stylesheet" href="stil-2-8.css"> </head> <body> <div id="wrapper"> <h1>Definirea de reguli similare</h1> <h2>Definirea de reguli similare</h2> </div> </body> </html>

stil-2-8.css

body{ background-color:#b8e6e6; } #wrapper{ margin-left:50px; } h1, h2{ color:blue; }

2.9. Definirea etichetelor in context (imbricate)

Cand o eticheta este inconjurata de alte etichete (aflandu-se astfel una in interiorul alteia), spunem ca aceste etichete sunt imbricate. Eticheta exterioara se numeste, in acest caz, eticheta parinte, iar

Suport de curs: CSS

_______________________________________________________ ___________________________________________


cea inferioara se numeste copil. Se pot crea reguli aferente etichetelor copil, sintaxa generala a unei reguli contextuale fiind:

selector1 selector2 ... { proprietate1:valoare1; proprietate2:valoare2; ...}

Ultimul selector din lista este cel care primeste toate stilurile incluse in regula si le mosteneste pe cele ale parintilor. Ca si selectorii grupati, selectorii contextuali pot include in lista selectori de clasa, identificatori sau selectori HTML.

Exemplul 2.9. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Definirea etichetelor in context</title> <link rel="stylesheet" href="stil-2-9.css"> </head> <body> <div id="wrapper"> <div class="div_ex"> <h1>h1 in clasa div_ex</h1> <h2>h2 in clasa div_ex</h2> <h3>h3 in clasa div_ex</h3> </div> <h1>ex. h1</h1> <h2>ex. h2</h2> <h3>ex. h3</h3> </div> </body> </html>

stil-2-9.css

body{ background-color:#e6e68a; } #wrapper{ margin-left:50px; } /* definim culoarea verde pentru h1, h2, h3 (reguli similare) */ h1, h2, h3{ color:green; } /* definim clasa div_ex */ .div_ex { width:50%;

Suport de curs: CSS

_______________________________________________________ ___________________________________________


background-color:#ffff99; } /* definim o regula contextuala in care cei doi selectori sunt: selctorul de clasa div_ex si selectorul HTML h1 */ /* setam culoarea rosu pentru h1 in cadrul clasei div_ex */ .div_ex h1{ color:red; } /* definim o alta regula contextuala in care cei doi selectori sunt: selctorul de clasa div_ex si selectorul HTML h3 */ /* setam culoarea albastru pentru h3 in cadrul clasei div_ex */ .div_ex h3{ color:blue; }

2.10. Determinarea ordinii cascadei Exista mai multe moduri de a aplica stilurile, astfel ca ne putem afla in situatia in care unui singur element sa-i fie aplicate mai multe stiluri. Foile de stil din doua sau mai multe surse, folosite simultan, pot cauza contradictii. De aceea exista cateva reguli care determina ordinea cascadei, si acestea sunt:

1. Existenta atributului !important – confera prioritate maxima la afisarea definitiei in care este utilizat.

2. Sursa regulilor – exista numeroase navigatoare care permit utilizatorului sa-si defineasca propriile foi de stil. Totusi, foile de stil ale autorului le anuleaza pe cele ale vizitatorului daca acestea din urma nu au valoarea !important.

3. Specificitate – cu cat o regula dispune de mai multi selectori HTML, de clasa si de identificator, cu atat prioritatea ei creste. Selectorii ID au valoarea 100, clasele au valoarea 10, iar selectorii HTML au valoarea 1.

4. Momentul aparitiei – cu cat un stil apare mai tarziu, mai aproape de elementul caruia i se aplica, cu atat importanta lui este mai mare. Astfel, definitiile in linie au prioritatea cea mai mare si anuleaza toate stilurile precedente cu care intra in conflict.

In situatia in care pentru un element HTML sunt definite mai multe stiluri, toate aceste stiluri sunt imbinate virtual intr-unul singur, dupa urmatoarele reguli, in care nr. 1 reprezinta cel mai inalt nivel de prioritate:

1. Stil inline (in cadrul unei etichete HTML) 2. Foi de stil in cascada definite intern (in cadrul sectiunii HEAD a documentului HTML) 3. Foi de stil in cascada definite intr-un fisier CSS extern (referit in sectiunea HEAD a

documentului HTML) 4. Stilul implicit al browser-ului.

Suport de curs: CSS

_______________________________________________________ ___________________________________________


De exemplu,

Daca pentru elementul H1 este definit intern urmatorul stil in cascada:

h1

{

color:red;

font-size:8pt;

}

iar intr-un fisier CSS extern este definit pentru acelasi element H1 urmatorul stil:

h1

{

text-align:left;

font-size:20pt;

}

atunci, proprietatile elementului H1 in cadrul documentului vor fi urmatoarele:

color:red; - proprietate mostenita de la stilul extern CSS text-align:left; - proprietate definita in stilul CSS intern font-size:20pt; - valoarea proprietatii font-size este cea definita in stilul CSS intern; in cazul in care stilul CSS intern si cel extern au definite proprietati comune, atunci stilul CSS intern suprascrie stilul CSS extern Nota: Daca link-ul catre fisierul CSS extern este plasat in partea de <head> a documentului HTML dupa stilul intern, atunci stilul extern acesta va suprascrie stilul intern.

2.11. Cresterea prioritatii unei definitii

Valoarea !important adaugata unei definitii atribuie maximum de prioritate in determinarea ordinii unei cascade.

selector { proprietate1:valoare1; proprietate2:valoare2 !important; ...}

Valoarea !important trebuie plasata inaintea caracterului „;”, altfel determina navigatorul sa ignore definitia si, in anumite cazuri, chiar intreaga regula. In cazul in care unui element ii sunt aplicate mai multe stiluri, regulile de aplicare a acestor stiluri (stilul cel mai apropiat de element are prioritate maxima) poate altera valabilitatea regulilor de prioritate prezentate in capitolul precedent.

2.12. Mostenirea stilurilor (proprietati mostenite si existente)

Toate etichetele HTML, cu exceptia etichetei BODY au cel putin o eticheta parinte, de tip container, care le inconjoara. De cele mai multe ori stilurile etichetelor din interior preiau stilurile etichetelor parinte (exista insa cazuri in care proprietatile nu sunt mostenite de etichetele imbricate). Acest mecanism se numeste mostenirea stilurilor.

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Prin redefinirea unui selector, eticheta nu-si pierde proprietatile prestabilite, doar in cazul in care acestea sunt modificate. Astfel proprietatile mostenite pot fi anulate prin reinitializarea proprietatii in lista de definitii a etichetei imbricate.

2.13. Adaugarea comentariilor

Este necesar uneori sa fie adaugate comentarii CSS, pentru a explica anumite elemente de cod, sau pentru a fixa puncte de reper. Ca si comentatiile HTML, comentariile CSS vor fi ignorate de catre browser.

Un comentariu CSS incepe cu „/*” si se termina cu „*/”.

/* comentariu css */

Cometariile pot fi folosite intre sau in cadrul seturilor de reguli si se pot extinde pe unul sau mai multe randuri.

De exemplu:

/* Comentariu... */ p { margin: 1em; /* Comentariu... */ padding: 2em; /* color: white; */ background-color: blue; } /* Comentariu care se intinde pe mai multe linii */

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Capitolul 3. CONTROALE PENTRU FONTURI

Alegerea potrivita a fonturilor si folosirea acestora in cadrul paginilor web poate avea efecte benefice sau poate atrage critici si comentarii din partea vizitatorilor, mai ales daca formatarea clasica prin scris normal, aldin sau cursiv nu este folosita corespunzator. Un alt inconvenient il reprezinta folosirea etichetelor individuale de formatare in contextul unor site-uri mari si sofisticate, deoarece trebuie parcurse cantitati mari de cod pentru a face anumite modificari. CSS include facilitati de control asupra aspectului fonturilor, prin posibilitatea de a stabili familia de fonturi, atributele ingrosat si inclinat, dimensiunea literelor precum si spatiul dintre linii.

3.1. Generalitati

In CSS exista doua tipuri de nume pentru familii de fonturi:

- fonturi de baza – un grup de familii de fonturi cu aspect similar (ex. „Serif” sau „Monospace”)

- familii de fonturi – o familie de fonturi specifica (ex. „Times New Roman” sau „Arial”) Exista cinci familii de fonturi de baza / nume generice de fonturi:

serif – au un ornament (serif) plasat la terminatia literei, care ii ofera o distinctie speciala. Sunt folosite pentru tiparire, chiar daca textele sunt mai mari sau mai mici. Nu sunt indicate pentru afisarea textelor pe ecran.

sans-serif – sunt fonturi care nu folosesc serife, fiind indicate pentru texte mai mici afisate pe ecran.

monospace – fonturile monospatiate pot avea nu nu serife, ele se deosebesc prin faptul ca fiecare litera ocupa aceeasi cantitate de spatiu. Sunt cele mai indicate pentru textele care trebuie citite cu exactitate, ca de exemplu liniile de program.

cursive – imita scrisul de mana, intr-o maniera stilizata. Sunt indicate in scopuri decorative, nefiind recomandate pentru scrierea unor texte mai lungi.

fantasy – nu se incadreaza in nici una dintre categoriile de mai sus, fiind fonturi care au un caracter predominant ornamental (reprezentand ilustratii sau pictograme).

Diferenta intre fonturile Serif si Sans-serif:

Nota: Pe un monitor decomputer fonturile sans-serif sunt considerate mai usor de citit decat fonturile serif.

Font de baza Familii de fonturi

Serif Times New Roman

Georgia Sans-serif Arial

Verdana

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Monospace Courier New

Lucida Console Cursive Comic Sans MS

Monotype Corsiva

Fantasy Impact

Alegerian

3.2. Stabilirea familiei de font

Fontul folosit pentru afisarea unui text poate fi stabilit prin proprietatea font. Pentru definirea fontului in cadrul unei reguli se foloseste proprietatea font-family urmata de numele fontului sau a fonturilor (despartite prin virgula).

Pentru ca exista o gama foarte larga de fonturi, iar unele dintre ele sunt contra cost, acestea nu sunt disponibile pe toate calculatoarele/sistemele. In acest sens, CSS ofera posibilitatea precizarii a mai mult de un font in cadrul definirii proprietatii font-family, despartite prin virgula.

selector { font-family: nume_font1, nume_font2,..., nume_generic;}

Dupa ultima virgula (dupa ultimul nume de font) se pot folosi urmatoarele nume generice de fonturi: serif, sans-serif, cursive, monospace si fantasy. Includerea unei asemenea valori este optionala, insa, in acelasi timp, recomandata.

h1 { font-family: Arial, Helvetica, sans-serif; }

Cand este specificata o lista de fonturi, navigatorul incearca sa foloseasca primul font din lista, daca nu este gasit, trece la urmatorul, parcurgand astfel lista pana in momentul in care intalneste un font instalat. Daca nu este regasit niciun font, textul va fi afisat cu fontul prestabilit. In cazul in care fonturile specificate in lista nu sunt disponibile, daca este specificat un nume generic / font de baza, textul va fi afisat cu un font apartinand acelui stil. Nota: Daca un nume de font contine mai mult de un cuvant (contine spatii), atunci numele se scrie intre ghilimele simple sau duble.

h1 { font-family: "Times New Roman", Times , serif; } Exemplul 3.1.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale pentru fonturi - font-family</title> <link rel="stylesheet" href="stil-3-1.css"> </head>

Suport de curs: CSS

_______________________________________________________ ___________________________________________


<body> <div id="wrapper"> <h2>Control Aspect Font - CSS</h2> <p class="stil_font_ar">Text Arial, Sans-serif</p> <p class="stil_font_trn">Text Times New Roman, Sans-serif</p> </div> </body> </html>

stil-3-1.css

body{ background-color:#ffffb8; } #wrapper{ margin-left:50px; } h2{ font-family: "Monotype Corsiva", "Comic Sans MS", cursive; } .stil_font_ar{ font-family: Arial, Helvetica, sans-serif; } .stil_font_tnr{ font-family: "Times New Roman", Georgia, serif; }

3.3. Font-uri personalizate

Exista posibilitatea folosirii unei palete largi de fonturi in crearea paginilor web, nu doar a celor din lista limitata a fonturilor compatibile cu navigatoarele. Solutia consta in inglobarea fontului in cadrul paginii si trimiterea lui in mod automat in calculatorul vizitatorului, altfel spus, descarcarea si folosirea lui automata. Pentru a ingloba un font intr-o pagina si a-l descarca, se foloseste intructiunea @font-face. Aceasta trebuie sa includa proprietatea font-family, urmata de numele fontului si apoi trebuie indicata locatia pe server unde poate fi gasit fontul respectiv.

@font-face { font-family: "nume_font" src: url(locatie_font_descarcabil);}

Nu poate fi ales orice font pentru a fi descarcat, acesta trebuie sa respecte un anume format. Insa, problema este ca nu exista un format valabil pentru toate navigatoarele, de exemplu Internet Explorer foloseste fonturi in format eof, obtinute cu ajutorul unui program numit WEFT.

Suport de curs: CSS

_______________________________________________________ ___________________________________________


@font-face { font-family: "StopD"; src: url(StopD.eof); }

3.4. Stabilirea dimensiunii font-ului

HTML pune la dispozitie sapte dimensiuni ale fontului, insa acestea sunt relative la o dimensiune prestabilita de vizitator. Cu ajutorul CSS se poate stabili dimensiunea fontului folosind valori absolute (exprimate in diferite unitati de masura), procentuale, sau chiar relative. Pentru a defini dimensiunea fontului in cadrul unei reguli trebuie specificata proprietatea font-size urmata de o valoare a dimensiunii care poate fi:

unitate de masura (exprimata in pixeli, puncte, inci, centimetri, etc.)

expresie absoluta (xx-small, x-small, small, medium, large, x-large si xx-large)

expresia smaller sau larger, in raport cu elementul parinte

procent, care indica marimea textului in raport cu dimensiunea elementului parinte

selector { font-size: valoare;}

Este bine ca pentru foile de stil care formateaza iesirea la imprimanta sa se foloseasca unitati de masura precum: puncte, cm sau mm.

h1 { font-size:12px; }

Pixelii reprezinta, probabil, cea mai des utilizata unitate de masura pentru stabilirea dimensiunii fontului. Pixelii nu reprezinta o masura foarte sigura, dar, de obicei, constituie o masura mai sigura decat dimensiunea in puncte. Dimensiunile exprimate in puncte constituie o modalitate comuna de a nota marimea unui font. Este bine totusi, din motive de siguranta, sa nu se depaseasca dimensiunea de 50 de puncte pentru stabilirea dimensiunii unui font. Folosirea unitatii pt sau em pentru dimensiunea unui font permite ca textul din pagina/paginile web sa fie redimensionat in functie de setarile de sistem ale fiecarui utilizator in parte, astfel ca, aspectul paginii este posibil sa apara uneori distorsionat.

De asemenea, dimensiunea fontului (ex. 12px) difera in functie de familia de fonturi, font-family (Arial, Times New Roman, etc.).

Exemplul 3.2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale pentru fonturi - font-size</title>

Suport de curs: CSS

_______________________________________________________ ___________________________________________


<link rel="stylesheet" href="stil-3-2.css"> </head> <body> <div id="wrapper"> <p class="stil_font_dim1">Text de dimensiune 14px, font predefinit.</p> <p class="stil_font_dim2">Text de dimensiune 20px, font predefinit.</p> <p class="stil_font_1">Text de dimensiune 16px, font Arial.</p> <p class="stil_font_2">Text de dimensiune 16px, font Times New Roman.</p> <br> <p class="stil_dim_abs1">Text de dimensiune absoluta xx-small.</p> <p class="stil_dim_abs2">Text de dimensiune absoluta x-small.</p> <p class="stil_dim_abs3">Text de dimensiune absoluta small.</p> <p class="stil_dim_abs4">Text de dimensiune absoluta medium.</p> <p class="stil_dim_abs5">Text de dimensiune absoluta large.</p> <p class="stil_dim_abs6">Text de dimensiune absoluta x-large.</p> <p class="stil_dim_abs7">Text de dimensiune absoluta xx-large.</p> </div> </body> </html>

stil-3-2.css

body{ background-color:#ffffb8; } #wrapper{ margin-left:50px; } .stil_font_dim1{ font-size: 14px; } .stil_font_dim2{ font-size: 20px; } .stil_font_1{ font-family: Arial, Helvetica, sans-serif; font-size: 16px; } .stil_font_2{ font-family: "Times New Roman", Georgia, serif; font-size: 16px; } .stil_dim_abs1{ font-size:xx-small; }

Suport de curs: CSS

_______________________________________________________ ___________________________________________


.stil_dim_abs2{ font-size:x-small; } .stil_dim_abs3{ font-size:small; } .stil_dim_abs4{ font-size:medium; } .stil_dim_abs5{ font-size:large; } .stil_dim_abs6{ font-size:x-large; } .stil_dim_abs7{ font-size:xx-large; }

3.5. Text inclinat

Atributul font-style permite scrierea textelor inclinate in doua moduri: cursiv si oblic. Notiunile pot fi confundate, insa cursivul se refera la versiunea unui font a carui caractere au o inclinare spre dreapta, iar oblicul este un font inclinat fortat spre dreapta. Pentru a crea caractere cursive in cadrul unei reguli trebuie precizata proprietatea font-style urmata de una din valorile: normal (valoare implicita), italic, sau oblique.

selector { font-style:valoare;}

Ex.:

h1 { font-style:italic; }

Pentru a sterge formatarea cu caractere inclinate, valorea proprietatii font-style trebuie sa fie: normal.

Exemplul 3.3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>

Suport de curs: CSS

_______________________________________________________ ___________________________________________


<head> <title>Controale pentru fonturi - font-style</title> <link rel="stylesheet" href="stil-3-3.css"> </head> <body> <div id="wrapper"> <p class="stil_font1">Text normal.</p> <p class="stil_font2">Text cursiv.</p> <p class="stil_font3">Text oblic.</p> </div> </body> </html>

stil-3-3.css

body{ background-color:#ffffb8; } #wrapper{ margin-left:50px; } .stil_font1{ font-style:normal; } .stil_font2{ font-style:italic; } .stil_font3{ font-style:oblique; }

3.6. Text ingrosat

Ingrosarea este una dintre metodele utilizate des pentru scoaterea in evidenta a unui text. Daca limbajul HTML permite doar o optiune de text scris aldin prin folosirea etichetei <b>, lucrurile se prezinta altfel in cazul utilizarii CSS. Foile de stil in cascada confera mai multa flexibilitate in utilizarea textului ingrosat prin posibilitatea introducerii unei valori a proprietatii font-weight dupa cum urmeaza:

bold – scrie fontul folosind caractere ingrosate

bolder, lighter – mareste, respectiv micsoreaza ponderea fontului relativ la ponderea curenta

valoare cuprinsa intre 100 si 900 (multiplu de 100) – reprezinta valoarea ponderii, bazata pe versiunile alternative disponibile ale fontului.

normal – elimina formatarea cu caractere aldine (valoare implicita)

Suport de curs: CSS

_______________________________________________________ ___________________________________________


selector { font-weight:valoare;}

Ex.:

h1 { font- weight:bold; }

400 reprezinta valoarea corespunzatoare ponderii normale, iar 700 valoarea ponderii pentru stilul aldin. Majoritatea fonturilor nu dispun de noua ponderi, astfel ca daca este specificata o valoare care nu este disponibila, va fi folosita o alta pondere.

Exemplul 3.4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale pentru fonturi - font- weight</title> <link rel="stylesheet" href="stil-3-4.css"> </head> <body> <div id="wrapper"> <p class="font_normal">Text normal</p> <p class="mai_subtire">Text lighter</p> <p class="font_ingrosat">Text bold</p> <p class="mai_ingrosat">Text bolder</p> <p class="font_900">Text - 900</p> </div> </body> </html>

stil-3-4.css

body{ background-color:#ffffb8; } #wrapper{ margin-left:50px; } p.font_normal{ font-style:normal; } p.mai_subtire{ font-style:lighter; } p.font_ingrosat{ font-weight:bold; }

Suport de curs: CSS

_______________________________________________________ ___________________________________________


p.mai_ingrosat{ font-weight:bolder; } p.font_900{ font-weight:900; }

3.7. Majuscule mici

Majusculele mici sunt folosite de obicei in cadrul titlurilor, ele fiind obtinute prin convertirea literelor mici in majuscule cu o dimensiune inferioara majusculelor normale. Astfel se obtin cuvinte in care toate literele sunt scrise cu majuscule insa prima litera este mai inalta decat celelalte.

selector { font-variant:valoare;}

Ex.:

h1 { font-variant:small-caps; }

Stabilirea unei reguli pentru majuscule mici se realizeaza prin utilizarea proprietatii font-variant cu valoarea small-caps. Prin folosirea valorii normal, vor fi anulate celelalte valori mostenite ale proprietatii font-variant.

Exemplul 3.5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale pentru fonturi - font- variant</title> <link rel="stylesheet" href="stil-3-5.css"> </head> <body> <div id="wrapper"> <h3 class="majuscule_mici">Text scris cu Majuscule Mici.</h3> <p class="font_normal">Text normal text normal text normal text normal text normal.</p> </div> </body> </html>

stil-3-5.css

body{ background-color:#ffffb8; } #wrapper{ margin-left:50px; }

Suport de curs: CSS

_______________________________________________________ ___________________________________________


h3.majuscule_mici{ font-variant:small-caps; } p.font_normal{ font-variant:normal; }

3.8. Valori multiple pentru font

Deseori este util sa fie precizate toate elementele fontului intr-o singura definitie. Pentru a se realiza acest lucru este folosita proprietatea font urmata de valori pentru celelalte proprietati, separate prin spatiu.

Proprietatile care pot fi setate sunt in ordine:

selector { font: val_font-style val_font-variant val_font-weight val_font-size/val_line_height val_font-family;}

Ex.:

h1 { font: italic small-caps bold 14pt arial, sans-serif; }

font-size si font-family sunt obligatorii. Daca una din celelalte valori este omisa, navigatorul va folosi valoarea prestabilita. Proprietatea line_height seteaza spatiul dintre randuri.

Exemplul 3.6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale pentru fonturi - font</title> <link rel="stylesheet" href="stil-3-6.css"> </head> <body> <div id="wrapper"> <h1>Antet H1</h1> <h2>Antet H2</h2> <p class="stil1">Text1 text1 text1 text1 text1 text1 text1.<br>Text1 text1 text1 text1 text1 text1 text1.<br>Text1 text1 text1 text1 text1 text1 text1.</p> <p class="stil2">Text2 text2 text2 text2 text2 text2 text2.<br>Text2 text2 text2 text2 text2 text2 text2.<br>Text2 text2 text2 text2 text2 text2 text2.</p> </div> </body> </html>

stil-3-6.css

body{ background-color:#ffffb8;

Suport de curs: CSS

_______________________________________________________ ___________________________________________


} #wrapper{ margin-left:50px; } h1{ font:italic small-caps bold 24px arial,sans-serif; } h2{ font:bold 20px georgia,serif; } p.stil1{ font:italic lighter 14px arial,sans-serif; } p.stil2{ font:italic lighter 14px/40px arial,sans-serif; }

Suport de curs: CSS

_______________________________________________________ ___________________________________________


3.9. Tabel recapitulativ

Proprietate Valoare

font-family <family-name>

Arial Times New Roman Courier New Monotype Corsiva Impact etc.

<generic-family>

serif sans-serif cursive fantasy monospace

font-size <length>

<percentage>

smaller

larger

xx-small

x-small

small

medium

large

x-large

xx-large

font-style normal

italic

oblique

font-weight normal

bold

lighter

bolder

100-900

font-variant normal

small-caps

font font-family

font-style

font-variant

font-weight

font-size

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Capitolul 4. CONTROALE PENTRU TEXT

Textele alcatuiesc o buna parte din paginile web. Metodele de afisare a textelor prin controlul nu numai a fontului, dimensiunii si culorilor, ci si prin alte elemente, pot mari gradul de lizibilitate, dar pot si atrage atentia asupra anumitor aspecte.

4.1. Spatiul intre litere

Spatierea selectiva se refera la cantitatea de spatiu dintre literele unui cuvant. Se poate mari sau reduce spatiul dintre litere folosind proprietatea letter-spacing, urmata de o valoare exprimata intr-o anumita unitate de masura, ce poate lua si valori negative.

selector { letter-spacing:valoare;}

Ex.:

h1 { letter-spacing:1,5em; }

Daca valoarea proprietatii este normal sau 0 atunci spatierea va fi fixata la valorile implicite (adica fara spatii suplimentare).

Exemplul 4.1.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale pentru text - letter-spacing</title> <link rel="stylesheet" href="stil-4-1.css"> </head> <body> <div id="wrapper"> <p class=" ltr_sp1">Text cu spatiere normala intre litere.</p> <p class=" ltr_sp2">Text cu spatiere intre litere de 0.75em.</p> <p class=" ltr_sp3">Text cu spatiere intre litere de 9px.</p> <p class=" ltr_sp4">Text cu spatiere intre litere de -1px</p> </div> </body> </html>

stil-4-1.css

body{ background-color: #ffefe6; } #wrapper{ margin-left:50px; } p. ltr_sp1{ letter-spacing:normal;

Suport de curs: CSS

_______________________________________________________ ___________________________________________


} p. ltr_sp2{ letter-spacing:0.75em; } p. ltr_sp3{ letter-spacing:9px; } p. ltr_sp4{ letter-spacing:-1px; }

4.2. Spatiul intre cuvinte

CSS da posibilitatea modificarii spatiului intre cuvinte atat prin marire, cat si prin micsorare. Adaugarea sau reducerea spatiului poate influenta pozitiv sau negativ lizibilitatea. Pentru definirea spatierii intre cuvinte se foloseste proprietatea word-spacing, urmata de o valoare exprimata intr-o anumita unitate de masura, px, pt, cm, em, etc., care poate fi si negativa si care defineste o cantitate de spatiu intre cuvinte.

selector { word-spacing:valoare;}

Ex.:

h1 { word-spacing:10px; }

Pentru anularea spatierii intre cuvinte, valoarea proprietatii trebuie sa fie: normal.

O valoare pozitiva semnifica un plus de spatiu adaugat la valoarea implicita, iar o valoare negativa reduce acest spatiu. Daca valoarea este egala cu 0 atunci spatiul dintre cuvinte este fixat la valoarea prestabilita, neproducand de fapt nici un efect, valoarea 0 fiind similara cu valoarea normal.

Exemplul 4.2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale pentru text - word-spacing</title> <link rel="stylesheet" href="stil-4-2.css"> </head> <body> <div id="wrapper"> <p class="wrd_sp1">Text cu spatiere normala intre cuvinte.</p> <p class="wrd_sp2">Text cu spatiere intre cuvinte de 5px.</p> </div> </body>

Suport de curs: CSS

_______________________________________________________ ___________________________________________


</html> stil-4-2.css

body{ background-color: #ffefe6; } #wrapper{ margin-left:50px; } p.wrd_sp1{ word-spacing:normal; } p.wrd_sp2{ word-spacing:0.75em; }

4.3. Spatiul intre linii

Inaltimea randurilor se refera la interlinierea paragrafului, adica la spatiul dintre liniile acestuia. Utilizarea interlinierii poate avea ca efect o mai buna si usoara citire a textului in cazul in care aceasta este mai mare (creaza o regiune cu spatiu intre liniile de text). Alteori, daca inaltimea este mai mica (folosita la randurile de titlu), poate conferi un aspect mai stilat. Pentru a stabili inaltimea randurilor se foloseste proprietatea line-height, urmata de o valoare care poate fi exprimata in urmatoarele:

un numar care inseamna multiplicarea dimensiunii fontului cu numarul respectiv pentru a obtine valoarea spatierii;

o valoare de tip absolut, exprimata in pixeli, puncte sau orice alta unitate de masura, care indiferent de dimensiunea stabilita a fontului, inaltimea liniei are o valoare exacta;

un procent, care stabileste inaltimea liniei ca fiind egala cu un anumit procent din dimensiunea fontului folosit pentru scrierea textului;

normal – vlaoarea implicita.

selector { line-height:valoare;}

Ex.:

h1 { line-height:150%; }

Pentru anularea interlinierii, valoarea proprietatii trebuie sa fie: 0.

Inaltimea liniei poate de asemenea fi definita in cadrul proprietatii font prin introducerea caracterului „/” urmat de valoarea pentru inaltimea randului, imediat dupa dimensiunea fontului (ca in Exemplul3.6.).

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Exemplul 4.3.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale pentru text - line-height</title> <link rel="stylesheet" href="stil-4-3.css"> </head> <body> <div id="wrapper"> <p class="ln_sp1">Paragraf cu spatiere normala intre randuri. Paragraf cu spatiere normala intre randuri. Paragraf cu spatiere normala intre randuri. Paragraf cu spatiere normala intre randuri. Paragraf cu spatiere normala intre randuri. Paragraf cu spatiere normala intre randuri.</p> <p class="ln_sp2">Paragraf cu spatiere intre randuri de 200%. Paragraf cu spatiere intre randuri de 200%. Paragraf cu spatiere intre randuri de 200%. Paragraf cu spatiere intre randuri de 200%. Paragraf cu spatiere intre randuri de 200%.</p> <p class="ln_sp3">Paragraf cu spatiere intre randuri de 30px. Paragraf cu spatiere intre randuri de 30px. Paragraf cu spatiere intre randuri de 30px. Paragraf cu spatiere intre randuri de 30px. Paragraf cu spatiere intre randuri de 30px.</p> </div> </body> </html>

stil-4-3.css

body{ background-color:#ffefe6; } #wrapper{ margin-left:50px; } p.ln_sp1{ line-height:normal; } p.ln_sp2{ line-height:200%; } p.ln_sp3{ line-height:50px; }

4.4. Marimea / tipul literelor

Exista cazuri in care se doreste afisarea textului cu un anume tip de litere. Astfel va trebui specificat explicit ca textul sa apara cu majuscule initiale, majuscule, minuscule, combinat sau asa cum a fost el

Suport de curs: CSS

_______________________________________________________ ___________________________________________


scris. Cu ajutorul proprietatii text-transform se poate controla marimea/tipul literelor din text, indiferent de modul cum a fost el scris initial.

selector { text-transform:valoare;}

Ex.:

h1 { text-transform:uppercase; }

Pentru a schimba tipul literelor dintr-un text proprietatea text-transform va fi urmata de o valoare care poate fi:

capitalize – pentru ca primul caracter din fiecare cuvant sa fie scris cu majuscula;

uppercase – pentru ca toate caracterele sa fie scrise cu majuscule;

lowercase - pentru ca toate caracterele sa fie scrise cu litere mici;

none – pentru ca textul sa fie afisat asa cum este.

Pentru ca un anume text sa apara scris cu majuscule si in cazul folosirii unui navigator mai vechi, este bine ca respectivul text sa fie introdus ca atare. Proprietatea text-transform este utila atunci cand textele sunt create in mod dinamic (de exemplu, in cazul in care ele provin dintr-o baza de date), oferind o lizibilitate sporita acestora.

Exemplul 4.4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale pentru text - text-transform</title> <link rel="stylesheet" href="stil-4-4.css"> </head> <body> <div id="wrapper"> <p class="txt_tr1">Text transformat cu proprietatea text-transform: capitalize.</p> <p class="txt_tr2">Text transformat cu proprietatea text-transform: uppercase.</p> <p class="txt_tr3">Text transformat cu proprietatea text-transform: LOWERCASE.</p> <p class="txt_tr4">Text transformat cu proprietatea text-transform: NONE.</p> </div> </body> </html>

stil-4-4.css

body{ background-color:#ffefe6; } #wrapper{ margin-left:50px; } p.txt_tr1{

Suport de curs: CSS

_______________________________________________________ ___________________________________________


text-transform:capitalize; } p.txt_tr2{ text-transform:uppercase; } p.txt_tr3{ text-transform:lowercase; } p.txt_tr4{ text-transform:none; }

4.5. Alinierea textului pe orizontala

Un text poate fi aliniat de la marginea din stanga, din dreapta, centrat sau la ambele margini (stanga-dreapta). Proprietatea text-align ofera posibilitatea controlului asupra alinierii textului. Definirea alinierii se face specificand dupa proprietatea text-align una din valorile: left (stanga), right (dreapta), center (centru), justify (stanga-dreapta).

selector { text-align:valoare;}

Ex.:

h1 { text-align:justify; }

Proprietatea poate fi aplicata numai elementelor la nivel de bloc, valoarea sa implicita fiind in majoritatea cazurilor stabilita la valoarea left.

In cazul in care alinierea textului este stanga-dreapta, spatierea cuvintelor si a literelor se schimba pentru a se obtine limite stanga-dreapta uniforme pentru continut. Aceasta are uneori efecte negative asupra lizibilitatii textului.

Exemplul 4.5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale pentru text - text-align</title> <link rel="stylesheet" href="stil-4-5.css"> </head> <body> <div id="wrapper"> <h1 class="txt_aln1">Titlu aliniat la centru</h1> <h2 class="txt_aln2">Titlu aliniat la stanga</h2> <h3 class="txt_aln3">Titlu aliniat la dreapta</h3> <p class="txt_aln4">Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-

Suport de curs: CSS

_______________________________________________________ ___________________________________________


dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. </p> </div> </body> </html>

stil-4-5.css

body{ background-color:#ffefe6; } #wrapper{ margin-left:50px; } .txt_aln1{ text-align:center; } .txt_aln2{ text-align:left; } .txt_aln3{ text-align:right; } .txt_aln4{ text-align:justify; }

4.6. Alinierea textului pe verticala

Cu ajutorul proprietatii vertical-align se poate preciza pozitia unor elemente in linie in raport cu textul din jurul lor. Asta inseamna ca proprietatea poate fi folosita doar cu etichete in linie care nu determina un salt la linie noua, amplasat anterior sau ulterior acestora.

selector { vertical-align:valoare;}

Ex.:

span { vertical-align:baseline; }

Pentru definirea alinierii pe verticala a textului se foloseste una din urmatoarele optiuni:

super – pentru scrierea elementului ca indice superior, deasupra liniei de baza;

sub - pentru scrierea elementului ca indice inferior, sub linia de baza;

Suport de curs: CSS

_______________________________________________________ ___________________________________________


baseline – pentru scrierea elementului pe linia de baza;

top – partea superioara a elementului este aliniata cu partea superioara a celui mai inalt element din randul curent;

middle – elementul este pozitionat la mijlocul elementului parinte

bottom – partea inferioara a elementului este aliniata cu cel mai inferior element din randul curent;

text-top – partea superioara a elementului este aliniata cu partea superioara a fontului elementului parinte;

text-bottom – partea inferioara a elementului este aliniata cu partea inferioara a fontului elementului parinte;

valoare procentuala – care ridica sau coboara linia de baza a elementului proportional cu dimensiunea fontului elementului parinte;

marime in px, em, cm, etc. – ridica sau coboara un element, in functie de marimea specificata.

Exemplul 4.6.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale pentru text - vertical-align</title> <link rel="stylesheet" href="stil-4-6.css"> </head> <body> <div id="wrapper"> <p>Imaginea: <img src="imagini/element_css.jpg" width="280" height="40" alt="">cu stil de aliniere implicit.</p> <p>Imaginea: <img src="imagini/element_css.jpg" class="vtl_aln1" width="280" height="40" alt="">cu stil de aliniere text-top.</p> <p>Stil de aliniere text-bottom pentru imaginea: <img src="imagini/element_css.jpg" class="vtl_aln2" width="280" height="40" alt=""></p> <p>Stil de aliniere baseline pentru imaginea: <img src="imagini/element_css.jpg" class="vtl_aln3" width="280" height="40" alt=""></p> <p>Imaginea: <img src="imagini/element_css.jpg" class="vtl_aln4" width="280" height="40" alt="">cu stil de aliniere 50%.</p> <p>Imaginea: <img src="imagini/element_css.jpg" class="vtl_aln5" width="280" height="40" alt="">cu stil de aliniere -50%.</p> <p>Imaginea: <img src="imagini/element_css.jpg" class="vtl_aln6" width="280" height="40" alt="">cu stil de aliniere 20px.</p> <p>Imaginea: <img src="imagini/element_css.jpg" class="vtl_aln7" width="280" height="40" alt="">cu stil de aliniere -10px.</p> <p>Indice <span class="vtl_aln8">superior</span> creat cu align:super.</p> <p>Indice <span class="vtl_aln9">inferior</span> creat cu align:sub.</p> </div> </body> </html>

stil-4-6.css

body{

Suport de curs: CSS

_______________________________________________________ ___________________________________________


background-color:#ffefe6; } #wrapper{ margin-left:50px; } .vtl_aln1{ vertical-align:text-top; } .vtl_aln2{ vertical-align:text-bottom; } .vtl_aln3{ vertical-align:baseline; } .vtl_aln4{ vertical-align:50%; } .vtl_aln5{ vertical-align:-50%; } .vtl_aln6{ vertical-align:20px; } .vtl_aln7{ vertical-align:-10px; } .vtl_aln8{ vertical-align:super; } .vtl_aln9{ vertical-align:sub; }

4.7. Decalarea paragrafelor

Cu ajutorul proprietatii text-indent se poate stabili ce spatiu suplimentar este inserat la inceputul primei linii de text dintr-un paragraf. Pentru a adauga indentari se foloseste proprietatea mai sus

Suport de curs: CSS

_______________________________________________________ ___________________________________________


mentionata, urmata de o valoare exprimata intr-o unitate de masura (px, pt, em, cm, etc.) sau in procente (proportional cu latimea elementului parinte).

selector { text-indent:valoare;}

Ex.:

p { text-indent:10%; }

Valorile pozitive determina o indentare tipica, in timp ce valorile negative determina o indentare agatata, fiind necesara fie marirea umplerii, fie marirea marginilor.

Pentru eliminarea decalarii se utilizeaza valoarea 0.

Exemplul 4.7.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale pentru text - text-indent</title> <link rel="stylesheet" href="stil-4-7.css"> </head> <body> <div id="wrapper"> <p class="txt_indt1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> <p class="txt_indt2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> </div> </body> </html>

stil-4-7.css

body{ background-color:#ffefe6; } #wrapper{ margin-left:50px; } .txt_indt1{ text-indent:30px; } .txt_indt2{

Suport de curs: CSS

_______________________________________________________ ___________________________________________


text-indent:10%; }

4.8. Aplicarea elementelor decorative Foile de stil in cascada permit ornarea textului prin scoaterea lui in evidenta in patru moduri: subliniere, supraliniere, taierea textului cu o linie sau crearea de texte care clipesc. Aplicarea de elemente ornamentale unui text se realizeaza prin proprietatea text-decoration, urmata de una din valorile:

underline – pentru a sublinia textul;

overline – pentru a trasa o linie deasupra textului;

line-through – pentru a taia textul cu o linie;

blink – pentru a face textul sa apara si sa dispara intermitent;

none – niciun element decorativ pentru text.

selector { text-decoration:valoare;}

Ex.:

a:link { text-decoration:none; }

Pentru a elimina decoratiile se foloseste valoarea none. Prin folosirea acestei valori se elimina si sublinierile legaturilor, chiar daca vizitatorul si-a configurat navigatorul astfel incat acesta sa sublinieze legaturile.

Elementul decorativ blink are un trecut cu probleme, fiind eliminat de marea majoritate a navigatoarelor.

Exemplul 4.8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale pentru text - text-decoration</title> <link rel="stylesheet" href="stil-4-8.css"> </head> <body> <div id="wrapper"> <p class="txt_dcrn1">Text cu decorare underline</p> <p class="txt_dcrn2">Text cu decorare overline</p> <p class="txt_dcrn3">Text cu decorare line-through</p> <p><a href="#" class="txt_dcrn4">Legatura</a> pentru care a fost anulata sublinierea</p> </div> </body> </html>

stil-4-8.css

body{

Suport de curs: CSS

_______________________________________________________ ___________________________________________


background-color:#ffefe6; } #wrapper{ margin-left:50px; } .txt_dcrn1{ text-decoration:underline; } .txt_dcrn2{ text-decoration:overline; } .txt_dcrn3{ text-decoration:line-through; } .txt_dcrn4{ text-decoration:none; }

4.9. Spatiile albe

Implicit, intreruperile de linie si spatiile albe dintr-un document HTML sunt tratate ca un singur spatiu sau sunt ignorate, daca nu este utilizata eticheta <pre>. CSS permite afisarea acestor spatii, precum si a intreruperilor textului, utilizand proprietatea white-space.

selector { white-space:valoare;}

Ex.:

p { white-space:pre; }

Valorile pe care le poate lua white-space sunt:

normal – succesiunile de spatii albe vor colapsa intr-un singur spatiu, iar randul se va intrerupe (se va trece la o noua linie) cand va fi necesar; acesta este modul implicit;

nowrap – succesiunile de spatii albe vor colapsa intr-un singur spatiu si randul va fi unul continuu pana la intalnirea unei intreruperi de linie <br> ;

pre – succesiunile de spatii albe sunt pastrate de catre browser si randul se va intrerupe la intalnirea intreruperilor de linie <br>;

pre-line – succesiunile de spatii albe vor colapsa intr-un singur spatiu si randul se va intrerupe cand va fi necesar si la intalnirea intreruperilor de linie <br>;

pre-wrap – succesiunile de spatii albe sunt pastrate de catre browser si randul se va intrerupe cand va fi necesar si la intalnirea intreruperilor de linie <br>.

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Pentru a activa afisarea tuturor spatiilor si a intreruperilor de linie din text, proprietatea va lua valoarea pre. Utilizarea valorii nowrap impiedica trecerea la linia urmatoare in cazul in care nu este specificata eticheta <br>.

Valoarea normal permite navigatorului sa decida asupra modului de tratare a spatiilor. De obicei, acestea vor fi transformate intr-un singur spatiu.

Spre deosebire de eticheta <pre>, care schimba fontul cu unul monospatiat, valoarea pre a proprietatii white-space nu are nici un efect asupra fontului elementului la care se aplica.

Exemplul 4.9. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale pentru text - white-space</title> <link rel="stylesheet" href="stil-4-9.css"> </head> <body> <div id="wrapper"> <p class="wht_sp1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. <br>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> <hr> <p class="wht_sp2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. <br>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> <hr> <p class="wht_sp3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. <br>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> <hr> <p class="wht_sp4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. <br>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> </div> </body> </html>

stil-4-9.css

body{ background-color:#ffefe6; } #wrapper{ margin-left:50px; }

Suport de curs: CSS

_______________________________________________________ ___________________________________________


.wht_sp1{ white-space:pre; } .wht_sp2{ white-space:nowrap; } .wht_sp3{ white-space:pre-wrap; } .wht_sp4{ white-space:pre-line; }

4.10. Text colorat

Proprietatea folosita pentru colorarea textului este color.

Culoarea poate fi specificata astfel:

Dupa nume: un nume de culoare precum „red”;

RGB: o valoare RGB ca de exemplu „rgb(100,0,0)”;

Hex: o valoare hexazecimala ca de exemplu „#0000ff”.

selector {color:valoare;}

Ex.:

p {color:blue;}

Exista urmatoarele 16 nume de culori (culori predefinite) recunoscute de toate browserele: white, silver, gray, black, red, maroon, yellow, olive, lime, green, aqua, teal, blue, navy, fuchsia, purple.

Exemplul 4.10. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale pentru text - color</title> <link rel="stylesheet" href="stil-4-10.css"> </head> <body> <div id="wrapper"> <h1>Titlu H1</h1> <p>Paragraf obisnuit de culoare albastra, asa cum a fost definita proprietatea <b>color</b> pentru eticheta BODY.</p>

Suport de curs: CSS

_______________________________________________________ ___________________________________________


<p class="col_green">Paragraf de culoare verde, asa cum a fost definita proprietatea <b>color</b> in clasa <b>col_green</b> pentru paragrafe.</p> </div> </body> </html>

stil-4-10.css

body{ color:blue; } #wrapper{ margin-left:50px; } h1{ color:#cc3300; } p.col_green{ color:#009900; }

4.11. Particularizarea legaturilor

Prin intermediul CSS pot fi definite stiluri particularizate pentru legaturile dintr-o pagina HTML (ex. culoare, familie de font, culoare de fundal, etc.). O particularitate a legaturilor/link-urilor este aceea ca aspectul lor poate fi particulariza in functie de starea in care se afla.

Cele 4 stari in care se pot afla link-urile sunt:

a:link – un link normal, nevizitat inca

a:visited – un link vizitat deja de catre utilizator

a:hover – un link atunci cand se trece cu mouse-ul peste el

a:active – un link in momentul in care este actionat

Ex.:

a:link {color: #ff0000;} a:visited {color: #800000;} a:hover {color: #800080;} a:active {color: #ff00ff;}

Pe langa proprietatea color, mai pot fi setate pentru particularizarea link-urilor si proprietati precum: text-decoration, font-family, background-color, etc.

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Pentru ca aceste setari sa aiba efect trebuie ca a:hover sa vina dupa a:link si a:visited, iar a:active dupa a:hover.

Exemplul 4.11.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale pentru link-uri</title> <link rel="stylesheet" href="stil-4-11.css"> </head> <body> <div id="wrapper"> <p><a href="#">Acesta este un link</a> si acesta este un text obisnuit.</p> </div> </body> </html>

stil-4-11.css

body{ color:#0f0f0a; } #wrapper{ margin-left:50px; } a:link { color: #ff0000; text-decoration:none; } a:visited { color: #008000; text-decoration:none; } a:hover { color: #800080; text-decoration:underline; } a:active { color: #ff00ff; text-decoration:none; }

Suport de curs: CSS

_______________________________________________________ ___________________________________________


4.12. Directia textului

Proprietatea direction specifica directia textului sau directia de scriere.

selector {direction:valoare;}

Ex.:

p {direction: ltr;}

Valori posibile:

ltr – directia de scriere este de la stanga la dreapta (left-to-right); aceasta este valoarea implicita;

rtl – directia de scriere este de la dreapta la stanga (right-to-left).

Exemplul 4.12. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale pentru text - direction</title> <link rel="stylesheet" href="stil-4-12.css"> </head> <body> <div id="wrapper"> <p>Text. Directie implicita de la stanga la dreapta.</p> <p class="dir_rtl">Text. Directie de scriere de la dreapta la stanga.</p> </div> </body> </html>

stil-4-12.css

body{ background-color:#ffefe6; } #wrapper{ margin-left:50px; margin-right:50px; } p.dir_rtl { direction:rtl; }

Suport de curs: CSS

_______________________________________________________ ___________________________________________



Proprietate Valoare

letter-spacing normal

<length>

word-spacing normal

<length>

line-height normal

<number>

<length>

<percentage>

text-transform capitalize

uppercase

lowercase

none

text-align left

right

center

justify

vertical-align baseline

super

sub

top

text-top

middle

bottom

text-bottom

<lenght>

<percentage>

text-indent <length>

<percentage>

text-decoration none

underline

overline

line-through

blink

white-space normal

pre

nowrap

color <color name>

<color RGB>

<color Hex>

a:link, a:visited, a:hover, a:active <color name>

Suport de curs: CSS

_______________________________________________________ ___________________________________________


<color RGB>

<color Hex>

direction ltr

rtl

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Capitolul 5. CONTROALE PENTRU CULORI SI FUNDAL

Daca HTML permitea configurarea unor culori si elemente grafice de fundal doar pentru anumite elemente, CSS permite definirea culorii si a fundalului pentru orice element din pagina web, oferind astfel o mai mare flexibilitate in proiectare.

5.1. Configurarea fundalului

Se poate schimba nu doar pentru fundalul intregii pagini, ci si pentru un anumit element din pagina, fie el de tip imagine, tabel sau formular.

5.1.1. Culoarea fundalului

Pentru a schimba culoarea fundalului se utilizeaza proprietatea background-color, urmata de o valoare care reprezinta numele culorii, valoarea RGB, sau valoare hexazecimala.

selector {background-color:valoare; }

Ex.:

body { background-color:#c0c0c0; }

Valoarea transparent indica navigatorului sa utilizeze culoarea prestabilita sau pe cea a elementului parinte.

Culoarea de fundal acopera intreaga zona de desfasurare a elementului, inclusiv zonele „padding” si „border”, dar nu „margin”.

Exemplul 5.1.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Configurarea fundalului - background-color</title> <link rel="stylesheet" href="stil-5-1.css"> </head> <body> <div class="bg_clr1"> <h1>Titlu H1</h1> <p>Paragraf obisnuit.</p> <p class="bg_clr3">Paragraf cu proprietatea <b>background-color</b>:transparent.</p> <p class="bg_clr4">Paragraf cu background color.</p> </div> <br> <div class="bg_clr2"><p><b>background-color</b> nu acopera zona "margin-left" (100px).</p></div> </body> </html>

stil-5-1.css

body{

Suport de curs: CSS

_______________________________________________________ ___________________________________________


background-color:#deffbd; } div.bg_clr1{ background-color:#ffebff; width:500px; height:200px; padding-left: 100px; } div.bg_clr2{ background-color:#ffebff; width:500px; height:200px; margin-left: 100px; } h1{ background-color:#cedead; } p.bg_clr3{ background-color:transparent; } p.bg_clr4{ background-color:#ffccff; }

5.1.2. Imaginea de fundal

Pentru a utiliza ca fundal o imagine se foloseste proprietatea background-image, urmata de adresa URL a locatiei imaginii.

selector { background-image:valoare; }

Valoarea se specifica in felul urmator: url(’fisier.imagine’)

Ex.:

body { background-image: url(’imagine.gif’);}

Alternativ, in locul adresei URL se poate folosi valoarea none, ceea ce inseamna ca navigatorul nu foloseste nici o imagine.

Odata cu setarea imaginii de fundal, se pot seta de asemenea si: culoarea de fundal, metoda de repetare a imaginii de fundal, etc.

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Nota: Este recomandat ca pe langa imaginea de fundal sa fie setata si o culoare de fundal pentru cazul in care imaginea nu poate fi accesata (din diferite motive).

Exemplul 5.2.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Configurarea fundalului - background-image</title> <link rel="stylesheet" href="stil-5-2.css"> </head> <body> <div class="bg_clr"> <p>Proprietatea <b>background-image</b> setata pentru eticheta BODY are ca efect repetarea imaginii pe intreg fundalul paginii.</p> </div> </body> </html>

stil-5-2.css

body{ background-image:url('imagini/background1.gif'); } div.bg_clr{ background-color:#ffffc2; width:500px; height:100px; padding-left: 10px; color:#2e1f0f; }

5.1.3. Repetarea imaginii de fundal

CSS ofera nu numai posibilitatea afisarii unui element grafic ca fundal pentru un element sau pentru o pagina, ci si posibilitatea controlarii modul de repetare a acestuia.

selector { background-repeat:valoare; }

Ex.:

body { background-repeat:no-repeat; }

Pentru a repeta imaginea de fundal se foloseste proprietatea background-repeat, insotita de una din urmatoarele valori:

repeat – pentru a repeta imaginea atat pe verticala cat si pe orizontala;

repeat-x – pentru a repeta imaginea numai pe orizontala;

repeat-y – pentru a repeta imaginea numai pe verticala;

Suport de curs: CSS

_______________________________________________________ ___________________________________________


no-repeat – pentru a afisa imaginea o singura data, fara repetare.

Nota: Imaginea de fundal este plasata conform proprietatii background-position. Daca proprietatea background-position lipseste, atunci imaginea va fi plasata in coltul stanga-sus al elementului.

Exemplul 5.3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Configurarea fundalului - background-repeat</title> <link rel="stylesheet" href="stil-5-3.css"> </head> <body> <p>Proprietatea <b>background-image</b> setata pentru eticheta BODY are ca efect repetarea imaginii de fundal pe verticala (200px incepand cu limita din stanga a ferestrei curente).<br>Restul zonei de fundal nu are setata o culoare.</p> <div class="bg_img"> <p>Proprietatea <b>background-image</b> setata pentru eticheta DIV are ca efect repetarea imaginii de fundal pe orizontala (150px incepand cu limita de sus a elementului / diviziunii curente).</p> <p>Parte din fundalul diviziunii curente este ocupat de imaginea de fundal care se repeta pe orizontala, iar restul zonei de fundal este colorata cu proprietatea <b>background-color</b>.</p> </div> </body> </html>

stil-5-3.css

body{ background-image:url('imagini/bg_vert.jpg'); background-repeat:repeat-y; } p { padding-left: 10px; padding-top: 10px; color:#333333; font-family:arial, sans-serif; font-size:14px; } div.bg_img{ background-image:url('imagini/bg_oriz.jpg'); background-repeat:repeat-x; /* no-repeat */ background-color:#f4fbb5; width:500px; height:300px; }

Suport de curs: CSS

_______________________________________________________ ___________________________________________


5.1.4. Controlul imaginii de fundal

Pentru a defini modul de tratare a fundalului la derularea paginii se foloseste proprietatea background-attachment cu optiunea fixed, pentru a lipi imaginea de fundal de fereastra navigatorului sau scroll (valoare implicita), pentru a permite derularea imaginii de fundal alaturi de elementul corespunzator atunci cand vizitatorul deruleaza pagina.

selector { background-attachment:valoare; }

Ex.:

body { background-attachment:scroll; } Exemplul 5.4.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Configurarea fundalului - background-attachment</title> <link rel="stylesheet" href="stil-5-4.css"> </head> <body> <div class="bg_clr"> <p>text ................<br>text ................<br>text ................<br>text ................<br>text ................<br>text ................<br>text ................<br>text ................<br>text ................<br>text ................<br>text ................</p> </div> </body> </html>

stil-5-4.css

body{ background-image:url('imagini/background2.gif'); background-repeat: no-repeat; background-attachment:fixed; margin-left: 20px; } div.bg_clr{ background-color:#f0f5f5; width:500px; height:800px; padding-left: 10px; color:#2e1f0f; }

5.1.5. Pozitia imaginii de fundal

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Pentru a indica pozitia imaginii de fundal relativ la coltul din stanga-sus al elementului se utilizeaza proprietatea background-position urmata de doua valori (coordonate x si y) separate prin spatiu. Proprietatea background-position defineste pozitia de inceput a imaginii de fundal.

selector { background-position:valoare; }

Ex.:

body { background-position:center; }

Coordonatele x si y pot fi exprimate prin:

- cuvinte cheie:

left top (stanga sus)

left center (stanga centru)

left bottom (stanga jos)

right top (dreapta sus)

right center (dreapta centru)

right bottom (dreapta jos)

center top (centru sus)

center center (centru centru)

center bottom (centru jos)

Nota: Daca este precizat doar un cuvant cheie, al doilea va fi in mod implicit center.

- valori absolute: xpoz ypoz Prima valoare este pozitia pe orizontala, iar a doua valoare este pozitia pe verticala. Coltul stanga sus este 0 0. Unitatile pot fi pixeli (0px,0px) sau alte unitati CSS. Daca este specificata doar o valoare, cea de-a doua va fi in mod implicit 50% Pot fi combinate valorile absolute cu valorile procentuale.

- valori procentuale: x% y% Prima valoare este pozitia pe orizontala, iar a doua valoare este pozitia pe verticala. Coltul stanga sus este de coordonate (0%,0%). Coltul dreapta jos este de coordonate (100%,100%). Daca este specificata doar o valoare, cea de-a doua va fi in mod implicit 50%

Valoarea implicita a proprietatii background-position este 0% 0%.

Nota: Pentru anumite browsere, pentru ca proprietatea background-position sa aiba efect trebuie setata background-attachment:fixed;

Exemplul 5.5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Configurarea fundalului - background-position</title> <link rel="stylesheet" href="stil-5-5.css"> </head> <body>

Suport de curs: CSS

_______________________________________________________ ___________________________________________


<div class="ex1"> <p>text ................<br>text ................<br>text ................<br>text ................<br>text ................<br>text ................<br>text ................<br>text ................<br>text ................<br>text ................<br>text ................</p> </div> </body> </html>

stil-5-5.css

body{ background-image:url('imagini/background2.gif'); background-repeat: no-repeat; background-attachment:fixed; background-position: 50px 20px; /* alte ex.: background-position:left center; background-position:center center; background-position:right bottom; etc.*/ } div.ex1{ width:500px; height:800px; padding-left: 10px; color:#293d3d; }

5.1.6. Stabilirea simultana a proprietatilor fundalului

Toate proprietatile fundalului pot fi configurate cu ajutorul proprietatii background. Pentru aceasta se stabilesc simultan printr-o lista de valori proprietatile fundalului, existand posibilitatea enumerarii lor in orice ordine.

Proprietatile care pot fi setate sunt in ordine:

selector { background: val_background-color val_background-image val_background-repeat val_background-attachment val_background-position; }

Ex.:

body { background: transparent url('imagine.gif') no-repeat scroll center; }

Valoarea implicita a proprietatii background-color este transparent. Valoarea implicita a proprietatii background-image este none. Valoarea implicita a proprietatii background-attachment este scroll. Valoarea implicita a proprietatii background-position este top left.

Cand se utilizeaza proprietatea implicita background, nu este necesar sa fie specificate toate proprietatile, cele nespecificate fiind stabilite la valoare lor implicita.

Ex.:

body { background: #f9f5d1 url('imagine.gif'); }

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Exemplul urmator defineste simultan aceleasi proprietati de fundal folosite pentru exemplul precedent 5.5.

Exemplul 5.6.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Stabilirea simultana a proprietatilor de fundal</title> <link rel="stylesheet" href="stil-5-6.css"> </head> <body> <div class="ex1"> <p>text ................<br>text ................<br>text ................<br>text ................<br>text ................<br>text ................<br>text ................<br>text ................<br>text ................<br>text ................<br>text ................</p> </div> </body> </html>

stil-5-6.css

body{ background: url('imagini/background2.gif') no-repeat fixed 50px 20px; } div.ex1{ width:500px; height:800px; padding-left: 10px; color:#293d3d; }

5.2. Stabilirea culorii din prim-plan

Utilizand proprietatea color se poate schimba culoare oricarui element, fie el text, linie orizontala sau element de tip formular.

selector { color:valoare; }

Valoarea culorii poate fi: numele culorii (una din cele 16 culori predefinite), o valoare in sistem hexazecimal (sub forma #rrggbb) sau o valoare RGB (sub forma rgb(r, g, b) unde r, g, b pot fi reprezentate prin numere intregi cuprinse intre 0 si 255 sau procente de rosu, verde si albastru cu valori intre 0% si 100%).

Ex.:

p { color:blue; }

Exemplul 5.7.

Suport de curs: CSS

_______________________________________________________ ___________________________________________


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Stabilirea culorii de prim plan</title> <link rel="stylesheet" href="stil-5-7.css"> </head> <body> <div class="bg_clr"> <br> <p>text ................<br>text ................<br>text ................<br>text ................<br>text ................</p> <hr> <p>text ................<br>text ................<br>text ................<br>text ................<br>text ................</p> <br> <form action="#" method="post"> Nume: <input type="text" name="nume" value="Numele si prenumele" size="30"><br> <input type="submit" name="submit" value="Trimite"> </form> </div> </body> </html>

stil-5-7.css

body{ background: url('imagini/background2.gif'); } div.bg_clr{ background-color:#c2d699; width:500px; height:500px; padding-left: 10px; } p{ color:#7a0000; background-color:#faf4c8; } hr{ color:blue; } form{ color:teal; } input{ color:gray; }

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Suport de curs: CSS

_______________________________________________________ ___________________________________________



Proprietate Valoare

background-color <color-rgb>

<color-hex>

<color-name>

transparent

background-image URL

none

background-repeat repeat

repeat-x

repeat-y

no-repeat

background-attachment scroll

fixed

background-position left top

left center

left bottom

right top

right center

right bottom

center top

center center

center bottom

x% y%

xpoz ypoz

background <background-color>

<background-image>

<background-repeat>

<background-attachement>

<background-position>

color <color-rgb>

<color-hex>

<color-name>

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Capitolul 6. CONTROALE PENTRU CHENARE SI MARGINI

Indiferent daca o eticheta este de sine statatoare sau imbricata in alte etichete, aceasta poate fi tratata ca un element distinct pe ecran si poate fi controlata prin intermediul CSS.

6.1. Notiunea de caseta

Fiecare element creat intr-o foaie de stil este prezentat in propria lui caseta. Termenul de element se refera la diferitele componente ale unui document HTML, configurate prin intermediul etichetelor HTML de tip container. Caseta dispune de numeroase proprietati, intre care se numara: marginile, chenarul, completarea (umplerea), latimea si inaltimea, care pot fi modificate cu ajutorul CSS. Elementele HTML au patru laturi (superioara, inferioara, stanga si dreapta) la care se pot aplica proprietatile CSS mai sus enumerate, restul proprietatilor CSS (font, text, culoare, fundal) aplicandu-se continutului. Continutul poate include texte, liste, formulare sau imagini.

6.2. Latimea si inaltimea unui element

Latimea si inaltimea elementelor pot fi specificate cu ajutorul proprietatilor width si height. In mod prestabilit acestea sunt determinate in mod automat de catre navigator, fiind egale cu necesarul afisarii intregului continut.

selector { width:valoare; height:valoare; }

Pentru definirea latimii si inaltimii se folosesc urmatoarele:

o valoare de tip numeric;

un procent, care stabileste o valoare proportionala cu cea a elementului parinte;

valoarea auto, care foloseste latimea si inaltimea calculata de navigator, si care reprezinta cantitatea de spatiu maxim pe care o poate ocupa elementul pentru afisarea intregului continut.

6.3. Marginile unui element

Proprietatea margin permite stabilirea spatiului dintre element si alte elemente alaturate din fereastra prin specificarea unui numar de valori cuprins intre 1 si 4. Daca specificati cele 4 valori, ele sunt aplicate in urmatoarea ordine: sus, dreapta, jos, stanga. Daca specificati doar o valoare, aceasta va fi aplicata tuturor marginilor. Daca specificati doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa valorile marginilor opuse.

selector { margin:valoare/valori; }

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Pentru a introduce o valoare marginii se foloseste una din urmatoarele valori:

valoare de tip lungime (numerica) – defineste o margine fixa, care poate fi si negativa (pentru a suprapune continut);

valoare procentuala (procent) – defineste o margine proportionala cu latimea elementului parinte;

valoarea auto – lasa controlul marginilor la latitudinea navigatorului. Rezultatul depinde de fiecare browser.

Ex.:

margin:25px 70px 30px 100px; /* marginea de sus este 25px, marginea din dreapta este de 70px, marginea de jos este de 30px, marginea din stanga este de 100px */ margin:25px 70px 30px; /* marginea de sus este 25px, marginea din dreapta si cea din stanga sunt de 70px, marginea de jos este de 30px */ margin:25px 70px; /* marginea de sus si cea de jos sunt de 25px, marginea din dreapta si cea din stanga sunt de 70px */ margin:25px; /* toate marginile, sus, dreapta, jos, stanga, sunt de 25px */

Exista posibilitatea de a stabili valoarea marginii doar pentru o singura latura, fara a tine cont de celelalte margini. Pentru aceasta sunt folosite proprietatile margin-top, margin-bottom, margin-left si margin-right cu aceleasi valori ca si in cazul proprietatii margin (auto, lungime, procent).

Ex.:

selector { margin-top:valoare; } selector { margin-bottom:valoare; } selector { margin-left:valoare; } selector { margin-right:valoare; }

Daca proprietatea background-color este setata pentru un element, aceasta nu acopera si zona definita de margin.

Exemplul 6.1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>

Suport de curs: CSS

_______________________________________________________ ___________________________________________


<head> <title>Width si margin</title> <link rel="stylesheet" href="stil-6-1.css"> </head> <body> <div class="bottom_m"> ................ <p>Paragraf in cadrul diviziunii cu margin-bottom:10%.</p> ................ </div> <p>Acesta este un paragraf fara margini specificate.</p> <p class="top_m">Acesta este un paragraf cu <b>margine superioara de 50px</b>.</p> <p>Acesta este un paragraf fara margini specificate.</p> </body> </html>

stil-6-1.css

body{ background-color: #ffffc2; } div.bottom_m { width:500px; height:130px; margin-bottom:10%; background-color:teal; color:yellow; } p.top_m { margin-top:50px; }

6.4. Chenarul unui element

Cu ajutorul CSS pot fi configurate latimea (grosimea), stilul si culoarea chenarului. Aceste atribute ale chenarului unui element pot fi stabilite printr-o singura declaratie, sau individual. De asemenea, chenarul unui element poate fi stabilit pentru fiecare latura in parte, sau pentru toate cele 4 laturi deodata (sus, jos, stanga, dreapta).

6.4.1. Stabilirea simultana a atributelor chenarului Proprietatea border permite stabilirea simultana a atributelor chenarului pentru toate cele 4 laturi ale elementului.

selector { border:valoare/valori; }

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Proprietatea border este urmata de o lista de definitii a foii de stil, in ordinea:

border-width - reprezinta grosimea chenarului si poate fi una din urmatoarele:

- o valoare de tip lungime (valoarea 0 determina anularea afisarii chenarului);

- un cuvant cheie (thin, medium, sau thick) care caracterizeaza o dimensiune relativa.

border-style - reprezinta numele stilului atribuit chenarului (valoarea none anuleaza afisarea chenarului);

border-color - reprezinta culoarea, exprimata in cod hexa sau valoare RGB.

Nu este obligatoriu sa apara toate valorile de mai sus, doar cea care defineste stilul, care este o valoare obligatorie.

Exemplul 6.2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Border</title> <link rel="stylesheet" href="stil-6-2.css"> </head> <body> <div class="border1"> <p>Diviziune cu <b>border: 5px solid green;</b>.</p> <p>................</p> </div> </body> </html>

stil-6-2.css

body{ background-color: #ffffc2; } div.border1 { width:300px; height:100px; background-color:#fffaf5; color:teal; border:5px solid green; }

6.4.2. Stabilirea individuala a atributelor chenarului Atributele chenarului latimea (grosimea), stilul si culoarea pot fi stabilite individual astfel:

6.4.2.1. Latimea chenarului

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Atributul border-width furnizeaza o metoda rapida pentru stabilirea latimii celor patru laturi din jurul unui element / al unei casete.

selector { border-width:valoare; }

Daca precizati toate cele patru valori, ele sunt aplicate in ordinea: sus, dreapta, jos, stanga. Daca precizati doar o valoare, ea va fi aplicata tuturor marginilor. Daca folositi doua sau trei valori, valorile care lipsesc sunt copiate din valorile marginilor opuse lor in caseta.

6.4.2.2. Ornamentarea chenarului (aspectul)

Aspectul bordurii poate fi stabilit prin atributul border-style; stilul este aplicat tuturor celor patru margini si este definit astfel:

selector { border-style:valoare; }

Atributele proprietatii border-style sunt urmatoarele:

Valoare Aspect

none (nicio bordura)

dotted (linie punctata)

dashed (linie intrerupta)

solid (linie plina)

double (linie dubla)

groove (tridimensional brazdata)

ridge (tridimensional stil creasta)

inset (tridimensional inauntru)

outset (tridimensional in afara)

Ultimele patru valori sunt reprezentate tridimensional, iar in cazul in care ele nu sunt acceptate de catre navigator, in locul lor se va folosi valoarea solid (linie plina).

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Nota: Niciuna dintre proprietatile chenarului nu va avea efect daca nu este setata proprietatea border-style.

6.4.2.3. Culoarea chenarului

Atributul border-color stabileste culoarea pentru toate cele patru laturi ale chenarului si foloseste pentru valoarea ei un singur cuvant cheie exprimat in cod hexa sau valoare RGB sau numele culorii.

selector { border-color:valoare; }

Puteti stabili culoarea fiecarei margini si separat:

selector { border-color:#98bf21 #fa8072 #4682b4 #ba55d3; }

Nu este necesar sa includeti toate atributele individuale ale unui chenar. In cazul in care exista atribute omise, navigatorul va folosi valorile prestabilite ale acestora.

Exemplul 6.3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Border</title> <link rel="stylesheet" href="stil-6-3.css"> </head> <body> <div class="border1"> <p>Diviziune de clasa <b>border1</b>.</p> </div> <br> <div class="border2"> <p>Diviziune de clasa <b>border2</b>.</p> </div> <br> <p class="border3">Paragraf cu un chenar verde...</p> </body> </html>

stil-6-3.css

body{ background-color: #ffffc2; } div.border1 { width:300px; height:100px; background-color:#fffaf5; color:teal; border-width:5px; border-style:solid;

Suport de curs: CSS

_______________________________________________________ ___________________________________________


border-color:green; } div.border2{ width:300px; height:100px; background-color:#fffaf5; color:teal; border-width:thin; border-style:dotted; border-color:grey; } .border3{ border-width:10px; border-style:ridge; border-color:olive; /* border-color:#98bf21 #fa8072 #4682b4 #ba55d3; */ color: maroon; }

6.4.3. Stabilirea chenarului pentru o latura

Fiecare latura a chenarului poate avea valori configurate in mod independent (prin care se stabilesc stilul si culoarea fiecarei borduri din jurul elementului) dupa cum urmeaza:

selector { border-top:valori; } selector { border-bottom:valori; } selector { border-left:valori; } selector { border-right:valori; }

Exemplul 6.4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Border</title> <link rel="stylesheet" href="stil-6-4.css"> </head> <body> <div class="left_border"> <p>Diviziune de clasa <b>left_border</b>.</p> </div> <br> <div class="top_bottom_border"> <p>Diviziune de clasa <b>top_bottom_border</b>.</p> </div> <br> <p class="bottom_border">Paragraf cu border bottom.</p> </body>

Suport de curs: CSS

_______________________________________________________ ___________________________________________


</html> stil-6-4.css

body{ background-color: #ffffc2; } div.left_border{ width:300px; height:100px; background-color:#fffaf5; color:teal; border-left: 5px solid green; } .bottom_border{ border-bottom: 3px dotted olive; } div.top_bottom_border{ width:300px; height:100px; background-color:#fffaf5; color:teal; border-top: thin solid grey; border-bottom: thin solid grey; }

6.5 Linie exterioara pentru un element Cu ajutorul CSS putem adauga o linie in exteriorul unui element (in exteriorul bordurii elementului) pentru a scoate in evidenta elementul. Proprietatile liniei exterioare specifica stilul (outline-style), latimea (outline-width) si culoarea (outline-color) liniei exterioare. Ca si in cazul proprietatii border, proprietatile liniei exterioare pot fi definite printr-o declaratie unica, sau individual.

Proprietatea outline permite stabilirea simultana a atributelor liniei exterioare a unui element pentru toate limitele acestuia (sus, dreapta, jos, stanga).

selector { outline: valoare/valori; }

Proprietatea outline este urmata de o lista de definitii a foii de stil, in ordinea:

outline-color - reprezinta culoarea, exprimata in cod hexa sau valoare RGB;

outline-style - reprezinta numele stilului atribuit liniei exterioare: none, dotted, dashed, solid, double, groove, ridge, inset, outset (valoarea none anuleaza afisarea liniei exterioare);

outline-width - reprezinta grosimea liniei exterioare si poate fi una din urmatoarele:

Suport de curs: CSS

_______________________________________________________ ___________________________________________


- o valoare de tip lungime (valoarea 0 determina anularea afisarii chenarului);

- un cuvant cheie (thin, medium, sau thick) care caracterizeaza o dimensiune relativa.

Daca vreuna din valorile de mai sus lipseste, va fi inlocuita cu valoarea implicita (daca exista).

Exemplul 6.5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Outline</title> <link rel="stylesheet" href="stil-6-5.css"> </head> <body> <div class="outline1"> <p>Diviziune de clasa <b>outline1</b>.</p> </div> </body> </html>

stil-6-5.css

body{ background-color: #ffffc2; } div.outline1{ width:300px; height:100px; background-color:#fffaf5; color:teal; border: 3px solid green; outline: red dotted 5px; }

Proprietatile outline-color, outline-style si outline-width pot fi definite individual, ca si in cazul proprietatilor border-color, border-style si border-width.

6.6. Adaugarea umplerii in jurul elementului

Umplerea adauga o cantitate de spatiu suplimentar in jurul continutului elementului, dar in interiorul chenarului.

selector { padding: valoare/valori; }

Valoarea pentru completarea spatiului poate fi una din urmatoarele:

o valoare de tip lungime – defineste o valoare fixa (in pixeli, pt, em, etc.);

o valoare procentuala – creaza umplerea in raport cu latimea elementului parinte.

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Cand sunt specificate toate cele patru valori intr-o singura declaratie, ele sunt aplicate in ordinea: sus, dreapta, jos, stanga. Daca este specificata doar o valoare, aceasta va fi aplicata tuturor celor patru spatii. Daca sunt specificate doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa valorile laturilor opuse.

selector { padding: 20px 30px 40px 50px; }

Completarea spatiului pentru un element se poate face si pentru fiecare limita in parte a elementului, ca in exemplul urmator:

selector { padding-top: 20px; } selector { padding-right: 30px; } selector { padding-bottom: 40px; } selector { padding-left: 50px; }

Exemplul 6.6.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Padding</title> <link rel="stylesheet" href="stil-6-6.css"> </head> <body> <div class="padd_1"> ................ <p>Paragraf in cadrul diviziunii cu padding sus, dreapta, jos, stanga: 50px;</p> ................ </div> <br /> <div class="padd_2"> ................ <p>Paragraf in cadrul diviziunii cu padding: 10px 20px 40px 80px; (sus: 10px, dreapta: 20px, jos: 40px, stanga: 80px)</p> ................ </div> <br /> <div class="padd_3"> ................ <p>Paragraf in cadrul diviziunii cu padding-top:10px; padding-right:20px; padding-bottom:40px; padding-left:80px;</p> ................ </div> </body> </html>

stil-6-6.css

Suport de curs: CSS

_______________________________________________________ ___________________________________________


body{ background-color: #ffffc2; } div.padd_1 { width:500px; padding:50px; /* spatiu suplimentar in jurul continutul, dar in interiorul chenarului http://w3schools.com/css/css_boxmodel.asp */ background-color:teal; color:yellow; } div.padd_2 { width:500px; padding:10px 20px 40px 80px; background-color:teal; color:yellow; } div.padd_3 { width:500px; padding-top:10px; padding-right:20px; padding-bottom:40px; padding-left:80px; background-color:teal; color:yellow; }

6.7. Elemente flotante

CSS ofera posibilitatea ca elementele sa „pluteasca” / sa fie impinse catre stanga sau catre dreapta, permitand astfel sa se infasoare unele in jurul altora. Acest lucru este realizabil prin intermediul proprietatii float.

selector { float:valoare; }

Cele trei valori posibile sunt: left, right si none. Valoarea none permite elementului sa fie plasat acolo unde este posibil, iar celelalte valori forteaza plasarea elementului in stanga sau in dreapta (in limitele cadrului care il contine), textul urmand sa fie plasat in partea opusa, in jurul elementului.

Elementul care urmeaza dupa cel cu proprietatea float il va infasura / va curge in jurul acestuia. Elementul dinaintea celui cu proprietatea float nu va fi afectat.

Exemplul 6.7.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>

Suport de curs: CSS

_______________________________________________________ ___________________________________________


<head> <title>Float</title> <link rel="stylesheet" href="stil-6-7.css"> </head> <body> <div class="cadru1"> <p> <img src="imagini/html_css_icon.jpg" alt="html/css" width="66" height="59" /> Paragraf in care am adaugat o imagine pentru care este definita in CSS proprietatea <b>float: right</b>. Astfel, textul pluteste in stanga imaginii. </p> </div> </body> </html>

stil-6-7.css

body{ background-color: #ffffc2; } img { float:right; } .cadru1 { width:500px; height:80px; background-color:#fffaf5; color:#003399; }

6.8. Locul unde plutesc elementele

Asemanator cu atributul clear al etichetei HTML <BR> este si proprietatea clear. Cu ajutorul acestei proprietati se poate preciza daca sa fie sau ocupat un spatiu liber in jurul unui element cu proprietatea "float".

selector { clear:valoare; }

Valoarea proprietatii specifica latura in jurul careia este interzisa infasurarea textului. Poate lua una din valoarile: left, right sau both. Alternativ se poate folosi valoarea none, ceea ce are ca efect anularea altor atribute ale proprietatii clear. Proprietatea clear impiedica afisarea elementului afectat (cel caruia i se aplica) pana cand latura desemnata nu este eliberata de alte elemente flotante.

Exemplul 6.8.

Suport de curs: CSS

_______________________________________________________ ___________________________________________


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Clear</title> <link rel="stylesheet" href="stil-6-8.css"> </head> <body> <div class="cadru"> <img src="imagini/html_css_icon.jpg" alt="html/css" width="66" height="59"/> <p>Imaginea este pozitionata in dreapta conform <b>float: right;</b>. Paragraful este unul obisnuit care urmeaza dupa imagine in cod. Acesta este afisat pe pagina in stanga imaginii (in spatiul lasat liber de imaginea cu proprietatea <b>float:right;</b>).</p> </div> <br /> <div class="cadru"> <img src="imagini/html_css_icon.jpg" alt="html/css" width="66" height="59" /> <p class="prg">Imaginea este pozitionata in dreapta conform <b>float: right;</b>. Paragraful este unul de clasa <b>prg</b> si urmeaza dupa imagine in cod. Acesta este afisat pe pagina dupa imagine, datorita proprietatii <b>clear:both;</b> din clasa <b>prg</b>.</p> </div> </body> </html>

stil-6-8.css

body{ background-color: #f0e68c; } img { float:right; } .cadru { width:500px; height:150px; background-color:#fffaf5; color:#003399; } .prg { clear:both; }

Suport de curs: CSS

_______________________________________________________ ___________________________________________


6.9. Afisarea si ascunderea elementelor

Proprietatea display stabileste daca un element va include salturi la linie noua deasupra si dedesubtul sau, daca este inclus in linie, daca este tratat sub forma de lista sau daca este afisat sau nu.

selector { display:valoare; }

Definirea modului de afisare a elementului se face alegand una din urmatoarele optiuni:

list-item – plaseaza in prima linie a textului un indicator pentru articole de tip lista, dar si un salt deasupra si dedesubtul articolului;

block – defineste eticheta ca o eticheta la nivel de bloc si plaseaza un salt la linie noua deasupra si dedesubtul elementului;

inline – defineste eticheta ca o eticheta in linie si elimina caracterele de salt la linie noua;

none – determina ascunderea elementului si ignorarea lui de catre navigator; totusi acesta este incarcat insa continutul sau nu exista in pagina.

Proprietatea display nu trebuie confundata cu visibility (Cap. 8). Spre deosebire de visibility care lasa un spatiu pentru element, sintaxa display: none elimina complet elementul din pagina.

Exemplul 6.9.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Display</title> <link rel="stylesheet" href="stil-6-9.css"> </head> <body> <div id="wrapper"> <div class="lista"> <ul> <li>elem1</li> <li>elem2</li> <li>elem3</li> <li>elem4</li> <li>elem5</li> </ul> </div> <hr /> <p>A</p> <p class="elem_ascuns_1">B - Acesta este text ascuns</p> <p>C</p> <hr /> <p>D</p> <p class="elem_ascuns_2">E - Acesta este text ascuns</p> <p>F</p>

Suport de curs: CSS

_______________________________________________________ ___________________________________________


</div> </body> </html>

stil-6-9.css

body{ background-color: #f0e68c; } #wrapper{ margin-left:50px; } .lista ul{ background-color: #9ACD32; } .lista ul li { display:inline; } p.elem_ascuns_1 { display:none; /* ascunde elementul si nu genereaza rand liber / spatiu pentru el */ } p.elem_ascuns_2{ visibility:hidden; /* ascunde elementul, dar ocupa spatiul ca si cand ar exista pe pagina - Cap.7*/ }

Suport de curs: CSS

_______________________________________________________ ___________________________________________



Proprietate Valoare

width <length>

<percentage>

auto

height <length>

<percentage>

auto

margin <length>

<percentage>

auto

border <border-width>

<border-style>

<border-color>

border-width thin

medium

thick

border-style none

dotted

dashed

solid

double

groove

ridge

inset

outset

border-color <color>

border-top [border-width] [border-style] [border-color]

border-bottom [border-width] [border-style] [border-color]

border-left [border-width] [border-style] [border-color]

border-right [border-width] [border-style] [border-color]

outline < outline-color >

<outline-style>

< outline-width>

outline -color <color>

outline -width thin

medium

thick

padding <length>

<percentage>

padding-top <length>

Suport de curs: CSS

_______________________________________________________ ___________________________________________


<percentage>

padding-right <length>

<percentage>

padding-bottom <length>

<percentage>

padding-left <length>

<percentage>

float left

right

none

clear left

right

both

none

display list-item

block

inline

none

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Capitolul 7. CONTROALE DE POZITIONARE

Pozitionarea elementelor cu ajutorul CSS este mai precisa decat prin intermediul obiectelor grafice sau a tabelelor, afisarea facandu-se mult mai rapid. Prin intermediul CSS este permisa pozitionarea exacta sau relativa a elementelor intr-o fereastra sau in raport cu alte elemente. Fereastra navigatorului este suprafata in care sunt afisate toate elementele. Ea poate fi redimensionata sau pozitionata pe ecran, sau poate fi divizata in alte ferestre prin intermediul cadrelor. Fereastra navigatorului constituie cel mai important element in proiectarea paginii web, fiind parintele tuturor elementelor; are, de asemenea, doua caracteristici importante si anume: latimea, respectiv inaltimea. Toatele elementele amplasate in fereastra sunt pozitionate relativ la originea suprafetei ferestrei, care este coltul din stanga-sus.

7.1. Stabilirea tipului de pozitionare

La definirea atributelor unei etichete HTML in cadrul unui selector dintr-o foaie de stil, prin utilizarea proprietatii position se poate specifica pozitia elementului in pagina web. Un element poate avea una din cele patru valori de pozitionare: static, relative, absolut si fixed. Tipul de pozitie indica navigatorului cum sa trateze amplasarea unui element intr-o fereastra.

7.1.1. Pozitionarea statica

Implicit, elementele sunt pozitionate static in fereastra, cu exceptia cazurilor in care este specificata o pozitionare relativa, absoluta sau fixa; ele sunt dispuse unul dupa altul in interiorul documentului.

selector { position:static; }

Un element static nu poate fi pozitionat sau repozitionat in mod explicit.

7.1.2. Pozitionarea relativa

Un element cu pozitionare relativa este amplasat la locul sau in cadrul ferestrei sau a elementului parinte, in sensul ca el apare dupa toate elementele dinaintea sa, respectiv inaintea tuturor elementelor amplasate dupa el.

selector { position:relative; }

Elementele pozitionate relativ pot fi mutate din locatia lor folosind proprietatile top si left.

Suport de curs: CSS

_______________________________________________________ ___________________________________________


7.1.3. Pozitionarea absoluta

Pozitionarea absoluta are ca efect crearea unui element independent de restul documentului, plasat in fereastra intr-o locatie precisa definita prin intermediul coordonatelor x si y.

selector { position:absolute; }

Originea (punctul de coordonate 0,0) o reprezinta coltul din stanga-sus al ferestrei sau al obiectului in care este inclus elementul pozitionat absolut.

7.1.4. Pozitionarea fixa

Marea majoritate a navigatoarelor nu recunosc valoarea fixed; astfel, in mod prestabilit ele vor folosi tipul static pentru a pozitiona elementele. Pozitionarea fixa a unui element este aproximativ la fel cu cea absoluta, cu diferenta ca la derularea paginii elementul fixat ramane pe pozitia lui initiala, fara a se derula.

selector { position:fixed; }

7.2. Stabilirea pozitiei in raport cu latura sus, respectiv stanga

Dupa stabilirea tipului de pozitionare, se poate determina distanta intre punctul de origine si laturile de sus, respectiv stanga ale elementului sau parinte, utilizand proprietatile top si left.

selector { top:valoare; left:valoare; }

Distanta fata de laturi poate lua:

o valoare de tip numeric, care defineste distanta intre laturile ferestrei sau a elementului parinte si laturile elementului;

o valoare procentuala, care semnifica deplasarea fata de laturile ferestrei sau a elementului parinte;

valoarea auto, care permite navigatorului sa calculeze valoarea. Proprietatile top si left pot sa nu fie incluse simultan intr-o regula; ele pot lua si valori negative; nu sunt proprietati mostenite, insa in cazul in care este vorba despre elemente imbricate, acestea vor fi deplasate solidar cu elementul parinte.

7.3. Stabilirea pozitiei in raport cu latura jos, respectiv dreapta

Uneori este utila si pozitionarea in raport cu laturile de jos, respectiv dreapta. In acest caz originea va fi coltul din dreapta-jos (si nu cel din stanga-sus) al ferestrei sau al elementului parinte.

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Definirea marginilor fata de latura de jos, respectiv din dreapta se realizeaza cu ajutorul proprietatilor bottom si right; ele pot lua aceleasi valori ca si left si top si de asemenea pot fi combinate cu acestea.

selector { bottom:valoare; right:valoare; }

In cazul in care pentru acelasi element sunt stabilite atat marginile top / left cat si bottom / right, rezultatul afisat depinde de navigator, dar in mod prestabilit se folosesc pozitiile top si left.

Exemplul 7.1.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Position</title> <link rel="stylesheet" href="stil-7-1.css"> </head> <body> <div id="wrapper"> <p>text</p> <p>text</p> <p class="pos_relative_left">text</p> <p class="pos_relative_right">text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p class="pos_absolute">text cu proprietatea <b>position:absolute;</b></p> <p class="pos_fixed">text cu proprietatea <b>position:fixed;</b></p> </div> </body> </html>

stil-7-1.css

body{ margin-top:0px; }

Suport de curs: CSS

_______________________________________________________ ___________________________________________


#wrapper{ margin-left:50px; } /*in mod implicit elementele sunt pozitionate static */ p.pos_relative_left{ position:relative; /* elementul cu aceasta proprietate este pozitionat relativ la pozitia sa normala */ left:-30px; } p.pos_relative_right{ position:relative; /* elementul cu aceasta proprietate este pozitionat relativ la pozitia sa normala */ left:30px; } p.pos_absolute { position:absolute; /* elementul cu aceasta proprietate este pozitionat relativ la ferestra browserului*/ top:50px; right:200px; } p.pos_fixed { position:fixed; /* proprietatea este asemanatoare cu pozitionarea absolute, diferenta fiind ca elementul cu proprietatea fixed ramane fix la derularea continutului ferestrei */ /* IE afiseaza elementele cu acesta proprietate doar daca !DOCTYPE e specificat */ top:70px; right:200px; }

7.4. Stabilirea pozitiei in spatiul 3D

Cu toate ca ecranul este o suprafata bidimensionala, elementele pot primi o a treia dimensiune, si anume amplasarea lor in stiva, unele in raport cu altele. Amplasarea se face in mod automat, incepand cu valoarea 0 si continuand prin incrementare cu pas 1 in ordinea aparitiei lor in documentul HTML si relativ la elementele parinte. Acest sistem se numeste index z, valoarea proprietatii z-index pentru un element fiind relatia tridimensionala a elementului in raport cu alte elemente din fereastra.

selector { z-index:valoare; }

In cazul in care continutul elementelor se suprapune, elementul cu numarul de ordine mai mare apare deasupra elementului cu numar mai mic.

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Index z poate lua ca valori numere intregi pozitive, 0 sau negative. Utilizarea unei valori negative determina amplasarea elementului dedesubtul parintelui sau cu atatea nivele cu cate indica indexul z.

Exemplul 7.2.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Position 3D</title> <link rel="stylesheet" href="stil-7-2.css"> </head> <body> <div id="wrapper"> <img src="imagini/next.png" width="128" height="128" /> <p>Imaginea "next.png" pentru care z-index este -1 va fi afisata in spatele textului, iar diviziunea cu background galben (de clasa <b>d1</b>), cu z-index -2, va fi afisata atat in spatele textului, cat si in spatele imaginii.</p> <div class="d1"></div> </div> </body> </html>

stil-7-2.css

body{ margin-top:0px; } #wrapper{ /* controleaza pozitionarea continutului text in acest exemplu */ margin-left:25px; margin-top:54px; } img { position:absolute; left:0px; top:0px; z-index:-1; } .d1{ position:absolute; left:0px; top:0px; width:200px; height:200px; background-color:yellow;

Suport de curs: CSS

_______________________________________________________ ___________________________________________


z-index:-2; }

7.5. Imbricarea unui element absolut intr-un element relativ

Un element poate fi pozitionat exact in cadrul unei ferestre. De asemenea, el poate fi imbricat intr-un element cu pozitionare relativa. In cazul imbricarii, elementul absolut este pozitionat relativ la coltul din stanga-sus al elementului relativ.

...

.clsElRel {position: relative; top: 50px; left: 100px; }

.clsElAbs {position: absolute; top: 25px; left: 0px; }

... <div class=”clsElRel”> ... <div class=”clsElAbs”> ... </div> ... </div> ...

Configurarea unui element cu pozitionare absoluta in interiorul unui element cu pozitionare relativa se realizeaza prin:

crearea unei clase cu pozitionare relativa;

crearea unei clase cu pozitionare absoluta;

stabilirea clasei cu pozitionare relativa pentru elementul parinte;

stabilirea clasei cu pozitionare absoluta pentru elementul copil imbricat in elementul parinte.

Exemplul 7.3.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale de pozitionare: imbricarea elementelor absolute si relative</title> <link rel="stylesheet" href="stil-7-3.css"> </head> <body> <div class="clsElRel"> <div class="clsElAbs">text text text</div> </div> </body> </html>

stil-7-3.css

body{ margin-top:0px;

Suport de curs: CSS

_______________________________________________________ ___________________________________________


} .clsElRel {position: relative; top: 30px; left: 100px; background-color:green;} .clsElAbs {position: absolute; top: 25px; left: 0px; background-color:yellow;}

7.6. Imbricarea unui element relativ intr-un element absolut

Cand un element pozitionat absolut este imbricat intr-un element pozitionat relativ, primul foloseste ca origine coltul din stanga-sus al parintelui sau. In cazul in care un element pozitionat relativ este plasat in interiorul unui element pozitionat absolut, acesta se va deplasa o data cu elementul absolut.

...

.clsElAbs {position: absolute; top: 50px; left: 10px; }

.clsElRel {position: relative; left: 40px; }

... <div class=”clsElAbs”> ... <div class=”clsElRel”> ... </div> </div> ...

Exemplul 7.4.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale de pozitionare: imbricarea elementelor absolute si relative</title> <link rel="stylesheet" href="stil-7-3.css"> </head> <body> <div class="clsElAbs"> <div class="clsElRel">text text text</div> </div> </body> </html>

stil-7-3.css

body{ margin-top:0px; } .clsElRel {position: relative; top: 30px; left: 100px; background-color:green;} .clsElAbs {position: absolute; top: 25px; left: 0px; background-color:yellow;}

Suport de curs: CSS

_______________________________________________________ ___________________________________________



Proprietate Valoare

position static

relative

absolute

fixed

top si left <length>

<percentage>

auto

bottom si right <length>

<percentage>

auto

z-index <number>

auto

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Capitolul 8. CONTROALE DE VIZIBILITATE O caracteristica importanta a CSS o constituie posibilitatea de a afisa sau ascunde unele elemente sau parti ale unor elemente.

8.1. Stabilirea vizibilitatii unui element

Proprietatea visibility indica faptul ca un element este vizibil sau nu. Chiar daca elementul este invizibil, el ocupa un spatiu liber in document, acolo unde ar fi trebuit sa se gaseasca.

selector { visibility:valoare;}

Exista trei posibilitati de a specifica modul de tratare a vizibilitatii unui element:

hidden – ascunde elementul de la afisarea pe ecran;

visible – afiseaza elementul;

inherit – vizibilitatea elementului este mostenita de la elementul parinte.

.ascuns { visibility:hidden; }

Exemplul 8.1.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Visibility</title> <link rel="stylesheet" href="stil-8-1.css"> </head> <body> <div id="wrapper"> <p>Controale de vizibilitate</p> <p class="ascuns">Text ascuns</p> <p class="vizibil">Text vizibil</p> <p class="vizibil">Text cu proprietatea de vizibilitate <span class="ascuns"><span class="viz_mostenita">mostenita</span></span> !</p> </div> </body> </html>

stil-8-1.css

body{ margin-top:0px; } #wrapper{ margin-left:50px;

Suport de curs: CSS

_______________________________________________________ ___________________________________________


} .ascuns{ visibility:hidden; /* Spatiul pentru elementele ascunse ramane ocupat */ } .vizibil{ visibility:visible; } .viz_mostenita{ visibility:inherit; }

8.2. Stabilirea suprafetei vizibile a unui element

Stabilirea suprafetei vizibile a unui element reprezinta portiunea din elementul respectiv care este vizibila in fereastra navigatorului. Restul continutului acelui element nu dispare, ci este invizibil pentru vizitator. Pentru a defini forma regiunii vizibile se foloseste proprietatea clip cu valoarea rect (definita prin patru valori separate prin spatii si incadrate de paranteze rotunde)

selector {clip:rect(val1 val2 val3 val4); }

Valorile definesc distanta dintre coltul din stanga-sus al elementului si laturile de sus, dreapta, jos si stanga ale regiunii vizibile.

.partial { clip: rect(25 200 100 50); }

Daca se foloseste valoarea auto, navigatorul calculeaza automat dimensiunea regiunii vizibile la 100%. Regiunile de vizibilitate pot avea doar forma dreptunghiulara.

Exemplul 8.2.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale de vizibilitate</title> <link rel="stylesheet" href="stil-8-2.css"> </head> <body> <img src="imagini/next.png" width="128" height="128" /> </body> </html>

stil-8-2.css

body{ margin-top:0px; }

Suport de curs: CSS

_______________________________________________________ ___________________________________________


img { position:absolute; clip:rect(0px,80px,200px,10px); }

8.3. Stabilirea pozitiei depasirii

Elementele nu sunt intotdeauna continute in casetele lor. Uneori caseta nu este suficient de mare, astfel ca o parte a continutului nu este afisata. Proprietatea overflow permite specificarea modului de tratare a continutului „in exces”, controland astfel suprafata din afara casetei.

selector { overflow:valoare; }

Pentru a determina unde va fi plasata depasirea se foloseste una din valorile:

visible – extinde caseta elementului astfel incat sa incapa continutul sau, ignorand delimitarea suprafetei vizibile. Este optiunea implicita.

hidden – ascunde continutul care nu incape in caseta elementului, si impiedica aparitia barei de derulare;

scroll – adauga intotdeauna bare de derulare elementului, pentru ca vizitatorul sa poata accesa tot continutul elementului;

auto – barele de derulare apar doar atunci cand este necesar.

.supradim { overflow:scroll; }

Exemplul 8.3.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale de vizibilitate</title> <link rel="stylesheet" href="stil-8-3.css"> </head> <body> <div id="wrapper"> <p><b>overflow:scroll</b></p> <div class="derulare">Proprietatea overflow stabileste modul de afisare a continutului atunci cand acesta depaseste suprafata casetei din care face parte.</div> <p><b>overflow:hidden</b></p> <div class="fara_derulare">Proprietatea overflow stabileste modul de afisare a continutului atunci cand acesta depaseste suprafata casetei din care face parte.</div> <p><b>overflow:auto</b></p> <div class="derulare_auto">Proprietatea overflow stabileste modul de afisare a continutului

Suport de curs: CSS

_______________________________________________________ ___________________________________________


atunci cand acesta depaseste suprafata casetei din care face parte.</div> <p><b>overflow:visible</b></p> <div class="continut_vizibil">Proprietatea overflow stabileste modul de afisare a continutului atunci cand acesta depaseste suprafata casetei din care face parte.</div> </div> </body> </html>

stil-8-3.css

body{ margin-top:20px; } #wrapper{ margin-left:50px; } div.derulare { background-color:#b0c4de; border:1px solid green; width:150px; height:100px; overflow:scroll; } div.fara_derulare { background-color:#b0c4de; border:1px solid green; width:150px; height:100px; overflow:hidden; } div.derulare_auto { background-color:#b0c4de; border:1px solid green; width:150px; height:100px; overflow:auto; } div.continut_vizibil { background-color:#b0c4de; border:1px solid green;

Suport de curs: CSS

_______________________________________________________ ___________________________________________


width:150px; height:100px; overflow:visible; }

Suport de curs: CSS

_______________________________________________________ ___________________________________________



Proprietate Valoare

visibility hidden

visible

inherit

clip rect (<top>, <right>, <bottom>, <left>)

auto

overflow scroll

hidden

visible

inherit

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Capitolul 9. CONTROALE PENTRU MOUSE

In mod normal, aspectul indicatorului de mouse este determinat de navigator. Navigatorul modifica indicatorul de mouse in functie de continutul curent deasupra caruia se afla acesta la un moment dat.

9.1. Aspectul indicatorului de mouse

Uneori este utila anularea sau completarea preferintelor navigatorului si configurarea unor aspecte personalizate. Stabilirea aspectului unui indicator de mouse se realizeaza cu ajutorul proprietatii cursor, sintaxa fiind urmatoarea:

selector { cursor:valoare; }

Numele posibile pentru indicatoarele de mouse sunt:

Nume Aspect

crosshair + hand

pointer

move n-resize ne-resize e-resize se-resize

s-resize

sw-resize

w-resize

nw-resize

text ][ wait help

In cazul folosirii valorii auto, navigatorul decide asupra tipului de indicator folosit.

Exemplul 9.1.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Controale pentru mouse</title> <link rel="stylesheet" href="stil-9-1.css"> </head> <body>

Suport de curs: CSS

_______________________________________________________ ___________________________________________


<div id="wrapper"> <h3>Controale pentru mouse:</h3> <p> <span style="cursor:auto">auto</span><br /> <span style="cursor:crosshair">crosshair</span><br /> <span style="cursor:default">default</span><br /> <span style="cursor:e-resize">e-resize</span><br /> <span style="cursor:help">help</span><br /> <span style="cursor:move">move</span><br /> <span style="cursor:n-resize">n-resize</span><br /> <span style="cursor:ne-resize">ne-resize</span><br /> <span style="cursor:nw-resize">nw-resize</span><br /> <span style="cursor:pointer">pointer</span><br /> <span style="cursor:progress">progress</span><br /> <span style="cursor:s-resize">s-resize</span><br /> <span style="cursor:se-resize">se-resize</span><br /> <span style="cursor:sw-resize">sw-resize</span><br /> <span style="cursor:text">text</span><br /> <span style="cursor:w-resize">w-resize</span><br /> <span style="cursor:wait">wait</span><br /> </p> </div> </body> </html>

stil-9-1.css

body{ margin-top:20px; } #wrapper{ margin-left:50px; } p{ line-height:150%; }

Suport de curs: CSS

_______________________________________________________ ___________________________________________



Proprietate Valoare

cursor <cursor name>

<URL>

auto

none

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Capitolul 10. CSS3

CSS3 impreuna cu HTML5 raspund nevoii de optimizare si eficienta a design-ului web. Conceptia dezvoltatorilor s-a schimbat odata cu aparitia HTML5 si CSS3, intrucat s-a imbunatatit extrem de mult procesarea imaginilor direct din codul HTML/CSS si se pot reduce simtitot costurile de productie si mentinere a paginilor web, spre deosebire de paginile HTML mai vechi. Rezultatele imediate pentru vizitatori si pentru dezvoltatori constau in reducerea lungimii de banda necesara si a spatiului pe hard disk. Printre functiile noi oferite, se numara cele care permit crearea de: umbre, colturi rotunjite, coloane, gradiente, reflectii, fundaluri, rotiri, scalari, etc. CSS3 nu este inca un standard W3C, iar ceea ce se prezinta in continuare urmareste introducerea in noua tehnologie. Suportul browserelor importante pentru CSS3 este inca deficitar. Pentru ca unele proprietati sa aiba efect in anumite browsere, la sintaxa lor obisnuita se adauga un prefix, precum:

-moz- pentru Mozilla Firefox -webkit- pentru Google Chrome si Safari

10.1. Border

Cu CSS3 se pot crea borduri rotunjite, se pot adauga umbre si se pot folosi imagini ca si borduri, fara a utiliza programe de design (precum Photoshop). Etichetele CSS3 care definesc proprietati ale bordurii unui element sunt:

- border-radius – pentru colturi rotunjite la bordura unui element;

- box-shadow – pentru a adauga umbra la bordura unui element;

- border-image – se foloseste o imagine pentru a crea bordura pentru un element. Suportul in browsere nu este asigurat in totalitate.

Exemplul 10.1a.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS3: border-radius</title> <link rel="stylesheet" href="stil-10-1a.css"> </head> <body> <div>Proprietatea <b>border-radius</b> permite rotunjirea colturilor bordurii unui element.</div> </body> </html>

stil-10-1a.css

body{

Suport de curs: CSS

_______________________________________________________ ___________________________________________


margin-top:20px; } div { border:2px solid #6b8e23; padding:10px 40px; background-color:#fffacd; width:300px; border-radius:20px; -moz-border-radius:20px; /* pentru Mozilla Firefox */ }

Exemplul 10.1b.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS3: border-shadow</title> <link rel="stylesheet" href="stil-10-1b.css"> </head> <body> <div class="div1">Proprietatea <b>border-shadow</b> permite adaugarea unei umbre la bordura unui element.</div> <br> <div class="div2">Proprietatea <b>border-shadow</b> permite adaugarea unei umbre la bordura unui element si poate fi combinata cu alte proprietati ale bordurii.</div> </body> </html>

stil-10-1b.css

body{ margin-top:20px; } .div1 { width:300px; padding:10px 40px; background-color:#fffafa; border: 1px solid #808080; box-shadow: 10px 10px 5px #888888; -moz-box-shadow: 10px 10px 5px #888888; /* pentru Firefox */ -webkit-box-shadow: 10px 10px 5px #888888; /* pentru Safari si Chrome */ } .div2 {

Suport de curs: CSS

_______________________________________________________ ___________________________________________


width:300px; padding:10px 40px; background-color:#fffafa; border: 1px solid #808080; box-shadow: 10px 10px 5px #888888; -moz-box-shadow: 10px 10px 5px #888888; /* pentru Firefox */ -webkit-box-shadow: 10px 10px 5px #888888; /* pentru Safari si Chrome */ border-radius:20px; -moz-border-radius:20px; /* pentru Mozilla Firefox */ }

Exemplul 10.1c.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS3: border-image</title> <link rel="stylesheet" href="stil-10-1c.css"> </head> <body> <p>Proprietatea border-image specifica o imagine pentru a fi utilizata ca si bordura.</p> <p><b>Exemplul 1:</b></p> <div id="round">In acest exemplu imaginea este repetata pentru a acoperi zona de bordura.</div> <br /> <div id="stretch">In acest exemplu imaginea este intinsa pentru a acoperi zona de bordura.</div> <p>Imaginea folosita este:</p> <img src="imagini/border.png" /> <p> </p> <p><b>Exemplul 2:</b></p> <div id="round1">In acest exemplu imaginea este repetata pentru a acoperi zona de bordura.</div> <br /> <div id="stretch1">In acest exemplu imaginea este intinsa pentru a acoperi zona de bordura.</div> <p>Imaginea folosita este:</p> <img src="imagini/border1.png" /> </body> </html>

stil-10-1c.css

body{ margin-top:20px; } div {

Suport de curs: CSS

_______________________________________________________ ___________________________________________


border-width:15px; width:250px; padding:10px 20px; } #round { -moz-border-image:url(imagini/border.png) 30 30 round; /* Firefox */ -webkit-border-image:url(imagini/border.png) 30 30 round; /* Safari si Chrome */ border-image:url(imagini/border.png) 30 30 round; } #stretch { -moz-border-image:url(imagini/border.png) 30 30 stretch; /* Firefox */ -webkit-border-image:url(imagini/border.png) 30 30 stretch; /* Safari si Chrome */ border-image:url(imagini/border.png) 30 30 stretch; } #round1 { -moz-border-image:url(imagini/border1.png) 30 30 round; /* Firefox */ -webkit-border-image:url(imagini/border1.png) 30 30 round; /* Safari si Chrome */ border-image:url(imagini/border1.png) 30 30 round; } #stretch1 { -moz-border-image:url(imagini/border1.png) 30 30 stretch; /* Firefox */ -webkit-border-image:url(imagini/border1.png) 30 30 stretch; /* Safari si Chrome */ border-image:url(imagini/border1.png) 30 30 stretch; }

10.2. Background

CSS3 contine o serie de proprietati pentru background, care permit un control mai bun al acestuia. Proprietatile sunt:

- background-size – specifica dimensiunea imaginii de fundal; inainte de CSS3 dimensiunea imaginii de fundal era dimensiunea reala a imaginii si era determinata in mod automat de browser; in CSS3 este posibil sa specificam – in pixeli sau procentual - dimensiunea imaginii de fundal, fapt care ne permite sa reutilizam aceeasi imagine in mai multe feluri;

- background-origin – specifica zona de pozitionare a imagnii de fundal; valori posibile: content-box, padding-box si border-box area

- background-clip – specifica zona vizibila din imaginea de fundal; valori posibile: content-box, padding-box si border-box area;

- utilizarea mai multor imagini de fundal deodata.

Exemplul 10.2a.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Suport de curs: CSS

_______________________________________________________ ___________________________________________


<html> <head> <title>CSS3: background-size</title> <link rel="stylesheet" href="stil-10-2a.css"> </head> <body> <p>Exemplul curent foloseste pentru background o imagine la alte dimensiuni fata de cele reale ale acesteia. Imaginea la dimensiunile ei reale arata ca mai jos:<br /> <img src="imagini/im1.gif" width="580" height="222" alt="background" /><p> </body> </html>

stil-10-2a.css

body { background:url(imagini/im1.gif); -moz-background-size:200px 77px; /* Firefox */ background-size:200px 77px; background-repeat:no-repeat; padding-top:100px; }

Exemplul 10.2b.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS3: background-origin</title> <link rel="stylesheet" href="stil-10-2b.css"> </head> <body> <p><b>Nota:</b> Firefox nu suporta proprietatea background-origin.</p> <p><b>background-origin:border-box;</b></p> <div id="div1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div><br /> <p><b>background-origin:padding-box;</b></p> <div id="div2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div><vr /> <p><b>background-origin:content-box;</b></p> <div id="div3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo

Suport de curs: CSS

_______________________________________________________ ___________________________________________


consequat.</div><br /> </body> </html>

stil-10-2b.css

div { padding:50px; border:20px solid black; background:url(imagini/im1.gif); background-repeat:no-repeat; background-size:100% 100%; } #div1 { background-origin:border-box; } #div2 { background-origin:padding-box; } #div3 { background-origin:content-box; }

Exemplul 10.2c.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS3: background-clip</title> <link rel="stylesheet" href="stil-10-2c.css"> </head> <body> <p><b>Nota:</b> Safari suporta proprietatea <i>-webkit-background-clip</i>.</p> <p><b>Nota:</b> Mozilla nu suporta proprietatea <i>-background-clip</i>.</p> <div class="zona_vizibila_bg">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div> </body> </html>

stil-10-2c.css

.zona_vizibila_bg { width: 300px;

Suport de curs: CSS

_______________________________________________________ ___________________________________________


height: 300px; padding: 50px; background:url(imagini/im1.gif); background-repeat: no-repeat; background-size: 100% 100%; background-clip: content-box; -webkit-background-clip: content-box; /* Safari si Chrome */ border:10px solid black; }

Exemplul 10.2d.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS3: background - imagini multiple</title> <link rel="stylesheet" href="stil-10-2d.css"> </head> <body> <p>CSS3 permite folosirea simultana a mai multor imagini ca si imagini de fundal.</p> </body> </html>

stil-10-2d.css

body { padding-top:250px; background-image:url("imagini/im2.png"),url("imagini/im1.gif"); background-repeat:no-repeat; }

10.3. Setarea nivelului de transparenta / opacitate

CSS3 permite setarea nivelului de transprenta / opacitate a unui element prin intermediul proprietatii opacity. Valorile pe care le poate lua aceasta proprietate sunt cuprinse intre: 0.0 (transparenta totala) si 1.0 (opacitate totala). Proprietatea opacity mai poate lua valoarea inherit, caz in care nivelul de opacitate este mostenit de la elementul parinte.

Exemplul 10.3.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS3: opacity</title> <link rel="stylesheet" href="stil-10-3.css">

Suport de curs: CSS

_______________________________________________________ ___________________________________________


</head> <body> <div id="div1">Diviziunea curenta are opacitate 0.5. <br />Atat background-ul cat si textul sunt afectate de nivelul de opacitate. </div> <br /> <div id="div2">Diviziunea curenta are opacitate 0.4.</div> </body> </html>

stil-10-3.css

#div1 { background-color:red; opacity:0.5; filter:Alpha(opacity=50); /* IE 8 sau anterior */ } #div2 { background-color:green; color:white; opacity:0.4; filter:Alpha(opacity=40); /* IE 8 sau anterior */ }

10.4. Efecte pentru text

10.4.1 Efectul de umbra pentru text In CSS3 proprietatea text-shadow adauga umbra la continutul text. In cadrul acestei proprietati se specifica: umbra orizontala, umbra verticala, distanta de estompare si culoarea umbrei.

Exemplul 10.4.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS3: text-shadow</title> <link rel="stylesheet" href="stil-10-4.css"> </head> <body> <h1>Heading-ul curent are proprietatea text-shadow setata astfel: <i>text-shadow: 5px 5px 7px #778899;</i>.</h1> <p><b>Nota:<b> Internet Explorer nu suporta proprietatea <i>text-shadow</i></p> </body> </html>

stil-10-4.css

h1 {

Suport de curs: CSS

_______________________________________________________ ___________________________________________


text-shadow: 5px 5px 7px #778899; }

Daca un cuvant are dimensiuni mai mari decat ale cadrului care il contine, acesta va depasi respectivul cadru. CSS3 ofera pentru text si proprietatea word-wrap, care permite fortarea incadrarii/ infasurarii textului, chiar daca asta inseamna ruperea unui cuvant in doua. La momentul actual niciunul dintre browserele importante nu suporta acesta proprietate.

10.5. Transformari 2D si 3D

Cu proprietatea CSS3 transform putem muta, scala, intoarce, roti si intinde elemente. Proprietatea transform permite elementului sa-si schimbe forma, dimensiunea si pozitia. Elementele se poat transforma folosind transformarea 2D sau 3D. 10.5.1. Transformari 2D Metodele cu ajutorul carora se realizeaza tranformarile 2D sunt:

translate() - tanslateaza elementul in functie de coordonatele stanga (axa X) sus (axa Y);

rotate() – elementul se roteste in sensul acelor de ceasornic dupa un numar de grade dat; sunt permise si valorile negative si au ca efect rotirea elementului in sens invers acelor de ceasornic;

scale() – elementul isi mareste sau micsoreaza dimensiunea in functie de parametrii lungime (axa X) si inaltime (axa Y);

skew() – elementul se intoarce/inclina dupa un unghi dat (un numar de grade), in functie de parametrii dati pentru linia orizontala (axa X) si cea verticala (axa Y);

matrix() – combina toate transformarile 2D de mai sus intr-una singura; are 6 parametri care permit: rotirea, scalarea, translatarea si inclinarea elementelor.

Exemplul 10.5a.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS3: 2D transform</title> <link rel="stylesheet" href="stil-10-5a.css"> </head> <body> <p><b>Nota:</b> Internet Explorer nu suporta proprietatea transform.</p> <p><b>translate(50px,30px)</b> muta elementul 50px de la stanga la dreapta si 30px de sus in jos, raportat la pozitia lui curenta.</p> <div>Diviziune exemplu</div> <div id="translatare">Diviziune translatata (50px, 30px)</div> </body> </html>

stil-10-5a.css

Suport de curs: CSS

_______________________________________________________ ___________________________________________


div { width:100px; height:70px; background-color:#98FB98; border:1px solid black; } div#translatare { transform:translate(50px,30px); -moz-transform:translate(50px,30px); /* Firefox */ -webkit-transform:translate(50px,30px); /* Safari si Chrome */ -o-transform:translate(50px,30px); /* Opera */ }

Exemplul 10.5b.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS3: 2D transform</title> <link rel="stylesheet" href="stil-10-5b.css"> </head> <body> <p><b>Nota:</b> Internet Explorer nu suporta proprietatea transform.</p> <p> </p> <div>Diviziune exemplu</div> <p> </p> <div id="rot1">Rotire cu +30 de grade</div> <p> </p><p> </p><p> </p> <div id="rot2">Rotire cu -30 de grade</div> </body> </html>

stil-10-5b.css

div { width:200px; height:100px; background-color:#FFC0CB; } div#rot1 { width:200px; height:100px; background-color:#FFC0CB; transform:rotate(30deg); -moz-transform:rotate(30deg); /* Firefox */ -webkit-transform:rotate(30deg); /* Safari si Chrome */ -o-transform:rotate(30deg); /* Opera */ }

Suport de curs: CSS

_______________________________________________________ ___________________________________________


div#rot2 { width:200px; height:100px; background-color:#FFC0CB; transform:rotate(-30deg); -moz-transform:rotate(-30deg); /* Firefox */ -webkit-transform:rotate(-30deg); /* Safari si Chrome */ -o-transform:rotate(-30deg); /* Opera */ }

Exemplul 10.5c.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS3: 2D transform</title> <link rel="stylesheet" href="stil-10-5c.css"> </head> <body> <p><b>Nota:</b> Internet Explorer nu suporta proprietatea transform.</p> <p><b>scale(2,4)</b> mareste de doua ori latimea si de 4 ori inaltimea elementului div.</p> <div>Diviziune exemplu</div> <div id="scalare">Diviziune scalata</div> </body> </html>

stil-10-5c.css

div { width:100px; height:50px; background-color:#98FB98; border:1px solid black; } div#scalare { margin:100px; transform:scale(2,4); -moz-transform:scale(2,4); /* Firefox */ -webkit-transform:scale(2,4); /* Safari si Chrome */ -o-transform:scale(2,4); /* Opera */ }

Exemplul 10.5d.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS3: 2D transform</title>

Suport de curs: CSS

_______________________________________________________ ___________________________________________


<link rel="stylesheet" href="stil-10-5d.css"> </head> <body> <p><b>Nota:</b> Internet Explorer nu suporta proprietatea transform.</p> <p><b>skew(30deg,20deg)</b> inclina elementul la 30 de grade in jurul axei X si la 20 de grade in jurul axei Y.</p> <div>Diviziune exemplu</div> <div id="transf1">Diviziune inclinata.</div> </body> </html>

stil-10-5d.css

div { width:100px; height:50px; background-color:#98FB98; border:1px solid black; } div#transf1 { transform:skew(30deg,20deg); -moz-transform:skew(30deg,20deg); /* Firefox */ -webkit-transform:skew(30deg,20deg); /* Safari si Chrome */ -o-transform:skew(30deg,20deg); /* Opera */ }

Exemplul 10.5e.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS3: 2D transform</title> <link rel="stylesheet" href="stil-10-5e.css"> </head> <body> <p><b>Nota:</b> Internet Explorer nu suporta proprietatea transform.</p> <p>Rotirea elemntului DIV la 30 grade utilizand metoda <b>matrix()</b></p> <div>Diviziune exemplu</div> <div id="matrice">Diviziune inclinata.</div> </body> </html>

stil-10-5e.css

div { width:100px; height:75px; background-color:#98FB98; border:1px solid black; }

Suport de curs: CSS

_______________________________________________________ ___________________________________________


div#matrice { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari si Chrome */ -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */ }

10.5.2. Transformari 3D Metodele cu ajutorul carora se realizeaza tranformarile 3D sunt:

rotateX() – elementul se roteste in jurul axei X dupa un unghi dat (numar de grade);

rotateY() – elementul se roteste in jurul axei Y dupa un unghi dat (numar de grade).

Exemplul 10.5f.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS3: 3D transform</title> <link rel="stylesheet" href="stil-10-5f.css"> </head> <body> <p><b>Nota:</b> Internet Explorer, Firefox si Opera nu suporta metodele de transformare 3D.</p> <div>Diviziune exemplu</div> <div id="transf1">Diviziune exemplu</div> <div id="transf2">Diviziune exemplu</div> </body> </html>

stil-10-5f.css

div { width:100px; height:75px; background-color:#E6E6FA; border:1px solid black; } div#transf1 { transform:rotateX(120deg); -webkit-transform:rotateX(120deg); /* Safari si Chrome */ } div#transf2 { transform:rotateY(130deg); -webkit-transform:rotateY(130deg); /* Safari si Chrome */ }

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Proprietatile introduse de CSS3, asa cum am vazut si in exemplele anterioare, nu sunt suportate in intregime de browserele importante, motiv pentru care CSS3, desi foarte util, nu poate fi utilizat inca in mod eficient.

Documents

Suport Curs CSS