Partea II Foi de stil cascad

Cap.1 Introducere
1.1 Punerea problemei Foile de stil n cascad sau CSS (Cascading Style Sheets) sunt o recomandare a W3C (World Wide Web Consortium) care joac un rol important n design-ul unui document HTML. n prezent este dificil de gndit un site fr a utiliza foile de stil n cascad CSS. Iniial CSS a fost conceput pentru a extinde posibilitile HTML, dar actualmente CSS este un complement pentru HTML. n realitate CSS au o arie de aplicabilitate mult mai larg, incluznd XML, XHTML, etc. dar aceste direcii nu fac obiectul prezentrii de fa. De fapt eficacitatea real a foilor de stil se poate observa cel mai bine atunci cnd sunt utilizate cu documente de tip XML. n anii 90 exista deja un limbaj de procesare pentru stiluri numit DSSSL, ce era utilizat pentru a formata documente SGML. Acest limbaj era mult prea complex pentru a putea fi utilizat cu HTML. De aceea s-a simit nevoia de a crea o variant simplificat a DSSSL-ului, care s poat fi utilizat uor cu HTML. Astfel au fost propuse mai multe limbaje de formatare a stilurilor. Dintre acestea, cel care sa impus a fost acela care utiliza foile de stil n cascad, numit Cascading Style Sheets, sau pe scurt CSS. Avantajul major- care l-a i impus n faa celorlalte- al acestui limbaj const n modularitatea sa, care oferea posibilitatea de combinare n cascad a mai multor stiluri pentru a genera un singur stil. CSS a fost iniiat n 1994, ntr-un articol intitulat Cascading HTML Style Sheets publicat de Hkon Wium Lee, care lucra la CERNlocul unde a aprut HTML. CSS a fost structurat n timp pe mai multe nivele i profile. Astfel, browserele clasice implementeaz nivelele 1, 2 i 3. Pentru alte platforme, cum ar fi telefoane celulare, PDA, imprimante, TV, etc. exist o serie profile dedicate. Iniial a fost propus o variant hibrid de CSS. Ulterior s-au dezvotat o serie de nivele mbuntite, dup cum urmeaz. Nivelul 1 al CSS sau CSS1 a fost propus n 1996 i actualizat n 1999 i conine proprieti fundamentale pentru fonturi, margini, color, etc. utilizate de toate CSS-urile. Nivelul 2 al CSS sau CSS2 este o variant adugit a CSS1 (mai exact a ridicat numrul elementelor cu 70 de elemente noi) care mai include n plus elemente de poziionare absolut, numerotri automate, page break-uri, etc. Nivelul 3 al CSS sau CSS3 este n faz de construcie. Acesta reprezint nc un pas nainte, incluznd toate elementele cuprinse n CSS2 i n plus o serie de selectori noi, posibilitati noi de setare a background-ului unei pagini, i multe altele. Inventatorul HTML, Tim Berners-Lee, a prevzut apariia foilor de stil. Cu toate c HTML are posibiliti limitate de control al stilului, a fost suficient pentru acea perioad de pionierat. n timp, HTML i-a depit limetele iniiale, acesta fiind conceput ca un limbaj de formatare pentru rapoarte. Aceast simplitate care a dus la expansiunea HTML, n prezent reprezint un dezavantaj din punctul de vedere al prezentrilor. Pentru a face o comparaie plastic, putem spune c aplicarea unei foi de stil unui document HTML este analoag cu construcia unei case utiliznd un plan. Documentul HTML poate fi interpretat ca o mulime de materiale de construcii, iar foaia de stil poate fi planul construciei. Aceasta precizeaz modalitatea de utilizare a fiecrui material de construcie. n aceast imagine, programul care transform materialele de construcii ntr- o construcie utiliznd foi de stil este constructorul. O foaie de stil poate fi interpretat ca o list de stiluri care relaioneaz proprietile stilurilor cu

elementele din document. Fiecare coresponden de la element la proprietate se numete regul. Cu alte cuvinte, o foaie de stil este o mulime de reguli care determin modalitatea de formatare a unui document HTML. Sintaxa general a unui stil este: selector { proprietate: valoare; } Selectorul poate fi un element existent sau o clas i are scopul de a informa procesorul despre elementul cruia i corespunde aceast regul. Articolele din interiorul acoladei se numesc proprieti ale declaraiei i reprezint o list de proprieti de aplicat elementului specificat de selector. Fiecare declaraie const dintr-o list de corespondene proprietate-valoare, n care fiecare proprietate a stilului este relaionat cu o valoare prin intermediul unui separator (:). Foile de stil pot fi definite ntr-un document HTML sau n exterior, ca documente separate. Se recomand utilizarea foilor de stil externe, pentru c au avantajul c separ mai bine stilul de coninut i o actualizare a unei foi de stil externe, se aplic la toate documentele care utilizeaz acea foaie de stil. Stilurile specificate n interiorul unui document HTML se pot aplica la ntreg documentul sau la un singur element coninut n document. n XHTML precizarea intern a stilurilor este depreciat. Prezentm n continuare un exemplu de foaie de stil: stil.css * { display:block } h1 { color:green; text-decoration:overline; } h2 { color:blue; text-decoration:underline; } h3 { color:olive; text-decoration:line-through; } h4 { color:red }

h5 { color:lightblue } p { color:teal; } i documentul XML care o refer: <?xml version="1.0" encoding="utf-8" ?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <p>Text</p> </doc> cu output-ul:

Daca la aceeasi foaie de stil considerm documentul HTML care o refer: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-88591"> <link href="stil.css" rel="stylesheet" type="text/css"> </head> <body> <h1>H1</h1> <h2>H2</h2>

<h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <p>Text</p> </body> </html> vom obine output-ul:

Din acest exemplu se observ c utilizarea elementelor h1, h2, .. i p ntr-un document XML nu are nici o semnificaie-- spre deosebire de HTML. Pentru a pstra semnificaia elementelor din HTML i n acest caz, va trebui s specificm explicit faptul c aceste elemente trebui s fie interpretate n sens HTML. Acest pucru se face prin specificarea namespace-ului: xmlns:html=http://www.w3.org/1999/xhtml Mai exact, dac la foaia de stil stil.css anterioar vom considera documentul XML: <?xml version="1.0" encoding="utf-8" ?> <?xml-stylesheet type="text/css" href="s1.css" ?> <doc> <html:h1 xmlns:html="http://www.w3.org/1999/xhtml">H1</html:h1> <html:h2 xmlns:html="http://www.w3.org/1999/xhtml">H2</html:h2> <html:h3 xmlns:html="http://www.w3.org/1999/xhtml">H3</html:h3> <html:h4 xmlns:html="http://www.w3.org/1999/xhtml">H4</html:h4> <html:h5 xmlns:html="http://www.w3.org/1999/xhtml">H5</html:h5> <html:p xmlns:html="http://www.w3.org/1999/xhtml">Text</html:p> </doc> vom obine output-ul:

Urmtorul exemplu declar un selector elem cu proprietile de culoare i background setate. elem { color: blue; background: transparent; } Acest exemplu semnific faptul c elementele documentului care se numesc elem vor avea culoarea albastr. Dac n foaia de stil CSS este specificat numele unui element, atunci ablonul acestui element se va aplica la toate apariiile elementului n foaia de stil. S considerm documentul XML: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <a1>elem1</a1> <a2>elem2 <a3>elem3</a3> </a2> </doc> i foaia de stil CSS stil.css a1 { color:red; font-size:large; } a2 {

color:blue; font-size:x-large; } a3 { color:green; font-size:xx-large; } care va genera output-ul :

Dac la acelai document XML vom considera foaia de stil: * { color:blue } vom obine output-ul:

Se observ c asteriscul n foaia de stil va fi asociat cu toate elementele din documentul XML asociat. Dac se dorete aplicarea unui stil la un grup de selectori, acetia se vor separa prin virgul n seciunea selectorilor. n acest sens, dac vom considera documentul XML: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <a1>elem1</a1> <a2>elem2</a2> <a3>elem3</a3> <a4>elem4</a4> <a5>elem4</a5> </doc> i foaia de stil CSS: stil.css a1, a3, a5 { font-size:large; color:red; }

a2, a4 { font-size:x-large; color:blue; } vom obine output-ul:

