CSS - Cascading Style Sheets - MateInfo.Netmateinfo.net/muscalua/csscurs.pdf · Stabilirea culorii din prim-plan - Controale pentru chenare si afisarea elementelor ... Ca si clasa,

Curs C.S.S. (Cascading Style Sheets) Pagina 1 din 21

CSS - Cascading Style Sheets http://www.marplo.net/curs_css/

Cuprins Lectii : 1 - Scrierea codului CSS

Obiectele (regulile) CSS : selector, clasa si identificator.

Componentele unui obiect CSS 2 - Crearea Foilor de Stil

Etichete HTML si stiluri CSS Definirea selectorilor Crearea etichetelor HTML personalizate Definirea de reguli similare Definirea etichetelor in context (imbricate) Cresterea prioritatii unei definitii Determinarea ordinii cascadei Adaugarea comentariilor la CSS

3 - Configurarea fonturilor Stabilirea fontului Stabilirea dimensiunii fontului Text inclinat Grosimea fontului Majuscule mici Valori multiple pentru font

4 - Configurarea textului Spatiul intre litere Spatiul dintre cuvinte Spatiul intre linii Marimea (tipul) literelor Alinierea textului Alinierea pe verticala a textului Formarea paragrafelor Aplicarea elementelor decorative Spatiile albe

5 - Configurari pentru culori si fundal Configurarea fundalului

o Culoarea fundalului o Imaginea de fundal o Repetarea imaginii de fundal o Controlul imaginii de fundal o Pozitia imaginii de fundal o Stabilirea simultana a proprietatilor

fundalului

Stabilirea culorii din prim-plan 6 - Controale pentru chenare si afisarea elementelor

Latimea si inaltimea unui element Marginile unui element Chenarul unui element Adaugarea spatiului in interior in jurul

elementului Elemente float Anularea plasarii unui element in spatiul eliberat

de "float" Afisarea si ascunderea elementelor

7 - Controale de pozitionare Stabilirea modului de pozitionare

o Pozitionarea statica o Pozitionarea relativa o Pozitionarea absoluta o Pozitionarea fixa

Pozitionarea in raport cu latura de sus, respectiv stanga

Pozitionarea in raport cu latura de jos, respectiv dreapta

Pozitionarea in spatiul 3D Includerea unui element absolut intr-un element

relativ Includerea unui element relativ intr-un element

absolut 8 - Configurari pentru vizibilitate si mouse

Stabilirea vizibilitatii unui element Stabilirea suprafetei vizibile a unui element Definirea pozitiei depasirii Aspectul indicatorului de mouse

9 - Pseudo-clasele Pseudo-clase cu selector Pseudo-clase si clase Pseudo-clase cu id-uri si elemente de formular

10 - Pseudo-elemente In aceasta lectie invatati ce sunt si ce fac pseudo-

elementele after, before, first-letter, first-line

http://www.marplo.net/curs_css/


Curs C.S.S. (Cascading Style Sheets) Introducere Crearea paginilor HTML este un lucru relativ simplu, invatarea etichetelor HTML si crearea unor imagini ducand la

realizarea de pagini web de o complexitate medie. Odata cu dezvoltarea internetului, site-urile au devenit din ce in ce mai complexe, cu un numar mai mare de pagini, cerintele privind grafica si elementele din pagina au devenit mai pretentioase si astfel proiectarea paginilor web a devenit o sarcina ceva mai dificila.

O problema importanta cand avem un site cu multe pagini este atunci cand dorim sa facem anumite schimbari in elementele pagini: fondul, grafica sau fontul textelor din pagini. Prin utilizarea CSS (Cascading Style Sheets), in traducere "foi de stil in cascada", acest lucru nu mai este o problema, realizandu-se relativ usor, prin schimbarea sau adaugarea unor elemente in codul CSS, ne fiind nevoi sa lucram la fiecare pagina sau la fiecare element din pagina.

CSS se ocupa in general cu aspectul si controlul grafic al elementelor din pagina, cum ar fi: textul, imaginile, fondul, culorile si asezarea acestora in cadrul ferestrei paginii. CSS foloseste stiluri, acestea inglobeaza, sub un anumit nume, atribute de formatare care se aplica asupra unui element individual din pagina, asupra unui grup de elemente sau la nivelul intregului document. CSS functioneaza cu HTML, insa nu este HTML. El extinde functionalitatile HTML, permitand redefinirea etichetelor HTML existente.

Prin utilizarea CSS aspectul documentului pe ansamblu, sau a unui element individual din interiorul sau, poate fi controlat mult mai usor. Stilurile pot fi aplicate asupra unui element, a unui document sau chiar asupra unui intreg site web. Un dezavantaj ar fi ca unele navigatoare nu sunt compatibile CSS, astfel ca documentele HTML sunt afisate ca si cum CSS n-ar exista, dar cele mai cunoscute si utilizate browsere, cum ar fi: Mozilla Firefox, Internet Explorer, Opera, si altele, sunt compatibile CSS.

Acest curs prezinta elementele de baza CSS si modul de lucru cu "foile de stil", va invata cum sa adaugati si sa folositi CSS in paginile dv. web. Tot ce aveti nevoie este un editor de texte simplu, cum ar fi Notepad, si un navigator, de exemplu Mozilla Firefox, care este gratuity.

Pentru a invata cat mai bine elementele prezentate in aceste lectii, exersati personal fiecare exemplu si proprietate explicata. Retineti ca acest curs reprezinta un punct de plecare, ne fiind prezentate aici toate proprietatile si elementele CSS. Pentru o cunoastere mai amanuntita a acestora, vizitati site-ul www.w3.org, la sectiunile despre CSS.

Lectia 1. Scrierea codului CSS

Codurile CSS pot fi scrise in interiorul paginii sau intr-un fisier extern cu extensia".css". Codul CSS, ca forma generala, este alcatuit din: obiectul care va fi formatat. proprietatile acestuia si valoarea (sau atributele) fiecarei proprietati.Cand este adaugat in documentul HTML, trebuie scris in cadrul unui tag <style> in sectiunea HEAD a documentului HTML, dupa cum se vede in formula generala de mai jos; <html> <head> <title>Titlul</title> <style type="text/css"> obiect_css { proprietate:valoare; alta_proprietate:valoare; } </style> </head><body> ... Continut ... </body> </html>

- Observati sintaxa codului CSS. Perechile proprietate:valoare se scriu intre acoladele obiectului CSS pe care-l definesc, intre "proprietate" si "valoare" trebuie sa fie un caracter doua-puncte (:) iar la sfarsitul perechii se adauga un caracter punct-si-virgula (;)

- Cand este adaugat intr-un fisier extern ".css", codul CSS se scrie la fel, dar nu se mai adauga tag-ul <style>.

http://www.w3.org/


1.1. Obiectele (regulile) CSS. Exista trei tipuri principale de obiecte CSS: selector, clasa si identificator. 1. Selectorul HTML se foloseste pentru a redefini modul de afisare a continutului etichetei HTML. Un selector HTML

reprezinta partea etichetei HTML care indica navigatorului tipul de eticheta. Iata un exemplu: h1 { font-family:"Arial"; font-size:15px; }

- Aici selectorul este "h1". Definirea unui selector HTML folosind CSS are ca rezultat redefinirea etichetei HTML. Selectorul si eticheta desi par identice, totusi nu sunt.

2. Clasa este un obiect care poate fi aplicat oricarei etichete HTML. O clasa trebuie creata in interiorul etichetei HTML

inainte de a fi definita intr-un cod CSS. Crearea clasei in interiorul etichetei se face simplu, prin specificarea cuvantului class si numele clasei, ca in exemplu de mai jos:

<h1 class="nume_clasa"> Text </h1> unde "nume_clasa", poate fi orice nume dorim. - Apoi in interiorul codului CSS, clasa trebuie definita prin adaugarea unui caracter punct (.) inaintea numelui clasei, ca in exemplu urmator: .nume_clasa { font-family:"Arial"; font-size:15px; }

Numele aceleasi clase poate fi atribuit mai multor etichete HTML din aceeasi pagina, si toate vor prelua acelasi stil css. 3. Identificatorul (ID) este asemanator cu clasa. Pot fi aplicate oricarei etichete HTML, dar spre deosebire de clase,

numele unui identificator trebuie atribuit numai unei singure etichete HTML dintr-o pagina, pentru alta eticheta se adauga un ID cu nume diferit. Ca si clasa, identificatoru trebuie intai creat in interiorul etichetei HTML.

Modul de creare este simplu, prin specificarea cuvantului id si numele clasei, ca in exemplu de mai jos: <h1 id="nume_id"> Text </h1> "nume_id", poate fi orice nume dorim. In interiorul codului CSS, identificatorul este definit prin adaugarea unui caracter diez (#) inaintea numelui, ca in exemplu urmator: #nume_id { font-family:"Arial"; font-size:15px; }

In urmatoarea lectie va fi explicat mai amanuntit modul de definire si rolul acestor obiecte CSS . 1.2. Componentele unui obiect CSS Obiectele CSS, indiferent de tipul lor, au in componenta urmatoarele elemente:

Selectorii - identifica un obiect; pot fi selectori de etichete HTML, clase sau identificatori.

Proprietatile - identifica o proprietate a obiectului; se refera in special la aspect.

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

Sintaxa generala a unei reguli CSS este urmatoarea: selector {proprietate: valoare; } Proprietatile si valorile constituie definitia regulii (obiectului) CSS. Acestea se regasesc sub forma de perechi,despartite

de caracterul doua puncte ”:”, fiecare pereche se termina cu un caracter punct si virgula ";". Etichetele HTML nu sunt sensibile la diferenta intre majuscule si litere mici. Dar odata cu aparitia limbajului XHTML,

acesta face distinctie intre majuscule si minuscule, astfel ca toate etichetele si toti selectorii trebuie scrisi cu litere mici.

Lectia 2 - Crearea Foilor de Stil 2.1. Etichete HTML si stiluri CSS CSS ofera posibilitatea de a schimba aspectul fiecarei etichete in parte, prin stabilirea unui anume stil in interiorul ei, cu

atributul "style". Acest lucru este util mai ales pentru a anula alte stiluri ale elementului respectiv sau de a da elemente grafice de stil doar etichetei respective. Sintaxa pentru definirea stilurilor in interiorul unei etichete HTML este urmatoarea:

<eticheta style="proprietate:valoare;"> text ... </eticheta> CSS permite si definirea unor reguli de stil generale intr-o pagina web. Acest set de reguli trebuie scris in sectiunea de

antet (head) a documentului, in cadrul tag-ului <style>. Sintaxa pentru definirea CSS intr-un document HTML, in interiorul etichetei <head> </head>, este urmatoarea:

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


- Definirea tuturor stilurilor intr-o locatie comuna usureaza modificarea mai rapida a unei pagini. Iata un exemplu practic de cod css:

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

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, de preferat cu extensia ".css", care poate fi inclus in pagina HTML prin doua procedee: legatura sau import.

Crearea unei foaie de stil externe se face scriind codul CSS intr-un fisier text cu ajutorul unui editor de texte simplu (de exemplu Notepad in Windows), sau specializat in acest sens (precum Notepad++). In fisierul extern creat se adauga reguli CSS, fara insa ca aceste reguli sa fie incadrate in etichete STYLE. Dupa ce a fost creata foaia de stil externa, aceasta poate fi folosita de un document HTML utilizand urmatoarea sintaxa, in interiorul tag-ului <head>

<head> <link rel="stylesheet" href="nume_fisier.css" type="text/css"> </head> - Eticheta LINK apare in antetul documentului (sectiunea head), iar atributele folosite transmit navigatorului tipul de

legatura ("rel" – legatura cu o foaie de stil, "type" - tipul codului din fisier) si locatia inspre fisierul ce contine codul CSS ("href" – calea si numele complet al fisierului, inclusiv extensia).

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 STYLE. In

cadrul acestei etichete este adaugata instructiunea "@import" de mai sus, unde "nume_fisier.css" reprezinta calea si numele fisierului ce contine regulile CSS definite.

Alaturi de instructiunea "@import", in cadrul etichetei STYLE, pot fi adaugate definiti si selectori suplimentari. Legatura la un 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.

2.2. Definirea selectorilor - Selectorii HTML pot fi definiti prin adaugarea unui numar de definitii compatibilie cu eticheta HTML la care se

refera, avand urmatoarea forma generala: selector_HTML { proprietate1:valoare1; proprietate2:valoare2; ... } Dupa redefinirea etichetei HTML, stilurile etichetelor respective din documentul HTML vor fi modificate automat. Prin

redefinirea unei etichete, proprietatile prestabilite existente nu sunt anulate, ci se adauga altele noi. Utilizarea selectorilor de tip clasa ofera posibilitatea configurarii unor stiluri care se pot aplica doar acelor elemente care

sunt etichetate cu clasa respectiva. Sintaxa generala de definire a unei clase CSS este: .nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }

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 care sa afecteze in mod direct un anume 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 e recomandat sa fie diferit de cuvantele rezervate JavaScript.

Asemanator cu selectorii de clasa se definesc si identificatorii (id-ul). Acestia sunt folositi pentru crearea de stiluri care pot fi atribuite unei singure etichete HTML dintr-o pagina. 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 tag-ului respectiv, astfel poate fi manipulat si cu ajutorul functiilor JavaScript. Numele unui identificator e recomandat sa fie diferit de cuvantele rezervate JavaScript.

3. 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>. Eticheta <span> nu are proprietati mostenite. Ea reprezinta doar o locatie vida care creaza o eticheta in linie. Pentru a configura o eticheta in linie trebuie definita o clasa sau identificator care sa poata fi aplicat apoi unei etichete <span>. Iata un exemplu cu, forma generala, in care selectori sunt precedati de eticheta <span> :

... <span class="nume_clasa"> ... </span>


... <span id="span1"> ... </span> ... <span class="clasa_span"> ... </span> ...

Acum iata cum pot fi definiti acestia in interiorul unei foi de stil: .nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... } #span1 { proprietate1:valoare1; proprietate2:valoare2; ... } span .clasa_span { proprietate1:valoare1; proprietate2:valoare2; ... }

In momentul in care se doreste configurarea unui bloc separat de restul continutului unui document HTML, solutia este eticheta <div>. Aceasta creaza o zona proprie in pagina, cu linie noua atat deasupra sa cat si dedesubtul sau.

Pentru crearea etichetelor DIV se procedeaza la fel ca si in cazul etichetelor in linie SPAN, prin definirea mai intai a unei etichete de tip clasa sau identificator, urmata apoi de aplicarea ei asupra unei etichete <div>. Iata forma generala de aplicare a unei etichete <div> intr-o pagina HTML : ... <div class="nume_clasa"> ... </div> ... <div id="div1"> ... </div> ...

Definirea acestor etichete <div> intr-un cod CSS se face astfel: div { proprietate1:valoare1; proprietate2:valoare2; ... } .nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... } #div1 { proprietate1:valoare1; proprietate2:valoare2; ... }

Regulile CSS pentru definirea etichetelor <span> sau <div>, pot fi plasate la fel ca si celelalte tipuri de selectoare, in sectiunea "head" a documentului in interiorul etichetei "style", sau intr-un fisier extern carev ulterior este legat sau importat in documentul HTML. Mai multe lucruri despre DIV si SPAN puteti invata de aici -> DIV si SPAN.

4. Definirea de reguli similare Daca mai multi selectori folosesc aceleasi definitii css, acestia pot avea aceeasi lista de elemente, fiind scrisi separat

prin virgule. Sintaxa generala pentru definirea unei liste cu mai multi selectori este urmatoarea: selector1, selector2, ... { proprietate1:valoare1; proprietate2:valoare2; ... }

Impreuna cu selectorii pot fi de asemenea definiti identificatorii si clasele. Dezavantajul ar fi ca in momentul in care este modificata o valoare a unei proprietati incluse in definitie, valoarea respectiva se va modifica in toate etichetele reprezentate de acesti selectori.

5. 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 cea inferioara se numeste copil. Se pot crea reguli care revin numai etichetelor copil, sintaxa generala a unei astfel de reguli fiind:

selector1 selector2 ... { proprietate1:valoare1; proprietate2:valoare2; ... } - Unde "selector1" este selectorul parinte iar "selector2" este selectorul copil.

Lista de selectori imbricati poate fi mai mare de doi, ultimul selector din lista este cel care primeste toate stilurile incluse in regula si in plus le mosteneste si pe cele ale parintilor.Ca si selectorii singuri, selectorii imbricati pot include in lista clase, identificatori sau selectori HTML.Toate etichetele HTML, cu exceptia etichetei BODY, au cel putin o eticheta parinte 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.

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 redefinirea acestora in lista de definitii a etichetei imbricate.

6. Cresterea prioritatii unei definitii Valoarea !important adaugata unei definitii atribuie maximum de prioritate in determinarea ordinii unei

executii.Valoarea !important trebuie plasata inaintea caracterului ’;’, ca in exempul urmator: selector { proprietate1:valoare1; proprietate2:valoare2 !important; ... }

http://www.marplo.net/html/div_span.html


7. Determinarea ordinii executiei Deoarece exista mai multe moduri de a aplica stilurile, pot apare situatii in care unei etichete 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 executiei (numita si cascada), acestea sunt:

1. Regulile CSS scrise in interiorul paginii HTML, in cadrul etichetei "style" din sectiunea "head" au o prioritate mai mare decat cele scrise intr-un fisier extern, iar regulile scrise in interiorul etichetelor au o prioritate mai mare decat cele din cadrul etichetei "style" din sectiunea "head".

2. Existenta atributului !important – confera prioritate maxima la afisare definitiei in care este utilizat. 3. 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". 4. Specificitate – cu cat o regula dispune de mai multi selectori HTML, de clasa si de identificator, cu atat prioritatea ei

creste. ID-urile au valoarea 100, clasele au valoarea 10, iar selectorii HTML au valoarea 1. 5. Momentul aparitiei – cu cat un stil apare mai tarziu, cu atat importanta lui este mai mare. Astfel, definitiile unei

etichete copil au prioritatea mai mare si anuleaza toate stilurile precedente cu care intra in conflict. 8. Adaugarea comentariilor la CSS Este bine ca uneori sa fie adaugate comentarii in codul CSS, mai ales in cazul fisierelor externe. Comentariile ajuta la

intelegerea codului, facandu-se astfel cunoscut, pentru mai tarziu, rolu anumitor elemente din codul CSS. Comentariile nu au nici un efect si pot fi plasate in jurul regulilor, fiind utile si in cazul navigatoarelor care nu suporta CSS.Pentru a adauga comentarii in regulile de stil avem la dispozitie doua modalitati:

// pe o linie sau /* comentariu */ pe mai multe linii

Lectia 3 - Configurarea fonturilor

Alegerea potrivita a fonturilor si folosirea acestora in cadrul paginilor web este importanta, poate atrage critici si comentarii din partea vizitatorilor, mai ales daca formatarea clasica prin scris normal, aldin sau cursiv nu este folosita corespunzator. 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. Exista cinci familii de fonturi de baza:

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 continut text general.

monospace – fonturile monospatiate pot avea 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).

1. Stabilirea fontului Fontul folosit pentru afisarea unui text poate fi stabilit prin proprietatea "font".

Pentru definirea fontului in cadrul unei reguli, trebuie specificata, dupa selectorul din cadrul foii de stil, proprietatea font-family urmata de numele fontului sau a fonturilor (despartite prin virgula). Este bine ca numele fonturilor sa fie incadrate intre ghilimele simple sau duble, mai ales daca numele acestora contine spatii. Forma generala fiind urmatoarea: selector { font-family:"nume_font1", "nume_font2", ..., nume_generic }

Dupa ultima virgula se pot folosi urmatoarele nume generice de fonturi: "serif", "sans-serif", "cursive", "monospace" sau "fantasy". Includerea unei asemenea valori este optionala, insa recomandata. Iata un exemplu practic: 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 parcurge lista pana in momentul in care intalneste un font instalat. Daca nu exista fonturi echivalente, textul va fi afisat cu fontul prestabilit de browser. Daca este specificat un nume generic, textul va fi afisat cu un font apartinand aceluiasi stil, in cazul in care fonturile specificate in lista nu sunt disponibile.

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, adica, 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 de unde poate fi descarcat fontul respectiv. Codul CSS este urmatorul:

@font-face { font-family:nume_font src: url(locatie_font); } Nu poate fi ales orice font pentru a fi descarcat, acesta trebuie sa respecte un anume format. Totusi, 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), iar Mozilla foloseste un format "otf".

2. Stabilirea dimensiunii fontului Cu ajutorul CSS se poate stabili dimensiunea fontului folosind valori absolute (exprimate in diferite unitati de masura:

pixeli, centimetri), 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 lua una din urmatoarele tipuri de valori:

- unitate de masura - exprimata in pixeli, puncte, inci sau centimetri - expresie absoluta - xx-small, x-small, small, medium, large, x-large si xx-large - expresiile smaller sau larger, ca raport cu elementul parinte - procent - un numar exprimat in procente (cu %), care indica marimea textului in raport cu dimensiunea elementului parinte

Iata forma generala a codului CSS pentru stabilirea dimensiunii fontului: selector { font-size:valoare } Este bine ca pentru foile de stil care formateaza iesirea la imprimanta sa se foloseasca ca unitati de masura punctele, cm

sau mm. Pixelii reprezinta, probabil, cea mai des utilizata unitate de masura pentru stabilirea dimensiunii fontului. Pixelii nu reprezinta o masura foarte sigura, dar, de obicei, pentru afisarea pe ecran, constituie o masura mai sigura decat dimensiunea in puncte. Iata un exemplu practic exprimat in pixeli: h1 { font-size:15px; }

3. 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, astfel:

selector { font-style:valoare } Unde "valoare" poate fi unul din urmatoarele cuvinte: normal, italic sau oblique

Iata un exemplu: h1 { font-style:italic; } Valoarea normal se poate folosi pentru a sterge formatarea cu caractere inclinate atunci cand aceasta este mostenita. 4. Grosimea fontului Ingrosarea este una dintre metodele utilizate des pentru scoaterea in evidenta a unui text. CSS confera mai multa

flexibilitate in utilizarea textului ingrosat decat elementul HTML <b>, prin posibilitatea introducerii unei valori proprietatii font-weight, dupa cum urmeaza:

bold – scrie fontul folosind caractere ingrosate

bolder - mareste grosimea fontului relativ la grosimea curenta

lighter – micsoreaza grosimea fontului fata de grosimea curenta

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

normal – elimina formatarea cu caractere aldine (ingrosate) In cazul folosiri valorii cuprinse intre 100 si 900, 400 reprezinta valoarea corespunzatoare textului normal, iar 700

valoarea ingrosarii 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. Forma generala pentru stabilirea grosimii fontului este urmatoarea: selector { font-weight:valoare }

Iata un exemplu practic: h1 { font- weight:bold; } 5. Majuscule mici Majusculele mici sunt folosite de obicei in cadrul titlurilor, ele fiind obtinute prin convertirea literelor mici in majuscule

cu o dimensiune mai mica decat majusculelor normale. Astfel se obtin cuvinte in care toate literele sunt scrise cu majuscule insa prima litera este mai inalta decat celelalte. 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. Forma generala este urmatoarea: selector { font-variant:valoare }

Iata cum formatam un text dintr-o eticheta "h1" cu valoarea "small-caps": h1 { font-variant:small-caps; }


6. 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 valorile pentru celelalte proprietati, separate prin spatiu. Sintaxa generala este urmatoarea: selector { font:val_font-family val_font-style val_font-variant val_font-weight val_font-size val_height }

Daca o anumita valoare din lista este omisa, navigatorul va folosi valoarea prestabilita. Iata si un exemplu practic de folosire a mai multor valori in aceeasi definitie: h1 { font:"Arial",sans-serif italic small-caps bold 14pt; }

Lectia 4 - Configurarea textului

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 imbunatati aspectul pagini si pot atrage atentia asupra anumitor elemente din text.

1. Spatiul intre litere Spatierea se refera la cantitatea de spatiu dintre literele unui cuvant. Se poate aduaga 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. Sintaxa generala este urmatoarea: selector { letter-spacing:valoare }

Daca valoarea proprietatii este normal sau 0 atunci spatierea va fi fixata la valorile implicite (fara modificari suplimentare). Daca se utilizeaza o valoare exprimata in em atunci dimensiunea rezultata va fi calculata in raport cu cea a elementului parinte. Exemplu: h1 { letter-spacing:1,5em; } ( Puteti folosi si pixeli (px))

2. Spatiul dintre cuvinte CSS da posibilitatea modificarii spatiului intre cuvinte atat prin marire, cat si prin micsorare.

Spatiul dintre cuvinte poate fi modificat folosind proprietatea word-spacing, urmata de o valoare exprimata intr-o anumita unitate, fiind de obicei stabilita in pixeli. Pentru anularea spatierii intre cuvinte, valoarea proprietatii trebuie sa fie: normal. Sintaxa generala este urmatoarea: selector { word-spacing:valoare }

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, fiind similar cu valoarea normal. Exemplu: h2 { word-spacing:8px; }

3. Spatiul intre linii Inaltimea randurilor se refera la spatiul dintre liniile paragrafului. Modificarea spatiului intre linii 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 modifiica inaltimea randurilor se foloseste proprietatea line-height, urmata de o valoare care poate fi exprimata in trei moduri:

- 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 folosita in CSS, care indiferent de dimensiunea stabilita a fontului, inaltimea liniei va avea o valoare exacta; - un procent, care stabileste inaltimea liniei ca fiind egala cu un anumit procent din dimensiunea fontului folosit pentru scrierea textului.

Sintaxa generala pentru modificarea spatiului intre linii este: selector { line-height:valoare } Iata un exemplu in care marim inaltimea liniei cu 50% din dimensiunea fontului: h1 { line-height:150%; } Inaltimea liniei poate de asemenea fi definita si in cadrul proprietatii "font-size", prin introducerea caracterului "/"

urmat de valoarea pentru inaltimea randului, imediat dupa dimensiunea fontului. Exemplu: h1 { font-size:12px/28px; }

4. Marimea (tipul) literelor Exista cazuri in care se doreste afisarea textului cu un anume tip de litere. Folosind CSS, se poate specifica explicit ca

textul sa apara cu majuscule initiale, majuscule, minuscule, combinat sau asa cum a fost el scris. Cu ajutorul proprietatii text-transform se poate controla marimea literelor din text, indiferent de modul cum a fost el scris initial.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. Sintaxa generala este: selector { text-transform:valoare } Iata un exemplu in care toate literele vor fi afisate cu majuscule: h1 { text-transform:uppercase; } 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 sau form HTML). 5. Alinierea textului. 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, right, centersau justify.

Forma generala este: selector { text-align:valoare } Proprietatea poate fi aplicata numai elementelor la nivel de bloc (DIV, UL, Hx, p), valoarea sa implicita fiind in

majoritatea cazurilor stabilita la valoarea "left". Iata un exemplu in care textul din eticheta "h2" este aliniat "stanga-dreapta": h2 { text-align:justify; }

- In cazul in care alinierea textului este "stanga-dreapta", spatierea cuvintelor si a literelor se schimba pentru a se obtine linii de aceeasi lungime.

6. Alinierea pe verticala a textului 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, de obicei utilizandu-se cu eticheta "span". Sintaxa pentru utilizarea proprietatii vertical-align este: selector { vertical-align:valoare }

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

super – pentru scrierea textului in stil exponent, deasupra liniei de baza;

sub - pentru scrierea textului in stil indice, sub linia de baza;