Dac sunt specificai mai muli selectori separai prin spaii i nu prin virgule, atunci se utilizeaz mecanismul selectrii contextuale. Prin acest mecanism este selectat ultimul element din list dac poziia sa n ierarhia documentului este peste elementele anterioare i dac eleemntele anterioare apar undeva n adresa complet a ultimului element. Astfel, dac vom considera foaia de stil dat de: stil.css doc elem2 elem3 { font-size:large; color:red; } elem1 elem2 { font-size:x-large; color:blue; } elem5 elem7 { font-size:xx-large; color:green; } i documentul XML: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <elem1> elem1 <elem2>elem2 <elem2>elem2</elem2> </elem2> </elem1> <elem2> <elem3>elem3</elem3> </elem2> <elem4>elem4</elem4> <elem5>

<elem6> <elem7>elem7</elem7> </elem6> </elem5> <elem7>elem7</elem7> </doc> vom obine output-ul:

Faptul c un element este copilul altui element, se poate specifica utiliznd simbolul (>). Operatorul > se poate folosi numai ntre elemente printe-copil, numai pentru a relaiona elemente adiacente. S considerm urmtoarea foaie de stil: * { font-family: "serif" } h1 { font-size: 2pt } h2 { font-size: 18pt } h1, h2 { color: red } h1:first-child { color: red } Un element h1 care este first child al printelui su, va avea un conflict de valoare pentru proprietatea color. CSS definete un algoritm ce rezolv conflicte ca acesta, principiul de baz constnd n faptul c un selector particular suprascrie un selector general. Numele elementelor separate prin > n foaia de stil semnific faptul c elementul din dreapta trebuie s fie ul copil al elementului din stnga. Trebuie menionat faptul c Internet Explorer 6 nu suport aceast sintax. Pentru a vizualiza documentul optim, va trebui deschis n Mozilla, sau n alt

browser care compatibil CSS2. S considerm documentul XML: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <elem1> elem1 <elem2>elem2 <elem2>elem2</elem2> </elem2> </elem1> <elem2> <elem3>elem3</elem3> </elem2> <elem4>elem4</elem4> <elem5> <elem6> <elem7>elem7</elem7> </elem6> </elem5> <elem7>elem7</elem7> </doc> i foaia de stil CSS: stil.css doc > elem2 > elem3 { font-size:large; color:red; } elem1 > elem2 { font-size:x-large; color:blue; } elem5 > elem7 { font-size:xx-large; color:green; } vom obine output-ul:

Un tip particular de selector este un sibling selector, care selecteaz un element ce urmeaz un altul pe acelai nivel al ierarhiei. De exemplu p+h1 { text-color: red } selecteaz toate elementele p care urmeaz unui element h1 i oprete colorarea cu rou. Acest selector se aplic numai pentru elemente adiacente(care pot avea text ntre ele). Dac dou elemente sunt separate cu caracterul +, atunci al doilea element este selectat numai dac este precedat de primul. S considerm documentul XML urmtor: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <a1>a1</a1> <a1>a2</a1> <a1>a3</a1> <a2>a4</a2> <a1>a5</a1> <a2>a6</a2> <a3>a7 <a2>a8</a2> <a2>a9</a2> </a3> <a3>a10</a3> <a1>a11</a1> </doc> i foaia de stil CSS: stil.css a1 { font-size:large; color:blue } a1 + a1 { font-size:x-large; color:red } a2 + a1 { font-size:xx-large; color:green

} a1 + a2 { font-size:small; color:maroon } care va genera output-ul:

1.2 Referirea foilor de stil n documentete XML Conceptul de XML utilizeaz numai foi de stil externe. Foile de stil externe permit definirea unui set de reguli care pot fi utilizate de mai multe documente XML simultan. Elementele XML refer foile de stil prin intermediul unei instruciuni de procesare de forma: <?xml-stylesheet type="text/css" href="stil.css"?> care este aezat n prologul documentului XML. Modificarea foilor de stil externe se face o singur dat i apoi aceast modificare se propag la toate documentele XML care refer respectiva foaie de stil. Foile de stil cascad externe sunt documente cu extensia .css, care conin un set de reguli ce pot fi aplicate la orice document XML care le refer. n continuare este prezentat un model de foaie de stil cascad (CSS): stil.css /* Se definete un stil pentru elementul doc */ doc { font: normal courier; color:blue; background-color:white; } /* Se definete un stil pentru paragrafe */ par { font-size: 16pt; color:black; background:red; } /* Se definete un stil pentru primul paragraf al paginii */ par.top { font-family: courier, serif;

color: red; } /* Se definete un stil pentru link-uri */ a { text-decoration:none; color:green; background:transparent; } /* Se definete un stil pentru cazul cnd cursorul este deasupra legturii */ a:hover { color:light-blue; background:black; } /* Se definete un stil pentru link-uri */ * { color: black; background:aqua; font-size: 10pt; } Aceast foaie de stil are ase reguli. Prima regul se refer la coninutul elementului doc, care specific o serie de proprieti generale pentru document: fontul courier, culoarea albastr pe fundal alb. Regulile a doua i a treia se refer la elementele par i respectiv par.top i specific modalitatea de afiare a eleemntelor par ale documentului n general i respectiv a elementelor par din partea superioar a documentului. Urmtoarele dou reguli specific modalitati de afiare a linkurilor, iar ultima regul are un caracter general deoarece se refer la toate elementele documentului. Dup cum se observ din exemplul anterior, un comentariu se specific ntre /* i */. Comentariile sunt utile atunci cnd se lucreaz ntr-o echip i trebuie ca toi membrii s tie ce face un anumit stil. /* Stabilete culoarea roie pentru elementul par */ par { color: red; background: transparent; } Exist i posibilitatea de a comenta mai multe linii, astfel: /* comentarii-- ignorate de procesor a

{ color:green; } par { color:black; } */ n continuare, s scoatem din context urmtoarele trei reguli din codul de mai sus: par { font-size: 16pt; color:black; background:red; } par.top { font-family: courier, serif; color: red; } *{ color: black; background:aqua; font-size: 10pt; } n continuare vom explica termenul de cascading din denumirea Cascading Style Sheets. n cazul n care trebuie procesat elementul par cu atributul de clas top, se aplic toate cele trei reguli anterioare. Din cauza modularitii limbajului CSS, aceste reguli se vor aplica simultan, ca o singur regul: font-size: 16pt; color:black; background:red; font-family: courier, serif; color: red; color: black; background:aqua; font-size: 10pt; Dac unele propieti din cele trei reguli se refer la acelai lucru cu parametri diferii, numai o singur valoare va fi aplicat elementului. Regula este s se aplice acea valoare de la regula cea mai specific. Astfel, n final se va aplica regula:

font-family: courier, serif; color: red; background: transparent; Alt exemplu complet care surprinde aceast proprietate de cascad a stilurilor este i urmtorul. S considerm urmtoarea foaie de stil: stil.css body { background-color: gray; color: black } h1, h2, h3, h4, h5 { color: yellow } h1, h2, h3 { color: lightblue } h1 { color: lightgreen } i documentul XML care o refer <?xml version="1.0" encoding="utf-8" ?> <?xml-stylesheet type="text/css" href="s1.css" ?> <doc> <html:h1 xmlns:html="http://www.w3.org/1999/xhtml">H1</html:h1> <html:h2 xmlns:html="http://www.w3.org/1999/xhtml">H2</html:h2> <html:h3 xmlns:html="http://www.w3.org/1999/xhtml">H3</html:h3> <html:h4 xmlns:html="http://www.w3.org/1999/xhtml">H4</html:h4> <html:h5 xmlns:html="http://www.w3.org/1999/xhtml">H5</html:h5> <html:p xmlns:html="http://www.w3.org/1999/xhtml">Text</html:p> </doc> Acest documentul HTML va avea urmtorul output:

Se observ c elementul h1 este definit de mai multe ori n foaia de stil dar numai ultima valoare definit este utilizat, deoarece aceasta este cea mai specific. Motenirea stilurilor Exemplul discutat mai sus surprinde i un alt fenomen care are loc atunci cnd este definit un stil pentru un element i proprietile specificate suprascriu proprietile existente ale documentului. Acest mecanism se numete motenirea stilurilor. n cadrul acestui proces, proprietile originale ale elementului nu sunt suprascrise ci sunt motenite n noul stil. Cea mai important problem a motenirii este ordinea n care sunt motenite stilurile. Motenirea foilor de stil poate fi gndit ca un arbore de moteniri. Dac unul din stiluri lipsete, este motenit stilul imediat urmtor, astfel: stilurile definite n foaia de stil CSS sunt motenite de browser. Dac toate proprietile sunt suprascrise, atunci nu are loc nici o motenire. Dac un element nu are o anumit proprietate setat, atunci acesta va moteneteni proprietatea respectiv de la printele su. Mai exact, s considerm documentul XML: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="s1.css"?> <doc> <e1>bbb <e2>ccc</e2> </e1> </doc> i foaia de stil CSS: doc { color:red } e2 { color:blue }

care va genera output-ul:

1.3 Mecanismul de comutare al foilor de stil Mecanismul de comutare a foilor de stil este furnizat de browserele moderne care permit utilizatorilor s aleag ntre diverse foi de stil furnizate de autor. Astfel, browserele bazate pe Gecko permit utilizatorului s aleag ce stil doresc s utilizeze pentru meniul sistem. Tot n acest sens, Internet Explorer nu furnizeaz nici un mecanism care s permit comutarea ntre mai multe foi de stil. Din aceast cauz, muli programatori furnizeaz propriile modaliti de modificare a afirii foilor de stil. Exist cteva exemple clasice care rezolv aceast problem a comutrii. Un astfel de exemplu este reprezentat de Tehnica Byrne/Lemon care const n furnizarea de foi de stil preferate, persistente i alternative mpreun cu o form care comut aceste foi de stil. Vizitatorii acestor site-uri au posibilitatea de a combina scripturile i de a face paginile mai flexibile n continuare vom prezenta o serie de tehnici utilizate pentru a nlocui un text cu o imagine. O prim astfel de tehnic este Tehnica Fahrner Image Replacement (FIR), creat de C.Z. Robertson. Aceast tehnic implic specificarea unei imagini de fundal pentru elementul container, i implementarea unui element span care s conin textul. Elementul span seteaz proprietile de afiare la none, pentru a afia textul. #contents { color: white; background: transparent url("imagine.gif") no-repeat top center; } #contents span { display: none; } Exemplul urmtor utilizeaz tehnica FIR pentru a nlocui textul Imagine cu imaginea. <h1 id="poza"><span>Imagine</span></h1> O alt tehnic numit Leahy/Langridge a fost creat independent de Seamus P.H.Leahy i Stuart Langridge i const n setarea padding-ului pentru header la nlimea imaginii, n ascunderea excesului (overflow) pentru a opri scurgerea textului n exterior i n adugarea unei imagini background pentru textul de nlocuit. Avantajul acestei metode const n faptul c nu utilizeaz un span redundant. #contents { padding: 12px 0 0 0; overflow: hidden; background: transparent url("imagine.gif") no-repeat center; height: 0px ;

height :35px; } Exemplul urmtor utilizeaz tehnica Leahy/Langridge pentru a nlocui textul Imagine cu imaginea: <h1 id="contents">Imagine</h1> Pe lng aceste dou metode, mai exist i metoda Pixy, care suprapune textul peste imagine, utiliznd proprietatea z-index; problema acestei soluii este c permite textului s se scurg pe sub imagine. O alt metod care poziioneaz textul n afara ecranului, dar care nu o vom dezvolta aici, este cea a lui Mike Rundle. Dup cum s-a observat n exemplele date n acest capitol, pentru a furniza adresa unei resurse Web se utilizeaz o adres Uniform Resource Locator (URL). n viitor, noul mod de a indentifica resurse Web va fi URN(Uniform Resource Name). Adresele Web de tip URL i URN se numesc colectiv Uniform Resource Identifier (URI). Notaia pentru referirea unei URI este url( ). doc { background-image: url(poza1.jpg); } 1.4 Uniti de msur n CSS Unitile de msur din CSS se mpart n dou categorii mari: uniti absolute i uniti relative. Unitile de msur absolute pot fi pozitive, negative, fracii zecimale sau numere ntregi. Mai exact acestea sunt: milimetri (mm) centimetri (cm) inch (in) puncte (pt) picas (pc)

Atunci cnd se specific mrimi de fonturi, este preferabil ca acestea s se specifice n uniti relative, astfel ca cititorul s poat ajusta mrimea fontului prin intermediul browser-ului propriu. De exemplu, em este definit ca mrimea fontului curent. Alt unitate de msur relativ este ex care reprezint a x-a parte din mrimea unui font. Aceast mrime variaz de la font la font i reprezint aproximativ jumtate din valoarea lui em. Mrimile relative se pot exprima i n procente utiliznd un semn opional (+ sau -), urmat de valoarea respectiv (numr) i de un semn %. doc

{ font-size: 140%; } Se recomand specificarea unei mrimi de font de 100% n ca setare generic pentru elementele documentului. Aceast valoare va iniializa mrimea fontului la valoarea implicit a utilizatorilor. Specificarea unui font-size generice de 80%, semnific faptul c fontul va fi 4/5 din mrimea preferat a utilizatorului.

Cap2. Elemente CSS

n general, elementele se pot afia utiliznd proprietatea display, ntr-una din modalitile urmtoare: block se prezint sub forma unei regiuni de text dreptunghiulare, izolat de coninutul anterior, fiind separat de acesta prin spaii, care ncepe cu o linie nou i care are margini. Un block poate conine i alte elemente block mai mici, i elemente inline. Aceast valoare nu este motenit. Exemple clasice de blocuri sunt: paragrafe, titluri, seciuni, etc. inline se prezint sub forma unui coninut care nu ntrerupe curgerea unui text dintr-un element block. Acest tip poate avea proprieti care nu afecteaz curgerea documentului (care se refer la

culoare i font) i nu poate seta indentri i alinieri. Aceast valoare nu este motenit. Exemple clasice de elemente inline sunt: textele subliniate, link-urile, textile scrise cu alt font, stc. none semnific faptul c procesorul CSS va ignora elementul astfel definit, elementul fiind practic invizibil. Acest element este utilizat pentru a marca buci mari de text, care vor fi procesate sau mai exact, nu vor fi procesate-- mai rapid. Aceast valoare este motenit.

Fiecare element block este considerat a fi mrginit de un cadru, unde coninutul elementului este nconjurat de margine, frontier i padding. n acest model, marginea i padding-ul sunt transparente, dar frontiera poate avea stil i culoare. Reprezentarea este dat de figura de mai jos.

Marea majoritate a browserelor adaug padding-ul i frontierele la mrimea general a elementului; de aceea, o fereastr cu limea de 100 de pixeli, i un padding de 10 pixeli va avea o lime total de 140 de pixeli calculat astfel: 10 padding stng + 10 padding drept + 100 limea coninutului. Un document XML poate fi interpretat ca o ierarhie de ferestre, cu fereastra browser-ului la baza ierarhiei. Aceast interpretare structural a unui document XML va fi explicat pe larg n paragraful urmtor. Exemplul urmtor definete un stil cu o frontier roie aplicat n partea superioar, un padding de 3 pixeli aplicat pe fiecare parte, margini superioare i inferioare de 40 de pixeli, i marginea stng i dreapt de 10 de pixeli. #image { border-bottom: red 2px; padding: 3px; margin: 40px 10px 40px 10px; } 2.1 Proprietile elementelor block Proprietile marginilor unui element block Fiecare fereastr sau element block are i patru margini, care au o serie de proprieti care se specific utiliznd proprietatea margin. Valorarea acestei proprieti este o list de valori separate cu

spaii care conine valorile celor patru margini exprimate n valori absolute sau relative. n cazul n care este specificat numai o valoare, acea valoare se aplic la toate cele patru laturi. Dac sunt specificate dou valori, prima va specifica dimensiunile frontierelor inferioare i superioare i cea de a doua va specifica dimensiunile frontierelor din stnga i dreapta. Atunci cnd sunt specificate trei valori, prima valoare va specifica marginea superioar, a doua va specifica marginile din stnga i din dreapta i a treia va specifica marginea inferioar. n cazul n care sunt specificate toate cele patru valori, acestea vor corespunde marginilor superioar, din dreapta, inferioar i respectiv din stnga. Pentru a preciza exact limea unei anumite pri a frontierei se poate rafina specificarea utiliznd proprietile: margin-top specific dimensiunile marginii superioare i poate avea ca valori dimensiuni absolute sau relative sau valorea implicit auto. margin-right specific dimensiunile marginii din dreapta i poate avea ca valori dimensiuni absolute sau relative sau valorea implicit auto. margin-bottom specific dimensiunile marginii inferioare i poate avea ca valori dimensiuni absolute sau relative sau valorea implicit auto. margin-left specific dimensiunile marginii din stnga i poate avea ca valori dimensiuni absolute sau relative sau valorea implicit auto.

Exemplul urmtor seteaz marginile din stnga i dreapta pentru elementele par la 12% din limea documentului, marginea superioar este 20 de pixeli i marginea inferioar este lsat la valoarea implicit a browser-ului. p { margin: 20px 12% auto 12%; } n continuare mai prezentm un exemplu care implementeaz aceast proprietate. Vom considera foaia de stil: stil.css h1 { display:block; font-size:large; margin: 5px 2px } h2 { display:block; font-size:x-large; margin: 12px 25px 20px }

Documentul XML care o invoc este: <?xml version="1.0" encoding="utf-8" ?> <?xml-stylesheet type="text/css" href="s1.css"?> <doc> <p>Text1 <h1>Text2</h1> <h2>Text3</h2> </p> </doc> i are output-ul:

Proprietile frontierelor unui element block Fiecare fereastr sau element block are patru frontiere, care sunt definite de lime, stil i culoare. Mai exact, proprietatea border este utilizat pentru a specifica toate proprietile frontierelor, aceasta putnd avea valorile: border-width specific limea celor patru frontiere i poate avea ca valori dimensiuni absolute sau relative sau valorile predefinite: thin, medium i thick. border-style specific stilurile celor patru frontiere i poate avea ca valori urmtoarele valori predefinite: dashed, dotted, double, groove, hidden, inset, none, outset, ridge i solid.

Exemplul urmtor este o aplicaie a proprietii border-color. Vom considera foaia de stil urmtoare: stil.css * { border-width:thick } h1 { border-style: dotted }

h2 { border-style: double } h3 { border-style: dashed } h4 { border-style: solid } Urmtorul document HTML invoc aceast foaie de stil <?xml version="1.0" encoding="utf-8" ?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <p>Text1 <h1>Text2</h1> <h2>Text3</h2> <h3>Text4</h3> </p> </doc> i are output-ul:

border-color specific culorile frontierelor i poate avea ca valori culori valide recunoscute de browsere.

Exemplul urmtor este o aplicaie a proprietii border-color. Vom considera foaia de stil urmtoare: stil.css * { border-width:thin }

h1 { border-color:red; border-style: groove } h2 { border-color:blue; border-style: inset } h3 { border-color:lightblue; border-style: outset } Urmtorul document HTML invoc aceast foaie de stil <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <p>Text1_1 <h1>Text1_2</h1> <h2>Text1_3</h2> <h3>Text1_4</h3> </p> </doc> i are output-ul:

Valorarea proprietii border este o list de valori separate cu spaii care conine valorile border-width, border-style i border-color n orice ordine. Pentru a preciza exact limea unei anumite pri a frontierei se poate rafina specificarea utiliznd proprietile: border-top specific proprietile frontierei superioare a ferestrei i poate avea valorile: border-top-width, border-top-style i border-top-color. border-right specific proprietile frontierei din dreapta a ferestrei i poate avea valorile: border-right-width, border-right-style i border-right-color. border-bottom specific proprietile frontierei inferioare a ferestrei i poate avea valorile: border-bottom-width, border-bottom-style i border-bottom-color.

border-left specific proprietile frontierei stngi a ferestrei i poate avea valorile: left-width, border-left-style i border-left-color.

border-

Prezentm n continuare un exemplu care implementeaz aceste valori. Vom considera foaia de stil: stil.css h1 { border: thick double red } h2 { border-left: medium single blue; border-bottom: thick double aqua; border-right: thin green; border-top: medium groove teal } Documentul HTML urmtor invoc aceast foaie de stil, <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <p>Text1 <h1>Text2</h1> <h2>Text3</h2> </p> </doc> i are output-ul:

Alt exemplu care implementeaz aceste proprieti este i urmtorul. S considerm urmtoarea foaie de stil: stil.css *{display:block} h1 { font-size:large; border-style:single; border-top-width:thin; border-left-width:thin; border-right-width:thick; border-bottom-width:medium; }

h2 { font-size:x-large; border-style:solid; border-top-color:yellow; border-left-color:blue; border-right-color:lightblue; border-bottom-color:black; } h3 { font-size:xx-large; border-width: medium; border-top-style:dotted; border-left-style:double; border-right-style:groove; border-bottom-style:offset; } i documentul HTML care o invoc: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <p>AAA1 <h1>BBB2</h1> <h2>CCC3</h2> <h3>DDD4</h3> </p> </doc> n acest context, vom obine output-ul:

Exemplul urmtor prezint o posibil implementare a proprietii border. S considerm urmtoarea foaie de stil:

stil.css body { color:black; background-color: white } p { border: medium solid red } div { border: thick dotted green } p.1 { border-color:navy } b { border: thin double blue } span.2 { border-style: groove } i urmtorul document XML care o invoc: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <p>Text 1</p> <div>Text 2</div> <p class = "1"> Text 3 <b>Text 4</b> Text 5 <span class = "2">Text 6</span> </p> </doc> Acest document are output-ul:

Exemplul urmtor definete individual proprietile pentru o frontier i o culoarea pentru elementul block: block { border-style: dashed; border-top-color: red; border-bottom-color: blue; border-top-width: medium; border-bottom-width: medium; } Proprietile padding-ului Fiecare fereastr sau element block are ntre margine i frontier un spaiu numit padding. Valoarea acestei proprieti este reprezentat de o list care poate conine ntre una i patru msuri de lungime. Semnificaia i ordinea acestora este aceeai cu cea din cazul marginilor. Pentru a preciza exact limea unei anumite pri a padding-ului se poate rafina specificarea utiliznd proprietile: padding-top specific dimensiunile padding-ului superior i poate avea valori dimensiuni absolute sau relative sau valorea implicit auto. padding-right specific dimensiunile padding-ului din dreapta i poate avea valori dimensiuni absolute sau relative sau valorea implicit auto. padding-bottom specific padding-ului inferior i poate avea valori dimensiuni absolute sau relative sau valorea implicit auto. padding-left specific dimensiunile padding-ului din stnga i poate avea valori dimensiuni absolute sau relative sau valorea implicit auto.

Exemplul urmtor seteaz padding-ul din stnga i dreapta pentru paragrafe la 12% din limea celui mai apropiat element, padding-ul superior la 20 de pixeli i cel inferior este lsat la valoarea implicit a browser-ului. p

{ padding: 20px 12% auto 12%; } Alt exemplu care implementeaz proprietile de mai sus este i urmtorul. S considerm foaia de stil urmtoare: stil.css *{display:block} h1, h2, h3 { border-style:dashed; padding-top:2px; padding-left:15px; padding-bottom:25px; padding-right:32px; } Documentul XML care o invoc va fi: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <p>XXX1 <h1>XXX2</h1> <h2>XXX3</h2> <h3>XXX4</h3> </p> </doc> i va avea output-ul:

2.2 Atribute CSS Pentru a rafina selecia unui selector, se pot utiliza i selectoare cu atribute. Un astfel de selector este reprezentat de un nume de element urmat imediat de un atribut de rafinare ntre paranteze ptrate. Aceste selectoare, au forma general:

selector [atribut 1=val1][atribut n=val n] { proprietate: valoare; } i selecteaz elemente de forma: <selector atribut 1=val1atribut n=val n> Pentru a selecta toate elementele care au un anumit atribut, numele selectorului se omite. Selecia se poate rafina i mai mult n cazul n care se specific un atribut cu o anumit valoare. De exemplu, selectorul: student[evaluare] va selecta i elementul student evaluare=bun i elementul student evaluare=slab, i nu va selecta elementul student. n cazul n care valoarea atributului este o list de iruri separat prin spaii, se poate relaiona oricare dintre ei folosind operatorul ~= n loc de =. De exemplu, selectorul: student[evaluare~=bun] va selecta elementul student evaluare=bun slab i nu va selecta elementul student evaluare=slab f.slab. Pentru exemplificare, s considerm documentul XML: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="s1.css"?> <doc> <cap nr = "1">HTML</cap> <cap nr = "2">XML</cap> <cap nr = "3">CSS</cap> <cap titlu = "SGML">SGML</cap> <cap titlu = "DSSSL">DSSSL</cap> <cap name = "XSLT">XSLT</cap> </doc> i foaia de stil CSS: cap[titlu] { display:block; color:blue; } cap[nr] { display:block;

color:red; } cap[titlu="SGML"] { display:block; color:blue; } cap[titlu='DSSSL'] { display:block; color:green; } cap[number="1"] { display:block; color:red; } cap[number='2'] { display:block; color:purple; } cap[titlu~="XML"] { display:block; color:blue; } cap[nr~="31"] { display:block; color:red; } care va genera output-ul:

Un atribut util n definirea mai multor stiluri pentru acelai element este class. n foaia de stil numele clasei este separat de etichet printr-un punct, iar n documentul HTML numele clasei este specificat pentru a determina care clas a etichetei va fi utilizat. Exemplul urmtor definete trei clase de stiluri pentru elementele div i p: stil.css

doc { background-color: white; color: black } div { color: white; background-color:gray } div.a1 { color: aqua; background-color: black; font-size:large } div.a3 { color: maroon; background-color: yellow } p.a1 { color: blue } p.a2 { color: green; font-family:arial } p.a3 { font-style:italic } Pentru a aplica aceast stil, documentul XML va fi: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <div> d0 </div> <div class="a1">d1</div>

<div class="a2">d2</div> <div class="a3">d3</div> <p> p0 </p> <p class="a1">p1</p> <p class="a2">p2</p> <p class="a3">p3</p> </doc> i va avea output-ul:

Ca i n cazul selectoarelor cu atribute, i n cazul claselor pentru a utiliza o clas cu mai multe elemente se omite numele elementului n definiia din foaia de stil. De exemplu dac vom considera foaia de stil urmtoare: stil.css doc { background-color: white; color: black } .a1 { color: red; font-family:arial } .a2 { background-color: aqua; color:black } .a3 { color:blue; font-style:italic

} div.a3 { color: lightblue; background-color: black } p.a1 { color: green; font-size:14pt } i documentul HTML urmtor: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="s1.css"?> <doc> <div> d0 </div> <div class = "a1"> d1 </div> <div class = "a2"> d2 </div> <div class = "a3"> d3 </div> <p class="a1"> p0 </p> <p class = "a1"> p1</p> <p class = "a2"> p2 </p> <p class = "a3"> p3 </p> </doc> vom obine output-ul:

Exist posibilitatea de a asocia mai multe clase cu acelai element, separnd numele acestora prin spaii: <p class="stil1 stil2">............</p>

2.3 Pseudoclase CSS O pseudoclas CSS furnizeaz un mijloc de a defini proprieti pentru elemente care nu sunt disponibile prin elementele documentului XML. De exemplu, pentru a schimba culoarea unui link, atunci cnd se mic mouse-ul deasupra sa, exist o pseudoclas hoover care poate fi asociat cu clasa etichetei. Exemplul urmtor va stabili culoarea link-ului cu valoarea rou, atunci cnd mouse-ul este micat deasupra sa: a:hover { color: red; } Principalele pseudoclase CSS sunt: active elementul active este n document after poziioneaz coninutul dup un element before poziioneaz coninutul naintea unui element focus specific faptul c elementul primete focus-ul first-child primul copil al unui element first-letter prima liter a unui paragraf first-line prima linie a unui paragraf hover cursorul este deasupra elementului lang definete limba link definete legturile nevizitate nc visited definete legturile care au fost vizitate

Exemplul urmtor utilizeaz pseudoclasele first-leter i first-child pentru a defini o mrime a fontului pentru un nou paragraf: p.waffle:first-letter { font-size:small;

} p.waffle:first-child { font-size:xx-small; } Atunci cnd se specific stiluri pentru pseudoclasele elementului anchor, ordinea este important. Elememtele first-child pot fi selectate cu selectorul pseudo-class: first:child. S considerm elementul XML: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="s1.css"?> <doc> <elem1> elem1 <elem2>elem2 <elem2>elem2</elem2> </elem2> </elem1> <elem2> <elem3>elem3</elem3> </elem2> <elem4>elem4</elem4> <elem5> <elem6> <elem7>elem7</elem7> </elem6> </elem5> <elem5> <elem7>elem7</elem7> </elem5> </doc> i foaia de stil CSS: elem1 { color:blue } elem2:first-child { color:red } elem6:first-child { color:green }

care va genera output-ul:

Alt exemplu de utilizare a selectorului pseudo-class: first:child, poate fi i urmtorul. S considerm documentul XML: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="s1.css"?> <doc> <a1>a1</a1> <a1>a2</a1> <a1>a3</a1> <a2>a4</a2> <a1>a5</a1> <a2>a6</a2> <a3>a7 <a2>a8</a2> <a2>a9</a2> </a3> <a3>a10</a3> <a1>a11</a1> </doc> i foaia de stil CSS: a1 { color:blue } a1 + a1 { color:red } a2 + a1 { color:green } a1 + a2 { color:maroon } i utiliznd foaia de stil CSS *:first-child {

color:red } care va genera output-ul:

Pseudo clasele link and visited marcheaz legturile nevizitate i respective cele vizitate. S considerm documentul XML: <?xml version="1.0" encoding="utf-8" ?> <?xml-stylesheet type="text/css" href="s1.css" ?> <doc> <html:p xmlns:html = "http://math.uaic.ro"> <html:a xmlns:html = "http://math.uaic.ro" href = "http://unknown"> vizitat</html:a> </html:p> <html:p xmlns:html = "http://math.uaic.ro"> <html:a xmlns:html = "http://math.uaic.ro" href = "www.math.uaic.ro/~razvan ">homepage</html:a> </html:p> </doc> i foaia de stil CSS: a:link { color:red } a:visited { color:green } care va genera output-ul:

n cazul n care se definesc mai multe stiluri pentru aceleai elemente, acest element va avea un stil rezultant care va fi o combinaie a stilurilor componente. Atunci cnd exist conflicte ntre aceste stiluri, valoarea ultimului stil suprascrie definiiile anterioare ale acestuia --raionament conform cu conceptul de cascad. n lista de stiluri, stilul cel mai puin semnificativ este primul, iar cel mai semnificativ este ultimul. n cazul elementului anchor se pot defini urmtoarele stiluri: link, visited, hover i respectiv active. Dac se definete un stil de baz pentru elementul anchor, acesta trebuie introdus

naintea pseudoclaselor menionate anterior. n continuare este prezentat un exemplu de pseudoclase corect ordonate: a:link { text-decoration: overline; color: red; background-color: blue; } a:visited { text-decoration: line-through; color: yellow; background: transparent; } a:hover { text-decoration: none; color: black; background-color:teal; } a:active { text-decoration: underline; color: blue; background: transparent; }

2.4 Selectori class i ID Toate artibutele id din documentele XML trebuie s fie unice(relativ la acelai element). Astfel, se pot preciza stiluri pentru un id, specificnd un # imediat nainte de valoarea id-ului. Acest lucru permite specificarea unui stil pentru o singur instan a unui element al unui arbore document, fapt foarte util pentru stabilirea aspectului documentului. Exemplul urmtor definete un stil pentru paragraful cu id-ul "prim". p#prim { color: red; } O posibil implementare a acestui stil ntr-un document XML este: <p id="prim"> ...................</p>