baseline – pentru scrierea textului pe linia de baza;

una din valorile: "top", "middle", "bottom", "text-top", "text-bottom" – pentru a alinia textul relativ la alinierea parintelui acestuia;

valoare procentuala – care ridica sau coboara linia de baza a elementului proportional cu dimensiunea fontului elementului parinte. Iata un exemplu in care textul din eticheta <span> va aparea ca exponent fata de textul din stanga-dreapta lui: span { vertical-align:super; }

7. Formarea paragrafelor Cu ajutorul proprietatii text-indent se poate stabili ce spatiu suplimentar este inserat la inceputul primei linii de text

dintr-un paragraf. Pentru aceasta, proprietatea text-indent este urmata de o valoare exprimata intr-o unitate de masura (pixeli sau em) sau in procente (proportional cu latimea paragrafului). Sintaxa generala este: selector { text-indent:valoare }

Valorile pozitive determina o indentare tipica (spre dreapta), in timp ce valorile negative determina o indentare inspre argine, fiind necesar sau marirea umplerii (padding) sau marirea marginilor. Iata un exemplu de cod CSS in care va fi determinat un spatiu de 20 pixeli la inceputul paragrafului din eticheta <p>:

p { text-indent:20px; } Daca se utilizeaza o valoare exprimata in unitati "em", atunci rezultatul va fi relativ la dimensiunea fontului elementului

asupra caruia se aplica. Pentru eliminarea decalarii se utilizeaza valoarea 0. 8. Aplicarea elementelor decorative CSS permite 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 dispara intermitent Forma generala este : selector { text-decoration:valoare }


Pentru a elimina decoratiile se foloseste valoarea "none". Prin folosirea acestei valori se elimina si sublinierile link-urilor, chiar daca navigatorul are prestabilit sa le arate subliniat. Iata un exemplu de cod in urma caruia link-urile nu vor mai fi afisate subliniat: a:link { text-decoration:none; }

Elementul decorativ "blink" a prezentat probleme, fiind de curand eliminat de unele navigatoarelor. 9. Spatiile albe 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, urmata de valoarea "pre". Forma generala este: selector { white-space:valoare }

In locul cuvantului "valoare" poate fi adaugat: "pre", "nowrap" sau "normal"; Utilizarea valorii "nowrap" impiedica trecerea la linia urmatoare. Valoarea "normal" permite navigatorului sa decida asupra modului de tratare a spatiilor. De obicei, acestea vor fi transformate intr-un singur spatiu. Iata un exemplu in urma caruia spatiile albe si trecerea la linia noua vor fi afisate asa cum au fost scrise: p { white-space:pre; }

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.

Lectia 5 - Configurari 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.

1. Configurarea fundalului Se poate schimba fundalul (background) intregii pagini, sau pentru un anumit element din pagina, fie el de tip DIV,

paragraf, imagine, tabel sau formular. a) Culoarea fundalului. Pentru a schimba culoarea fundalului se utilizeaza proprietatea background-color, urmata de

o valoare care reprezinta numele culorii sau valoarea RGB, exprimata in cod hexa. Sintaxa generala este: selector {background-color:valoare }

Daca se foloseste valoarea "transparent" navigatorul va afisa culoarea prestabilita sau cea a elementului parinte. Pentru schimbarea fundalului intregii pagini se aplica aceasta proprietate selectorului "body". Iata un exemplu in care culoarea de fundal a paginii este schimbata in albastru: body { background-color:#0000ff; }

b) Imaginea de fundal. Puteti utiliza pentru fundal si o imagine, pentru aceasta se foloseste proprietatea background-image, urmata de adresa URL a locatiei imaginii. Sintaxa generala este: selector { background-image:url('adresa_URL'); }

Unde "adresa_URL" este calea si numele imaginii care va fi folosita. Daca in locul adresei URL se foloseste valoarea "none", navigatorul nu va folosi nici o imagine. Iata un exemplu in care pentru fundalul paginii este folosita o imagine: body { background-image:url('cale/imagine.gif'); }

c) Repetarea imaginii de fundal

Pe langa posibilitatea afisarii unui element grafic ca fundal, CSS ofera si un mod de repetare a acestuia. Pentru a repeta imaginea de fundal se foloseste proprietatea background-repeat, urmata de o valoare care poate avea una din urmatoarele optiuni:

repeat – pentru a repeta imaginea pe toata suprafata elementului respectiv;

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

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

no-repeat – pentru a afisa imaginea o singura data, fara repetare. Forma generala este: selector { background-repeat:valoare } Iata un exemplu de cod in care imaginea folosita pentru fundalul paginii se va repeta pe verticala pe toata inaltimea

documentului: body { background-repeat:repeat-y; }

d) Controlul imaginii de fundal CSS poate defini modul de tratare a fundalului la derularea paginii, pentru aceasta se foloseste proprietatea

background-attachment cu optiunea "fixed", pentru a lipi imaginea de fundal de fereastra navigatorului sau optiunea "scroll", pentru a permite derularea imaginii de fundal alaturi de elementul corespunzator atunci cand vizitatorul deruleaza pagina.Sintaxa generala este: selector { background-attachment:valoare }

Iata un exemplu practic aplicat imaginii folosita pentru fundalul paginii: body { background-attachment:scroll; }


e) Pozitia imaginii de fundal

Pentru a pozitiona imaginii de fundal in functie de coltul din stanga-sus al elementului se utilizeaza proprietatea background-position urmata de doua valori (coordonate x si y) separate prin spatiu, 'x' pentru pozitia orizontala si 'y' pentru cea verticala.Forma generala a acestei proprietati este: selector { background-position:valoare }

Coordonatele x si y pot fi exprimate ca valori absolute sau ca procente. Se pot folosi si cuvintele cheie: "left", "center" sau "right" pentru coordonata x; respectiv "top", "center" sau "bottom" pentru coordonata y. Iata un exemplu in care imaginea de fundal a paginii este pozitionata la 10 pixeli (x si y) relativ la coltul din stanga-sus:

body { background-position:10px 10px; }

f) Stabilirea simultana a proprietatilor fundalului Toate proprietatile fundalului pot fi configurate cu ajutorul proprietatii background. Se poate stabili simultan printr-o

lista de valori proprietatile fundalului, enumerate in orice ordine si separate prin spatiu. Cand se utilizeaza proprietatea background, nu este necesar sa fie specificate toate proprietatile, cele nespecificate fiind stabilite la valoare lor implicita. Sintaxa generala este: selector {background:val_bg-color val_bg-img val_bg-repet val_bg-attach val_bg-position } 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". Iata si un exemplu in care sunt aplicate mai multe proprietati pentru background, in aceeasi definitie:

div { background:#e8e8fe url('imagine.jpg') 50% repeat } DIV-ul va avea culoarea de fndal "#e8e8fe", cu o imagine pozitionata la jumatatea distantei X, Y si care se repeta.

2. Stabilirea culorii din prim-plan. Proprietatea color poate schimba culoare oricarui element, fie el text, linie orizontala sau element de tip

formular.Sintaxa generala pentru utilizarea acestei proprietati este: selector { color:valoare } Valoarea culorii poate fi:

numele culorii - una din cele 16 culori predefinite (red, green, blue, white, silver, ...)

valoare in hexa - sub forma #rrggbb

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%.

Iata un exemplu de cod CSS in care culoarea textului din eticheta "h3" este definita verde: h3 { color:green; }

Lectia 6 - Controale pentru chenare si afisarea elementelor

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. Orice element creat intr-o foaie de stil este prezentat in propriul lui cadru. Notiunea de element se refera la componentele unui document HTML, configurate prin intermediul etichetelor HTML. Caseta (cadrul elementului) dispune de numeroase proprietati, intre care se numara: marginile, chenarul, completarea (umplerea, cunoscuta ca "padding"), latimea si inaltimea, care pot fi modificate cu ajutorul CSS. Elementele HTML au patru laturi (sus, dreapta, jos si stanga) la care se pot aplica proprietatile CSS specifice, restul proprietatilor CSS (font, text, culoare, fundal) se aplica in continutului casetei. Continutul poate include texte, liste, formulare sau imagini.

1. Latimea si inaltimea unui element Latimea si inaltimea elementelor pot fi specificate cu ajutorul proprietatilor width si height.

In mod prestabilit acestea sunt determinate automat de catre navigator, fiind egale cu necesarul afisarii intregului continut. Pentru definirea latimii si inaltimii se folosesc urmatoarele tipuri de valori:

o valoare de tip numeric, de obicei in pixeli;

un procent, care stabileste o valoare proportionala in functie de 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.


Sintaxa generala pentru configurarea latimii si inaltimii este:

selector { width:valoare; height:valoare } Iata un exemplu in care elementul cu id="un_id" va avea latimea de 300 pixeli si inaltimea de 500 pixeli: #un_id { width:300px; height:500px; } 2. Marginile unui element Proprietatea margin permite stabilirea distantei dintre un element si alte elemente alaturate, prin specificarea unei valor

pentru marginea din fiecare latura (sus, dreapta, jos, stanga). Daca specificati cele 4 valori in aceeasi definitie, acestea reprezinta marginile elementului in urmatoarea ordine: sus, dreapta, jos, stanga. Daca specificati doar o valoare, aceasta va fi aplicata tuturor marginilor. In cazu in care specificati doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa valorile marginilor opuse. Sintaxa generala pentru configurarea marginilor unui selector este:

selector { margin:valoare/valori; } Tipul de valoare folosit poate avea urmatoarele optiuni:

o valoare de tip lungime (numerica) – care poate fi si negativa;

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

valoarea auto – lasa controlul marginilor la decizia navigatorului. Iata un exemplu in care etichetele DIV vor avea distanta pentru marginea de sus 10 pixeli, dreapta 5 pixeli, jos 8 pixeli

si in stanga 15 pixeli: div { margin:10px 5px 8px 15px; } 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, dupa cum puteti vedea mai jos.

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

3. Chenarul unui element Proprietatea border permite stabilirea simultana a atributelor chenarului pentru toate cele patru laturi ale casetei.

Aceasta foloseste 3 valori distincte, pentru a configura latimea (grosimea), stilul si culoarea liniei bordurii. Sintaxa generala pentru definirea chenarului este: selector { border:val_grosime val_stil val_culoare; }

Unde - prima valoare (val_grosime) reprezinta grosimea chenarului si poate fi una din urmatoarele tipuri: - o valoare de tip lungime (valoarea 0 determina anularea afisarii chenarului); - un cuvant cheie (thin, medium, thick) care caracterizeaza o dimensiune relativa. - a doua valoare (val_stil) reprezinta numele stilului atribuit chenarului (valoarea "none" anuleaza afisarea chenarului); - ultima valoare (val_culoare) reprezinta culoarea, exprimata in cod hexa sau valoare RGB. Iata un exemplu in care div-urile vor avea o bordura groasa de 1 pixel, solid si culoare albastra: div { border:1px solid blue; }

Pot fi folosite si proprietati separate pentru fiecare: "border-width", "border-style" si "border-color"; prezentate in continuare.Un atribut care poate fi folosit in configurarea chenarului este border-width, acesta furnizeaza o metoda rapida pentru stabilirea latimii celor patru laturi din jurul unei casete. Sintaxa generala este: selector { border-width:valoare; }

Daca specificati toate cele patru valori, ele sunt aplicate in ordinea: sus, dreapta, jos, stanga. Daca specificati 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.Aspectul bordurii poate fi stabilit prin atributul border-style; stilul este aplicat celor patru

margini si este definit astfel: selector { border-style:valoare; } Pentru specificarea valorii, pot fi folosite urmatoarele tipuri:


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

Un alt atribut care poate fi utilizat in configurarea chenarului este border-color, acesta stabileste culoarea pentru toate cele patru laturi ale chenarului si foloseste pentru valoarea ei un singur cuvant cheie exprimat in cod hexa, valoare RGB sau numele culorii. Sintaxa generala este:selector { border-color:valoare; }

Puteti stabili culoarea fiecarei margini si separat, folosind proprietatile: border-top-color, border-right-color, border-bottom-color si border-left-color

Fiecare latura a chenarului poate avea valori configurate in mod separat (prin care se stabilesc stilul si culoarea fiecarei borduri din jurul elementului) dupa cum este prezentat mai jos:

selector { border-top:grosime stil culoare; } selector { border-bottom:grosime stil culoare; } selector { border-left:grosime stil culoare; } selector { border-right:grosime stil culoare; }

4. Adaugarea spatiului in interior, in jurul elementului Proprietatea padding adauga o cantitate de spatiu suplimentar in jurul continutului elementului, in interiorul chenarului,

intre bordura si continut.Forma generala pentru utilizarea acestei proprietati este: selector { padding: valoare/valori; }

Valoarea pentru completarea spatiului poate fi una din urmatoarele: o valoare de tip lungime sau o valoare procentuala – creaza umplerea in raport cu latimea elementului parinte.

Cand specificati toate cele patru valori, ele sunt aplicate in ordinea: sus, dreapta, jos, stanga. Daca specificati doar o valoare, aceasta va fi aplicata tuturor celor patru directii. Daca specificati doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa valorile laturilor opuse. Iata un exemplu in care etichetele DIV vor avea distanta padding: sus 4 pixeli, dreapta 2 pixeli, jos 3 pixeli si in stanga 2 pixeli: div { padding:4px 2px 3px 2px; }

Fiecare latura a chenarului poate avea proprietatea padding configurata separat: selector { padding-top:valoare; } selector { padding-bottom:valoare; } selector { padding-left:valoare; } selector { pading-right:valoare; }

5. Elemente float CSS ofera posibilitatea de a "infasura" anumite elemente in jurul altora. Acest lucru se face prin intermediul proprietatii

float, care determina o mutare fortata a elementului in directia data de valoarea mentionata, lasand loc liber in spatiul opus directiei, care va fi ocupat de urmatorul element din codul HTML. Sintaxa generala pentru utilizarea acestei proprietati este: selector { float:valoare; }

Unde "vaoare" poate fi" 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 ecranului, textul din exteriorul etichetei HTML respective va fi plasat in partea opusa, in jurul elementului.Iata un exemplu in care elementul cu id="un_id" va fi fortat sa fie pozitionat in dreapta celorlaltor elemente: #un_id { float:right; }

6. Anularea plasarii unui element in spatiul eliberat de "float" Asemanator cu actiunea etichetei HTML <br>, care trece pe un nou rand elementele ce o preced, este si proprietatea

clear. Cu ajutorul acesteia se poate anula ocuparea unui spatiu care a fost lasat liber de un element care utilizeaza proprietatea "float".Sintaxa generala pentru utilizarea proprietati clear: selector { clear:valoare; }

Unde "valoare" specifica latura in jurul careia este interzisa infasurarea textului si poate lua valoarea: left, right sau both. Se poate folosi si valoarea "none", ceea ce are ca efect anularea altor atribute ale proprietatii clear. De exemplu, daca aveti un DIV pozitionat fortat in dreapta, un paragraful care urmeaza dupa el va fi afisat in stanga DIV-ului respectiv. Pentru a anula acest lucru, ca paragraful sa fie afisat sub DIV, se foloseste proprietatea "clear", precum in exemplul urmator: #un_div { float:right; } p { clear:both; }

7. Afisarea si ascunderea elementelor Proprietatea display poate stabili daca un element va fi de tip block, incluzand linii noi deasupra si dedesubtul sau, daca

este inclus in linie, daca este tratat sub forma de lista sau daca elementul este afisat sau nu. Sintaxa generala pentru aceasta proprietate este: selector { display:valoare; }

Unde "valoare" poate fi 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 fiind de tip bloc si plaseaza un salt la linie noua deasupra si dedesubtul ei;

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

none – determina ascunderea elementului si neafisarea lui de catre navigator; codul acestuia este incarcat insa continutul sau nu e afisat in pagina. Iata un exemplu in care elementele <li> sunt asezate in linie, iar un element cu id="un_id" va fi ascuns in pagina: li { display:inline; } #un_id { display:none; } Proprietatea display nu trebuie confundata cu visibility. Spre deosebire de visibility care nu afiseaza elementul dar lasa

liber spatiu pentru element, sintaxa display: none elimina complet elementul din pagina.

Lectia 7 - Controale de pozitionare

Pozitionarea elementelor folosind CSS este mai precisa decat prin intermediul obiectelor grafice HTML 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. Toatele elementele amplasate in fereastra sunt pozitionate relativ la coltul din stanga-sus.

1. Stabilirea modului de pozitionare Prin utilizarea proprietatii position se poate specifica pozitia elementului in pagina web.

Un element poate avea una din urmatoarele valori de pozitionare: static, relative, absolut si fixed. Tipul de pozitie indica navigatorului cum sa trateze amplasarea unui element intr-o fereastra. a) Pozitionarea static

Valoarea initiala, prestabilita, a pozitionarii elementelor in fereastra este "static". Cand nu este specificata o pozitionare "relativa", "absoluta" sau "fixa"; elementele sunt dispuse unul dupa altul in interiorul documentului.Sintaxa pentru specificarea pozitionarii static este: selector { position:static } Un element static nu poate fi repozitionat in mod explicit. b) 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. Sintaxa pentru specificarea pozitionarii relative este: selector { position:relative } Elementele pozitionate relativ pot fi mutate din locatia lor folosind proprietatile "top" si "left" sau "bottom" si "right". c) Pozitionarea absoluta Pozitionarea absoluta are ca efect crearea unui element neafectat de restul documentului, plasarea lui in fereastra fiind facuta intr-o locatie precisa, definita prin intermediul coordonatelor x si y, indiferent de pozitiile altor elemente. Sintaxa pentru specificarea pozitionarii absolute este: selector { position:absolute } Originea (punctul de coordonate 0,0) este coltul din stanga-sus al ferestrei sau al obiectului in care este inclus elementul pozitionat absolut. d) Pozitionarea fixa 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. Sintaxa pentru specificarea pozitionarii fixed este: selector { position:fixed }

2. Pozitionarea in raport cu latura de sus, respectiv stanga Dupa stabilirea tipului de pozitionare, se poate determina distanta intre punctul de origine si laturile de sus si din stanga

ale elementului sau parinte, folosind proprietatile top si left Forma generala este: selector { top:valoare; left:valoare; }

- Unde "valoare" poate fi:

o valoare de tip numeric, care defineste distanta dintre 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 el insusi valoarea. Pot fi utilizate proprietatile top si left sau bottom si right, de asemenea pot lua si valori negative.

In cazul in care este vorba despre elemente imbricate, acestea vor fi deplasate solidar cu elementul parinte daca acesta are position:relative. Iata un exemplu in care o eticheta <h1> este pozitionata la o distanta de 10 pixeli fata de marginile sus si stanga ale unui DIV in interiu caruia se afla: <style type="text/css"> div { position:relative; } h1 { top:10px; left:10px; } </style> <div> <h1>Text...</h1> </div>

3. Pozitionarea in raport cu latura de jos, respectiv dreapta In unele cazuri este necesara pozitionarea in raport cu laturile de jos, respectiv dreapta. In acest caz originea va fi coltul

din dreapta-jos al ferestrei sau al elementului parinte. Definirea marginilor fata de latura de jos, respectiv din dreapta se face cu ajutorul proprietatilor bottom si right; ele pot lua aceleasi valori ca si "left" si "top", de asemenea pot fi combinate cu acestea. Forma generala este: 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.

4. Pozitionarea in spatiul 3D Elementele pot primi o a treia dimensiune, si anume asezarea lor in stiva, unele in raport cu altele.

Amplasarea se face in mod automat, incepand cu valoarea 0 si continuand prin incrementare cu o unitate, in ordinea aparitiei lor in documentul HTML si relativ la elementele parinte. Pentru pozitionarea elementelor in stiva unele peste altele se foloseste proprietatea z-index. Valoarea acestei proprietati fiind relatia tridimensionala a elementului in raport cu alte elemente din fereastra. Sintaxa generala pentru proprietatea z-index este: selector { z-index:valoare; }

Unde "valoare" este un numar intreg, pozitiv, 0 sau negativ.In cazul in care continutul elementelor se suprapune, elementul cu numarul de ordine mai mare apare deasupra elementului cu numar mai mic.Utilizarea unei valori negative determina amplasarea elementului dedesubtul parintelui sau cu atatea niveluri cu cate indica indexul z.

5. Includerea unui element absolut intr-un element relativ Un element poate fi pozitionat exact in cadrul unei ferestre, sau el poate fi inclus intr-un element cu pozitionare relativa.

In cazul includerii unui element pozitionat absolut intr-un element pozitionat relativ, elementul absolut este pozitionat folosind ca origine coltul din stanga-sus al elementului relativ.

Iata un exemplu de cod HTML in care o eticheta <div> (cu class="absolut") este inclusa (imbricata) in alta eticheta <div> (cu class="relativ"):

<div class=”relativ”> ... <div class=”absolut”> ... </div> ... </div>

Pentru a face o pozitionare absoluta a elementului inclus (care are class="absolut") in elementul parinte (care are class="relativ"), caruia ii definim o pozitionare relativa; scriem in foaia de stil urmatorul cod:

.relativ {position:relative; top:30px; left:50px; } .absolut {position:absolute; top:15px; left:0px; }

6. Includerea unui element relativ intr-un element absolut Cand un element pozitionat absolut este inclus intr-un element pozitionat relativ, primul foloseste ca origine coltul din

stanga-sus al parintelui. 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. Iata un exemplu de cod HTML in care o eticheta <div> (cu class="relativ") este inclusa (imbricata) in alta eticheta <div> (cu class="absolut"):

<div class=”absolut”> ...


<div class=”relativ”> ... </div> ... </div>

Pentru a face o pozitionare relativa a elementului inclus (care are class="relativ") in elementul parinte (care are class="absolut"), caruia ii definim o pozitionare absoluta; adaugam in foaia de stil urmatorul cod:

.absolut {position:absolute; top:20px; left:25px; } .relativ {position:relative; top:10px; left:5px; }

Lectia 8 - Configurari pentru vizibilitate si mouse

CSS ofera posibilitatea de a afisa sau ascunde unele elemente sau parti ale unor elemente. 1. Stabilirea vizibilitatii unui element Proprietatea visibility poate controla faptul ca un element sa fie vizibil sau nu. Chiar daca elementul este invizibil, el va

ocupa un spatiu liber in pagina, acolo unde ar fi trebuit sa fie afisat. Sintaxa pentru folosirea acestei proprietati este urmatoarea:

selector { visibility:valoare } Unde "valoare" poate fi:

hidden – ascunde elementul de la afisarea pe ecran;

visible – afiseaza elementul;

inherit – vizibilitatea elementului este mostenita de la elementul parinte. Iata un exemplu in urma caruia textul din interiorul etichetei <h1> va fi invizibil: h1 { visibility:hidden; } Pentru a ascunde complet afisarea unui element in pagina, se poate utiliza formula display:none; 2. Stabilirea suprafetei vizibile a unui element Definirea suprafetei vizibile a unui element stabileste 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) Forma generala este: selector {clip:rect(val1 val2 val3 val4); }

- Valorile construesc un patrulater, definesc distanta dintre coltul din stanga-sus al elementului si laturile de sus, dreapta, jos si stanga ale regiunii vizibile. Iata un exemplu de cod CSS in care suprafata vizibila a unui element cu id="viz" va fi cea incadrata de valorile atributului rect: #viz { clip: rect(25 300 125 100); }

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

3. Definirea pozitiei depasirii Uneori elementele nu sunt in totalitate continute in casetele lor, caseta nefiind suficient de mare, astfel ca o parte a

continutului nu este afisata sau depaseste marginea stabilita. Proprietatea overflow permite tratarea continutului in exces, controland astfel modul de afisare sau nu al acesuia. Forma generala a proprietatii overflow este:

selector { overflow:valoare; } - Unde "valoare" stabileste unde va fi plasata depasirea, folosind una din valorile:

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

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

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

auto – barele de derulare apar doar atunci cand este necesar. Iata un exemplu in care toate elementele cu class="extradim" vor avea bare de scroll: .extradim { overflow:scroll; } Pentru definirea proprietatii "overflow" doar pentru una din directii: orizontala sau verticala; adica bara de derulare sa

fie disponibila sau nu doar pentru una din aceste directii, se poate folosi o alta varianta a acestei proprietati, si anume:

overflow-x:valoare - pentru orizontala

overflow-y:valoare - pentru verticala; Unde "valoare" poate fi una din valorile prezentate mai sus.


4. Aspectul indicatorului de mouse In mod normal, aspectul indicatorului de mouse este determinat de browser. Navigatorul modifica indicatorul de mouse

in functie de continutul deasupra caruia se afla acesta. Uneori este dorita anularea sau completarea preferintelor navigatorului si configurarea unor aspecte personalizate. Proprietatea cursor ajuta la stabilirea aspectului unui indicator de mouse. Sintaxa este urmatoarea: selector { cursor:valoare; }

Unde "valoare" poate avea urmatoarele nume pentru indicatoarele de mouse:

- Daca se foloseste valorea "auto", navigatorul decide asupra tipului de indicator folosit.

Lectia 9 – Pseudoclase

Pseudo-clasele permit adaugarea de stiluri CSS doar la anumite elemente ale aceluiasi selector, id sau clasa. De exemplu, cand definiti un stil pentru un anumit tag HTML sau pentru o clasa, continutul din toate aceleasi tag-uri sau aceeasi clasa vor avea acel stil, iar daca doriti sa definiti un stil diferit pentru primul (sau ultimul) din acele tag-uri ori pentru primul continut definit de aceeasi clasa, puteti realiza asta folosind pseudo-clasele. De asemenea, acestea pot modifica stilul grafic al elementelor cand mouse-ul actioneaza asupra lor. Pentru a functiona in Internet Explorer 7+ este necesar declararea <!DOCTYPE>, care se adauga la inceputul documentului HTML, mai multe detalii (in engleza) gasiti Aici: http://www.w3schools.com/tags/tag_doctype.asp Sintaxa pentru utilizarea pseudo-clasei este urmatoarea:

element:pseudo-clasa { proprietate:valoare; } - unde "element" este un selector, id sau clasa, iar "pseudo-clasa" este una din expresiile urmatoare:

active - Adauga un stil unui element cand acesta este activat (actionat prin click pe el)

first-child - Adauga un stil unui element care este primul din acel tip de elemente

focus - Folosit pentru input-urile de formulare, le adauga un stil cand acestea sunt active (dupa click si cursorul de text in ele)

hover - Adauga un stil unui element cand mouse-ul se afla deasupra lui

lang(cuvant) - Adauga un stil unui element care are atributul lang="cuvant" (nu e suportat de Safari si IE mai mic de 8)

last-child - Adauga un stil unui element care este ultimul din acel tip de elemente

link - Adauga un stil unui link nevizitat

visited - Adauga un stil unui link vizitat Ca sa intelegeti mai bine cum functioneaza si ce fac pseudo-clasele, studiati exemplele care sunt prezentate in

continuare. 1. Pseudo-clase cu selector Selectoarele fac referire la tag-urile HTML pe care le denumesc (de ex.: p pentru <p>, li pentru <li>, div pentru <div>,

etc.). In exemplul urmator este folosit "first-child" pentru paragraf:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <title>Pseudo-clase - Ex. 1</title>

http://www.w3schools.com/tags/tag_doctype.asp


<style type="text/css"> p:first-child { color:blue; } </style> </head><body> <p>Un text din primul paragraf</p> <p>Continut din al doilea paragraf</p> </body></html>

- Rezultatul va fi urmatorul, primul paragraf va avea textul albastru. Un text din primul paragraf Continut din al doilea paragraf

Iata si un exemplu cu "hover" pentru <li> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <title>Pseudo-clase - Ex. 2</title> <style type="text/css"> li:hover { background-color:#88fe88; } </style> </head> <body> <ul> <li>Text list 1 ...</li> <li>Text list 2 ...</li> <li>Text list 3 ...</li> </ul> </body></html>

- Cand pozitionati mouse-ul deasupra fiecarui LI, acesta va avea background verde, testati mai jos

Text list 1 ...

Text list 2 ...

Text list 3 ...

2. Pseudo-clase si clase Trebuie stiut ca pseudo-clasele nu sunt acelasi lucru ca si clasele, acestea fiind cele care fac referire la valoarea

atributului "class" si in CSS se adauga dupa un caracter punct (.). Iata un exemplu in care sunt folosite pseudo-clasele "lang(cuvant)" (pt. IE incepand cu versiunea 8) sl "last-child" la o clasa ".test' <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <title>Pseudo-clase - Ex. 3</title> <style type="text/css"> .test:last-child { background-color:#88fe88; } .test:lang(da) { color:blue; } </style> </head> <body> <ul> <li class="test">Text in list cu class 1 ...</li>


<li class="test" lang="da">Text in list cu class 2 ...</li> <li class="test">Text in list cu class 3 ...</li> </ul> </body></html>

- Observati ca stilul definit pentru ".test:last-child" va fi aplicat doar ultimului element care are clasa "test", iar "lang(da)" se aplica numai elementului care pe langa class="test" are si lang="da". - Rezultatul este acesta:

Text in list cu class 1 ...



Iata un alt exemplu in care sunt combinate o clasa (test), un selector (tag <i>) si "first-child": <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Pseudo-clase - Ex. 4</title> <style type="text/css"> .test i:first-child { font-weight:bold } </style> </head> <body> <p class="test"><i>Paragraf</i> cu mai multe tag-uri I: <i>text oblic</i>, alt test <i>oblic</i></p> <p class="test">Alt paragraf: <i>sir inclinat si bold</i>, alt sir <i>italic</i></p> </body></html>

- Stilul CSS va fi aplicat primelor tag-uri <i> din fiecare clasa ".test", dupa cu puteti vedea mai jos Paragraf cu mai multe tag-uri I: text oblic, alt test oblic Alt paragraf: sir inclinat si bold, alt sir italic - Daca doriti ca stilul sa fie aplicat tuturor etichetelor <i> din prima clasa, scrieti: .clasa:first-child i

- Daca vreti sa fie aplicat numai primului <i> din prima clasa, scrieti: .clasa:first-child i:first-child 3. Pseudo-clase cu id-uri si elemente de formular In CSS, id-urile fac referire la valoarea atributului ID si se scriu dupa caracterul #.

Iata un exemplu in care este folosita pseudo-clasa "hover" impreuna cu un ID, iar "focus" impreuna cu o clasa (focus nu functioneaza pe versiuni de IE mai mici de 8) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <title>Pseudo-clase - Ex. 5</title> <style type="text/css"> #unid:hover { background-color:#dadafe; } .test:focus { background-color:#ededfe; } </style></head> <body><form action="" method="post"> <input type="text" class="test" /><br /> <textarea cols="20" rows="5" class="test"></textarea><br /> <input type="button" value="Buton" id="unid" /> </form></body></html>


- Stilul CSS definit in acest exemplu face ca atunci cand mouse-ul se afla deasupra butonului (care are id="unid") acesta sa isi schimbe culoarea de fundal, iar cand se da click pe zonele de text din formular (care au class="test"), la fel se modifica culoarea background.

Lectia 10 – Pseudo-elemente

Pseudo-elementele permit adaugarea de stiluri CSS anumitor parti din continutul unui element HTML. De exemplu, cand definiti un stil pentru un anumit tag HTML (sau pentru o clasa), tot continutul incadrat de acel tag va avea acelasi stil, iar daca vreti sa adaugati un stil CSS diferit primei litere sau primlui rand dintr-un paragraf, se folosesc pseudo-elemente. Sintaxa pentru utilizarea pseudo-elementelor este urmatoarea: obiect_css:pseudo-element { proprietate:valoare; } - unde "obiect_css" este un selector, id sau clasa, iar "pseudo-element" este una din expresiile urmatoare:

after - Adauga continut dupa un element HTML (nu e suportat de versiuni IE mai mici de 8)

before - Adauga continut inaintea unui element HTML (nu e suportat de versiuni IE mai mici de 8)

first-letter - Adauga un stil css primului caracter dintr-un text

first-line - Adauga un stil primei linii dintr-un text

Ca sa intelegeti mai bine cum functioneaza si ce fac pseudo-elementele, iata cateva exemple cu fiecare in parte. 1. after Pentru a adauga un anumit continut (text, imagine, sunet .wav) prin CSS, se foloseste proprietatea content si valoarea

ce reprezinta continutul respectiv: text se adauga intre ghilimele, iar imagine sau sunet .wav se adauga folosind ca valoare url(adresa_fisier) In urmatorul exemplu va fi adaugat un continut text dupa fiecare element <h4>. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <title>Pseudo-elemente - Ex. 1</title> <style type="text/css"> h4:after { content:"MarPlo"; color:blue; } </style></head> <body> <h4>Continutul din primul tag H4 ... </h4> <h4>Un alt text din alt element H4</h4> </body></html>

- Observati cum este adaugat cuvantul "MarPlo", imediat dupa ultimul caracter al fiecarui element <h4>, ca si cum ar face parte din textul initial, dar putand avea stil propriu.

In loc de selector puteti folosi si ID sau clasa. 2. Before este similar cu "after", continutul se adauga la fel, dar la inceputul elementului.

Pentru o mai mare difersitate, puteti combina pseudo-clasele cu pseudo-elemente folosind sintaxa: obiect_css:pseudo-clasa:pseudo-element { proprietate:valoare; } - Pseudo-clasele sunt explicate in lectia anterioara. Ca sa vedeti efectul, iata un exemplu aplicat cu "before" acelorasi tag-uri H4 din exemplul precedent.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <title>Pseudo-elemente - Ex. 2</title> <style type="text/css"> h4:first-child:before { content:"MarPlo- "; color:blue;


} </style></head> <body> <h4>Continutul din primul tag H4 ... </h4> <h4>Un alt text din alt element H4</h4> </body></html>

- De data aceasta continutul "MarPlo- " este adaugat imediat in fata si doar primului element <h4> (precizat prin 'first-child'

- Daca vreti sa adaugati in loc de continut text o imagine, de exemplu .gif, scrieti codul CSS astfel: h4:first-child:before { content:url(imagine.gif); }

3. First-letter aplica un stil CSS doar primului caracter dintr-un text.

In urmatorul exemplu este aplicat un stil CSS primului caracter din continutul fiecarui element definit printr-o clasa "test". <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <title>Pseudo-elemente - Ex. 3</title> <style type="text/css"> .test:first-letter { font-size:25px; color:red; } </style></head> <body> <p class="test">Textul din paragraf ...</p> <div class="test">Alt continut int-un tag DIV, dar cu aceeasi clasa.</div> </body></html>

- Dupa cum puteti vedea in rezultatul de mai jos, prima litera din continutul fiecarui tag ce are class="test" este de culoare rosie si marime 25px.

First-line aplica un stil CSS doar primei linii din continutul elementului HTML.Studiati exemplul urmator:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <title>Pseudo-elemente - Ex. 4</title> <style type="text/css"> .test:first-line { font-weight:bold; color:blue; } </style></head><body><p class="test">Paragraf cu mai multe linii<br /> A doua linie ...<br /> Alta linie din acelasi paragraf.</p><div class="test">Continut pe doua linii intr-un tag DIV<br /> A doua linie din DIV.</div></body></html>

- Rezultatul este urmatorul, comform codului CSS, prima linie din fiecare element cu class="test" are textul albastru si ingrosat.

1. Introducere în CSS

În cursul de HTML, am vorbit despre cum să structurăm și să dăm sens informațiilor

conținutului paginilor web. În acest curs ne vom ocupa de stilizare, de modul și locul în

care sunt redate elementele HTML în pagină.

Ce este CSS?

CSS (Cascading Style Sheets) sau foi de stil în cascadă, reprezintă un mecanism simplu de

a adăuga elemente de stil (tipuri de caractere, culori, aliniere, spațiere etc.) unui

document web.

Tag-urile HTML au avut inițial rolul de defini conținutul unui document, de a face distincția

între titlul unui paragraf (definit prin tag-urile <Hn>), conținutul paragrafului (definit prin

tag-ul <p>), tabele (definite prin tag-ul <table>) etc. Aspectul și modul de afișare al unui

site cădeau în sarcina browserului, fără a fi folosite niciun fel de tag-uri de formatare.

Dar cum cele două principale browsere – Internet Explorer și Netscape Navigator – au

continuat să adauge noi tag-uri și atribute limbajului HTML original, a devenit tot mai

dificil să creezi un site în care conținutul documentului HTML să fie clar separat de modul

său de prezentare.

Pentru a rezolva această problemă, consorțiul W3C, responsabil de standardizarea

specificațiilor HTML, a creat stilurile și le-a adăugat specificațiilor HTML 4.0.

În prezent, toate browserele suportă CSS.

CSS Demo

Un document HTML afișat cu stiluri diferite: Vezi cum funcționeaza

În HTML 4.0, toate formatările pot fi înlăturate din documentul HTML și stocate într-un

fișier CSS separat. În acest fel puteți schimba ușor aspectul tuturor paginilor web dintr-un

site modificând un singur fișier.

2. Sintaxa construcției CSS

O construcție CSS are două părți: un selector, și una sau mai multe declarații:

unde:

selector - această componentă, identifică elementul HTML, căreia i se aplică stilul dat; acoladele - delimitează, care proprietăți și cu ce valori se aplică elementului HTML; proprietăți - sunt elementele de aspect care vrem să le modificăm; valori ale proprietăților - sunt noile valori pe care vrem să le atribuim proprietății

respective.

Fiecare proprietate suportă, anumite tipuri de valori, de exemplu culoarea poate fi dată în

trei moduri:

hexazecimal - #ffaa99; prin denumire - red;

https://web.ceiti.md/demo/default.html

https://web.ceiti.md/images/selector-mare-color.png

cu valori rgb - rgb(123,255,17).

Observație:

Declarațiile CSS se încheie întotdeauna cu ";".

Exemplu: 1

2 p {color:red; text-align:center;}

Pentru a face declarațiile CSS mai ușor de citit, puteți scrie fiecare declarație pe câte o

linie ca în exemplul următor: 1

2

3 4

5

p { color:red; text-align:center; }

Documentul HTML care conține declarațiile CSS de mai sus va arăta astfel:

EXEMPLUL 1

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15

<html> <head>

<style type="text/css"> p { color:red; text-align:center; } </style> </head> <body> <p>Buna ziua!</p> <p>Acest paragraf este stilizat cu CSS.</p> </body> </html>

Comentarii CSS

Comentariile se folosesc pentru a explica codul și pot fi utile când modificați codul sursă

pe parcurs. Comentariile sunt ignorate de către browsere. Un comentariu CSS începe cu

"/*", și se termină cu "*/", ca în exemplul următor:

Eexemplu: 1 2

3

4 5

6

7 8

/*Acesta este un comentariu și nu se va afișa */ p { text-align:center; /*Acesta este un alt comentariu*/ color:blue; font-family:arial; }

3. Cum se inserează o foaie de stil

O foaie de stil poate fi inserată în trei moduri:

- Foaie externă de stil; - Foaie internă de stil;

- Stil inline.

Foaie externă de stil

O foaie de stil externă este ideală atunci când stilul respectiv se aplică mai multor pagini.

Cu o foaie CSS externă, puteți modifica aspectul întregului site modificând un singur fișier.

Fiecare pagină trebuie să se lege la foaia de stil folosind tagul <link> în interiorul

secțiunii head: 1

2 3

4

5 6

7

8 9

<html> <head>

<link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> ... </body> </html>

unde:

- atributul rel specifică relația dintre documentul apelant și documentul legat. Are numeroase valori posibile, dar în cazul de față valoarea sa trebuie să fie stylesheet;

- atributul type specifică tipul documentului legat, adică definește ce fel de resursă este (extensia fișierului nu este suficientă pentru a determina această) - în cazul nostru trebuie să aibă valoarea text/css;

https://web.ceiti.md/images/external-css.png

- atributul href cum am văzut și la elementul link, specifică adresa (URL) de unde se introduce fișierul foaie de stil.

sau 1

2 3

4

5 6

7

8

9 10

11

<html> <head>

<style type="text/css" media="all"> @import url(style.css); </style> </head> <body> ... </body> </html>

O foaie externă de stil poate fi scrisă în Notepad++, nu trebuie să conțină taguri html și

trebuie salvată cu extensia .css. Un exemplu de foaie de stil externă, memorată în

fișierul style.css, este prezentată mai jos: 1 2

3

4

hr {color:sienna;} p {margin-left:20px;} body {background-image:url("roses.gif");}

Observație:

Nu lăsați spații între valoarea proprietății și unitatea de măsură! Dacă scrieți "margin-

left:20 px" (în loc de "margin-left:20px") va merge în browser-ul IE, dar nu în Firefox sau

Opera.

Foaie internă de stil

O foaie internă de stil trebuie folosită când un singur document are un anumit stil. Foaia

internă de stil se definește în secțiunea head a paginii HTML folosind tagul <style>, ca în

exemplul următor: 1

2

3

4 5

6

7 8

<head> <style type="text/css"> hr {color:#424242;} p {margin-left:20px;} body {background-image:url("roses.gif");} </style> </head>

Stiluri inline

Un stil inline pierde multe din avantajele foilor de stiluri amestecând conținutul cu

prezentarea. Utilizați această metodă cât mai rar. Pentru a utiliza un stil inline, folosiți

atributul style în tagul respectiv. Atributul style poate conține orice proprietăți CSS.

Exemplul următor ilustrează cum se poate schimba culoarea și marginea stângă a unui

paragraf: 1

2 <p style="color:#424242; margin-left:20px">Acesta este un paragraf.</p>

Foi multiple de stiluri

Dacă anumite proprietăți ale unui selector au fost setate în foi de stiluri diferite, valorile

vor fi moștenite din cea mai specifică foaie de stil. Spre exemplu,într-o foaie de stil

externă, selectorul h3 are setate următoarele trei proprietăți: 1 2

3

4

5 6

h3 { color:red; text-align:left; font-size:8pt; }

Și foaia de stil intern setează pentru h3 următoarele proprietăți: 1

2

3 4

5

h3 { text-align:right; font-size:20pt; }

Dacă pagina care conține această foaie internă de stil se leagă și la foaia de stil externă,

atunci proprietățile pentru h3 vor fi:

color:red; text-align:right; font-size:20pt;

Culoarea este moștenită din foaia externă, iar alinierea și dimensiunea fontului sunt

înlocuite cu valorile din foaia internă de stil.

Stilurile pot fi specificate:

- într-un element HTML; - în secțiunea head a unei pagini HTML;

- într-un fișier extern CSS.

Observație: Într-un document HTML pot fi referite mai multe foi de stiluri externe.

Ordinea de aplicare

Ce stil va fi utilizat când într-un document HTML sunt specificate mai multe foi de stil

pentru un element HTML? La modul general, putem spune că stilurile se vor mixa într-o

foaie de stil virtuală după următoarele reguli, unde prioritatea crește odată cu numărul de

ordine:

- setările implicite ale browserului; - foi de stiluri externe (din fișiere CSS); - foi de stiluri interne (din secțiunea head);

- stiluri inline (din tagul elementului HTML).

Deci, stilul inline al unui element suprascrie stilul definit în <head>, într-un fișier extern

sau în browser.

Observație: Dacă legătura către o foaie externă de stil este amplasată în

secțiunea <head> după foaia internă de stiluri, atunci fișierul extern va suprascrie stilul

intern!

4. Selectorii CSS

CSS-ul are mai multe tipuri de selectori. Selectorii cei mai des folosiți, prin urmare și cei

mai importanți sunt:

- selector element - selector id

- selector class

Să le luăm pe rând și să vedem sintaxa și funcționarea lor.

Selectorul element

Acest selector aplică proprietățile conținute, tuturor elementelor de acest tip. 1

2

3 4

h5 { color:blue; }

Toate elementele h5 din pagina vor avea culoarea albastra.

https://web.ceiti.md/images/cascade-css.png

EXEMPLUL 2

1 2

3

4 5

6

7

8 9

10

11 12

13

14

15 16

<html> <head>

<style type="text/css"> h5 { color:blue; } </style> </head> <body> <h4>Titlu de marimea 4</h4> <h5>Titlu de marimea 5</h5> <h6>Titlu de marimea 6</h6> <h5>Alt titlu de marimea 5</h5> </body> </html>

Selectorul id

Selectorul id este utilizat pentru a specifica stilul unui singur element .

Selectorul id folosește atributul id al unui element HTML, și este definit cu "#".

Exemplu: Stilul următor va fi aplicat elementului care are atributul id="par1". EXEMPLUL 3

1

2

3 4

5

6 7

8

9

10 11

12

13 14

15

<html> <head>

<style type="text/css"> #par1 { text-align:center; color:red; } </style> </head> <body>

<p id="par1">Buna ziua!</p> <p>Acest paragraf nu este afectat de declaratia de stil.</p> </body> </html>

Observație:

Nu începeți numele id cu un număr deoarece nu va lucra în Mozilla Firefox.

Selectorul class

Acest selector este utilizat pentru a specifica stilul unui grup de elemente. Astfel, puteți

seta un stil particular pentru toate elementele HTML care face parte din aceeași clasă.

Selectorul class folosește atributul HTML class și este definit cu ".". În exemplul următor,

toate elementele HTML cu atributul class="center" vor fi aliniate la centru:

EXEMPLUL 4

1 2

3

4

5 6

7

8 9

10

11 12

13

14

<html> <head>

<style type="text/css"> .center { text-align:center; } </style> </head> <body>

<h1 class="center">Acest titlu este aliniat la centru cu CSS</h1>

<p class="center">Acest paragraf este de asemenea aliniat la centru cu CSS.</p> </body> </html>

Puteți de asemenea specifica ce elemente din clasă vor fi afectate de stil. În exemplul

următor, numai elementele p din clasa center vor fi aliniate la centru:

EXEMPLUL 5

1

2

3 4

5

6

7 8

9

10 11

12

13 14

<html> <head>

<style type="text/css"> p.center { text-align:center; } </style> </head> <body>

<h1 class="center">Acest titlu nu este afectat de stilul CSS</h1>

<p class="center">Acest paragraf este aliniat la centru cu CSS.</p> </body> </html>

Observație:

Nu începeți un nume de clasă cu un număr deoarece numai Internet Explorer acceptă acest

lucru.

5. Formatarea background-ului

Proprietățile utilizate în CSS pentru a defini fundalul unui element sunt:

- background-color; - background-image; - background-repeat; - background-attachment; - background-position.

Proprietatea background-color

Proprietatea specifică culoarea de fundal a unui element. Culoarea de fundal pentru

întreaga pagină este definită în selectorul body ca în exemplul următor:

EXEMPLUL 6

1

2 3

4

5 6

7

8 9

10

11

12 13

14

<html> <head>

<style type="text/css"> body { background-color:#b0c4de; } </style> </head> <body> <h1>Pagina stilizata cu CSS!</h1> <p>Buna ziua! Acesta este un exemplu de utilizare a stilurilor.</p> </body> </html>

Culoarea de fundal poate fi specificată prin:

nume - un nume de culoare, de exemplu "red"; RGB - o valoare RGB, de exemplu "rgb(255,0,0)"; Hex - o valoare hexazecimală, de exemplu "#ff0000".

În exemplul următor, elementele h1, p, și div au diferite culori de fundal:

EXEMPLUL 7

<html> <head>

<style type="text/css"> h1 { background-color:#6495ed; } p { background-color:#e0ffff; } div { background-color:#b0c4de; } </style> </head> <body> <h1>Exemplu pentru proprietatea CSS background-color!</h1> <div> Acesta este un text in interiorul unui element div. <p>Acest paragraf are propria culoare de fundal, desi este in interiorul

elementului div.</p> Acest text face parte tot din elementul div. </div> </body> </html>

Proprietatea background-image

Această proprietate definește imaginea folosită ca fundal pentru un element. Implicit,

imaginea se repetă pe suprafața întregului element. Imaginea de fundal a paginii poate fi

setată ca în exemplul următor:

EXEMPLUL 8

1 2

3

4

5 6

7

8 9

10

11

<html> <head>

<style type="text/css"> body {background-image:url("paper.gif");} </style> </head> <body> <h1>Buna ziua!</h1> </body> </html>

Observație:

Construcția url(...) precizează locul în care este stocată imaginea. Dacă provine de pe net,

precizați adresa completă ca în exemplul

următor: url(“http://www.image.com/image.gif”). Imaginea de fundal trebuie aleasă

astfel încât textul să poată fi citit cu ușurință.

Proprietatea background-repeat

Prin definiție, proprietatea background-image repetă o imagine și vertical și orizontal.

Unele imagini trebuie repetate numai vertical sau numai orizontal. Dacă doriți ca imaginea

să se repete numai pe orizontală, folosiți valoarea repeat-x, iar pentru verticală

folosiți repeat-y.

EXEMPLUL 9

1 2

3

4

5 6

7

8 9

10

11

12 13

14

<html> <head>

<style type="text/css"> body { background-image:url("gradient2.png"); background-repeat:repeat-x; } </style> </head> <body> <h1>Buna ziua!</h1> </body> </html>

Proprietatea background-position și no-repeat

Când folosiți o imagine de fundal aveți grijă să nu îngreunați citirea textului. Dacă doriți ca

imaginea să fie afișată o singură dată (să nu se repete), folosiți valoarea no-repeat ca în

exemplul următor:

EXEMPLUL 10

1

2

3

4 5

6

7 8

9

10 11

12

13

14 15

16

<html> <head>

<style type="text/css"> body { background-image:url("tree.jpg"); background-repeat:no-repeat; } </style> </head> <body> <h1>Buna ziua!</h1> <p>Exemplu de imagine de fundal.</p> <p>Imaginea este afisata o singura data,dar incomodeaza cititorul!</p> </body> </html>

Pentru a schimba poziția imaginii de fundal, folosiți proprietatea background-position ca

în exemplul următor:

EXEMPLUL 11

1

2 3

4

5 6

7

8 9

10

11

12 13

14

15 16

17

18

19

<html> <head>

<style type="text/css"> body { background-image:url("tree.jpg"); background-repeat:no-repeat; background-position:top right; margin-right:200px; } </style> </head> <body> <h1>Buna ziua!</h1> <p>Exemplu de imagine de fundal.</p> <p>Imaginea este afisata o singura data si pozitionata in afara

textului.</p> <p>In acest exemplu,marginea dreapta a textului a fost setata la 200

pixeli. In acest fel, textul nu se va suprapune cu imaginea.</p> </body> </html>

Proprietăți multiple pentru background

Pentru a scurta codul, puteți preciza toate proprietățile într-o proprietate numită

scurt background ca în exemplul următor:

EXEMPLUL 12

1

2

3 4

5

6

7 8

9

10 11

12

13

14 15

16

<html> <head>

<style type="text/css"> body { background:#ffff00 url("tree.jpg") no-repeat top right; margin-right:200px; } </style> </head> <body> <h1>Buna ziua!</h1> <p>Imaginea este afisata o singura data si pozitionata in afara

textului.</p> <p>In acest exemplu,marginea dreapta a textului a fost setata la 200

pixeli. In acest fel, textul nu se va suprapune cu imaginea.</p> </body> </html>

Când folosiți proprietatea scurtă, ordinea valorilor proprietăților este:

- background-color - background-image - background-repeat - background-attachment - background-position

Nu contează dacă valoarea unei proprietăți lipsește, atât timp cât valorile prezente sunt

scrise în această ordine.

Exemplu: Stabilirea unei imagini fixe de fundal. Imaginea nu se va deplasa odată cu restul

paginii.

EXEMPLUL 13

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15 16

17

18

19

<html> <head>

<style type="text/css"> body { background-image:url("smiley.gif"); background-repeat:no-repeat; background-attachment:fixed; } </style> </head> <body> <p>Imaginea de fundal este fixa. Incercati sa micsorati fereastra si sa

derulati pana la sfarsitul paginii.</p> <p>Imaginea de fundal este fixa. Incercati sa micsorati fereastra si sa



derulati pana la sfarsitul paginii.</p>

20

21 22

23

<p>Imaginea de fundal este fixa. Incercati sa micsorati fereastra si sa





derulati pana la sfarsitul paginii.</p> </body> </html>

Toate proprietățile fundalului în CSS

Proprietate Descriere Valori

background Setează toate proprietățile background într-o singură declarație

background-color background-image background-repeat background-attachment background-position

background-attachment

Stabilește dacă imaginea de fundal este fixă sau defilează împreună cu restul paginii

scroll fixed

background-color Setează culoarea de fundal a unui element

color-rgb color-hex color-name transparent

background-image Setează imaginea de fundal a unui element url(URL)

none

background-position Setează poziția de început a unei imagini de fundal

top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos

background-repeat Stabilește dacă și cum va fi repetată imaginea de fundal

repeat repeat-x repeat-y no-repeat

6. Formatarea textului

Culoarea textului

Culoarea textului este stabilită cu proprietatea color. Culoarea poate fi specificată prin:

nume - un nume de culoare, de exemplu "red"; RGB - o valoare RGB, de exemplu "rgb(255,0,0)"; Hex - o valoare hexazecimală, de exemplu "#ff0000".

Culoarea implicită pentru întreaga pagină este definită în selectorul body.

EXEMPLUL 14

1

2

3 4

5

6 7

8

9

10 11

12

13 14

15

<html> <head>

<style type="text/css"> body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);} </style> </head> <body> <h1>Acesta este un titlu 1</h1> <p>Acesta este un paragraf obisnuit si are culoarea rosie. Culoarea

implicita a textului paginii este definita in selectorul body.</p>

<p class="ex">Acesta este un paragraf din clasa "ex" si are culoarea albastra.</p> </body> </html>

Observație:

Conform cerințelor W3C, dacă ați definit proprietatea color în body, trebuie să definiți și

proprietatea background-color. Alinierea textului

Proprietatea text-align este utilizată pentru a seta alinierea orizontală a textului. Textul poate fi aliniat la dreapta, la stânga, centrat sau justified.

EXEMPLUL 15

1

2

3 4

5

6

7 8

9

10 11

12

13 14

15

16

17 18

19

<html> <head>

<style type="text/css"> h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} </style> </head> <body> <h1>Exemplu de aliniere a textului cu CSS</h1>

<p class="date">Ianuarie, 2010</p>

<p class="main">” Daca asi sti ca efortul pentru scrierea unui roman ma poate costa viata, mi-asi lua toate masurile de siguranta pentru a inlatura o

eventualitate cum ar fi boala din care sa mi se traga moartea.Dar unica masura hotaratoare, aceea de a

renunta la scris, nu asi lua-o.”

<br />Marin Preda</p><p><b>Observație:</b> Modificați dimensiunea ferestrei browser-ului pentru a vedea cum arată

alinierea justified.</p> </body> </html>

Decorarea textului

Proprietatea text-decoration este utilizată pentru a stabili decorarea unui text. Cel mai

des este utilizată pentru a înlătura sublinierea link-urilor din motive de aspect, ca în

exemplul următor:

EXEMPLUL 16

1

2

3 4

5

6 7

8

9 10

11

<html> <head>

<style type="text/css"> a {text-decoration:none;} </style> </head> <body>

<p>Link catre: <a href="http://www.yahoo.com">Yahoo</a></p> </body> </html>

Poate fi utilizată și pentru a decora textul, ca în exemplul următor:

EXEMPLUL 17

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15 16

17

18

<html> <head>

<style type="text/css"> h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;} </style> </head> <body> <h1>Acesta este un titlu 1</h1> <h2>Acesta este un titlu 2</h2> <h3>Acesta este un titlu 3</h3> <h4>Acesta este un titlu 4</h4> <p><b>Obs:</b> Valoarea "blink" nu este recunoscuta de IE, Chrome, sau

Safari.</p> </body> </html>

Nu este recomandat să subliniați un text care nu este un link deoarece poate produce

confuzie în rândul cititorilor.

Transformarea textului

Proprietatea text-transform este utilizată pentru a specifica literele mici și literele mari

dintr-un text. Poate fi utilizată pentru a transforma tot textul în minuscule sau majuscule,

sau pentru a transforma în majusculă prima literă din fiecare cuvânt.

http://www.yahoo.com/

EXEMPLUL 18

1 2

3

4

5 6

7

8 9

10

11 12

13

14

15

<html> <head>

<style type="text/css"> p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} </style> </head> <body>

<p class="uppercase">Acesta este un text scris cu litere mari.</p>

<p class="lowercase">Acesta este un text scris cu litere mici.</p>

<p class="capitalize">Acesta este un text in care fiecare cuvant incepe cu litera mare.</p> </body> </html>

Indentarea textului

Proprietatea text-indentation este utilizată pentru a specifica indentarea primei linii

dintr-un text. EXEMPLUL 19

1

2

3 4

5

6 7

8

9

10 11

12

<html> <head>

<style type="text/css"> p {text-indent:50px;} </style> </head> <body> <p>”Daca asi sti ca efortul pentru scrierea unui roman ma poate costa

viata, mi-asi lua toate masurile de siguranta pentru a inlatura o

eventualitate cum ar fi boala din care sa mi se traga moartea. Dar

unica masura hotaratoare, aceea de a renunta la scris, nu asi lua-

o.”</p> <p>Marin Preda</p> </body> </html>

Exemplu: Ilustrează cum se mărește sau se micșorează spațiul dintre caractere. EXEMPLUL 20

1

2

3 4

5

6 7

8

9 10

11

12

13

<html> <head>

<style type="text/css"> h1 {letter-spacing:2px;} h2 {letter-spacing:-3px;} </style> </head> <body> <h1>Acesta este un titlu 1</h1> <h2>Acesta este un titlu 2</h2> </body> </html>

Exemplu : Ilustrează cum se stabilește spațiul dintre liniile unui paragraf.

EXEMPLUL 21

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15 16

17

18

19 20

21

22 23

24

25

26

<html> <head>

<style type="text/css"> p.small {line-height: 90%;} p.big {line-height: 200%;} </style> </head> <body> <p> Acesta este un paragraf cu distanța dintre linii normala. In majoritatea browserelor, distanta standard dintre linii este intre

110% si 120%. Acesta este un paragraf cu distanta dintre linii normala. </p>

<p class="small"> Acesta este un paragraf cu distanta dintre linii micsorata. Acesta este un paragraf cu distanta dintre linii micsorata Acesta este un paragraf cu distanta dintre linii micsorata. </p>

<p class="big"> Acesta este un paragraf cu distanta dintre linii marita. Acesta este un paragraf cu distanta dintre linii marita. Acesta este un paragraf cu distanta dintre linii marita. </p> </body> </html>

Exemplu :Ilustrează cum se schimbă direcția textului pentru un element.

EXEMPLUL 22

1 2

3

4 5

6

7 8

9

10

11 12

<html> <head>

<style type="text/css"> div.ex1 {direction:rtl;} </style> </head> <body> <div>Acest text are directia normala de scris.</div>

<div class="ex1">Acest text este scris de la dreapta la stanga.</div> </body> </html>

Exemplu: Ilustrează cum se mărește spațiul dintre cuvintele unui paragraf.

EXEMPLUL 23

1

2

<html> <head>

3

4 5

6

7 8

9

10

11 12

13

<style type="text/css"> p { word-spacing:30px; } </style> </head> <body> <p>Acesta este un text cu distanta dintre cuvinte marita.</p> </body> </html>

Exemplu: Ilustrează cum se forțează scrierea textului dintr-un element pe singură linie.

EXEMPLUL 24

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15

16 17

18

<html> <head>

<style type="text/css"> p { white-space:nowrap; } </style> </head> <body> <p> Acesta este un text. Acesta este un text. Acesta este un text. Acesta este un text. Acesta este un text. Acesta este un text. Acesta este un text. Acesta este un text. Acesta este un text. Acesta este un text. Acesta este un text. Acesta este un text. </p> </body> </html>

Exemplu : Ilustrează cum se stabilește alinierea verticală a unei imagini din text.

EXEMPLUL 25

1

2 3

4

5

6 7

8

9 10

11

12 13

14

<html> <head>

<style type="text/css"> img.top {vertical-align:text-top;} img.super {vertical-align:super;} </style> </head> <body>

<p>O <img src="../Taj_Mahal.jpg" alt="Hotelul Taj Mahal" width="100" /> imagine in interiorul unui paragraf, cu aliniere verticala

implicita.</p>

<p>O <img class="top" src="../Taj_Mahal.jpg" alt="Hotelul Taj

Mahal" width="100" /> imagine in interiorul unui paragraf,cu aliniere la marginea de sus a textului.</p>

<p>O <img class="super" src="../Taj_Mahal.jpg" alt="Hotelul Taj

Mahal" width="100" /> imagine in interiorul unui paragraf, cu aliniere la marginea de jos a textului.</p> </body> </html>

Exemplu: Ilustrează cum se adaugă umbră unui text.

EXEMPLUL 26

1 2

3

4 5

6

7 8

9

10

11 12

13

14 15

16

<html> <head>

<style type="text/css"> .c1 {text-shadow:1px 1px 2px blue, -1px -1px 2px lightblue;} .c2 {text-shadow:5px -9px red;} .c3 {text-shadow:5px -9px 3px green;} </style> </head> <body>

<h1 class="c1">text-shadow</h1>

<h1 class="c2">text-shadow</h1>

<h1 class="c3">text-shadow</h1> </body> </html>

Toate proprietățile CSS pentru formatarea textului

Proprietatea Descriere Valori

color Setează culoarea textului color

direction Setează direcția textului ltr rtl

line-height Setează distanța dintre linii

normal number length %

letter-spacing Mărește sau micșorează spațiul dintre caractere normal length

text-align Aliniază un element în cadrul textului

left right center justify

text-decoration Adaugă decorațiuni unui text

none underline overline line-through blink

text-indent Indentează prima linie de text dintr-un element length %

text-shadow Adaugă umbră unui text none

color length

text-transform Controlează literele unui element

none capitalize uppercase lowercase

vertical-align Setează alinierea verticală a unui element

baseline sub super top text-top middle bottom text-bottom length %

white-space Setează spațiul alb din interiorul unui element normal pre nowrap

word-spacing Mărește sau micșorează spațiul dintre cuvinte normal length

7. Fonturi

Proprietățile CSS pentru fonturi definesc familia de fonturi, îngroșarea, mărimea și stilul

unui text.

Familiile de fonturi în CSS

În CSS, numele unei familii de fonturi se poate defini în două moduri:

Familie generică – un grup de familii de fonturi care au un aspect similar (ca "Serif" sau "Monospace");

Familie de fonturi – o familie specifică de fonturi (ca "Times New Roman" sau "Arial").

Familia generică

Familia specifică

Descriere

Serif Times New Roman Georgia

Fonturile de tip serif au linii mici la sfârșitul unora dintre caractere.

Sans-serif Arial Verdana

"Sans" înseamnă fără – aceste fonturi nu au linii la sfârșitul caracterelor

Monospace Courier New Lucida Console

Toate caracterele monospace au aceeași lățime

http://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space

Familia de fonturi a unui text este stabilită cu proprietatea font-family. Această

proprietate ar trebui să precizeze cel puțin două familii de fonturi. Dacă browserul nu

recunoaște prima familie, o va încerca pe a doua. Începeți cu fontul pe care îl doriți și

terminați cu o familie generică.

Observație:

Dacă numele familiei de fonturi este format din mai multe cuvinte, numele trebuie scris

între ghilimele, ca: "Times New Roman". Dacă folosiți mai multe nume de fonturi, ele

trebuie separate în listă prin virgulă.

EXEMPLUL 27

1

2

3 4

5

6

7 8

9

10 11

12

13

14

<html> <head>

<style type="text/css"> p.serif {font-family:"Times New Roman", Times, Serif;} p.sansserif {font-family:Arial, Helvetica, Sans-serif;} </style> </head> <body> <h1>Familiile de fonturi in CSS</h1>

<p class="serif">Acest paragraf foloseste fontul Times New Roman.</p>

<p class="sansserif">Acest paragraf foloseste fontul Arial.</p> </body> </html>

Proprietatea font-style

Această proprietate este utilizată frecvent pentru a seta textul italic. Proprietatea are trei

valori:

normal – textul este afișat normal; italic – textul este afișat italic; oblique – foarte similar cu italic, dar mai puțin recunoscut de browsere.

EXEMPLUL 28

1 2

3

4 5

6

7 8

9

<html> <head>

<style type="text/css"> p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;} </style> </head> <body>

https://web.ceiti.md/images/fonts.gif

10

11 12

13

14 15

<p class="normal">Acest paragraf este scris cu fontul normal.</p>

<p class="italic">Acest paragraf este scris cu fontul italic.</p>

<p class="oblique">Acest paragraf este scris cu fontul oblic.</p> </body> </html>

Proprietatea font-size

Această proprietate stabilește dimensiunea unui text. Valoarea proprietății poate fi

absolută sau relativă.

Dimensiunea absolută:

Fixează textul la dimensiunea specificată; Nu permite user-ului să modifice dimensiunea textului în toate browserele (dezavantaj); Este utilă când este cunoscută dimensiunea fizică a ferestrei de afișare.

Dimensiunea relativă:

Stabilește dimensiunea textului în funcție de elementele înconjurătoare; Permite utilizatorului să modifice în browser dimensiunea textului.

Observație: Dacă nu specificați dimensiunea fontului, mărimea implicită pentru textul

normal (cum ar fi paragraful) este de 16px (16px=1em).

Stabilirea dimensiunii textului în pixeli

Dacă lucrați cu valori în pixeli, aveți control total asupra dimensiunii textului.

EXEMPLUL 29

1

2

3 4

5

6 7

8

9

10 11

12

13 14

15

16

<html> <head>

<style type="text/css"> h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;} </style> </head> <body> <h1>Acesta este un titlu 1</h1> <h2>Acesta este un titlu 2</h2> <p>Acesta este un paragraf.</p> <p>Daca precizati dimensiunea fontului in pixeli, in Firefox, Chrome,

si Safari textul va putea fi redimensionat, iar in Internet Explorer

nu.</p> </body> </html>

Observație:

Textul poate fi redimensionat în orice browser folosind instrumentul zoom. Aceasta se

aplică însă întregii pagini, nu numai textului dorit.

Stabilirea dimensiunii textului în em

Pentru a evita problemele de redimensionare din Internet Explorer, mulți proiectanți web

utilizează em în loc de pixeli. Unitatea de măsură em este recomandată și de W3C. 1em

este egal cu dimensiunea fontului normal, adică 16px. Pentru a trece de la pixeli la em

folosim formula: pixels/16=em

EXEMPLUL 30

1

2

3 4

5

6 7

8

9

10 11

12

13 14

15

16 17

<html> <head>

<style type="text/css"> h1 {font-size:2.5em;} /* 40px/16=2.5em */ h2 {font-size:1.875em;} /* 30px/16=1.875em */ p {font-size:0.875em;} /* 14px/16=0.875em */ </style> </head> <body> <h1>Acesta este un titlu 1</h1> <h2>Acesta este un titlu 2</h2>

<p>Acesta este un paragraf.</p> <p>Daca specificati dimensiunea fontului in em, in Internet Explorer,

Firefox, Chrome, si Safari textul va putea fi redimensiona </p> </body> </html>

Deși textul arată la fel ca în exemplul precedent, el poate fi redimensionat în orice

browser. Totuși, în Internet Explorer, când un text este redimensionat, devine mai mic sau

mai mare decât ar trebui.

Combinație de procente și em

Soluția care funcționează în toate browserele, este să stabiliți în procente dimensiunea

implicită pentru elementul body, ca în exemplul următor:

EXEMPLUL 31

1 2

3

4

5 6

7

8 9

10

11 12

13

14

15 16

17

<html> <head>

<style type="text/css"> body {font-size:100%;} h1 {font-size:2.5em;} h2 {font-size:1.875em;} p {font-size:0.875em;} </style> </head> <body> <h1>Acesta este un titlu 1</h1> <h2>Acesta este un titlu 2</h2> <p>Acesta este un paragraf.</p> <p>Daca specificati dimensiunea fontului in procente si em,textul va

fi afisat la fel in toate browserele si va putea fi redimensionat!</p> </body> </html>

Exemplu: Ilustrează cum se stabilește grosimea fontului.

EXEMPLUL 32

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15 16

17

<html> <head>

<style type="text/css"> p.normal {font-weight:normal;} p.light {font-weight:lighter;} p.thick {font-weight:bold;} p.thicker {font-weight:900;} </style> </head> <body>

<p class="normal">Acesta este un paragraf.</p>

<p class="light">Acesta este un paragraf.</p>

<p class="thick">Acesta este un paragraf.</p>

<p class="thicker">Acesta este un paragraf.</p> </body> </html>

Exemplu: Ilustrează cum se stabilește varianta fontului.

EXEMPLUL 33

1

2

3 4

5

6 7

8

9

10 11

12

13

<html> <head>

<style type="text/css"> p.normal {font-variant:normal} p.small {font-variant:small-caps;} </style> </head> <body>

<p class="normal">Numele meu este Andrei Ciobanu.</p>

<p class="small">Numele meu este Andrei Ciobanu.</p> </body> </html>

Exemplu: Ilustrează cum puteți folosi proprietatea scurtă pentru a stabili toate

caracteristicile fontului într-o singură declarație.

EXEMPLUL 34

1

2 3

4

5 6

7

8

9

<html> <head>

<style type="text/css"> p.ex1{ font:15px arial,sans-serif; } p.ex2{ font:italic bold 12px/30px Georgia, serif; }

10

11 12

13

14 15

16

17

</style> </head> <body>

<p class="ex1">Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf.

Acesta este un paragraf. Acesta este un paragraf. Acesta este un

paragraf. </p>

<p class="ex2"> Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf.

Acesta este un paragraf. Acesta este un paragraf. Acesta este un

paragraf. </p> </body> </html>

Toate proprietățile pentru fonturi în CSS


font Setează toate proprietățile fontului într-o singură declarație

font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar

font-family Specifică familia de fonturi family-name generic-family

font-size Specifică dimensiunea fontului

xx-small x-small small medium large x-large xx-large smaller larger length %

font-style Specifică stilul fontului normal italic oblique

font-variant

Specifică dacă textul este afișat sau nu cu majuscule mici

normal small-caps

font-weight Specifică grosimea fontului

normal bold bolder lighter

100 200 300 400 500 600 700 800 900

Unități de măsură utilizate în CSS

Unitățile de măsură sunt utilizate în CSS pentru a controla distanța față de marginile

browser-ului, față de alte elemente HTML, pentru a controla înălțimea literelor sau a unui

text. În CSS utilizăm două tipuri de unități de măsură:

- absolute - relative

Unitățile de măsură absolute

Caracteristica principală a unităților de măsură absolute este independența de orice

mediu electronic - sistem de operare, browser, rezoluție monitor - în care este aplicat.

Măsurile absolute sunt specifice lunii reale, cum ar

fi milimetrul, centimetri, puncte, inch, etc. Aceste unități de măsură sunt fixe în relație

cu mediul sau elementele la care se aplică.

Unitățile de măsură absolute utilizate în CSS:

Unități de măsură Descriere

in Inch, 1 inch este egal cu 2.54 cm

cm Centimetri

mm Milimetri

pt Puncte tipografice(point),1 punct este egal cu 1/72 inch

pc Picas, 1 picas este egal cu 12 puncte sau 1/6 inch.

Unitățile de măsură absolute sunt recomandate a fi utilizate pentru imprimarea unui

document, unde unitățile de măsură fizice, cum ar fi mm, cm, etc., sunt recunoscute, în

timp ce utilizarea lor pentru monitorul calculatorului nu sunt recomandate, deoarece

aceste unități de măsură absolute sunt independente de browser și rezoluția monitorului

unui calculator.

Unitățile de măsură relative

Unitățile de măsură relative se caracterizează prin faptul că sunt dependente de mediul

în care se aplică sistem de operare, rezoluție monitor, browser. Aceste unități de măsură

sunt relative în relație cu mediul sau elementele la care se aplică.

Unitățile de măsură relative utilizate de CSS:

Unități de măsură Descriere

em Lățimea literei m a fontului curent

ex Înălțimea literei x a fontului curent

px Pixeli – mărimea unui punct pe monitor, 1px este egal cu 1/96 inch.

% Procent

Unitățile de măsură relative sunt recomandate a fi folosite pentru aspectul unei pagini

web, deoarece sunt dependente de browser și rezoluția monitorului. Unitatea em este

utilizată pentru dimensiunea fontului, pixelii sunt utilizați pentru rezoluția monitorului

și procentajul se aplică în funcție de proprietatea utilizată.

Notă:

În documentele W3C, pixelii sunt considerați o unitate de măsură absolută. Sunt specialiști

în web design și CSS care consideră că pixelii sunt unități de măsură relativi, deoarece

utilizarea sa depinde de mai mulți factori, dintre care cel mai important este rezoluția

monitorului unui calculator. Eu, personal, subscriu la opinia acestora specialiști în web

design, care consideră că pixelii sunt unități de măsură relativi, datorită faptului că

utilizarea sa este relativă, în mod deosebit, în ceea ce privește rezoluția monitorului.

8. Linkuri

Formatarea linkurilor

Linkurile pot fi stilizate cu ajutorul proprietăților CSS , cum ar fi color, font-

family, background-color. Special pentru linkuri este faptul că ele trebuie formatate

diferit, în funcție de starea în care sunt. Cele patru stări ale unui link sunt:

a:link - link normal, nevizitat; a:visited - link care a fost vizitat de user; a:hover - link peste care se mișcă mouse-ul; a:active - link apăsat (activ).

EXEMPLUL 35

1

2

3

4 5

6

7 8

9

10

11 12

13

14 15

16

<html> <head>

<style type="text/css"> a:link {color:#FF0000} /* link nevizitat */ a:visited {color:#00FF00} /* link vizitat */ a:hover {color:#FF00FF} /* link peste care se misca mouse-ul */ a:active {color:#0000FF} /* link selectat */ </style> </head> <body>

<p><b><a href="http://www.google.com" target="_blank">Acesta este un link</a></b></p> <p><b>Nota:</b> a:hover TREBUIE scrisa in definitia CSS dupa a:link si

a:visited pentru a fi efectiva.</p> <p><b>Nota:</b> a:active TREBUIE scrisa in definitia CSS dupa a:hover

pentru a fi efectiva.</p> </body> </html>

http://www.google.com/

Când stabiliți stilul linkurilor, există anumite reguli privind ordinea declarațiilor:

- a:hover trebuie scrisă după a:link și a:visited - a:active trebuie scrisă după a:hover

Decorarea textului

Proprietatea text-decoration este folosită cel mai des pentru a înlătura sublinierea link-

urilor.

EXEMPLUL 36

1

2

3 4

5

6 7

8

9

10 11

12

13 14

<html> <head>

<style type="text/css"> a:link {text-decoration:none} /* link nevizitat */ a:visited {text-decoration:none} /* link vizitat */ a:hover {text-decoration:underline} /* mouse peste link */ a:active {text-decoration:underline} /* link selectat */ </style> </head> <body>

<p><b><a href="http://www.google.com" target="_blank">Acesta este un link</a></b></p> </body> </html>

Culoarea fundalului

Proprietatea background-color este utilizată pentru a specifica culoarea de fundal a

linkurilor.

EXEMPLUL 37

1

2

3 4

5

6

7 8

9

10 11

12

13

14

<html> <head>

<style type="text/css"> a:link {background-color:#B2FF99;} /* link nevizitat */ a:visited {background-color:#FFFF85;} /* link vizitat */ a:hover {background-color:#FF704D;} /* mouse peste link */ a:active {background-color:#FF704D;} /* link selectat */ </style> </head> <body>

<p><b><a href="http://www.google.com" target="_blank">Acesta este un link</a></b></p> </body> </html>

Exemplu: Ilustrează cum se aplică unui link diferite stiluri.

EXEMPLUL 38

1 2

<html> <head>



3

4 5

6

7 8

9

10

11 12

13

14 15

16

17 18

19

20

21 22

23

24 25

26

27

28 29

30

<style type="text/css"> a.one:link {color:#ff0000;} a.one:visited {color:#0000ff;} a.one:hover {color:#ffcc00;} a.two:link {color:#ff0000;} a.two:visited {color:#0000ff;} a.two:hover {font-size:150%;} a.three:link {color:#ff0000;} a.three:visited {color:#0000ff;} a.three:hover {background:#66ff66;} a.four:link {color:#ff0000;} a.four:visited {color:#0000ff;} a.four:hover {font-family:monospace;} a.five:link {color:#ff0000;text-decoration:none;} a.five:visited {color:#0000ff;text-decoration:none;} a.five:hover {text-decoration:underline;} </style> </head> <body> <p>Plimbati mouse-ul peste linkuri pentru a vedea cum se schimba

aspectul lor.</p>

<p><b><a class="one" href="http://www.google.com" target="_blank">Acest link isi schimba culoarea</a></b></p>

<p><b><a class="two" href="http://www.google.com" target="_blank">Acest link isi schimba dimensiunea fontului</a></b></p>

<p><b><a class="three" href="http://www.google.com" target="_blank">Acest link isi schimba culoarea de fundal</a></b></p>

<p><b><a class="four" href="http://www.google.com" target="_blank">Acest link isi schimba familia de fonturi</a></b></p>

<p><b><a class="five" href="http://www.google.com" target="_blank">Acest link isi schimba decoratia</a></b></p> </body> </html>

Exemplu : Ilustrează cum se combină mai multe proprietăți CSS pentru a afișa link-urile ca

niște căsuțe colorate.

EXEMPLUL 39

1

2

3

4 5

6

7 8

9

10 11

12

13

14 15

16

17

<html> <head>

<style type="text/css"> a:link,a:visited { display:block; font-weight:bold; color:#FFFFFF; background-color:#98bf21; width:120px; text-align:center; padding:4px; text-decoration:none; } a:hover,a:active { background-color:#7A991A; } </style>






18

19 20

21

22 23

</head> <body>

<a href="http://www.google.com" target="_blank">Acesta este un link</a> </body> </html>

9. Liste

Proprietățile CSS pentru liste vă permit să:

- setați diferiți marcatori pentru itemii dintr-o listă ordonată sau neordonată - să setați o imagine ca marcator pentru itemii unei liste neordonate

Setarea diferiților marcatori

Tipul marcatorilor itemilor dintr-o listă neordonată se stabilește cu proprietatea list-style-

type.

EXEMPLUL 40

1

2

3 4

5

6 7

8

9 10

11

12

13 14

15

16 17

18

19 20

21

22

23 24

25

26 27

28

29

30 31

32

33 34

35

<html> <head>

<style type="text/css"> ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} </style> </head> <body> <p>Exemplu de lista neordonata:</p>

<ul class="a"> <li>Cafea</li> <li>Ceai</li> <li>Pepsi</li> </ul>

<ul class="b"> <li>Cafea</li> <li>Ceai</li> <li>Pepsi</li> </ul> <p>Exemplu de listă ordonată:</p>

<ol class="c"> <li>Cafea</li> <li>Ceai</li> <li>Pepsi</li> </ol>

<ol class="d"> <li>Cafea</li> <li>Ceai</li> <li>Pepsi</li> </ol> </body> </html>


Valorile proprietății pentru liste neordonate

Valoare Descriere

none Fără marcator

disc Implicit. Marcatorul este un cerc plin

circle Marcatorul este un cerc gol

square Marcatorul este un pătrat

Valorile proprietății pentru liste ordonate

Valoare Descriere

armenian Marcatorul este un număr tradițional armenesc

decimal Marcatorul este un număr în baza zece

decimal-leading-zero

Marcatorul este un număr precedat de zero (01, 02, 03, etc.)

georgian Marcatorul este un număr tradițional georgian (an, ban, gan, etc.)

lower-alpha Marcatorul este litera mica (a, b, c, d, e, etc.)

lower-greek Marcatorul este literă mică grecească (alpha, beta, gamma, etc.)

lower-latin Marcatorul este literă latină mică (a, b, c, d, e, etc.)

lower-roman Marcatorul este număr roman mic (i, ii, iii, iv, v, etc.)

upper-alpha Marcatorul ete literă mare (A, B, C, D, E, etc.)

upper-latin Marcatorul este literă latină mare (A, B, C, D, E, etc.)

upper-roman Marcatorul este număr roman mare (I, II, III, IV, V, etc.)

Observație:

Nici-o versiune de Internet Explorer (inclusiv IE8) nu acceptă valorile "decimal-leading-

zero", "lower-greek", "lower-latin", "upper-latin", "armenian", sau "georgian".

O imagine ca marcator în listă

Pentru a specifica o imagine ca marcator într-o listă se utilizează proprietatea list-style-

image, ca în exemplul următor:

EXEMPLUL 41

1

2

3

4 5

6

7 8

9

10

11 12

<html> <head>

<style type="text/css"> ul{ list-style-image:url('sqpurple.gif'); } </style> </head> <body> <ul> <li>Ceai</li> <li>Cafea</li>

13

14 15

16

17

<li>Lapte</li> </ul> </body> </html>

Proprietatea scurtă

Puteți specifica toate proprietățile unei liste într-o singură declarație folosind list-style ca

în următorul exemplu:

1

2

3 4

5

6 7

8

9

10 11

12

13 14

15

16

17 18

<html> <head>

<style type="text/css"> ul { list-style:square url("sqpurple.gif"); } </style> </head> <body> <ul> <li>Cafea</li> <li>Ceai</li> <li>Lapte</li> </ul> </body> </html>

Când folosiți varianta scurtă, ordinea valorilor este:

- list-style-type - list-style-position -list-style-image

Nu contează dacă unele valori lipsesc, cât timp valorile care apar respectă această ordine.

Exemplu: Acest exemplu ilustrează utilizarea tuturor tipurilor de marcatori în CSS.

EXEMPLUL 42

1 2

3

4 5

6

7

8 9

10

11 12

13

14

<html> <head>

<style type="text/css"> ul.a {list-style-type:disc;} ul.b {list-style-type:circle;} ul.c {list-style-type:square;} ul.d {list-style-type:none;} ol.e {list-style-type:decimal;} ol.f {list-style-type:decimal-leading-zero;} ol.g {list-style-type:lower-roman;} ol.h {list-style-type:upper-roman;} ol.i {list-style-type:lower-alpha;} ol.j {list-style-type:upper-alpha;} ol.k {list-style-type:lower-greek;} ol.l {list-style-type:lower-latin;}

15

16 17

18

19 20

21

22

23 24

25

26 27

28

29 30

31

32

33 34

35

36 37

38

39

40 41

42

43 44

45

46 47

48

49

50 51

52

53 54

55

56 57

58

59

60 61

62

63 64

65

66

67 68

69

ol.m {list-style-type:upper-latin;} ol.n {list-style-type:armenian;} ol.o {list-style-type:georgian;} </style> </head> <body>

<ul class="a"> <li>Discuri</li> <li>Ceai</li> <li>Cafea</li> </ul>

<ul class="b"> <li>Cercuri</li> <li>Ceai</li> <li>Cafea</li> </ul>

<ul class="c"> <li>Patrate</li> <li>Paine</li> <li>Oua</li> </ul>

<ul class="d"> <li>Fara marcatori</li> <li>Carti</li> <li>Caiete</li> </ul>

<ol class="e"> <li>Marcatori cifre</li> <li>Baieti</li> <li>Fete</li> </ol>

<ol class="f"> <li>Marcatori care incep cu zero</li> <li>Rochii</li> <li>Camasi</li> </ol>

<ol class="g"> <li>Cifre romane mici</li> <li>Case</li> <li>Vile</li> </ol>

<ol class="h"> <li>Cifre romane mari</li> <li>Carioci</li> <li>Acuarele</li> </ol>

<ol class="i"> <li>Marcatori litere mici</li> <li>Mere</li> <li>Lamai</li> </ol>

<ol class="j"> <li>Marcatori litere mari</li> <li>Gutui</li> <li>Pere</li>

70

71 72

73

74 75

76

77

78 79

80

81 82

83

84 85

86

87

88 89

90

91 92

93

94

95 96

97

98 99

</ol>

<ol class="k"> <li>Litere grecesti mici</li> <li>Cai</li> <li>Iepuri</li> </ol>

<ol class="l"> <li>Litere latine mici</li> <li>Lapte</li> <li>Suc</li> </ol>

<ol class="m"> <li>Litere latine mari</li> <li>Carti</li> <li>Reviste</li> </ol>

<ol class="n"> <li>Marcatori armenesti</li> <li>Pantaloni</li> <li>Sacouri</li> </ol>

<ol class="o"> <li>Marcatori georgieni</li> <li>Bere</li> <li>Vin</li> </ol> </body> </html>

Toate proprietățile pentru liste în CSS


list-style Precizează toate proprietățile listei într-o singură declarație

list-style-type list-style-position list-style-image

list-style-image

Specifică o imagine drept marcator URL none

list-style-position

Specifică dacă marcatorii din listă sunt în interiorul sau exteriorul conținutului

inside outside

list-style-type Specifică tipul marcatorilor din listă

none disc circle square decimal decimal-leadingzero armenian georgian lower-alpha upper-alpha

lower-greek lower-latin upper-latin lower-roman upper-roman

10. Tabele

Aspectul unui tabel HTML poate fi îmbunătățit folosind CSS.

Chenarele tabelului

Pentru a specifica chenarele unui tabel în CSS, se folosește proprietatea border. Exemplul

următor setează un chenar negru pentru tabel și pentru elementele th și td:

EXEMPLUL 43

1 2

3

4

5 6

7

8 9

10

11

12 13

14

15 16

17

<html> <head>

<style type="text/css"> table,th,td{ border:1px solid black; } </style> </head> <body> <table> <tr><th>Nume</th><th>Prenume</th></tr> <tr><td>Scutelnic</td><td>Speranța</td></tr> <tr><td>Cojocaru</td><td>Cristian</td></tr> </table> </body> </html>

Observați că tabelul din exemplul anterior are chenare duble. Acest lucru se întâmplă

deoarece elementele table, th, și td au chenare separate. Pentru a afișa un singur chenar

pentru tabel, folosiți proprietatea border-collapse.

Proprietatea border-collapse

Această proprietate specifică dacă chenarele tabelului sunt sau nu reunite întrunul singur.

EXEMPLUL 44

1 2

3

4 5

6

7

8 9

10

<html> <head>

<style type="text/css"> table { border-collapse:collapse; } table, td, th{ border:1px solid black; } </style>

11

12 13

14

15 16

17

18

19 20

</head> <body> <table> <tr><th>Nume</th><th>Prenume</th></tr> <tr><td>Scutelnic</td><td>Speranța</td></tr> <tr><td>Cojocaru</td><td>Cristian</td></tr> </table> </body> </html>

Dimensiunile unui tabel

Cu ajutorul proprietăților width și height puteți stabili lățimea și înălțimea unui tabel. În

exemplul următor lățimea tabelului este stabilită la 100% și înălțimea elementelor th la

50px:

EXEMPLUL 45

1 2

3

4 5

6

7 8

9

10

11 12

13

14 15

16

17 18

19

20

21 22

23

24 25

<html> <head>

<style type="text/css"> table,td,th { border:1px solid black; } table { width:100%; } th { height:50px; } </style> </head> <body> <table> <tr><th>Nume</th><th>Prenume</th><th>Economii</th></tr> <tr><td>Scutelnic</td><td>Speranța</td><td>5000 MDL</td></tr> <tr><td>Cojocaru</td><td>Cristian</td><td>3500 MDL</td></tr> <tr><td>Barbu</td><td>Lucia</td><td>3000 MDL</td></tr> <tr><td>David</td><td>Andrei</td><td>4500 MDL</td></tr> </table> </body> </html>

Alinierea textului din tabel

Pentru a alinia textul dintr-un tabel se folosesc proprietățile text-align și vertical-align.

Proprietatea text-align stabilește alinierea orizontală a textului, care poate avea

valorile left, right sau center:

EXEMPLUL 46

1

2 3

<html> <head>

<style type="text/css">

4

5 6

7

8 9

10

11

12 13

14

15 16

17

18 19

20

21

22

table,td,th { border:1px solid black; } td { text-align:right; } </style> </head> <body> <table> <tr><th>Nume</th><th>Prenume</th><th>Economii</th></tr> <tr><td>Scutelnic</td><td>Speranța</td><td>5000 MDL</td></tr> <tr><td>Cojocaru</td><td>Cristian</td><td>3500 MDL</td></tr> <tr><td>Barbu</td><td>Lucia</td><td>3000 MDL</td></tr> <tr><td>David</td><td>Andrei</td><td>4500 MDL</td></tr> </table> </body> </html>

Proprietatea vertical-align stabilește alinierea verticală a textului, și poate avea

valorile top, bottom sau middle:

EXEMPLUL 47

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15 16

17

18

19 20

21

22 23

<html> <head>

<style type="text/css"> table, td, th { border:1px solid black; } td { height:50px; vertical-align:bottom; } </style> </head> <body> <table> <tr><th>Nume</th><th>Prenume</th><th>Economii</th></tr> <tr><td>Scutelnic</td><td>Speranța</td><td>5000 MDL</td></tr> <tr><td>Cojocaru</td><td>Cristian</td><td>3500 MDL</td></tr> <tr><td>Barbu</td><td>Lucia</td><td>3000 MDL</td></tr> <tr><td>David</td><td>Andrei</td><td>4500 MDL</td></tr> </table> </body> </html>

Spațiul dintre chenar și conținut (table padding)

Pentru a controla spațiul dintre chenarul și conținutul tabelului, utilizați în

elementele td și th proprietatea padding:

EXEMPLUL 48

1

2

3 4

5

6

7 8

9

10 11

12

13

14 15

16

17 18

19

20 21

22

<html> <head>

<style type="text/css"> table, td, th { border:1px solid black; } td { padding:15px; } </style> </head> <body> <table> <tr><th>Nume</th><th>Prenume</th><th>Economii</th></tr> <tr><td>Scutelnic</td><td>Speranța</td><td>5000 MDL</td></tr> <tr><td>Cojocaru</td><td>Cristian</td><td>3500 MDL</td></tr> <tr><td>Barbu</td><td>Lucia</td><td>3000 MDL</td></tr> <tr><td>David</td><td>Andrei</td><td>4500 MDL</td></tr> </table> </body> </html>

Culoarea tabelelor

În exemplul următor este precizată culoarea chenarului tabelului și culorile pentru textul

și fundalul elementelor th:

EXEMPLUL 49

1

2

3 4

5

6 7

8

9 10

11

12

13 14

15

16 17

18

19 20

21

22

23

<html> <head>

<style type="text/css"> table, td, th { border:1px solid green; } th { background-color:green; color:white; } </style> </head> <body> <table> <tr><th>Nume</th><th>Prenume</th><th>Economii</th></tr> <tr><td>Scutelnic</td><td>Speranța</td><td>5000 MDL</td></tr> <tr><td>Cojocaru</td><td>Cristian</td><td>3500 MDL</td></tr> <tr><td>Barbu</td><td>Lucia</td><td>3000 MDL</td></tr> <tr><td>David</td><td>Andrei</td><td>4500 MDL</td></tr> </table> </body> </html>

Exemplu: Ilustrează cum puteți crea un tabel cu un aspect deosebit. EXEMPLUL 50

1

2

3 4

5

6

7 8

9

10 11

12

13

14 15

16

17 18

19

20 21

22

23

24 25

26

27 28

29

30 31

32

33

34 35

36

37 38

39

40

41 42

43

44

<html> <head>

<style type="text/css"> #customers { font-family:"Trebuchet MS", Arial, Helvetica, sansserif; width:100%; border-collapse:collapse; } #customers td, #customers th { font-size:1em; border:1px solid #98bf21; padding:3px 7px 2px 7px; } #customers th { font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color:#A7C942; color:#ffffff; } #customers tr.alt td{ color:#000000; background-color:#EAF2D3; } </style> </head> <body>

<table id="customers"> <tr><th>Compania</th><th>Contact</th><th>Tara</th></tr> <tr><td>Alfreds Futterkiste</td><td>Maria

Anders</td><td>Germania</td></tr>

<tr class="alt"><td>Berglunds snabbköp</td><td>Christina Berglund</td><td>Suedia</td></tr> <tr><td>Centro comercial Moctezuma</td><td>Francisco

Chang</td><td>Mexic</td></tr>

<tr class="alt"><td>Ernst Handel</td><td>Roland Mendel</td><td>Austria</td></tr> <tr><td>Island Trading</td><td>Helen Bennett</td><td>UK</td></tr>

<tr class="alt"><td>Königlich Essen</td><td>Philip Cramer</td><td>Germania</td></tr> <tr><td>Laughing Bacchus Winecellars</td><td>Yoshi

Tannamuri</td><td>Canada</td></tr>

<tr class="alt"><td>Magazzini Alimentari Riuniti</td><td>Giovanni Rovelli</td><td>Italia</td></tr> <tr><td>North/South</td><td>Simon Crowther</td><td>UK</td></tr>

<tr class="alt"><td>Paris spécialités</td><td>Marie Bertrand</td><td>Franta</td></tr> </table> </body> </html>

Exemplu: Ilustrează cum stabiliți poziția denumirii tabelului (proprietatea caption). EXEMPLUL 51

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15 16

17

18

19 20

21

<html> <head>

<style type="text/css"> caption {caption-side:bottom;} </style> </head> <body>

<table border="1"> <caption>Tabel 1.1 Clienti</caption> <tr><th>Compania</th><th>Contact</th><th>Tara</th></tr> <tr><td>Alfreds Futterkiste</td><td>Maria

Anders</td><td>Germania</td></tr> <tr><td>Berglunds snabbköp</td><td>Christina

Berglund</td><td>Suedia</td></tr> <tr><td>Centro comercial Moctezuma</td><td>Francisco

Chang</td><td>Mexic</td></tr> <tr><td>Ernst Handel</td><td>Roland Mendel</td><td>Austria</td></tr> <tr><td>Island Trading</td><td>Helen Bennett</td><td>UK</td></tr> <tr><td>Magazzini Alimentari Riuniti</td><td>Giovanni

Rovelli</td><td>Italia</td></tr> <tr><td>North/South</td><td>Simon Crowther</td><td>UK</td></tr> </table> </body> </html>

11. Modelul box în CSS

Toate elementele HTML pot fi considerate a fi de tip box (casetă). În CSS, termenul "box

model" este folosit când se discută despre proiectare și aspect. În CSS modelul box este în

esență o casetă care înconjoară un element HTML și este formată din: margini, chenare,

distanța dintre chenar și conținut (padding) și conținut. Modelul box ne permite să plasăm

chenare în jurul elementelor și să amplasăm elementele în relație cu alte elemente.

Imaginea de mai jos ilustrează modelul box:

Explicarea componentelor:

https://web.ceiti.md/images/box1.png

Margin - o zonă goală în jurul unui chenar. Marginea nu are culoare de fundal și este complet transparentă.

Border - un chenar care înconjoară conținutul. Padding - o zonă goală în jurul conținutului. Această zonă este afectată de culoarea de

fundal a casetei. Content - conținutul casetei, unde apar textul și imaginile.

Pentru a stabili corect înălțimea și lățimea unui element în orice browser, trebuie să

înțelegeți cum lucrează modelul box.

Dimensiunile unui element:

Important:

Când specificați în CSS proprietățile width și height ale unui element, stabiliți de fapt

dimensiunile numai pentru zona de conținut din desenul de mai sus. Pentru a cunoaște

adevăratele dimensiuni ale unui element, trebuie să adăugați padding-ul, chenarul și

marginea. Lățimea totală a elementului din exemplul următor este 300px:

width:250px;

padding:10px;

border:5px solid gray;

margin:10px;

Să socotim: 250px (lățimea conținutului) + 20px (padding-ul stâng și drept) + 10px

(chenarul din stânga și din dreapta) + 20px (marginea din stânga și din dreapta) = 300px

Să presupunem că există doar 250px spațiu pentru un element și să construim un element

cu lățimea totală de 250px: EXEMPLUL 52

1

2

3 4

5

6

7 8

9

10 11

12

13 14

15

16

17 18

19

20 21

<html> <head>

<style type="text/css"> div.ex{ width:220px; padding:10px; border:5px solid gray; margin:0px; } </style> </head> <body>

<img src="..250px.gif" width="250" height="10" /><br /><br />

<div class="ex">Linia de deasupra are 250px lungime.<br /> Lungimea totala a acestui element este tot 250px. </div> <p><b>Important:</b> Acest exemplu nu va fi afisat corect in

IE!<br /></p> </body> </html>

Lățimea totală a unui element trebuie calculată astfel:

Lățimea totală a elementului = lățime + padding-ul stâng + padding-ul drept + chenarul

stâng + chenarul drept + marginea stângă + marginea dreaptă

Înălțimea totală a unui element trebuie calculată astfel:

Înălțimea totală a elementului = înălțime + padding-ul de sus + padding-ul de jos +

chenarul de sus+ chenarul de jos + marginea de sus + marginea de jos

Probleme de compatibilitate în browsere:

Dacă testați exemplul anterior în Internet Explorer, veți vedea că lățimea totală nu este de

250px. IE include padding-ul și bordura în lățime, când proprietatea width este setată.

Pentru a rezolva această problemă, adăugați în document declarația DOCTYPE ca în

exemplul următor:

EXEMPLUL 53

1

2 3

4

5

6 7

8

9 10

11

12

13 14

15

16 17

18

19 20

21

22

23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>

<style type="text/css"> div.ex{ width:220px; padding:10px; border:5px solid gray; margin:0px; } </style> </head> <body>

<img src="250px.gif" width="250" height="10" /><br /><br />

<div class="ex">

Linia de deasupra are 250px lungime.<br /> Acum latimea totala a acestui element este tot 250px. </div> <p><b>Note:</b> In acest exemplu am adaugat declaratia DOCTYPE

(deasupra elementului html), astfel incat va fi afisat corect in toate browserele.</p> </body> </html>

12. Chenare

Proprietatea CSS border definește chenarul din jurul unui element. Puteți specifica stilul și

culoarea unui element al chenarului.

Stilul chenarului

Proprietatea border-style specifică ce fel de bordură va fi afișată.

Observație:

Nici-una din celelalte proprietăți ale chenarului nu va avea efect, dacă

proprietatea border-style nu este setată. Acest exemplu ilustrează ce valori poate avea

proprietatea border-style și cum arată fiecare chenar:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-

EXEMPLUL 54

1

2

3 4

5

6

7 8

9

10 11

12

13

14 15

16

17 18

19

20 21

22

23

24 25

26

27 28

29

30

<html> <head>

<style type="text/css"> p.none {border-style:none} p.dotted {border-style:dotted}

p.dashed {border-style:dashed} p.solid {border-style:solid} p.double {border-style:double} p.groove {border-style:groove} p.ridge {border-style:ridge} p.inset {border-style:inset} p.outset {border-style:outset} p.hidden {border-style:hidden} </style> </head> <body>

<p class="none">Fara chenar.</p>

<p class="dotted">Chenar punctat.</p>

<p class="dashed">Chenar tip linie intrerupta.</p>

<p class="solid">Chenar plin.</p>

<p class="double">Chenar dublu.</p>

<p class="groove">Chenar tip groove.</p>

<p class="ridge">Chenar tip ridge.</p>

<p class="inset">Chenar tip inset.</p>

<p class="outset">Chenar tip outset.</p>

<p class="hidden">Chenar ascuns.</p> </body> </html>

Grosimea chenarului

Grosimea chenarului se stabilește cu proprietatea border-width. Grosimea se stabilește în

pixeli sau se folosește una din valorile predefinite: thin, medium, sau thick.

Observație:

Proprietatea border-width nu funcționează dacă este utilizată singură; mai întâi trebuie

stabilită proprietatea border-style.

EXEMPLUL 55

1 2

3

4 5

6

7

8 9

10

11 12

<html> <head>

<style type="text/css"> p.one{ border-style:solid; border-width:5px; } p.two{ border-style:solid; border-width:medium; } p.three{

13

14 15

16

17 18

19

20

21 22

23

24

border-style:solid; border-width:1px; } </style> </head> <body>

<p class="one">Un text oarecare.</p>

<p class="two">Un text oarecare.</p>

<p class="three">Un text oarecare.</p> </body> </html>

Culoarea chenarului

Pentru a stabili culoarea chenarului se utilizează proprietatea border-color. Culoarea

poate fi precizată prin:

nume - numele culorii, ca "red" RGB - valoare RGB, ca "rgb(255,0,0)" Hex - valoare hexazecimală, ca "#ff0000"

Puteți stabili culoarea chenarului și cu valoarea "transparent".

Observație:

Proprietatea border-color nu are nici-un efect dacă nu a fost setată mai întâi

proprietatea border-style.

EXEMPLUL 56

1

2

3 4

5

6 7

8

9 10

11

12

13 14

15

16 17

18

19

<html> <head>

<style type="text/css"> p.one{ border-style:solid; border-color:red; } p.two{ border-style:solid; border-color:#98bf21; } </style> </head> <body>

<p class="one">Un chenar rosu plin.</p>

<p class="two">Un chenar verde plin.</p> </body> </html>

Laturile unui chenar

În CSS este posibil să setați în mod diferit laturile unui chenar.

EXEMPLUL 57

1

2

3 4

5

6

7 8

9

10 11

12

13

14 15

16

<html> <head>

<style type="text/css"> p{ border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; } </style> </head> <body> <p>Acest paragraf are doua tipuri de chenare.</p> </body> </html>

Exemplul anterior poate fi realizat și cu o singură declarație, ca în exemplul următor:

EXEMPLUL 58

1 2

3

4 5

6

7

8 9

10

11 12

13

<html> <head>

<style type="text/css"> p{ border-style:dotted solid; } </style> </head> <body> <p>Acest paragraf are doua tipuri de chenare.</p> </body> </html>

Proprietatea border-style poate avea între una și patru valori.

border-style:dotted solid double dashed:

latura de sus este punctată; latura dreaptă este plină; latura de jos este dublă;

latura stângă este întreruptă.

border-style:dotted solid double:

latura de sus este punctată, laturile dreaptă și stângă sunt pline; latura de jos este dublă.

border-style:dotted solid;

laturile de sus și de jos sunt punctate; laturile din stânga și din dreapta sunt pline.

border-style:dotted;

cele patru laturi sunt punctate.


Pentru a scurta codul, este posibil să specificăm toate proprietățile chenarului într-o

singură proprietate. Pentru chenare, varianta scurtă este border:

EXEMPLUL 59

1

2 3

4

5

6 7

8

9 10

11

12 13

<html> <head>

<style type="text/css"> p{ border:5px solid red; } </style> </head> <body> <p>Acesta este un paragraf oarecare.</p> </body> </html>

Când folosiți varianta scurtă, ordinea valorilor este:

border-width border-style

border-color

Nu contează ce valori lipsesc (oricum border-style trebuie să apară), atât timp cât valorile

prezente sunt specificate în această ordine.

Exemplu:Ilustrează utilizarea variantei scurte pentru a seta toate proprietățile chenarului

cu o singură declarație.

EXEMPLUL 60

1

2 3

4

5

6 7

8

9 10

11

12 13

14

<html> <head>

<style type="text/css"> p{ border-style:solid; border-top:thick double #ff0000; } </style> </head> <body> <p>Acesta este un paragraf oarecare.</p> </body> </html>

Exemplu: Ilustrează cum se stabilește stilul laturii de jos a chenarului.

EXEMPLUL 61

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15 16

17

18

19 20

21

22 23

24

25

26 27

28

<html> <head>

<style type="text/css"> p {border-style:solid} p.none {border-bottom-style:none} p.dotted {border-bottom-style:dotted} p.dashed {border-bottom-style:dashed} p.solid {border-bottom-style:solid} p.double {border-bottom-style:double} p.groove {border-bottom-style:groove} p.ridge {border-bottom-style:ridge} p.inset {border-bottom-style:inset} p.outset {border-bottom-style:outset} </style> </head> <body>

<p class="none">Chenar fara latura de jos.</p>

<p class="dotted">Chenar cu latura de jos punctata.</p>

<p class="dashed">Chenar cu latura de jos intrerupta.</p>

<p class="solid">Chenar cu latura de jos plina.</p>

<p class="double">Chenar cu latura de jos dubla.</p>

<p class="groove">Chenar cu latura de jos groove.</p>

<p class="ridge">Chenar cu latura de jos ridge.</p>

<p class="inset">Chenar cu latura de jos inset.</p>

<p class="outset">Chenar cu latura de jos outset.</p> </body> </html>

Exemplu: Ilustrează cum se stabilește grosimea laturii stângi a chenarului.

EXEMPLUL 62

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15

16

<html> <head>

<style type="text/css"> p{ border-style:solid; border-left-width:15px; } </style> </head> <body> <p><b>Note:</b> Proprietatea "border-left-width" functioneaza numai daca ati setat mai intai proprietatea "border-style".</p> </body> </html>

Exemplu: Ilustrează cum se stabilește culoarea fiecărei laturi a chenarului.

EXEMPLUL 63

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15 16

17

18

19 20

21

22 23

24

25

26 27

28

29

<html> <head>

<style type="text/css"> p.one{ border-style:solid; border-color:#0000ff; } p.two{ border-style:solid; border-color:#ff0000 #0000ff; } p.three{ border-style:solid; border-color:#ff0000 #00ff00 #0000ff; } p.four{ border-style:solid; border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255); } </style> </head> <body>

<p class="one">Chenar cu o singura culoare!</p>

<p class="two">Chenar cu doua culori!</p>

<p class="three">Chenar cu trei culori!</p>

<p class="four">Chenar cu patru culori!</p> </body> </html>

Exemplu: Ilustrează cum se stabilește culoarea pentru latura dreaptă a chenarului.

EXEMPLUL 64

1

2

3 4

5

6

7 8

9

10 11

12

13

14

<html> <head>

<style type="text/css"> p{ border-style:solid; border-right-color:#ff0000; } </style> </head> <body> <p>Acesta este un paragraf.</p> </body> </html>

Toate proprietățile CSS pentru chenare


border Setează toate proprietățile într-o singură declarație

border-width border-style border-color

border-bottom Setează toate proprietățile laturii de jos a chenarului cu o singură declarație

border-bottom-width border-bottom-style border-bottom-color

border-bottom-color

Stabilește culoarea laturii de jos border-color

border-bottom-style

Stabilește stilul laturii de jos border-style

border-bottom-width

Stabilește grosimea laturii de jos border-width

border-color Stabilește culoarea întregului chenar

color_name hex_number rgb_number transparent

border-left Stabilește toate proprietățile laturii stângi cu o singură declarație

border-left-width border-left-style border-left-color

border-left-color Stabilește culoarea laturii stângi border-color

border-left-style Stabilește stilul laturii stângi border-style

border-left-width

Stabilește grosimea laturii stângi border-width

border-right Stabilește toate proprietățile laturii drepte cu o singură declarație

border-right-width border-right-style border-right-color

border-right-color

Stabilește culoarea laturii drepte border-color

border-right-style

Stabilește stilul laturii drepte border-style

border-right-width

Stabilește grosimea laturii drepte border-width

border-style Stabilește stilul pentru întregul chenar

none hidden dotted dashed solid double

groove ridge inset outset

border-top Stabilește toate proprietățile laturii de sus cu o singură declarație.

border-top-width border-top-style border-top-color

border-top-color Stabilește culoarea laturii de sus border-color

border-top-style Stabilește stilul laturii de sus border-style

border-top-width

Stabilește grosimea laturii de sus border-width

border-width Stabilește grosimea pentru întreg chenarul

thin medium thick length

13. Linii exterioare (outlines)

O linie exterioară (outline) este o linie trasată în jurul elementului, în afara chenarului.

Proprietățile unei linii exterioare precizează stilul, culoarea și lățimea.

Exemplu: Ilustrează cum se trasează o linie exterioară (verde, groasă, punctată) în jurul

unui element, în afara chenarului.

EXEMPLUL 65

1

2

3

4 5

6

7 8

9

10 11

12

13

14 15



<style type="text/css"> p{ border:1px solid red; outline:green dotted thick; } </style> </head> <body> <p><b>Obs:</b> Internet Explorer 8 accepta proprietatea outline daca

este specificat !DOCTYPE in codul html.</p> </body> </html>

Exemplu: Ilustrează cum se stabilește stilul unei linii exterioare.

EXEMPLUL 66

1 2

3

4





5

6 7

8

9 10

11

12

13 14

15

16 17

18

19 20

21

22

23 24

25

26 27

28

<style type="text/css"> p {border:1px solid red} p.dotted {outline-style:dotted} p.dashed {outline-style:dashed} p.solid {outline-style:solid} p.double {outline-style:double} p.groove {outline-style:groove} p.ridge {outline-style:ridge} p.inset {outline-style:inset} p.outset {outline-style:outset} </style> </head> <body>

<p class="dotted">O linie exterioară punctata.</p>

<p class="dashed">O linie exterioara intrerupta.</p>

<p class="solid">O linie exterioara plina.</p>

<p class="double">O linie exterioara dubla.</p>

<p class="groove">O linie exterioara groove</p>

<p class="ridge">O linie exterioara ridge</p>

<p class="inset">O linie exterioara inset</p>

<p class="outset">O linie exterioara outset</p> <b>Obs:</b> Internet Explorer 8 accepta proprietatea outline daca este

specificat !DOCTYPE. </body> </html>

Exemplu: Ilustrează cum se stabilește culoarea unei linii exterioare.

EXEMPLUL 67

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15

16



<style type="text/css"> p{ border:1px solid red; outline-style:dotted; outline-color:#00ff00; } </style> </head> <body> <p><b>Note:</b> Internet Explorer 8 accepta proprietatea outline daca

este specificat ! DOCTYPE.</p> </body> </html>

Exemplu: Ilustrează cum se stabilește grosimea unei linii exterioare.

EXEMPLUL 68

1 2


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



3

4 5

6

7 8

9

10

11 12

13

14 15

16

17 18

19

20

21 22

<html> <head>

<style type="text/css"> p.one{ border:1px solid red; outline-style:solid; outline-width:thin; } p.two{ border:1px solid red; outline-style:dotted; outline-width:3px; } </style> </head> <body>

<p class="one">Un text intr-un paragraf.</p>

<p class="two">Un text in alt paragraf.</p> </body> </html>

Toate proprietățile CSS pentru linii exterioare


outline Stabilește toate proprietățile liniei exterioare într-o singură declarație

outline-color outline-style outline-width

outline-color Stabilește culoarea liniei exterioare

color_name hex_number rgb_number invert

outline-style Stabilește stilul liniei exterioare

none dotted dashed solid double groove ridge inset outset

outline-width Stabilește grosimea liniei exterioare

thin medium thick length

14. Margini

Proprietatea CSS margin definește spațiul din jurul unui element (în afara chenarului).

Marginea nu are culoare de fundal și este complet transparentă. Cele patru margini ale

elementului pot fi modificate în mod independent, folosind proprietăți separate. O

proprietate scurtă poate fi, de asemenea, folosită pentru a schimba toate cele patru

margini simultan.

Valori posibile:

Valoare Descriere

auto Marginile sunt stabilite de către browser. Rezultatul depinde de browser.

length Definește o margine fixă (în pixeli, puncte, em, etc.)

% Definește o margine în procente față de elementul conținut

Observație:

Este posibilă utilizarea valorilor negative, pentru a suprapune conținutul.

Laturile marginii

În CSS, este posibil să definim margini diferite pe cele patru laturi:

EXEMPLUL 69

1 2

3

4 5

6

7 8

9

10

11 12

13

14 15

16

17 18

19

20

21 22



<style type="text/css"> p{ background-color:yellow; } p.margin { margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; } </style> </head> <body> <p>Acesta este un paragraf cu margini nedefinite.</p>

<p class="margin">Acesta este un paragraf cu margini definite.</p> </body> </html>

Proprietatea prescurtată

Pentru a scurta codul, pot fi specificate cele patru margini într-o singură declarație,

utilizând proprietatea scurtă margin:

EXEMPLUL 70

1

2

3 4

5

6

7



<style type="text/css"> p{ background-color:yellow;



8

9 10

11

12 13

14

15

16 17

18

19

} p.margin { margin:100px 50px; } </style> </head> <body> <p>Acest paragraf nu are marginile definite.</p>

<p class="margin">Acest paragraf are marginile definite.</p> </body> </html>

Proprietatea margin poate avea între una și patru valori.

margin:25px 50px 75px 100px; o marginea de sus este 25px o marginea dreaptă este 50px o marginea de jos este 75px o marginea stângă este 100px

margin:25px 50px 75px; o marginea de sus este 25px o marginile din dreapta și din stânga sunt 50px o marginea de jos este75px

margin:25px 50px; o marginile de sus și de jos sunt 25px o marginile din dreapta și din stânga sunt 50px

margin:25px; o toate cele patru margini sunt 25px

Exemplu: Ilustrează cum se stabilește marginea de sus a unui text utilizând o valoare în

cm.

EXEMPLUL 71

1

2 3

4

5

6 7

8

9 10

11

12 13

<html> <head>

<style type="text/css"> p.ex1 {margin-top:2cm} </style> </head> <body> <p>Un paragraf cu margini nedefinite.</p>

<p class="ex1">Un paragraf cu marginea de sus de 2cm.</p> <p>Un paragraf cu margini nedefinite.</p> </body> </html>

Exemplu:Ilustrează cum se stabilește marginea de jos a unui text utilizând o valoare

procentuală.

EXEMPLUL 72

1

2

3 4

5

6

7 8

9

10 11

12

13

<html> <head>

<style type="text/css"> p.bottommargin {margin-bottom:25%} </style> </head> <body> <p>Acest paragraf are margini nedefinite.</p>

<p class="bottommargin">Acest paragraf are marginea de jos definita.</p> <p>Acest paragraf are margini nedefinite.</p> </body> </html>

Toate proprietățile pentru margini


margin Proprietate prescurtată pentru a seta simultan toate marginile

margin-top

margin-right

margin-bottom

margin-left

margin-bottom Stabilește marginea de jos auto length %

margin-left Stabilește marginea stângă auto length %

margin-right Stabilește marginea dreaptă auto length %

margin-top Stabilește marginea de sus auto length %

15. Padding

Proprietatea CSS padding definește spațiul dintre chenar și conținut. Acest spațiu este

afectat de culoarea de fundal a elementului. Spațiul drept, stâng, de sus și de jos (relativ

la conținut) poate fi modificat în mod independent folosind proprietăți diferite. Există și

varianta scurtă a proprietății pentru a modifica cele patru spații simultan.

Valori posibile:

Valoare Descriere

length Definește un spațiu fix (în pixel, puncte, em, etc.)

% Definește un spațiu în valoare procentuală relativ la conținut

Modificarea individuală a celor patru spații

În CSS, puteți specifica spații diferite pe cele patru laturi ale elementului, ca în exemplul

următor:

EXEMPLUL 73

1

2

3 4

5

6 7

8

9

10 11

12

13 14

15

16 17

18

19

20 21

22

<html> <head>

<style type="text/css"> p{ border: 1px solid #ccc; background-color:yellow; } p.padding{ border: 1px solid #ccc; padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; } </style> </head> <body> <p>Acesta este un paragraf cu spatiul nedefinit.</p>

<p class="padding">Acest paragraf are cele patru spatii definite cu proprietatea padding.</p> </body> </html>


Pentru a scurta codul, puteți specifica toate cele patru spații într-o singură proprietate

numită simplu padding, ca în exemplul următor :

EXEMPLUL 74

1

2 3

4

5

6 7

8

9 10

11

12 13

14

15

16 17

18

19

<html> <head>

<style type="text/css"> p{ border: 1px solid #ccc; background-color:yellow; } p.padding{ border: 1px solid #ccc; padding:25px 50px; } </style> </head> <body> <p>Acesta este un paragraf cu spatiul nedefinit.</p>

<p class="padding">Acest paragraf are cele patru spatii definite cu proprietatea padding.</p> </body> </html>

Proprietatea padding poate avea între una și patru valori:

padding:25px 50px 75px 100px; o spațiul de sus are 25px o spațiul din dreapta are 50px o spațiul de jos are 75px o spațiul din stânga are100px

padding:25px 50px 75px; o spațiul de sus are 25px o spațiile din dreapta și din stânga au 50px o spațiul de jos are 75px

padding:25px 50px; o spațiile de sus și de jos au 25px o spațiile din dreapta și din stânga au 50px

padding:25px;

o toate cele patru spații au 25px

Exemplu: Ilustrează utilizarea proprietății scurte pentru a seta spațiile unui element.

EXEMPLUL 75

1

2

3

4 5

6

7 8

9

10 11

12

13

14 15

16

17 18

19

<html> <head>

<style type="text/css"> p.ex1{ border:1px solid #ccc; padding:2cm; } p.ex2{ border: 1px solid #ccc; padding:0.5cm 3cm; } </style> </head> <body>

<p class="ex1">Acest text are cele patru spatii egale. Spatiul pe fiecare latura a textului este de 2cm.</p>

<p class="ex2">Acest text are spatiile de sus si de jos de cate 0.5cm si spatiile din dreapta si din stanga de cate 3cm.</p> </body> </html>

Exemplu: Ilustrează cum se stabilește spațiul din stânga pentru un paragraf.

EXEMPLUL 76

1 2

3

4 5

6

7

8

<html> <head>

<style type="text/css"> p.padding{ border: 1px solid #ccc; padding-left:2cm; } p.padding2{

9

10 11

12

13 14

15

16

17 18

19

20

border: 1px solid #ccc; padding-left:50%; } </style> </head> <body> <p>Acest text nu are spatiul din stanga definit.</p>

<p class="padding">Acest paragraf are spatiul din stanga de 2cm.</p>

<p class="padding2">Acest paragraf are spatiul din stanga de 50%.</p> </body> </html>

Exemplu: Ilustrează cum se stabilește spațiul din dreapta pentru un paragraf.

EXEMPLUL 77

1 2

3

4 5

6

7

8 9

10

11 12

13

14 15

16

17

18 19

20

<html> <head>

<style type="text/css"> p.padding{ border: 1px solid #ccc; padding-right:2cm; } p.padding2{ border: 1px solid #ccc; padding-right:50%; } </style> </head> <body> <p>Acesta este un text care nu are definit spatiul din dreapta.

Acesta este un text care nu are definit spatiul din dreapta. Acesta

este un text care nu are definit spatiul din dreapta.</p>

<p class="padding">Acest text are spatiul din dreapta de 2cm. Acest text are spatiul din dreapta de 2cm. Acest text are spatiul din

dreapta de 2cm.</p>

<p class="padding2">Acest text are spatiul din dreapta de 50%. Acest text are spatiul din dreapta de 50%. Acest text are spatiul din

dreapta de 50%.</p> </body> </html>

Exemplu: Ilustrează cum se stabilește spațiul de sus pentru un paragraf.

EXEMPLUL 78

1

2 3

4

5 6

7

8

<html> <head>

<style type="text/css"> p.padding{ border: 1px solid #ccc; padding-top:2cm; } p.padding2{

9

10 11

12

13 14

15

16

17 18

19

20

border: 1px solid #ccc; padding-top:50%; } </style> </head> <body> <p>Acest text nu are spatiul de sus definit. Acest text nu are

spatiul de sus definit. Acest text nu are spatiul de sus definit.

Acest text nu are spatiul de sus definit.</p>

<p class="padding">Acest text are spatiul de sus de 2cm. Acest text are spatiul de sus de 2 cm. Acest text are spatiul de sus de 2 cm.

Acest text are spatiul de sus de 2 cm. </p>

<p class="padding2">Acest text are spatiul de sus de 25%. Acest text are spatiul de sus de 25%. Acest text are spatiul de sus de 25%.

Acest text are spatiul de sus de 25%.</p> </body> </html>

Exemplu: Ilustrează cum se stabilește spațiul de jos pentru un paragraf.

EXEMPLUL 79

1 2

3

4 5

6

7

8 9

10

11 12

13

14 15

16

17

18 19

20

21

<html> <head>

<style type="text/css"> p.padding{ border:1px solid #ccc; padding-bottom:2cm; } p.padding2{ border: 1px solid #ccc; padding-bottom:50%; } </style> </head> <body> <p>Acest text nu are spatiul de jos definit. Acest text nu are

spatiul de jos definit. Acest text nu are spatiul de jos definit.

Acest text nu are spatiul de jos definit.</p>

<p class="padding">Acest text are spatiul de jos de 2cm. Acest text are spatiul de jos de 2 cm. Acest text are spatiul de jos de 2 cm.

Acest text are spatiul de jos de 2 cm.</p>

<p class="padding2">Acest text are spatiul de jos de 25%. Acest text are spatiul de jos de 25%. Acest text are spatiul de jos de 25%.

Acest text are spatiul de jos de 25%.</p> <p>Acest text nu are spatiul de jos definit. Acest text nu are

spatiul de jos definit. Acest text nu are spatiul de jos definit.

Acest text nu are spatiul de jos definit.</p> </body> </html>

Toate proprietățile CSS pentru padding


padding Proprietatea scurtă pentru a stabili toate spațiile cu o singură declarație

padding-top padding-right padding-bottom padding-left

padding-bottom Stabilește spațiul de jos length %

padding-left Stabilește spațiul din stânga length %

padding-right Stabilește spațiul din dreapta length %

padding-top Stabilește spațiul de sus length %

16. Gruparea și imbricarea selectorilor

Gruparea selectorilor

În foile de stil se regăsesc deseori elemente care au același stil. Exemplu: 1

2 3

4

5 6

7

8

9 10

h1{ color:green; } h2{ color:green; } p{ color:green; }

Pentru a micșora codul, puteți grupa selectorii într-o listă în care selectorii sunt separați

prin virgulă. În exemplul următor, selectorii de mai sus au fost grupați:

EXEMPLUL 80

1

2

3 4

5

6 7

8

9

10 11

12

13 14

15

<html> <head>

<style type="text/css"> h1,h2,p{ color:green; } </style> </head> <body> <h1>Un titlu!</h1> <h2>Un titlu mai mic!</h2> <p>Un paragraf oarecare.</p> </body> </html>

Imbricarea selectorilor

Este posibil să aplicați un stil unui selector aflat în interiorul unui alt selector. În exemplul

următor, este precizat un stil pentru toate elementele p, și un alt stil pentru

elementele p aflate în clasa "marked":

EXEMPLUL 81

1

2

3 4

5

6

7 8

9

10 11

12

13 14

15

16

17 18

19

20 21

22

23 24

<html> <head>

<style type="text/css"> p{ color:blue; text-align:center; } .marked{ background-color:blue; } .marked p{ color:white; } </style> </head> <body> <p>Acest paragraf are culoarea albastra si este aliniat la

centru.</p>

<div class="marked"> <p>Acest paragraf din clasa marked trebuie sa aiba culoarea

alba.</p> </div> <p>Paragrafele declarate in clasa "marked" pastreaza stilul de

aliniere, dar textul are o culoare diferita.</p> </body> </html>

17. Setarea dimensiunilor unui element

Dimensiunile unui element pot fi setate cu proprietățile height și width.

Exemplu: Ilustrează cum se pot stabili dimensiunile unui element.

EXEMPLUL 82

1

2

3 4

5

6 7

8

9

10 11

<html> <head>

<style type="text/css"> img.normal {height:auto;} img.big {height:150px;} p.ex{ height:100px; width:100px; } </style> </head>

12

13 14

15

16 17

18

19

20 21

22

<body>

<img class="normal" src="logo.gif" width="95" height="69" /><br />

<img class="big" src="logo.gif" width="95" height="69" />

<p class="ex">Inaltimea si latimea acestui paragraf sunt de 100px.</p> <p>Un text intr-un paragraf. Un text intr-un paragraf. Un text intr-

un paragraf. Un text intr-un paragraf. Un text intr-un paragraf. Un text intr-un

paragraf. Un text intr-un paragraf.</p> </body> </html>

Exemplu: Ilustrează cum se setează înălțimea unui element folosind o valoare

procentuală.

EXEMPLUL 83

1

2

3 4

5

6 7

8

9

10 11

12

13 14

15

<html> <head>

<style type="text/css"> img.normal {height:auto;} img.big {height:50%;} img.small {height:10%;} </style> </head> <body>

<img class="normal" src="logo.gif" width="95" height="69" /><br />

<img class="big" src="logo.gif" width="95" height="69" /><br />

<img class="small" src="logo.gif" width="95" height="69" /> </body> </html>

Exemplu: Ilustrează cum se setează lățimea unui element folosind o valoare în pixeli.

EXEMPLUL 84

1

2 3

4

5

6 7

8

9 10

11

12 13

<html> <head>

<style type="text/css"> img{ width: 200px; } </style> </head> <body>

<img src="logo.gif" width="95" height="84" /> </body> </html>

Exemplu: Ilustrează cum se setează înălțimea maximă a unui element.

EXEMPLUL 85

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15 16

17

18

19 20

21

22 23

24

25

<html> <head>

<style type="text/css"> p.ex{ max-height:100px; background-color:cyan; } </style> </head> <body>

<p class="ex"> Inaltimea maxima a acestui paragraf este setata la 100px. Inaltimea maxima a acestui paragraf este setata la 100px. Inaltimea maxima a acestui paragraf este setata la 100px. Inaltimea maxima a acestui paragraf este setata la 100px. Inaltimea maxima a acestui paragraf este setata la 100px. Inaltimea maxima a acestui paragraf este setata la 100px. </p> <p> Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf. </p> </body> </html>

Exemplu: Ilustrează cum se setează lățimea maximă a unui element folosind o valoare

procentuală. Textul va ocupa 50% din lățimea ferestrei browserului, chiar dacă

redimensionați fereastra.

EXEMPLUL 86

1

2

3

4 5

6

7 8

9

10 11

12

13

14 15

16

17 18

<html> <head>

<style type="text/css"> p{ max-width: 50%; background-color:cyan; } </style> </head> <body> <p> Acesta este un text. Acesta este un text. Acesta este un text. Acesta este un text. Acesta este un text. Acesta este un text. Acesta este un text. Acesta este un text. Acesta este un text. </p> </body> </html>

Exemplu: Ilustrează cum se setează înălțimea minimă a unui element.

EXEMPLUL 87

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15 16

17

18

19

<html> <head>

<style type="text/css"> p.ex{ min-height:100px; background-color:cyan; } </style> </head> <body>

<p class="ex"> Inaltimea minima a cestui paragraf este setata la 100px. </p> <p> Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf.

Un alt paragraf. Un alt paragraf. </p> </body> </html>

Exemplu: Ilustrează cum se setează lățimea minimă a unui element folosind o valoare în

pixeli.

EXEMPLUL 88

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15 16

17

18

19 20

<html> <head>

<style type="text/css"> p.ex{ min-width:50px; background-color:cyan; } </style> </head> <body>

<p class="ex"> Latimea minima a acestui paragraf este setata la 50px. </p> <p> Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf. </p> </body> </html>

Toate proprietățile CSS pentru dimensiuni:


height Stabilește înălțimea unui element auto length %

max-height Stabilește înălțimea maximă a unui element none length %

max-width Stabilește lățimea maximă a unui element none length %

min-height Stabilește înălțimea minimă a unui element length %

min-width Stabilește lățimea minimă a uni element length %

width Stabilește lățimea unui element auto length %

18. Proprietățile display și visibility

Proprietatea display specifică dacă/cum este afișat un element, iar

proprietatea visibility specifică dacă elementul este vizibil sau ascuns.

Ascunderea unui element

Se poate realiza setând proprietatea display la valoarea none sau proprietatea visibility la

valoarea hidden. Cele două metode produc rezultate diferite.

Proprietatea visibility:hidden ascunde elementul, dar el va ocupa același spațiu în pagină

afectând aspectul acesteia:

EXEMPLUL 89

1

2 3

4

5 6

7

8 9

10

11

12 13

14

<html> <head>

<style type="text/css"> h1.hidden {visibility:hidden;} </style> </head> <body> <h1>Acesta este un titlu vizibil</h1>

<h1 class="hidden">Acesta este un titlu ascuns</h1> <p>Observati ca titlul ascuns ocupa spatiu in pagina.</p> </body> </html>

Proprietatea display:none ascunde elementul astfel încât acesta nu va mai ocupa spațiu în

pagină.

EXEMPLUL 90

1

2

3 4

5

6 7

8

9

10 11

12

13

<html> <head>

<style type="text/css"> h1.hidden {display:none;} </style> </head> <body> <h1> Acesta este un titlu vizibil </h1>

<h1 class="hidden"> Acesta este un titlu ascuns </h1> <p> Observati ca titlul ascuns nu ocupa spatiu in pagina.</p> </body> </html>

Afișarea elementelor bloc și a elementelor inline

Un element bloc ocupă întreaga lățime disponibilă în pagină și are o întrerupere de linie

înainte și după el.

Exemple de elemente bloc:

<h1> <p> <div> <li>

...

Un element inline ocupă numai lățimea necesară și nu forțează întreruperile de linie.

Exemple de elemente inline:

<span> <a>

...

Schimbarea modului de afișare a unui element

Schimbarea unui element inline într-un element bloc, și reciproc, poate fi utilă pentru a

face pagina să arate într-un anumit fel, respectând standardele web.

Exemplul următor afișează o listă de link-uri ca elemente inline, creând un meniu

orizontal:

EXEMPLUL 91

1

2

3

4 5

6

7

<html> <head>

<style type="text/css"> li{display:inline;} </style> </head> <body>

8

9 10

11

12 13

14

15

16 17

<p>Lista de linkuri este afisata ca un meniu orizontal:</p> <ul>

<li><a href="http:www.yahoo.com" target="_blank">Yahoo</a></li>

<li><a href="http:www.google.com" target="_blank">Google</a></li>

<li><a href="http:www.microsoft.com" target="_blank">Microsoft</a></li>

<li><a href="http:www.oracle.com" target="_blank">Oracle</a></li> </ul> </body> </html>

Exemplul următor afișează elementele span ca elemente bloc: EXEMPLUL 92

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15

16 17

18

<html> <head>

<style type="text/css"> span{ display:block; } </style> </head> <body> <h2>Nirvana</h2> <span>Record: MTV Unplugged in New York</span> <span>Year: 1993</span> <h2>Radiohead</h2> <span>Record: OK Computer</span> <span>Year: 1997</span> </body> </html>

Observație:

Schimbând modul de afișare a unui element, nu schimbăm și tipul acestuia. De exemplu,

un element inline cu proprietatea display:block nu poate avea un element bloc în

interiorul lui.

Exemplu: Ilustrează cum se afișează un element bloc ca element inline.

EXEMPLUL 93

1 2

3

4

5 6

7

8 9

10

11 12

<html> <head>

<style type="text/css"> p {display:inline;} </style> </head> <body> <p>Deoarece proprietatea display a elementului p a fost setata la

inline</p> <p>intre aceste doua paragrafe nu mai exista intreruperile de

linie.</p> </body> </html>

Exemplu: Ilustrează cum se afișează un element inline ca element bloc. EXEMPLUL 94

1 2

3

4 5

6

7

8 9

10

11 12

13

14

<html> <head>

<style type="text/css"> span{ display:block; } </style> </head> <body> <span>Deoarece proprietatea display a elementului span a fost setata

la block</span> <span>intre aceste doua elemente exista o intrerupere de linie.</span> </body> </html>

Exemplu: Ilustrează cum se poate elimina o linie dintr-un tabel.

EXEMPLUL 95

1

2 3

4

5 6

7

8 9

10

11

12 13

14

15 16

17

18 19

20

21

22 23

24

25 26

27

28

29 30

31

32 33

<html> <head>

<style type="text/css"> tr.collapse {visibility:collapse} </style> </head> <body> <p><b>Tabelul normal</p>

<table border="1"> <tr> <td>Speranța</td> <td>Scutelnic</td> </tr> <tr> <td>George</td> <td>Moraru</td> </tr> </table> <p>Tabelul cu a doua linie setata la collapse.</p>

<table border="1"> <tr> <td>Speranța</td> <td>Scutelnic</td> </tr>

<tr class="collapse"> <td>George</td> <td>Moraru</td> </tr> </table> <p><b>Nota:</b> Internet Explorer nu recunoaste valoarea

"collapse".</p> </body> </html>

19. Poziționarea unui element

Proprietatea position vă permite să stabiliți poziția unui element în pagina web.

Elementele pot fi poziționate utilizând proprietățile top, bottom, left, și right, dar ele nu

vor funcționa dacă nu setați mai întâi proprietatea position. De asemenea, cele patru

proprietăți lucrează diferit, în funcție de metoda de poziționare. Sunt patru metode

diferite de poziționare a unui element.

Poziționarea statică

Este modul implicit de poziționare a elementelor HTML. Un element poziționat static

respectă întotdeauna fluxul normal al paginii web. Elementele poziționate static nu sunt

afectate de proprietățile top, bottom, left, și right.

Poziționarea fixă

Un element cu poziționare fixă este poziționat relativ la fereastra browserului și nu se va

deplasa chiar dacă fereastra este derulată.

EXEMPLUL 96

1

2

3 4

5

6

7 8

9

10 11

12

13

14 15

16

17 18

19

20 21



<style type="text/css"> p.pos_fixed{ color:red; position:fixed; top:30px; right:5px; } </style> </head> <body>

<p class="pos_fixed">Un text cu pozitia fixa</p> <p><b>Note:</b>Internet Explorer accepta pozitionarea fixa numai

daca exista declaratia !DOCTYPE.</p> <p>Un text normal</p><p>Un text normal</p><p>Un text normal</p><p>Un

text normal</p><p>Un text normal</p> <p>Un text normal</p><p>Un text normal</p><p>Un text normal</p><p>Un

text normal</p><p>Un text normal</p> <p>Un text normal</p><p>Un text normal</p><p>Un text normal</p><p>Un

text normal</p><p>Un text normal</p> </body> </html>

Elementele cu poziția fixă sunt înlăturate din fluxul normal al documentului. Documentul

și alte elemente se comportă ca și cum elementele cu poziția fixă nu ar exista. Elementele

cu poziția fixă se pot suprapune peste alte elemente.

Poziționarea relativă

Un element cu poziționare relativă este poziționat relativ la poziția lui normală în

document.


EXEMPLUL 97

1

2

3

4 5

6

7 8

9

10 11

12

13

14 15

16

17 18

19

20

<html> <head>

<style type="text/css"> h2.pos_left{ position:relative; left:-30px; } h2.pos_right{ position:relative; left:30px; } </style> </head> <body> <h2>Acest titlu are pozitionarea statica (implicita)</h2>

<h2 class="pos_left">Acest titlu este deplasat la stanga cu 30px fata de pozitia lui normala</h2>

<h2 class="pos_right">Acest titlu este deplasat la dreapta cu 30px fata de pozitia lui normala</h2> </body> </html>

Conținutul unui element poziționat relativ poate fi mutat și suprapus peste alte elemente,

dar spațiul rezervat elementului este păstrat în document.

EXEMPLUL 98

1

2

3 4

5

6 7

8

9

10 11

12

13 14

15

<html> <head>

<style type="text/css"> h2.pos_top{ position:relative; top:-40px; } </style> </head> <body> <h2>Acest titlu are pozitia implicita</h2>

<h2 class="pos_top">Acest titlu este mutat in sus cu 40px fata de pozitia lui normala</h2> </body> </html>

Elementele poziționate relativ sunt folosite frecvent ca blocuri container pentru

elementele cu poziționare absolută.

Poziționarea absolută

Pozitionarea absolută este o poziționare destul de des folosită. O poziționare

absolută înseamnă poziționarea elementului relativ la elementul parinte la care deja s-a

definit o poziționare. Dacă elementul părinte nu a fost poziționat, adică are o poziționare

statică, atunci elementul părinte este considerat tagul <html>, adică pagina în sine.

Atentie! – ca să funcționeze corect poziționarea absolută, elementul părinte trebuie să

aibă proprietatea de poziționare definită, și nu are voie să fie poziționată static.

EXEMPLUL 99

1

2

3 4

5

6 7

8

9

10 11

12

13 14

15

<!doctype html> <html> <head>

<meta charset="utf-8"> <title>Untitled Document</title> </head> <body>

<div style="position:relative; margin-bottom:80px;">

<p style="position:absolute;left:60px; background-color:#000000;color:#FFFFFF;"> Acest paragraf a fost pozitionat cu pozitionare absoluta la 60 de

pixeli de la partea stanga a elementului parinte care este un div

pozitionat relativ. </p> </div> </body> </html>

Un element cu poziționarea absolută poate fi plasat oriunde în pagină. Aceste elemente

sunt îndepărtate din fluxul normal și documentul se comportă ca și cum nu ar exista.

Elementele cu poziționare absolută se pot suprapune peste alte elemente.

Suprapunerea elementelor

Când elementele sunt poziționate în afara fluxului normal al documentului, ele pot acoperi

alte elemente. Proprietatea z-index specifică ordinea elementelor suprapuse: care

element va fi plasat în fața sau în spatele celorlalte elemente. Ordinea în listă poate fi

pozitivă sau negativă.

EXEMPLUL 100

1 2

3

4 5

6

7 8

9

10

11 12

13

14 15

16

17 18

<html> <head>

<style type="text/css"> img{ position:absolute; left:0px; top:0px; z-index:-1; } </style> </head> <body> <h1>Acesta este un titlu pozitionat static</h1>

<img src="logo.gif" width="100" height="140" /> <p>Deoarece imaginea are proprietatea z-index egala cu -1, va fi

afisata in spatele textului.</p> </body> </html>

Un element cu indexul mai mare va fi plasat întotdeauna în fața elementului cu indexul

mai mic.

Exemplu: Ilustrează cum se stabilește forma unui element. Imaginea din exemplul

următorul este prinsă în forma dorită (cu proprietatea clip) și afișată.

EXEMPLUL 101

1

2 3

4

5 6

7

8 9

10

11

12 13

14

15

<html> <head>

<style type="text/css"> img { position:absolute; clip:rect(0px,80px,200px,0px); } </style> </head> <body>

<img src="roses.gif" width="100" height="140" /> <hr/> </body> </html>

Exemplu: Ilustrează cum se folosește proprietatea overflow pentru a crea o bară de

derulare atunci când conținutul elementului este prea mare pentru zona specificată.

EXEMPLUL 102

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15

16 17

18

19 20

21

22 23

24

25

26

<html> <head>

<style type="text/css"> div.scroll{ background-color:#00FFFF; width:100px; height:100px; overflow:scroll; } div.hidden{ background-color:#00FF00; width:100px; height:100px; overflow:hidden; } </style> </head> <body> <p> Folositi proprietatea overflow atunci cand continutul elementului

depaseste marimea zonei rezervate. </p> <p><b>overflow:scroll</b></p>

<div class="scroll"> Folositi proprietatea overflow pentru a controla mai bine aspectul

documentului.Valoarea implicita este visible.

27

28 29

30

31 32

</div> <p><b>overflow:hidden</b></p>

<div class="hidden"> Folositi proprietatea overflow pentru a controla mai bine aspectul

documentului.Valoarea implicita este visible. </div> </body> </html>

Exemplu: Ilustrează cum poate fi setat browserul astfel încât să gestioneze în mod

automat depășirea spațiului rezevat de către conținutul unui element.

EXEMPLUL 103

1

2

3

4 5

6

7 8

9

10

11 12

13

14 15

16

17 18

19

20

21

<html> <head>

<style type="text/css"> div{ background-color:#00FFFF; width:150px; height:120px; overflow:auto; } </style> </head> <body> <p> Proprietatea overflow are valoarea auto si detectează dacă continutul

elementului depaseste zona rezervată si este necesara bara de

derulare. </p> <div> Puteti folosi proprietatea overflow pentru a controla mai bine

aspectul documentului. Valorile posibile sunt: visible, hidden,

scroll, inherit. Valoarea implicita este visible. </div> </body> </html>

Exemplu: Ilustrează cum se poate modifica tipul cursorului.

EXEMPLUL 104

1 2

3

4 5

6

7 8

9

10

11 12

<html> <body> <p>Plimbati mouse-ul peste cuvintele din lista pentru a-l

modifica.</p>

<span style="cursor:auto">auto</span>

<span style="cursor:crosshair">crosshair</span>

<span style="cursor:default">default</span>

<span style="cursor:e-resize">e-resize</span>

<span style="cursor:help">help</span>

<span style="cursor:move">move</span>

<span style="cursor:n-resize">n-resize</span>

13

14 15

16

17 18

19

20

21 22

23

<span style="cursor:ne-resize">ne-resize</span>

<span style="cursor:nw-resize">nw-resize</span>

<span style="cursor:pointer">pointer</span>

<span style="cursor:progress">progress</span>

<span style="cursor:s-resize">s-resize</span>

<span style="cursor:se-resize">se-resize</span>

<span style="cursor:sw-resize">sw-resize</span>

<span style="cursor:text">text</span>

<span style="cursor:w-resize">w-resize</span>

<span style="cursor:wait">wait</span> </body> </html>

Toate proprietățile CSS pentru poziționarea unui element


bottom Stabilește marginea de jos pentru o casetă poziționată auto length %

clip Fixează într-o formă un element poziționat absolut shape auto

cursor Specifică tipul cursorului

url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help

left Stabilește marginea din stanga pentru o casetă poziționată auto length %

overflow Stabilește ce se întâmplă dacă conținutul elementului depășește zona rezervată

auto hidden scroll visible

position Specifică tipul de poziționare a elementului

absolute fixed relative static

right Stabilește marginea din dreapta pentru o casetă poziționată auto length

%

top Stabilește marginea de sus pentru o casetă poziționată auto length %

z-index Stabilește ordinea de afișare a unui element suprapus number auto

20. Proprietatea float

Cu proprietatea CSS float, un element poate fi împins către dreapta sau către stânga,

permițând celorlalte elemente să se organizeze în jurul lui. Proprietatea este folosită

frecvent pentru imagini, dar este foarte utilă și când lucrați cu aspectul paginii (layouts).

Cum sunt deplasate elementele

Elementele se deplasează numai orizontal, către stânga sau către dreapta. Un element

deplasabil va împins spre dreapta sau spre stânga cât de mult se poate. Asta înseamnă că

elementele care urmează elementului deplasabil se vor aranja în jurul lui. Elementele

dinaintea elementului deplasabil nu vor fi afectate. Dacă o imagine este deplasată spre

dreapta, textul care urmează se va aranja în jurul imaginii ca în exemplul următor:

EXEMPLUL 105

1

2

3 4

5

6

7 8

9

10 11

12

13 14

15

16

17 18

19

20 21

22

23

24 25

26

27 28

29

30

<html> <head>

<style type="text/css"> img{ float:right; } </style> </head> <body> <p>In paragraful urmator este o imagine cu proprietatea style setata

la <b>float:right</b>. Ca urmare, imaginea se va deplasa în paragraf

spre dreapta.</p> <p>

<img src="logo.gif" width="95" height="69" /> Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. </p>

31 </body> </html>

Observație:

Micșorați fereastra browserului pentru a observa aranjarea textului în jurul imaginii.

Mutarea elementelor unele lângă altele

Dacă plasați mai multe imagini deplasabile una după alta, ele se vor deplasa una lângă

cealaltă, cât timp există spațiu suficient. În exemplul următor este construită o galerie de

imagini folosind proprietatea float:

EXEMPLUL 106

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15

16 17

18

19 20

21

22 23

24

25

<html> <head>

<style type="text/css"> .thumbnail{ float:left; width:110px; height:90px; margin:5px; } </style> </head> <body> <h3>Galerie de imagini</h3> <p>Micsorati fereastra browserului pentru a vedea ce se intampla cu

imaginile cand nu mai au spatiu suficient.</p>

<img class="thumbnail" src="roses.gif" width="107" height="90">


<img class="thumbnail" src="roses.gif " width="116" height="90">





<img class="thumbnail" src="roses.gif " width="120" height="90"> </body> </html>

Proprietatea clear

Elementele de după un element deplasabil se vor organiza în jurul lui. Pentru a împiedica

acest lucru, folosiți proprietatea clear. Această proprietate specifică care laturi nu sunt

permise pentru deplasare. În exemplul următor a fost adăugată o linie de text în galeria de

imagini, folosind proprietatea clear:

EXEMPLUL 107

1

2

3

4 5

6

7

<html> <head>

<style type="text/css"> .thumbnail{ float:left; width:110px; height:90px;

8

9 10

11

12 13

14

15

16 17

18

19 20

21

22 23

24

25

26 27

28

29 30

31

margin:5px; } .text_line{ clear:both; margin-bottom:2px; } </style> </head> <body> <h3>Galerie de imagini</h3>

<p>Micsorati fereastra browserului pentru a vedea ce se intampla cu

imaginile cand nu mai au spatiu suficient.</p>


<img class="thumbnail" src=" roses.gif" width="107" height="80">

<img class="thumbnail" src=" roses.gif " width="116" height="90">


<h3 class="text_line">A doua linie</h3>


<img class="thumbnail" src=" roses.gif" width="107" height="80">


<img class="thumbnail" src=" roses.gif " width="120" height="90"> </body> </html>

Exemplu: Ilustrează cum se deplasează o imagine la dreapta unui paragraf. Imaginea are

bordură și margini.

EXEMPLUL 108

1

2 3

4

5 6

7

8 9

10

11

12 13

14

15 16

17

18 19

20

21

22 23

24

25

<html> <head>

<style type="text/css"> img{

float:right; border:1px dotted black; margin:0px 0px 15px 20px; } </style> </head> <body> <p> Imaginea din paragraful urmator se va deplasa spre dreapta.Imaginea

are un chenar negru punctat.Imaginea are si margini pentru a tine

textul la distanta fata de imagine:0px deasupra si in partea dreapta

a imaginii, 15px sub imagine si 20px in partea stanga a imaginii. </p> <p>

<img src="logo.gif" width="95" height="84" /> Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text.

26

27 28

29

30 31

32

33

34 35

Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. </p> </body> </html>

Exemplu: Ilustrează utilizarea unei imagini cu un titlu care se deplasează spre dreapta.

EXEMPLUL 109

1

2 3

4

5

6 7

8

9 10

11

12 13

14

15

16 17

18

19 20

21

22 23

24

25

26 27

28

29 30

31

32

33 34

35

36 37

<html> <head>

<style type="text/css"> div{ float:right; width:120px; margin:0 0 15px 20px; padding:15px; border:1px solid black; text-align:center; } </style> </head> <body> <div>

<img src="logo.gif" width="95" height="84" /><br /> CSS este distractiv! </div> <p> Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. </p> <p>

38

39 40

41

42

In acest exemplu, elementul div are 120 pixeli latime si contine

imaginea.Elementul div se va deplasa spre dreapta. Au fost adaugate

margini pentru a indeparta textul de element.Elementul are chenar si

padding pentru a incadra imaginea si titlul. </p> </body> </html>

Exemplu: În acest exemplu, prima literă din paragraf este stilizată și deplasată spre

stânga.

EXEMPLUL 110

1

2

3

4 5

6

7 8

9

10 11

12

13

14 15

16

17 18

19

20

21 22

23

24 25

26

27 28

29

30

31 32

33

34 35

<html> <head>

<style type="text/css"> span{ float:left; width:0.7em; font-size:400%; font-family:algerian,courier; line-height:80%; } </style> </head> <body> <p> <span>A</span>cesta este un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. Un text. </p> <p> In paragraful de mai sus, prima litera este inclusa intr-un element

span. Elementul are latimea de 0.7 din marimea fontului

curent.Dimensiunea fontului pentru elementul span este de 400% si

inaltimea liniei este de 80%. Fontul literei din span este

"Algerian". </p> </body> </html>

Exemplu: Ilustrează cum se folosește float cu o listă de link-uri pentru a crea un meniu

orizontal.

EXEMPLUL 111

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15 16

17

18

19 20

21

22 23

24

25 26

27

28

29 30

31

32 33

34

35

36 37

<html> <head>

<base target="_blank"/>

<style type="text/css"> ul{ float:left; width:100%; padding:0; margin:0; list-style-type:none; } a{ float:left; width:6em; text-decoration:none; color:white; background-color:purple; padding:0.2em 0.6em; border-right:1px solid white; } a:hover {background-color:#ff3300;} li {display:inline;} </style> </head> <body> <ul>

<li><a href="http://www.google.com">Google</a></li>

<li><a href="http://www.yahoo.com">Yahoo</a></li>

<li><a href="http://www.microsoft.com">Microsoft</a></li>

<li><a href="http://www.oracle.com">Oracle</a></li> </ul> <p> In acest exemplu elementele ul si a se deplaseaza spre stanga cu

proprietatea float. Elementele li vor fi afisate unul dupa altul pe

aceeasi linie. In acest fel lista de link-uri devine un meniu

orizontal.Elementul ul are latimea de 100% si fiecare link din lista

are latimea de 6em (de 6 ori marimea fontului curent).Au fost

adugate culori si chenare pentru a imbunatati aspectul listei. </p> </body> </html>

Exemplu: Ilustrează crearea unei pagini web (homepage) cu antet, subsol, conținut stâng

și conținut principal utilizând proprietatea float.

EXEMPLUL 112

1

2

3 4

5

<html> <head>

<style type="text/css"> div.container{ width:100%;


http://www.yahoo.com/

http://www.microsoft.com/

http://www.oracle.com/

6

7 8

9

10 11

12

13

14 15

16

17 18

19

20 21

22

23

24 25

26

27 28

29

30

31 32

33

34 35

36

37 38

39

40

41 42

43

44 45

46

47 48

49

50

51 52

53

margin:0px; border:1px solid gray; line-height:150%; } div.header,div.footer{ padding:0.5em; color:white; background-color:gray; clear:left; } h1.header{ padding:0; margin:0; } div.left{ float:left; width:160px; margin:0; padding:1em; } div.content{ margin-left:190px; border-left:1px solid gray; padding:1em; }

</style> </head> <body>

<div class="container">

<div class="header">

<h1 class="header">Web Data</h1> </div>

<div class="left"> <p>"Niciodata nu mariti, mai mult decat este necesar, numarul

notiunilor necesare pentru a explica ceva." William of Ockham (1285-

1349)</p> </div>

<div class="content"> <h2>Programare web</h2> <p>In acest site veti gasi informatiile necesare pentru

programarea web.</p> <p>Fiti competitivi!</p> </div>

<div class="footer"> Copyright 2007-2009 by Web Data. </div> </div> </body> </html>

Toate proprietățile CSS pentru deplasarea elementelor

Property Description Values

clear Specifică pe care laturi ale elementului nu se pot deplasa elementele vecine

left right both none

float Specifică dacă un element este sau nu deplasabil left right none

21. Alinierea orizontală

Alinierea elementelor bloc

Un element bloc este un element care ocupă toată lățimea disponibilă și are o întrerupere

de linie înainte și după el. Exemple de elemente bloc:

<h1> <p>

<div>

Pentru alinierea textului vedeți capitolul corespunzător din această lecție. În acestă temă

va fi prezentată alinierea orizontală a elementelor bloc pentru îmbunătățirea aspectului

paginii.

Alinierea la centru folosind proprietatea margin

Elementele bloc pot fi aliniate setând marginea stângă și cea dreaptă la "auto".

Observație:

Proprietatea margin:auto funcționează în Internet Explorer numai dacă includeți

declarația !DOCTYPE.

Specificând marginile laterale ca auto, spațiul disponibil va fi împărțit în mod egal

rezultând un element aliniat la centru.

EXEMPLUL 113

1

2

3 4

5

6 7

8

9 10

11

12

13 14

15



<style type="text/css"> .center{ margin:auto; width:70%; background-color:#b0e0e6; } </style> </head> <body>

<div class="center"> <p>"Judecam oamenii nu numai prin ceea ce ei gandesc si nici macar

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

16

17 18

19

prin sentimentele care ii domina, ci prin interferentele cu viata

noastra, pe care soarta i-a silit sa le traiasca."</p> <p>Marin Preda - "Cel mai iubit dintre pamanteni"</p> </div> </body> </html>

Observație:

Alinierea nu are efect dacă width este 100%.

Alinierea la stânga și la dreapta folosind proprietatea position

Puteți alinia elementele folosind poziționarea absolută ca în exemplul următor:

EXEMPLUL 114

1

2

3 4

5

6 7

8

9 10

11

12

13 14

15

16 17

18

19

<html> <head>

<style type="text/css"> .right{ position:absolute; right:0px; width:300px; background-color:#b0e0e6; } </style> </head> <body>

<div class="right"> <p>"Judecam oamenii nu numai prin ceea ce ei gandesc si nici macar


noastra, pe care soarta i-a silit sa le traiasca."</p> <p>Marin Preda - "Cel mai iubit dintre pamanteni"</p> </div> </body> </html>

Alinierea la stânga și la dreapta folosind proprietatea float

EXEMPLUL 115

1

2

3 4

5

6

7 8

9

10 11

12

13

14 15

<html> <head>

<style type="text/css"> .right{ float:right; width:300px; background-color:#b0e0e6; } </style> </head> <body>

<div class="right"> <p>"Judecam oamenii nu numai prin ceea ce ei gandesc si nici macar


noastra, pe care soarta i-a silit sa le traiasca."</p>

16

17 18

<p>Marin Preda - "Cel mai iubit dintre pamanteni"</p> </div> </body> </html>

Observație:

Când aliniați astfel de elemente cu float sau position, este indicat să definiți

elementele margin și padding pentru elementul <body>. În acest fel nu vor apărea

diferențe vizibile între browsere.

22. Pseudo-clasele CSS

Pseudo-clasele CSS sunt folosite pentru a adăuga efecte speciale unor selectori.

Sintaxa

Sintaxa pentru pseudo-clase este: 1

2 selector:nume-pseudo-clasa {property:value}

Pseudo-clasele pot fi utilizate împreună cu clasele CSS: 1

2 selector.class:pseudo-clasa {property:value}

Pseudo-clase pentru link-uri

Linkurile pot fi afișate în diferite moduri în browserele care suportă CSS:

EXEMPLUL 116

1

2

3 4

5

6 7

8

9

10 11

12

13 14

<html> <head>

<style type="text/css"> a:link {color:#FF0000;} /* link nevizitat */ a:visited {color:#00FF00;} /* link vizitat */ a:hover {color:#FF00FF;} /* mouse peste link */ a:active {color:#0000FF;} /* link selectat */ </style> </head> <body>

<p><b><a href="mypage.htm" target="_blank">Acesta este un link</a></b></p> </body> </html>

Observație:

Numele unei pseudo-clase nu este case-sensitive.

Pseudo-clasele pot fi combinate cu clasele CSS: 1

2

3

a.red:visited {color:#FF0000}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

Dacă link-ul din acest exemplu a fost vizitat, el va fi afișat cu culoarea roșie.

Pseudo-clasa: first-child

Această pseudo-clasă se aplică unui element care este primul descendent (child) al unui alt

element.

Observație:

Pseudo-clasa: first-child funcționează în IE numai dacă declarația <!DOCTYPE> este inclusă

în document.

Selectarea primului element <p>

În exemplul următor, selectorul se aplică oricărui element <p> care este primul

descendent al unui alt element:

EXEMPLUL 117

1

2

3

4 5

6

7 8

9

10 11

12

13

14 15

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"> <html> <head>

<style type="text/css"> p:first-child{ color:blue; } </style> </head> <body> <p>Acest paragraf este primul descendent al elementului body si va fi

stilizat.</p> <p>Acest paragraf este al doilea descendent al elementului body si nu

este stilizat.</p> </body> </html>

Selectarea primului element <i> din toate elementele <p>

EXEMPLUL 118

1 2

3

4 5

6

7

8 9

10

11 12

13

14

15 16

17



<style type="text/css"> p > i:first-child{ color:blue; } </style> </head> <body> <p>Acesta este primul <i>element italic</i> din primul paragraf. Acesta este al doilea <i>elementitalic</i> din primul paragraf.</p> <p>Acesta este primul <i>element italic</i> din al doilea paragraf. Acesta este al doilea <i>element italic</i> din al doilea

paragraf.</p> </body> </html>

Selectarea tuturor elementelor <i> din primul element <p> care este descendent al

unui alt element

http://www.w3.org/TR/html4/loose.dtd


EXEMPLUL 119

1

2

3 4

5

6 7

8

9

10 11

12

13 14

15

16

17



<style type="text/css"> p:first-child i{ color:blue; } </style> </head> <body> <p>Acesta este primul <i>element italic</i> din primul paragraf. Acesta este al doilea <i>element italic</i> din primul paragraf.</p> <p>Acesta este primul <i>element italic</i> din al doilea paragraf. Acesta este al doilea <i>element italic</i> din al doilea

paragraf.</p> </body> </html>

Selectarea primului item dintr-o listă

În acest exemplu, selectorul se aplică primelor elemente li din liste:

EXEMPLUL 120

1

2 3

4

5 6

7

8 9

10

11

12 13

14

15 16

17

18

19 20

21

22 23



<style type="text/css"> li:first-child{ color:red; } </style> </head> <body> <ul> <li>Apa</li> <li>Lapte</li> <li>Ceai</li> </ul> <ul> <li>Cafea</li> <li>Ceai</li> <li>Pepsi</li> </ul> </body> </html>

Selectarea primului descendent al tuturor elementelor li dintr-o listă



EXEMPLUL 121

1

2

3 4

5

6

7 8

9

10 11

12

13

14 15

16

17 18

19

20 21



<style type="text/css"> li>*:first-child{ color:red; } </style> </head> <body> <ul> <li>Cafea <i>- bautura neagra fierbinte</i></li> <li>Coca Cola <i>- bautura neagra rece</i></li> </ul> <ul> <li>Cafea <i>- bautura neagra fierbinte</i></li> <li>Lapte <i>- bautura alba rece</i></li> </ul> </body> </html>

Pseudo-clasa : lang

Această clasă vă permite să definiți reguli speciale pentru diferite limbi.

Observație:

Internet Explorer recunoaște pseudo-clasa : lang numai dacă declarația <!DOCTYPE> este

inclusă în document.

În exemplul următor, pseudo-clasa : lang definește modul de marcare a citatelor pentru

elementele q care au lang="no":

EXEMPLUL 122

1 2

3

4

5 6

7

8 9

10

11 12

13

14



<style type="text/css"> q:lang(no){ quotes: "~" "~"; } </style> </head> <body>

<p>Un text in paragraf.<q lang="no">Un citat in cadrul paragrafului</q> Un text in paragraf.</p> </body> </html>

Exemplu: Ilustrează cum se stabilesc diferite stiluri pentru link-uri.



EXEMPLUL 123

1

2

3 4

5

6

7 8

9

10 11

12

13 14

15

16

17 18

19

20 21

22

23 24

25

26

27 28

29

30

<html> <head>

<style type="text/css"> a.one:link {color: #ff0000;} a.one:visited {color: #0000ff;} a.one:hover {color: #ffcc00;} a.two:link {color: #ff0000;} a.two:visited {color: #0000ff;} a.two:hover {font-size: 150%;} a.three:link {color: #ff0000;} a.three:visited {color: #0000ff;} a.three:hover {background: #66ff66;} a.four:link {color: #ff0000;} a.four:visited {color: #0000ff;} a.four:hover {font-family: monospace;} a.five:link {color: #ff0000; text-decoration: none;} a.five:visited {color: #0000ff; text-decoration:none;} a.five:hover {text-decoration: underline;} </style> </head> <body> <p>Miscati mouse-ul peste link-uri pentru a vedea cum li se schimba

aspectul..</p>

<p><b><a class="one" href="http://www.google.com" target="_blank">Acest link isi schimba culoarea</a></b></p>

<p><b><a class="two" href="http://www.google.com" target="_blank">Acest link isi schimba dimensiunea fontului</a></b></p>

<p><b><a class="three" href="http://www.google.com" target="_blank">Acest link isi schimba culoarea de fundal</a></b></p>

<p><b><a class="four" href="http://www.google.com" target="_blank">Acest link isi schimba familia fontului</a></b></p>

<p><b><a class="five" href="http://www.google.com" target="_blank">Acest link isi schimba modul de decorare</a></b></p> </body> </html>

Exemplu: Ilustrează cum se folosește pseudo-clasa :focus.

EXEMPLUL 124

1 2

3

4 5

6

7 8

9

10

11 12

13


"http://www.w3.org/TR/xhtml1/DTD/xhtml1 - transitional.dtd"> <html> <head>

<style type="text/css"> input:focus{ background-color:yellow; } </style> </head> <body>

<form action="form_action.asp" method="get">

Nume: <input type="text" name="nume" /><br />






http://www.w3.org/TR/xhtml1/DTD/xhtml1

14

15 16

17

18 19

Prenume: <input type="text" name="pren" /><br />

<input type="submit" value="Trimite" /> </form> <p><b>Note:</b> Internet Explorer suporta pseudo-clasa :focus daca

este specificat !DOCTYPE.</p> </body> </html>

Pseudo-clasele CSS

Nume Descriere

:active Adaugă un stil unui element care este activat

:first-child Adaugă un stil unui element care este primul descendent al unui alt element

:focus Adaugă un stil unui element care este focusat pentru intrare de la tastatură

:hover Adaugă un stil unui element când mouse-ul trece peste el

:lang Adaugă un stil unui element care are un anumit atribut lang

:link Adaugă un stil unui link nevizitat

:visited Adaugă un stil unui link vizitat

23. Pseudo-elementele CSS

Sunt folosite pentru a adăuga efecte speciale unor selectori.

Sintaxă

Sintaxa unui pseudo-element este: 1

2 selector:pseudo-element {property:value;}

Pseudo-elementele pot fi folosite împreună cu clasele CSS: 1 2

selector.class:pseudo-element {property:value;}

Pseudo-elementul : first-line

Acest pseudo-element este utilizat pentru a adăuga un stil primei linii dintr-un text. În

exemplul următor, stilul se aplică primei linii din elementele p:

EXEMPLUL 125

1

2

3

4 5

6

7 8

9

<html> <head>

<style type="text/css"> p:first-line{ color:#ff0000; font-variant:small-caps; } </style> </head>

10

11 12

13

14 15

16

<body> <p>Prima linie din fiecare paragraf are un stil special, adaugat cu

pseudo-elementul :first-line.</p> <p>Pentru a vedea efectul, redimensionati fereastra browserului

astfel incat aceste doua paragrafe sa fie afisate pe doua sau mai multe linii.</p> </body> </html>

Observație:

Pseudo-elementul "first-line" poate fi utilizat numai cu elementele bloc.

Pseudo-elementul "first-line" poate avea următoarele proprietăți:

pentru font pentru culoare pentru fundal spațierea cuvintelor spațierea literelor decorarea textului aliniere verticală transformarea textului înălțimea liniei clear

Pseudo-elementul: first-letter

Acest pseudo-element este utilizat pentru a adăuga un anumit stil primei litere dintr-un

text:

EXEMPLUL 126

1

2

3 4

5

6

7 8

9

10 11

12

13 14

15

<html> <head>

<style type="text/css"> p:first-letter{ color:#ff0000; font-size:xx-large; } </style> </head> <body> <p>Prima litera din acest paragraf este stilizata cu ajutorul

pseudo-elementului :first-letter. Prima litera din acest paragraf este stilizata cu ajutorul

elementului :first-letter.</p> </body> </html>

Observație:

Pseudo-elementul "first-letter" poate fi utilizat numai cu elementele bloc.

Pseudo-elementul "first-letter" poate avea următoarele proprietăți:

pentru font pentru culoare

pentru fundal pentru margini pentru padding pentru chenar decorarea textului aliniere verticală (numai dacă "float" este "none") transformarea textului înălțimea liniei float clear

Pseudo-elementele și clasele CSS

Pseudo-elementele pot fi combinate cu clasele CSS : 1

2

3

p.articol:first-letter {color:#ff0000;}

<p class="articol">Un paragraph din clasa articol.</p>

Exemplul de mai sus va afișa prima literă din toate paragrafele care fac parte din clasa

"articol", în roșu.

Pseudo-elemente multiple

Pseudo-elementele pot fi combinate. În exemplul următor, prima literă din paragraf este

roșie cu dimensiunea fontului xx-large. Restul textului din prima linie este albastru, cu

majuscule mici (small-caps). Restul textului din paragraf are culoarea și dimensiunea

fontului implicite:

EXEMPLUL 127

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15 16

17

18

19 20

21

<html> <head>

<style type="text/css"> p:first-letter{ color:#ff0000; font-size:xx-large; } p:first-line{ color:#0000ff; font-variant:small-caps; } </style> </head> <body> <p> Puteti combina pseudo-elementele :first-letter si :first-line pentru a

adauga efecte speciale primei litere, respectiv primei linii dintr-un text. </p> </body> </html>

Pseudo-elementul: before

Acest pseudo-element poate fi utilizat pentru a insera un conținut înaintea unui element.

În exemplul următor este inserată o imagine înaintea fiecărui element <h1> din document:

EXEMPLUL 128

1 2

3

4

5 6

7

8 9

10

11 12

13

14

15



<style type="text/css"> h1:before {content:url(roses.gif);} </style> </head> <body> <h1>Acesta este un titlu</h1> <p>Pseudo-elementul :before insereaza un continut inaintea unui

element.</p> <h1>Acesta este un titlu</h1> <p><b>Note:</b> Internet Explorer accepta aceasta proprietate numai

daca este specificat !DOCTYPE.</p> </body> </html>

Pseudo-elementul: after

Acest pseudo-element poate fi folosit pentru a insera un conținut după un element. În

exemplul următor este inserată o imagine după fiecare element <h1>:

EXEMPLUL 129

1 2

3

4 5

6

7

8 9

10

11 12

13

14

15



<style type="text/css"> h1:after {content:url(roses.gif);} </style> </head> <body> <h1>Acesta este un titlu</h1> <p>Pseudo-elementul :after insereaza un continut dupa un element.</p> <h1>Acesta este un titlu</h1> <p><b>Note:</b> Internet Explorer accepta aceasta proprietate numai

daca este specificat !DOCTYPE.</p> </body> </html>

Pseudo-elementele CSS

Nume Descriere

:after Adaugă conținut după un element

:before Adaugă conținut înaintea unui element

:first-letter Adaugă un stil primei litere dintr-un text

:first-line Adaugă un stil primei linii dintr-un text



24. Bara de navigare

Este foarte important pentru un site web să aibă un sistem de navigare ușor de folosit. Cu

CSS puteți transforma plictisitoarele meniuri HTML în bare de navigare aspectuoase. O bară

de navigare este de fapt o listă de link-uri. În exemplul vom construi o bară de navigare

dintr-o listă HTML standard.

EXEMPLUL 130

1

2 3

4

5

6 7

8

9 10

11

12

<html> <body> <ul>

<li><a href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li> </ul> <p>Obs: Pentru a testa link-urile folosim href="#". Intr-un site real

trebuie sa apara adresele URL reale.</p> </body> </html>

Acum înlăturăm marcatorii, marginile și padding-ul din listă:

EXEMPLUL 131

1

2

3 4

5

6

7 8

9

10 11

12

13 14

15

16

17 18

19

20

<html> <head> <style> ul{ list-style-type:none; margin:0; padding:0; } </style> </head> <body> <ul>




<li><a href="#about">About</a></li> </ul> </body> </html>

Explicații:

list-style-type:none – înlătură marcatorii; ei nu sunt necesari într-o bară de navigare proprietățile margins și padding au valoarea 0 pentru a înlătura setările implicite ale

browserului

Codul din exemplul următor este codul standard utilizat în construirea barelor de navigare

verticale sau orizontale.

Bară de navigare verticală

Pentru a construi o bară de navigare verticală, trebuie să stilizăm elementele <a>:

EXEMPLUL 132

1

2

3

4 5

6

7 8

9

10

11 12

13

14 15

16

17 18

19

20

21 22

23

24 25

26

27 28

29

30

31 32

33

34

<html> <head>

<style type="text/css"> ul{ list-style-type:none; margin:0; padding:0; } a:link,a:visited{ display:block; font-weight:bold; color:#FFFFFF; background-color:#98bf21; width:120px; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover,a:active{ background-color:#7A991A; } </style> </head> <body> <ul>





Explicații:

display:block – afișând linkurile ca blocuri, întreaga zonă poate fi acționată cu mouse-ul, nu numai textul, și se poate specifica lățimea

width:60px – elementele bloc ocupă toată lățimea disponibilă, de aceea se specifică lățimea dorită

Observație:

Specificați întotdeauna lățimea pentru elementele <a> dintr-o bară de navigare verticală,

altfel puteți obține rezultate nedorite în IE.

Bară de navigare orizontală

Putem crea o bară de navigare în două moduri, folosind itemi inline sau float. Amândouă

metodele sunt bune, dar dacă doriți ca linkurile să aibă aceeași dimensiune, trebuie să

folosiți itemi de tip float.

Itemi inline

O metodă de a construi o bară de navigare verticală este să declarați elemente <li> din

lista de linkuri ca elemente inline:

EXEMPLUL 133

1

2 3

4

5

6 7

8

9 10

11

12 13

14

15

16 17

18

19 20

21

22

23 24

25

26 27

28

29 30

31

32

33 34

35

36 37

<html> <head>

<style type="text/css"> ul{ list-style-type:none; margin:0; padding:0; padding-top:6px; padding-bottom:6px; } li{ display:inline; } a:link,a:visited{ font-weight:bold; color:#FFFFFF; background-color:#98bf21; text-align:center; padding:6px; text-decoration:none; text-transform:uppercase; } a:hover,a:active{ background-color:#7A991A; } </style> </head> <body> <ul>





Explicații:

display:inline - implicit, elementele <li> sunt elemente bloc. Au fost înlăturate întreruperile de linie dinaintea și după fiecare element, pentru a fi afișate pe aceeași linie.

dacă setați padding-ul pentru elementele <li> (și nu pentru <ul>), linkurile se vor deplasa în afara elementului < ul>. Din acest motiv, a fost specificat padding-ul de sus și de jos

pentru elementul ul.

Itemi float

În exemplul anterior, link-urile au lățimi diferite. Pentru ca toate link-urile să aibă aceeași

lățime, elementele <li> trebuie declarate ca float și trebuie specificată lățimea pentru

elementele <a>:

EXEMPLUL 134

1

2 3

4

5 6

7

8 9

10

11

12 13

14

15 16

17

18 19

20

21

22 23

24

25 26

27

28

29 30

31

32 33

34

35 36

37

38

<html> <head>

<style type="text/css"> ul{ list-style-type:none; margin:0; padding:0; overflow:hidden; } li{ float:left; } a:link,a:visited{ display:block; width:120px; font-weight:bold; color:#FFFFFF; background-color:#98bf21; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover,a:active{ background-color:#7A991A; } </style> </head> <body> <ul>





Explicații:

float:left - se folosește float pentru ca elementele bloc să se deplaseze unele lângă celelalte

display:block - afișând link-urile ca elemente bloc, întreaga zonă (nu numai textul) poate fi acționată cu mouse-ul și se poate specifica lățimea fiecărei zone

width:60px - deoarece elementele bloc ocupă întreaga lățime disponibilă, nu se pot deplasa unul lângă altul. Din acest motiv, se specifică lățimea dorită a link-urilor.

Exemple de meniuri:

Exemplul 1: Meniu orizontal cu trei nivele

Documentul HTML:

EXEMPLUL 135

1 2

3

4

5 6

7

8 9

10

11 12

13

14

15 16

17

18 19

20

21

22 23

24

25 26

27

28 29

30

31

32 33

34

35 36

<!doctype html> <html> <head> <title>CSS3 Dropdown Menu</title>

<meta charset="utf-8">

<link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <nav> <ul>

<li><a href="#">Home</a></li>

<li><a href="#">Tutorials</a> <ul>

<li><a href="#">Photoshop</a></li>

<li><a href="#">Illustrator</a></li>

<li><a href="#">Web Design</a> <ul>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li> </ul> </li> </ul> </li>

<li><a href="#">Articles</a> <ul>

<li><a href="#">Web Design</a></li>

<li><a href="#">User Experience</a></li> </ul> </li>

<li><a href="#">Inspiration</a></li> </ul> </nav> </body> </html>

Documentul CSS: 1

2

3 4

5

6

nav ul ul { display: none; }

nav ul li:hover > ul { display: block;

7

8 9

10

11 12

13

14

15 16

17

18 19

20

21 22

23

24

25 26

27

28 29

30

31

32 33

34

35 36

37

38 39

40

41

42 43

44

45 46

47

48 49

50

51

52 53

54

55 56

57

58

59 60

61

}

nav ul { background: #efefef;

background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);

background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);

background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);

box-shadow: 0px 0px 9px rgba(0,0,0,0.15);

padding: 0 20px; border-radius:12px; list-style: none; position: relative; display: inline-table; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: left; } nav ul li:hover { background: #4b545f;

background: linear-gradient(top, #4f5964 0%, #5f6975 40%);

background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -webkit-linear-

gradient(top, #4f5964 0%,#5f6975 40%); } nav ul li:hover a { color: #fff; }

nav ul li a {

display: block; padding: 20px 45px; color: #757575; text-decoration: none; } nav ul ul { background: #5f6975; border-radius: 0px; padding: 0; position: absolute; top: 100%; } nav ul ul li { float: none;

border-top: 1px solid #6b727c;

border-bottom: 1px solid #575f6a; position: relative; } nav ul ul li a {

padding: 15px 45px; color: #fff; } nav ul ul li a:hover { background: #4b545f; }

nav ul ul ul {

62

63

position: absolute; left: 100%; top:0; }

Exemplu: Meniu orizontal cu patru nivele

Documentul HTML:

EXEMPLUL 136

1

2

3 4

5

6 7

8

9

10 11

12

13 14

15

16 17

18

19

20 21

22

23 24

25

26

27 28

29

30 31

32

33 34

35

36

37 38

39

40 41

42

43 44

45

46

<!doctype html> <html> <head> <title>CSS3 Dropdown Menu</title>

<meta charset="utf-8">

<link href="style.css" rel="stylesheet" type="text/css" /> </head> <body>

<ul id="nav">

<li class="current"><a href="#">Home</a></li>

<li><a href="#">My Projects</a> <ul>

<li><a href="#">N.Design Studio</a> <ul>

<li><a href="#">Portfolio</a></li>

<li><a href="#">WordPress Themes</a></li>

<li><a href="#">Wallpapers</a></li>

<li><a href="#">Illustrator Tutorials</a></li> </ul> </li>

<li><a href="#">Web Designer Wall</a> <ul>

<li><a href="#">Design Job Wall</a></li> </ul> </li>

<li><a href="#">IconDock</a></li>

<li><a href="#">Best Web Gallery</a></li> </ul> </li>

<li><a href="#">Multi-Levels</a> <ul>

<li><a href="#">Team</a> <ul>

<li><a href="#">Sub-Level Item</a></li>

<li><a href="#">Sub-Level Item</a> <ul>



<li><a href="#">Sub-Level Item</a></li> </ul> </li>

<li><a href="#">Sub-Level Item</a></li> </ul> </li>

47

48 49

50

51 52

53

54

55 56

57

58 59

60

61 62

<li><a href="#">Sales</a></li>

<li><a href="#">Another Link</a></li>

<li><a href="#">Department</a> <ul>



<li><a href="#">Sub-Level Item</a></li> </ul> </li> </ul> </li>

<li><a href="#">About</a></li>

<li><a href="#">Contact Us</a></li> </ul> </body> </html>

Documentul CSS:

1

2 3

4

5

6 7

8

9 10

11

12 13

14

15

16 17

18

19 20

21

22 23

24

25

26 27

28

29 30

31

32

33 34

35

36 37

body {

font: normal .8em/1.5em Arial, Helvetica, sans-serif; background: #ebebeb; width: 900px;

margin: 100px auto; color: #666; }

a { color: #333; } #nav { margin: 0;

padding: 7px 6px 0;

background: #7d7d7d url(img/gradient.png) repeat-x 0 -110px; line-height: 100%;

border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);

-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4); } #nav li {

margin: 0 5px;

padding: 0 0 8px; float: left; position: relative; list-style: none; }

/* main level link */ #nav a { font-weight: bold; color: #e7e5e5;

38

39 40

41

42 43

44

45

46 47

48

49 50

51

52 53

54

55

56 57

58

59 60

61

62

63 64

65

66 67

68

69 70

71

72

73 74

75

76 77

78

79 80

81

82

83 84

85

86 87

88

89

90 91

92

text-decoration: none; display: block;

padding: 8px 20px; margin: 0;

-webkit-border-radius: 1.6em; -moz-border-radius: 1.6em;

text-shadow: 0 1px 1px rgba(0,0,0, .3); } #nav a:hover { background: #000; color: #fff; }

/* main level link hover */ #nav .current a, #nav li:hover > a {

background: #666 url(gradient.png) repeat-x 0 -40px; color: #444;

border-top: solid 1px #f8f8f8;


-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);

box-shadow: 0 1px 1px rgba(0,0,0, .2);

text-shadow: 0 1px 0 rgba(255,255,255, 1); }

/* sub levels link hover */ #nav ul li:hover a, #nav li:hover li a { background: none; border: none; color: #666;

-webkit-box-shadow: none; -moz-box-shadow: none; } #nav ul a:hover {

background: #0078ff url(gradient.png) repeat-x 0 -100px !important;

color: #fff !important;

-webkit-border-radius: 0; -moz-border-radius: 0;

text-shadow: 0 1px 1px rgba(0,0,0, .1); }

/* dropdown */ #nav li:hover > ul { display: block; }

/* level 2 list */ #nav ul {

93

94 95

96

97 98

99

100

101 102

103

104 105

106

107 108

109

110

111 112

113

114 115

116

117

118 119

120

121 122

123

124 125

126

127

128 129

130

131 132

133

134 135

136

137

138 139

140

141 142

143

144

145 146

147

display: none;

margin: 0; padding: 0; width: 185px; position: absolute; top: 35px; left: 0;

background: #ddd url(img/gradient.png) repeat-x 0 0;

border: solid 1px #b4b4b4;

-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;


-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);

box-shadow: 0 1px 3px rgba(0,0,0, .3); } #nav ul li { float: none; margin: 0; padding: 0; }

#nav ul a { font-weight: normal;

text-shadow: 0 1px 0 #fff; }

/* level 3+ list */ #nav ul ul { left: 181px; top: -3px; }

/* rounded corners of first and last link */ #nav ul li:first-child > a { -webkit-border-top-left-radius: 9px; -moz-border-radius-topleft: 9px;

-webkit-border-top-right-radius: 9px; -moz-border-radius-topright: 9px; } #nav ul li:last-child > a { -webkit-border-bottom-left-radius: 9px; -moz-border-radius-bottomleft: 9px;

-webkit-border-bottom-right-radius: 9px; -moz-border-radius-bottomright: 9px; }

/* clearfix */ #nav:after { content: ".";

148

149 150

151

152 153

154

155

156 157

158

159 160

161

162 163

164

display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #nav { display: inline-block; } html[xmlns] #nav { display: block; }

* html #nav { height: 1%; }

25. Galerie de imagini

Putem folosi CSS pentru a crea o galerie de imagini, ca în exemplul următor:

EXEMPLUL 137

1

2

3

4 5

6

7 8

9

10 11

12

13

14 15

16

17 18

19

20

21 22

23

24 25

26

27 28

29

30

<html> <head>

<style type="text/css"> div.img{ margin: 2px; border: 1px solid #0000ff; height: auto; width: auto; float: left; text-align: center; } div.img img{ display: inline; margin: 3px; border: 1px solid #ffffff; } div.img a:hover img {border: 1px solid #0000ff;} div.desc{ text-align: center; font-weight: normal; width: 120px; margin: 2px; } </style> </head> <body>

<div class="img">

<a target="_blank" href="roses.htm"><img src="roses.jpg" alt="Roses" wid

th="110" height="90" /></a>

<div class="desc">Adaugati o descriere a imaginii</div>

31

32 33

34

35 36

37

38

39 40

41

42 43

44

45

</div>

<div class="img">

<a target="_blank" href="roses.htm"><img src="images/roses.jpg" alt="Ro

ses" width="110" height="90" /></a>

<div class="desc">Adaugati o descriere a imaginii</div> </div>

<div class="img">



<div class="desc">Adaugati o descriere a imaginii</div> </div>

<div class="img">



<div class="desc">Adaugati o descriere a imaginii</div> </div> </body> </html>

26. Opacitatea/transparența unei imagini

Exemplu: Crearea unei imagini transparente cu efect la mișcarea mouse-ului peste

imagine:

1 2

3

4

5 6

7

8 9

10

11 12

13

14

15 16

17

18

<html> <head>

<style type="text/css"> img{ opacity:0.4; filter:alpha(opacity=40) } </style> </head> <body> <h1>Imagini transparente cu efect mouseover</h1>

<img src="roses.jpg" width="150" height="113" alt="Roses"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"

onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

<img src="tulip.jpg" width="150" height="113" alt="Tulips"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"

onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> </body> </html>

Firefox utilizează pentru transparență proprietatea opacity:x, în timp ce IE

folosește filter:alpha(opacity=x).

În CSS3 sintaxa pentru transparență este opacity:x.

În Firefox valoarea lui x poate fi între 0.0 și 1.0. O valoare mai mică înseamnă un element

mai transparent.

În IE valoarea lui x poate fi între 0 și 100. O valoare mai mică înseamnă un element mai

transparent.

Exemplu: Crearea unei casete transparente cu text peste o imagine de fundal:

EXEMPLUL 138

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15 16

17

18

19 20

21

22 23

24

25

26 27

28

29 30

31

32 33

34

35

36 37

38

39 40

41

42

<html> <head>

<style type="text/css"> div.background{ width:500px; height:250px; background:url(klematis.jpg) repeat; border:2px solid black; } div.transbox{ width:400px; height:180px; margin:30px 50px; background-color:#ffffff; border:1px solid black; /* for IE */ filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6; } div.transbox p{ margin:30px 40px; font-weight:bold; color:#000000; } </style> </head> <body>

<div class="background">

<div class="transbox"> <p> Acesta este un text plasat intr-o caseta transparenta. Acesta este un text plasat intr-o caseta transparenta. Acesta este un text plasat intr-o caseta transparenta. Acesta este un text plasat intr-o caseta transparenta Acesta este un text plasat intr-o caseta transparenta. </p> </div> </div> </body> </html>

În acest exemplu a fost adăugat un atribut onmouseover și un atribut onmouseout.

Atributul onmouseover definește ce se întâmplă când mouse-ul se mișcă peste imagine. În

acest exemplu dorim ca imaginea să nu fie transparentă când mișcăm mouse-ul peste ea.

Pentru aceasta, sintaxa în Firefox este: this.style.opacity=1, iar în IE

este: this.filters.alpha.opacity=100.

Când mouse-ul părăsește imaginea, ea va fi din nou transparentă. Acest lucru este realizat

cu atributul onmouseout.

Mai întâi, a fost creat elementul <div> din class="background" cu înălțimea și lățimea

fixate, o imagine de fundal și un chenar. În interiorul acestui element, a fost creat un

element <div> mai mic, din class="transbox". Acest element <div> are înălțimea și lățimea

fixate, o culoare de fundal, un chenar și este transparent. În interiorul elementului <div>

transparent a fost creat un element p care conține textul. 27. Imagini sprite

O imagine sprite este o colecție de imagini asamblate într-o singură imagine. O pagină web

care conține multe imagini are nevoie de mult timp pentru a fi încărcată și generează

numeroase cereri către server. Folosirea imaginilor sprite reduce numărul acestor cereri

către server și lățimea de bandă utilizată.

Exemplu:

În loc să folosiți trei imagini separate pentru navigarea în pagina web, folosiți imaginea

sprite de mai jos („nav_sprite.gif"):

Cu CSS, putem afișa doar porțiunea de imagine pe care o dorim, așa cum ilustrează

exemplul următor:

Crearea unei liste de navigare

Vom folosi o listă HTM, deoarece toate elementele pot fi linkuri și suportă o imagine de

fundal:

EXEMPLUL 139

1

2

3 4

5

6 7

8

9

10 11

12

13 14

15

16 17

18

19

20 21

22

23 24

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head>

<style type="text/css"> #navlist{position:relative;} #navlist

li{margin:0;padding:0;liststyle:none;position:absolute;top:0;} #navlist li, #navlist a{height:44px;display:block;} #home{left:0px;width:46px;} #home{background:url('nav_sprite.gif') 0 0;} #prev{left:63px;width:43px;} #prev{background:url('nav_sprite.gif') -47px 0;} #next{left:129px;width:43px;} #next{background:url('nav_sprite.gif') -91px 0;} </style> </head> <body>

<ul id="navlist">

<li id="home"><a href="default.asp"></a></li>

<li id="prev"><a href="css_intro.asp"></a></li>

<li id="next"><a href="css_syntax.asp"></a></li> </ul> </body> </html>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

Explicații:

#navlist{position:relative;} – poziția listei de navigare este relativă pentru a permite poziționarea absolută în interiorul ei

#navlist li{margin:0;padding:0;liststyle: none;position:absolute;top:0;} – elementele listei au marginile și padding-ul setate la 0, stilul caracteristic listelor este înlăturat și sunt poziționate absolut

#navlist li, #navlist a{height:44px;display:block;} – înălțimea pentru toate imaginile este setată la 44px

Acum poziționăm și fixăm stilul pentru fiecare porțiune de imagine:

#home{left:0px;width:46px;} – elementul este poziționat la stânga și are lățimea de 46px #home{background:url(img_navsprites.gif) 0 0;} – se definește imaginea de fundal pentru

element și poziția acestei imagini (left 0px, top 0px) #prev{left:63px;width:43px;} – elementul listei este poziționat la 63px spre dreapta

(#home are 46px + 17px spațiu suplimentar între elementele listei), și lățimea este de 43px.

#prev{background:url('img_navsprites.gif') -47px 0;} – defineste imaginea de fundal a acestui element la 47px spre dreapta (#home are 46px + 1px linia despărțitoare)

#next{left:129px;width:43px;} – elementul este poziționat la 129px spre dreapta (elementul #prev începe la 63px + lățimea lui#prev de 43px + spațiu suplimentar), și are lățimea de 43px.

#next{background:url('img_navsprites.gif') norepeat -91px 0;} – definește imaginea de fundal a acestui element la 91px spre dreapta (#home are 46px + 1px linia + #prev are 43px + 1px linia)

Acum vom adăuga un efect listei de navigare, atunci când mouse-ul se mișcă peste ea

(hover). Noua imagine ("nav_sprite_hover.gif") conține trei imagini normale de navigare și

trei imagini pentru efect:

Deoarece este o singură imagine și nu șase imagini separate, pagina va fi încărcată rapid.

Pentru a obține acest efect adăugăm doar trei linii de cod:

EXEMPLUL 140

1

2 3

4

5 6

7

8 9

10

11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head>

<style type="text/css"> #navlist{position:relative;} #navlist

li{margin:0;padding:0;liststyle:none;position:absolute;top:0;} #navlist li, #navlist a{height:44px;display:block;} #home{left:0px;width:46px;} #home{background:url('nav_sprite_hover.gif') 0 0;}

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

12

13 14

15

16 17

18

19

20 21

22

23 24

25

26 27

#home a:hover{background: url('nav_sprite_hover.gif') 0 -45px;} #prev{left:63px;width:43px;} #prev{background:url('nav_sprite_hover.gif') -47px 0;} #prev a:hover{background: url('nav_sprite_hover.gif') -47px -45px;} #next{left:129px;width:43px;} #next{background:url('nav_sprite_hover.gif') -91px 0;} #next a:hover{background: url('nav_sprite_hover.gif') -91px -45px;} </style> </head> <body>

<ul id="navlist">

<li id="home"><a href="home.htm"></a></li>

<li id="prev"><a href="page1.htm"></a></li>

<li id="next"><a href="page2.htm"></a></li> </ul> </body> </html>

Explicații:

deoarece itemii listei sunt link-uri, putem folosi pseudo-clasa : hover #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} –

pentru toate cele trei imagini cu efect, precizăm aceeași poziție a fundalului, dar cu 45px

mai jos.

28. Atribute selector

Este posibil să stilizați elementele HTML care au un anumit atribut, nu numai class și id.

Observație:

Internet Explorer recunoaște atributele selector numai dacă declarația ! DOCTYPE este

inclusă în document.

Exemplu: Exemplul următor ilustrează cum pot fi stilizate toate elementele care au

atributul title:

EXEMPLUL 141

1

2 3

4

5 6

7

8 9

10

11

12 13

14

15 16

17

18

19



<style type="text/css"> [title]{ color:blue; } </style> </head> <body> <h2>Stilul va fi aplicat elementelor:</h2>

<h1 title="Salut">Buna ziua</h1>

<a title="Google" href="http://www.google.com">Google</a>

<hr /> <h2>Stilul nu va fi aplicat elementelor:</h2> <p>Salutare!</p> </body> </html>



Exemplu: Ilustrează aplicarea unui stil tuturor elementelor care au atributul title="CSS":

EXEMPLUL 142

1

2 3

4

5

6 7

8

9 10

11

12 13

14

15

16 17

18

19 20



<style type="text/css"> [title=CSS]{ border:5px solid green; } </style> </head> <body> <h2>Stilul va fi aplicat elementelor:</h2>

<img title="CSS" src="logo.gif" width="170" height="50" /> <br />

<a title="CSS" href="http://www.cisco.com/">Cisco</a>

<hr /> <h2>Stilul nu va fi aplicat elementelor:</h2>

<p title="salutari">Buna!</p>

<a class="CSS" href="http://www.cisco.com/">Cisco</a> </body> </html>

Exemplu: Ilustrează cum pot fi stilizate toate elementele al căror atribut conține o

anumită valoare:

EXEMPLUL 143

1

2 3

4

5 6

7

8

9 10

11

12 13

14

15 16

17

18

19



<style type="text/css"> [title~=hello]{ color:blue; } </style> </head> <body> <h2>Stilul va fi aplicat elementelor:</h2>

<h1 title="hello all">Buna ziua</h1>

<p title="elev hello">Buna ziua elevi!</h1>


<p title="elev">Buna ziua elevi!</p> </body> </html>

Exemplu: Exemplul următor ilustrează cum se stilizează toate elementele care conțin o

anumită valoare în atributul lang:


http://www.cisco.com/

http://www.cisco.com/


EXEMPLUL 144

1

2

3 4

5

6

7 8

9

10 11

12

13 14

15

16

17 18

19

20 21



<style type="text/css"> [lang|=en]{ color:blue; } </style> </head> <body> <h2>Stilul va fi aplicat elementelor:</h2>

<p lang="en">Hello!</p>

<p lang="en-us">Hi!</p>

<p lang="en-gb">Hello!</p>


<p lang="us">Hi!</p>

<p lang="no">Hei!</p> </body> </html>

Exemplu: Atributele selector sunt în mod deosebit utile pentru stilizarea formularelor fără

atributele class sau id: EXEMPLUL 145

1

2

3

4 5

6

7 8

9

10 11

12

13

14 15

16

17 18

19

20

21 22

23

24 25

26


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style> input[type="text"]{ width:150px; display:block; margin-bottom:10px; background-color:yellow; } input[type="button"]{ width:120px; margin-left:35px; display:block; } </style> </head> <body>

<form name="input" action="" method="get">

Nume:<input type="text" name="Nume" value="Scutelnic" size="20">

Prenume:<input type="text" name="Prenume" value="Speranța" size="20">

<input type="button" value="Trimite"> </form> </body> </html>



Documents

CSS - Cascading Style Sheets - MateInfo.Netmateinfo.net/muscalua/csscurs.pdf · Stabilirea culorii din prim-plan - Controale pentru chenare si afisarea elementelor ... Ca si clasa,