Selectorii CSS pot utiliza informaii despre poziia elementului n ierarhia documentului i despre prinii si pentru a relaiona elemente. Aceste informaii sunt utilizate n cazul n care un element trebuie tratat diferit n funcie de locul care l ocup n document. Pentru a trata prima liter a unui paragraf diferit de restul literelor, mai exact pentru a o scrie cu majuscule, se adaug un sufix special elementului selector: p:first-letter { font-variant: uppercase; } n finalul acestui paragraf, trebuie menionat faptul c se pot crea reguli pentru toate elementele care au aceeai valoare a atributului id, utiliznd formularea: #prim { color: blue; } Aceast regul se refer la toate elementele documentului XML care au valoarea atributului id prim. Selectorul class permite realionarea unei reguli cu o anumit instaniere a unui element n locul relaionrii clasice care presupune relaionarea cu toate instanierile elementului n documentl XML. Pentru exemplificarea acestei idei, vom rmne tot n cadrul ideii anterioare relativ la tipurile paragrafelor unui document XML. Pentru a putea distineg ntre diferite tipuri de paragrafe se utilizeaz n documentul XML atributul class pentru elementul paragraf, care aici l vom nota cu p, pentru a fi consecveni cu notaia HTML. Astfel, vom scrie : <p class="prim"> ...................</p> n foaia de stil CSS, aceast regul va putea fi exprimat astfel: p.class= prim { color: red; } n felul acesta, aceast regul se va aplica numai paragrafului care are clasa prim. n finalul acestui paragraf, trebuie menionat faptul c se pot crea clase care nu sunt relative la un anumit element anume ci care se refer la toate eleemntele care au respective clas specificat, utiliznd formularea: .class= prim { color: red; }

Aceast regul se refer la toate elementele documentului XML care au clasa prim.

Cap3. Modelul de ferestre CSS

Proprietile paginilor CSS specific proprietile padding-ului adic ale spaiului inserat ntre frontier i coninutul propriu-zis al elementului. Pentru a seta dimensiunile padding-ului se pot utiliza urmtoarele proprieti: padding definete cele patru proprieti ale padding-ului. Valorile se specific n sensul acelor ceasului astfel: sus, dreapta, jos i stnga, separate prin spaii. Valorile posibile ale acestei proprieti sunt: padding-top, padding-right, padding-bottom, padding-left. padding-bottom specific dimensiunea padding-ului inferior. Valoarea poate fi specificat ca o lungime valid sau poate fi dat n procente. padding-left specific dimensiunea padding-ului stng. Valoarea poate fi specificat ca o lungime valid sau poate fi dat n procente. padding-right specific dimensiunea padding-ului drept. Valoarea poate fi specificat ca o lungime valid sau poate fi dat n procente. padding-top specific dimensiunea padding-ului superior. Valoarea poate fi specificat ca o lungime valid sau poate fi dat n procente. S considerm exemplul urmtor: p { padding: 40px 12% auto 12%;

} Acest exemplu stabilete padding-ul superior la 40 de pixeli, padding-ul drept i stng la 12% din limea celui mai apropiat element i padding-ul inferior este setat de valoarea implicit a browserului. n 1999, nivelul 2 al CSS a introdus posibilitatea de a controla layout-ul paginilor utiliznd tehnici CSS. Pn n acel moment acest scop se realiza utiliznd tabele. Bineneles c table rmne un element valid n HTML, dar n prezent ar trebui utilizat numai cu tabele n sens clasic. Exist trei tipuri mari de metode CSS care pot fi utilizate pentru a controla layout-ul unui document: normal, absolut, i float. Layout-ul implicit al documentelor HTML este normal, n care elementele block level sunt aezate unul sub altul, i elementele inline sunt aezate de la stnga la dreapta. Layout-ul absolut furnizeaz mai mult control asupra aspectului, dar poate conduce la suprapunerea elementelor n dispozitive de afiare mici. Layout-urile float se implementeaz mai uor, dar se bazeaz pe curgerea documentului pentru a obine rezultatul dorit. 3.1 Layout-ul absolut Atunci cnd un element este poziionat absolut, acesta este exclus din curgerea normal a documentului, i nu are nici un efect asupra altor elemente ale acesteia. Un astfel de element este poziionat n containerul su utiliznd proprietile: left, right, top, i bottom. Fereastra browserului poate fi interpretat ca un block container care conine toate celelalte elemente block ale documentului. Fereastra urmtoare este poziionat astfel: la 120 de pixeli de la marginea stng a elementului container, 10 de pixeli mai jos fa de marginea superioar a contaienrului i are o lime de 400 de pixeli, care include i padding-ul i frontiera. #abswindow { position: absolute; width: 400px; top: 10px; left: 120px; padding: 4px; border: red 2px solid; } Atunci cnd se utilizeaz tehnica de poziionare absolut, spaiul necesar pentru fereastr este deobicei specificat incluznd o margine a altui element pentru a nu suprapune coninuturile a dou elemente, astfel: #main { margin-top: 10%; } #top

{ position: absolute; top: 10px; left: 7px; height: 20%; padding: 5px; border-right: black 2px solid; border-bottom: black 2px solid; } ntr-un document XML stilul anterior se poate specifica astfel: <div id="main"> <h2>Coninutul principal</h2> . </div> <div id="top"> <h2>Partea superioar a documentului</h2> .. </div> Ordinea poziionrii se poate modifica prin intermediul proprietii z-index, innd seama de faptul c elementele cu un z-index mai mare sunt plasate n faa elementelor cu un z-index mai mic. Acest parametru poate avea i valori negative. Exemplul urmtor definete stilurile pentru dou ferestre una deasupra celeilalte. #deasupra { position: absolute; top: 0; left: 0; width: 400px; height: 450px; color: red; z-index: 2; } #sub { position: absolute; top: 40px; left: 40px; width: 300px; height: 350px; color: white; background-color: light-blue; z-index: 1; }

Atunci cnd un element este poziionat absolut n fereastra browser-ului, acesta are o poziie fix n fereastr, adic atunci cnd pagina este parcurs, elementul rmne static pe pagin i cnd pagina este tiprit elementul fix va apare pe fiecare pagin. Exemplul urmtor definete un astfel de element fix. #elementfix { position: fixed; top: 5px; left: 2px 3.2 Layout-ul float Ferestrele cu proprietatea float sunt translate la stnga sau la dreapta liniei curente. Proprietatea esenial a acestor ferestre i care le deosebete fundamental de ferestrele poziionate absolut const n mobilitatea poziiei lor. n acest sens, coninutul unei ferestre float poate curge la stnga elementului float (plutitor) stng i la dreapta elementului float drept sau poate s nu curg deloc dac se implementeaz proprietatea clear, care va fi discutat mai jos. Proprietatea float a unei ferestre poate avea urmtoarele valori: left face ca fereastra s fie deplasat la stnga i coninutul elementului container s fie deplasat la dreapta. Exemplul urmtor definete un selector ID banner, care este deplasat la dreapta:

#main { margin-left: 20%; padding: 5px; border-left: #ccc 1px solid; } #banner { float: left; width: 17%; padding: 5px; } Documentul XML: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="s1.css"?> <doc> <a1>a1</a1> <a2>a2</a2> <a1>a11</a1> </doc> i foaia de stil CSS:

a2 { float:left; color:red; } va genera output-ul:

right face ca fereastra s fie deplasat la dreapta, i coninutul elementului container s fie deplasat la stnga none face ca fereastra s nu fie deplasat deloc inherit trebuie setat explicit n proprietile elementului container, pentru a activa proprietatea de motenire

Proprieratea clear a ferestrelor float se utilizeaz pentru a determina care laturi ale ferestrei elementului sunt adiacente cu laturile altor elemente float. Aceast proprietate poate avea urmtoarele valori: left coninutul unui element float anterior nu va fi afiat la stnga acestui element right coninutul unui element float anterior nu va fi afiat la dreapta acestui element both coninutul unui element float anterior nu va fi afiat nici la stnga i nici la dreapta acestui element none nu vor fi impuse constrngeri de tip clear acestui element

Exemplul urmtor definete dou ferestre: fereastra 1 i fereastra 2. Limile celor 2 ferestre sunt de 60% i sunt amndou deplasate la dreapta. Deoarece nu este suficient spaiu pentru a le afia alturat, s-a specificat proprietatea clear care determin o afiare una sub alta. #fereastra1 { float: right; width: 60%; } #fereastra2 { float: right; clear: right;

width: 60%; }

Cap.4 Proprietile textului

4.1 Proprieti generale ntr-o foaie de stil CSS, pentru a determina aspectul textului se pot utiliza urmtoarele proprieti fundamentale: text-align specific alinierea pe orizontal a textului i poate avea valorile: left, right, center i justify. n continuare este prezentat un exemplu de implementare a acestei proprieti. Pentru exemplificare, vom considera foaia de stil:

stil.css .1 { display:block; text-align: left; } .2 { display:block; text-align: right; } .3 { display:block; text-align: center; } .4 { display:block; text-align: justify; } i urmtorul document XML care o refer: <?xml version="1.0" encoding="utf-8" ?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <div class = "1">Propozitia 1</div> <div class = "2">Propozitia 2</div> <div class = "3">Propozitia 3</div> <div class = "4">Propozitia 4</div> <div class = "5">Propozitia 5</div> </doc> care va genera output-ul:

vertical-align specific alinierea textului pe vertical i poate avea ca valori: procente sau una din valorile predefinite: baseline, sub, super, top, text-top, middle, bottom i textbottom

text-decoration specific aspectul textului i poate avea valorile: blink, line-through, none, overline i underline. n continuare este prezentat un exemplu de implementare a acestei proprieti. Vom considera foaia de stil:

stil.css * { display:block; padding: 3px; } a1 { text-decoration: } a2 { text-decoration: } a3 { text-decoration: } a4 { text-decoration: }

underline

overline

line-through

blink

i urmtorul document XML care o refer <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <a1>underline</a1> <a2>overline</a2> <a3>line-through</a3> <a4>blink</a4> </doc> cu output-ul:

text-indent specific indentarea textului i are ca valori lungimi absolute sau relative.

text-transform specific felul literelor afiate i poate avea valorile: none, capitalize, uppercase i lowercase. Foaia de stil urmtoare exemplific aceast proprietate.

stil.css el1 { display: block; text-transform: } el2 { display: block; text-transform: } el3 { display: block; text-transform: } el4 { display: block; text-transform: }

uppercase;

lowercase ;

capitalize;

capitalize;

Documentul XML urmtor invoc aceast foaie de stil <?xml version="1.0" encoding="utf-8" ?> <?xml-stylesheet type="text/css" href="s1.css"?> <doc> <el1>uppercase</el1> <el2>LOWERCASE</el2> <el3>capitalize</el3> <el4>CAPITALIZE</el4> </doc> i are urmtorul output:

text-shadow specific efectul de umbr a textului. Exemplul urmtor utilizeaz aceast proprietate.

stil.css * {

padding:10px } p.1 { text-shadow: 5px 12px red } div.2 { text-shadow: 3px 3px 5px blue } div.3 { text-shadow: 12px 3px } div.4 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px } Documentul HTML care o invoc este: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <p class = "1">Text 1</p> <div class = "2">Text 2</div> <div class = "3">Text 3</div> </doc> line-spacing specific spaierea caracterelor i poate avea ca valori lungimi absolute sau valoarea predefinit normal. line-height specific nlimea unui element text i poate avea ca valori lungimi absolute sau relative specificate n procente. color specific culoarea elementului i are ca valoare o culoare valid, recunoscut de browser. direction specific formatarea textului la stnga sau la dreapta prin valorile ltr sau rtl word-spacing specific spaiul dintre cuvinte i poate avea ca valoare o lungime absolut sau valoarea predefinit normal. Exemplul urmtor aplic aceast proprietate.

stil.css p.1

{ word-spacing: 2em } p.2 { word-spacing: 4ex } div.1 { word-spacing: 2cm } div.2 { word-spacing: 5 mm } Documenul XML urmtor invoc aceast foaie de stil: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <p class = "1">Text unu</p> <div class = "2">Text doi</div> <p class = "2">Text trei</p> <div class = "2">Text patru</div> </doc> i are output-ul:

letter-spacing specific spaiul dintre litere i poate avea ca valoare o lungime absolut sau valoarea predefinit normal. La documentul HTML anterior dac vom ataa foaia de stil urmtoare:

stil.css p.1 {

letter-spacing: 1em } div.1 { letter-spacing: 2ex } p.2 { letter-spacing: 3cm } div.2 { letter-spacing: 5 mm } vom avea output-ul:

Exemplul urmtor combin proprietile word-spacing i letter-spacing. Vom considera documentul XML: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <a1>text1 text1 text1</a1> <a2>text2 text2 text2</a2> <a3>text3 text3 text3</a3> <a4>text4 text4 text4</a4> </doc> i foaia de stil CSS: * { padding:10px } a1

{ letter-spacing: 1em; word-spacing: 1em; display:block; } a2 { letter-spacing: 2ex; word-spacing: 2ex; display:block; } a3 { letter-spacing: 0.5cm; word-spacing: 0.5cm; display:block; } a4 { letter-spacing: 3 mm; word-spacing: 3 mm; display:block; } care genereaz output-ul:

white-space specific motalitatea de tratare a white-space-ului i poate avea valorile predefinite: normal, pre i nowrap.

Exemplul urmtor seteaz culoarea textului cu valoarea navy, scrie de la dreapta la stnga i seteaz spaierea caracterelor la 4 pixeli: p { color: navy direction: rtl; letter-spacing: 4px; }

4.2 Fonturi Pe lng aceste proprieti, o alt proprietate CSS important a textelor este i setarea fonturilor. Pentru a selecta un anumit font pentru un element, se poate implementa proprietatea font care poate avea ca valoare o list care s specifice valorile proprietilor urmtoare, separate cu spaii. Nu este obligatoriu s fie specificate toate aceste proprieti, cele care lipsesc fiind nlocuite cu valorile lor implicite: font-family specific nume generice de familii de fonturi. Numele fonturilor pot fi nume de familii, familii generice sau ambele. Un nume de familie este numele unui font particular, cum ar fi arial. O familie generic este o clasificare din care fac parte mai multe nume de familii de fonturi. Exemple de familii generice sunt: serif, sans-serif, monospace, cursive. Atunci cnd se specific mai mult de o familie de fonturi, browser-ul l va utiliza primul pe care l recunoate. De aceea lista de fonturi se incheie de regul cu o familie generic.

doc { font-family:arial, helvetica, courier, sans-serif; } n continuare este prezentat un exemplu de implementare a acestei proprieti. Vom foaia de stil: stil.css * { display:block } doc { color:red; background-color: white } div.1 { font-family:Comic Sans MS } div.2 { font-family:arial } div.3 { font-family:serif } considera

div.4 { font-family:monospace } div.5 { font-family:helvetica } div.6 { font-family:sans-serif } i urmtorul document XML care o refer: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <p>Text implicit</p> <div class = "1"> Text 1 <div class = "2"> Text 2 <div class = "3"> Text 3 <div class = "4"> Text 4 <div class = "5"> Text 5 <div class = "6"> Text 6 </div></div></div></div></div></div> </doc> cu output-ul:

font-stretch specific ntinderea fontului n concordan cu valoarea dat. Aceast proprietate poate avea valorile: condensed, expanded, extra-condensed, extraexpanded, narrower, normal, semi-condensed, semi-expanded, ultracondensed, ultra-expanded, wider. Foaia de stil urmtoare prezint implementarea acestei prioprieti.

stil.css div.1 { font-stretch: ultra-condensed } div.2 { font-stretch:extra-condensed } div.3 { font-stretch:condensed } div.4 { font-stretch:semi-condensed } div.5 { font-stretch:normal } div.6 { font-stretch:semi-expanded } div.7 { font-stretch:expanded } div.8 { font-stretch:extra-expanded } div.9 { font-stretch:ultra-expanded } div.10 {

font-stretch:wider } div.11 { font-stretch:narrower } font-size specific mrimea fontului. Aceasta poate fi definit relativ la mrimea elementului printe sau utiliznd urmtoarele mrimi predefinite: xx-small, x-small, small, medium, large, x-large i xx-large. Exist i dou setri care permit mrirea sau micorarea mrimii fontului fa de dimensiunea sa curent: smaller i larger. n continuare este prezentat un exemplu de implementare a acestei proprieti. Vom considera foaia de stil:

stil.css * { display:block } doc { color:black; background-color: white } div.1 { font-size:4ex } div.2 { font-size:4ex } div.3 { font-size:1.2em } div.4 { font-size:1.4em } div.5 { font-size:50%

} div.6 { font-size:60% } div.7 { font-size:70% } i urmtorul document XML care o refer <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <p>Text implicit</p> <div class = "1"> Text 1 <div class = "2"> Text 2 <div class = "3"> Text 3 <div class = "4"> Text 4 <div class = "5"> Text 5 <div class = "6"> Text 6 </div></div></div></div></div></div> </doc> cu output-ul:

La acelai document XML dac vom ataa urmtoarea foaie de stil: stil.css div.1 { font-size:xx-small } div.2 { font-size:x-small } div.3 { font-size:small } div.4 { font-size:medium }

div.5 { font-size:large } div.6 { font-size:x-large } div.7 { font-size:xx-large } vom obine output-ul:

font-size-adjust specific aspectul dimensiunii fontului i poate avea valorile: none i number. font-style specific stilul fontului i poate avea una din valorile: normal, italic, oblique i inherit. n continuare este prezentat un exemplu de implementare a acestei proprieti. Vom considera foaia de stil:

stil.css * { display:block } doc { color:black; background-color: white } div.1 { font-style:normal

} div.2 { font-style:italic } div.3 { font-style:oblique } div.4 { font-style:inherit } i urmtorul document HTML care o refer <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <p>Text implicit</p> <p>Text 1 </p> <div class = "2"> Text 2 <div class = "3"> Text 3 <div class = "4"> Text 4 </div> </div> </div> </doc> cu output-ul:

font-weight specific grosimea fontului i poate avea valorile absolute: normal, bold, light, 100, 200, 300, ..., 900 sau dimensiunile relative: lighter i bolder. n continuare este prezentat un exemplu de implementare a acestei proprieti. Vom considera foaia de stil:

stil.css * {

display:block } doc { color:black; background-color: white } div.1 { font-weight:bold } div.2 { font-weight:100 } div.3 { font-weight:light } div.4 { font-weight:lighter } div.5 { font-weight:200 } div.6 { font-weight:900 } div.7 { font-weight:bolder } i urmtorul document HTML care o refer <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc>

<p>Default</p> <div class = "1"> <div class = "2"> <div class = "3"> <div class = "4"> <div class = "5"> <div class = "6"> <div class = "7"> </div> </div> </div> </div> </div> </div> </doc> cu output-ul:

Text Text Text Text Text Text Text

1 2 3 4 5 6 7 </div>

font-variant specific dac fontul este scris cu litere mici sau nu, prin valorile: small-caps i normal.

Exemplul urmtor stabilete fontul utilizat n elementul doc ca fiind normal, cu mrimea 1, nlimea de 1.4 elemente, utiliznd unul din fonturile specificate. doc { font: normal 1em/1.4em arial, helvetica, sans-serif; } Tot cu proprietatea font, mai pot fi specificate i urmtoarele proprieti: caption, icon, menu, message-box, small-caption, i status-bar. Foaia de stil urmtoare implementeaz aceste proprieti: stil.css * { display:block

} h1.1 { font:caption } h1.2 { font:icon } h1.3 { font:menu } h1.4 { font:message-box } h1.5 { font:small-caption } h1.6 { font:status-bar } iar documentul HTML urmtor o invoc. <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="stil.css"?> <doc> <p>Text1 <h1 class="1">Text2</h1> <h1 class="2">Text3</h1> <h1 class="3">Text4</h1> <h1 class="4">Text5</h1> <h1 class="5">Text6</h1> <h1 class="6">Text7</h1> </p> </doc> care genereaz output-ul:

4.3 Culori Ultima proprietate a textului pe care o mai menionm este culoarea. Culorile se specific astfel: utiliznd un nume de culoare predefinit sau intensitile red, green i blue ale culorii sau specificnd codul hexazecimal sau zecimal al acesteia. O valoare hexazecimal este precedat de un (#) i este format din trei valori din intervalul 00 ->ff care reprezint intensitile culorilor rou, verde i respectiv albastru. Valorile zecimale sunt precedate de cuvntul cheie rgb, i cele trei valori sunt n intervalul 0-> 255. Pentru a defini culoarea unui element se implementeaz proprietile: color specific culoarea unui element i are ca valoare orice culoare valid background specific background-ul elementului.

Pentru a rafina specificarea backgroungd-ului elementului se pot utiliza proprietile: background-color specific culoarea de fundal i poate avea ca valoare orice culoare valid sau valoarea predefinit transparent. n continuare este prezentat un exemplu de implementare a acestei proprieti. S considerm documentul XML:

<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="s1.css"?> <doc> <a1>XML</a1> <a2>CSS</a2> <a3>XSLT</a3> <a4>XLINK</a4> </doc> i foaia de stil CSS: * { border-style: solid } a1 { color:red; background-color:black; }

a2 { color:black; background-color:red; } a3 { color:navy; background-color:green; padding:10px; } a4 {color:navy; background-color:aqua; margin:10px; } cu output-ul:

background-image specific o imagine n fundal i poate avea ca valoare o adres valid sau valoarea predefinit none. background-position specific poziia imaginii de fundal i poate avea ca valoare o mrime relativ specificat n procente sau una din urmtoarele valori predefinite top left, top center, top right, center, left, center center, center right, bottom left, bottom center, bottom right background-attachement specific dac fundalul se va derula sau nu prin valorile scroll i respectiv fixed. background-repeat specific modalitatea de afiare a fundalului prin valorile: repeat, repeat-x, repeat-y i no-repeat. Exemplul urmtor insereaz o imagine n colul din stnga sus al paginii:

doc { background-image: url(poza.gif); background-repeat: no-repeat; background-position: top left; background-color: blue; color: black;

Cap.5 Liste i tabele CSS

5.1 Liste Proprietile listelor sunt utilizate pentru a determina modalitatea de formatare a articolelor listelor i pentru a specifica numerotarea automat dac este utilizat un sistem de numrare. n acest sens, pentru a specifica toate proprietile unei liste se utilizeaz proprietatea list-style, care are ca valori toate proprietile listei separate prin spaii. Pentru a rafina specificarea proprietilor listei, se pot utiliza i proprietile: list-style-image specific imaginea care va fi folosit ca marker al listei i poate avea ca valoare orice adres valid sau valoarea predefinit none list-style-position specific poziia marker-ului listei i poate avea valorile: inside sau outside. list-style-type specific marker-ul listei i poate avea una din valorile: none, disc, circle, square, decimal, decimal-leading, zero, lower-roman, upper-roman, loweralpha, upper-alpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian

Exemplul urmtor seteaz o imagine pentru a fi utilizat ca marker pentru articolele listei. n cazul n care imaginea nu este gsit se va utiliza un marker circle. ul { list-style-image: url("marker.jpg"); list-style-type: circle; list-style-position: outside; } 5.2 Tabele n continuare vom prezenta un exemplu de implementare a unei tabele CSS. Cmpul caption al unei tabele poate fi afiat peste, sub, la dreapta sau la stnga tabelei. S considerm documentul XML: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="s1.css"?> <doc> <tab1> <caption1>caption-top</caption1> <row> <column1>elem11</column1> <column2>elem12</column2> <column3>elem13</column3> </row> <row> <column1>elem21</column1> <column2>elem22</column2> <column3>elem23</column3> </row> </tab1> <free>------------------------</free> <tab2> <caption2>caption- bottom</caption2> <row> <column1>elem11</column1> <column2>elem12</column2> <column3>elem13</column3> </row> <row> <column1>elem21</column1> <column2>elem22</column2> <column3>elem23</column3> </row> </tab2>

<free>------------------------</free> <tab3> <caption3>caption-right</caption3> <row> <column1>elem11</column1> <column2>elem12</column2> <column3>elem13</column3> </row> <row> <column1>elem21</column1> <column2>elem22</column2> <column3>elem23</column3> </row> </tab3> <free>------------------------</free> <tab4> <caption4>caption-left</caption4> <row> <column1>elem11</column1> <column2>elem12</column2> <column3>elem13</column3> </row> <row> <column1>elem21</column1> <column2>elem22</column2> <column3>elem23</column3> </row> </tab4> <free>------------------------</free> </doc> i foaia de stil CSS: doc { display: table } tab1,tab2, tab3, tab4 { display: table } caption1 { display:table-caption; color:red; caption-side:top }

caption2 { display:table-caption; color:red; } caption3 {display:table-caption; color:red; caption-side:right; width:5em } caption4 {display:table-caption; color:red; caption-side:left; width:5em } row { display: table-row } column1 { display: table-cell } column2 { display: table-cell } column3 { display: table-cell } free { display:block } care va produce output-ul: