css

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 gândit un site fără a utiliza foile de stil în cascadă CSS. Iniţial CSS a fost conceput pentru a extinde posibilităţile HTML, dar actualmente CSS este un complement pentru HTML. În realitate CSS au o arie de aplicabilitate mult mai largă, incluzând XML, XHTML, etc. dar aceste direcţii nu fac obiectul prezentării de faţă. De fapt eficacitatea reală a foilor de stil se poate observa cel mai bine atunci când 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 simţit nevoia de a crea o variantă simplificată a DSSSL-ului, care să poată fi utilizată uşor cu HTML. Astfel au fost propuse mai multe limbaje de formatare a stilurilor. Dintre acestea, cel care s-a 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 faţa 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 iniţiat în 1994, într-un articol intitulat “Cascading HTML Style Sheets” publicat de Håkon Wium Lee, care lucra la CERN—locul unde a apărut 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. Iniţial a fost propusă o variantă hibridă de CSS. Ulterior s-au dezvotat o serie de nivele îmbunătăţite, după cum urmează.

Nivelul 1 al CSS sau CSS1 a fost propus în 1996 şi actualizat în 1999 şi conţine proprietăţi fundamentale pentru fonturi, margini, color, etc. utilizate de toate CSS-urile.

Nivelul 2 al CSS sau CSS2 este o variantă adăugită a CSS1 (mai exact a ridicat numărul elementelor cu 70 de elemente noi) care mai include în plus elemente de poziţionare absolută, numerotări automate, page break-uri, etc.

Nivelul 3 al CSS sau CSS3 este în fază de construcţie. Acesta reprezintă încă un pas înainte, incluzând toate elementele cuprinse în CSS2 şi în plus o serie de selectori noi, posibilitatăţi noi de setare a background-ului unei pagini, şi multe altele.

Inventatorul HTML, Tim Berners-Lee, a prevăzut apariţia foilor de stil. Cu toate că HTML are posibilităţi limitate de control al stilului, a fost suficient pentru acea perioadă de pionierat. În timp, HTML şi-a depăşit limetele iniţiale, 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 prezentărilor.

Pentru a face o comparaţie plastică, putem spune că aplicarea unei foi de stil unui document HTML este analoagă cu construcţia unei case utilizând un plan. Documentul HTML poate fi interpretat ca o mulţime de materiale de construcţii, iar foaia de stil poate fi planul construcţiei. Aceasta precizează modalitatea de utilizare a fiecărui material de construcţie. În această imagine, programul care transformă materialele de construcţii într- o construcţie utilizând foi de stil este constructorul.

O foaie de stil poate fi interpretată ca o listă de stiluri care relaţionează proprietăţile stilurilor cu elementele din document. Fiecare corespondenţă de la element la proprietate se numeşte regulă. Cu alte cuvinte, o foaie de stil este o mulţime 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 căruia îi corespunde această regulă. Articolele din interiorul acoladei se numesc proprietăţi ale declaraţiei şi reprezintă o listă de proprietăţi de aplicat elementului specificat de selector. Fiecare declaraţie constă dintr-o listă de corespondenţe proprietate-valoare, în care fiecare proprietate a stilului este relaţionată 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 conţinut ş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 conţinut în document. În XHTML precizarea internă a stilurilor este depreciată.

Prezentăm î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 considerăm 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-8859-1"><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 obţine output-ul:

Din acest exemplu se observă că utilizarea elementelor h1, h2, .. şi p într-un document XML nu are nici o semnificaţie-- spre deosebire de HTML. Pentru a păstra semnificaţia elementelor din HTML şi în acest caz, va trebui să specificăm 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>


Următorul exemplu declară un selector elem cu proprietăţile 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 apariţiile elementului în foaia de stil.Să considerăm 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.cssa1 {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 acelaşi document XML vom considera foaia de stil:

* {color:blue}


Se observă că asteriscul în foaia de stil va fi asociat cu toate elementele din documentul XML asociat.

Dacă se doreşte aplicarea unui stil la un grup de selectori, aceştia se vor separa prin virgulă în secţiunea 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.cssa1, a3, a5 {font-size:large;color:red;}

a2, a4 {font-size:x-large;color:blue;}


Dacă sunt specificaţi mai mulţi selectori separaţi prin spaţii şi nu prin virgule, atunci se utilizează mecanismul selectării contextuale. Prin acest mecanism este selectat ultimul element din listă dacă poziţia 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.cssdoc 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>


Faptul că un element este copilul altui element, se poate specifica utilizând simbolul (>). Operatorul “>” se poate folosi numai între elemente părinte-copil, numai pentru a relaţiona elemente adiacente.

Să considerăm următoarea 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 părintelui său, va avea un conflict de valoare pentru proprietatea color. CSS defineşte un algoritm ce rezolvă conflicte ca acesta, principiul de bază constând î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 stânga. Trebuie menţionat 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ă considerăm 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>


stil.cssdoc > elem2 > elem3 {font-size:large;color:red;}elem1 > elem2 {font-size:x-large;color:blue;}elem5 > elem7 {font-size:xx-large;color:green;}


Un tip particular de selector este un sibling selector, care selectează un element ce urmează un altul pe acelaşi nivel al ierarhiei. De exemplu p+h1 {text-color: red }

selectează toate elementele p care urmează unui element h1 şi opreşte colorarea cu roşu. 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ă considerăm documentul XML următor: <?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>


stil.cssa1 {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 instrucţiuni de procesare de forma:

<?xml-stylesheet type="text/css" href="stil.css"?>

care este aşezată î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 conţin 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 defineşte un stil pentru elementul doc */doc{font: normal courier;color:blue;background-color:white;}

/* Se defineşte un stil pentru paragrafe */par { font-size: 16pt;color:black;background:red;}

/* Se defineşte un stil pentru primul paragraf al paginii */par.top { font-family: courier, serif;

color: red; }

/* Se defineşte un stil pentru link-uri */a { text-decoration:none; color:green;background:transparent;}

/* Se defineşte un stil pentru cazul cînd cursorul este deasupra legăturii */a:hover { color:light-blue; background:black;}

/* Se defineşte un stil pentru link-uri */* { color: black;background:aqua; font-size: 10pt; }

Această foaie de stil are şase reguli. Prima regulă se referă la conţinutul elementului doc, care specifică o serie de proprietăţi 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 afişare a eleemntelor par ale documentului în general şi respectiv a elementelor par din partea superioară a documentului. Următoarele două reguli specifică modalitatăţi de afişare a link-urilor, 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 când se lucrează într-o echipă şi trebuie ca toţi membrii să ştie ce face un anumit stil.

/* Stabileşte culoarea roşie pentru elementul par */par { color: red; background: transparent;}

Există şi posibilitatea de a comenta mai multe linii, astfel:

/* comentarii-- ignorate de procesora

{ color:green;}par { color:black;}*/

În continuare, să scoatem din context următoarele 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 modularităţii 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 propietăţi din cele trei reguli se referă la acelaşi lucru cu parametri diferiţi, 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 următorul. Să considerăm următoarea foaie de stil:

stil.cssbody {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 următorul 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ă.

Moştenirea stilurilor

Exemplul discutat mai sus surprinde şi un alt fenomen care are loc atunci când este definit un stil pentru un element şi proprietăţile specificate suprascriu proprietăţile existente ale documentului. Acest mecanism se numeşte moştenirea stilurilor. În cadrul acestui proces, proprietăţile originale ale elementului nu sunt suprascrise ci sunt moştenite în noul stil.

Cea mai importantă problemă a moştenirii este ordinea în care sunt moştenite stilurile. Moştenirea foilor de stil poate fi gândită ca un arbore de moşteniri. Dacă unul din stiluri lipseşte, este moştenit stilul imediat următor, astfel: stilurile definite în foaia de stil CSS sunt moştenite de browser. Dacă toate proprietăţile sunt suprascrise, atunci nu are loc nici o moştenire.

Dacă un element nu are o anumită proprietate setată, atunci acesta va moşteneşteni proprietatea respectivă de la părintele său. Mai exact, să considerăm 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>


doc {color:red}e2 {color:blue}


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ă, mulţi programatori furnizează propriile modalităţi de modificare a afişării foilor de stil. Există câteva exemple clasice care rezolvă această problemă a comutării. 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ă conţină textul. Elementul span setează proprietăţile de afişare la none, pentru a afişa textul.

#contents{color: white;background: transparent url("imagine.gif") no-repeat top center;}

#contents span{display: none;}

Exemplul următor 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 înălţimea imaginii, în ascunderea excesului (overflow) pentru a opri scurgerea textului în exterior şi în adăugarea 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 următor utilizează tehnica Leahy/Langridge pentru a înlocui textul “Imagine” cu imaginea:

<h1 id="contents">Imagine</h1>

Pe lângă aceste două metode, mai există şi metoda Pixy, care suprapune textul peste imagine, utilizând proprietatea z-index; problema acestei soluţii este că permite textului să se “scurgă” pe sub imagine. O altă metodă care poziţionează 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). Notaţia pentru referirea unei URI este url( ).

doc{ background-image: url(poza1.jpg); }

1.4 Unităţi de măsură în CSS

Unităţile de măsură din CSS se împart în două categorii mari: unităţi absolute şi unităţi relative. Unităţile de măsură absolute pot fi pozitive, negative, fracţii zecimale sau numere întregi. Mai exact acestea sunt:

milimetri (mm)

centimetri (cm)

inch (in)

puncte (pt)

picas (pc)

Atunci când se specifică mărimi de fonturi, este preferabil ca acestea să se specifice în unităţi relative, astfel ca cititorul să poată ajusta mărimea fontului prin intermediul browser-ului propriu. De exemplu, em este definit ca mărimea fontului curent. Altă unitate de măsură relativă este ex care reprezintă a x-a parte din mărimea unui font. Această mărime variază de la font la font şi reprezintă aproximativ jumătate din valoarea lui em.

Mărimile relative se pot exprima şi în procente utilizând un semn opţional (+ sau -), urmat de valoarea respectivă (număr) şi de un semn %.

doc

{ font-size: 140%;}

Se recomandă specificarea unei mărimi de font de 100% în ca setare generică pentru elementele documentului. Această valoare va iniţializa mărimea fontului la valoarea implicită a utilizatorilor. Specificarea unui font-size generice de 80%, semnifică faptul că fontul va fi 4/5 din mărimea preferată a utilizatorului.

Cap2. Elemente CSS

În general, elementele se pot afişa utilizând proprietatea display, într-una din modalităţile următoare:

block se prezintă sub forma unei regiuni de text dreptunghiulare, izolată de conţinutul anterior, fiind separată de acesta prin spaţii, care începe cu o linie nouă şi care are margini. Un block poate conţine şi alte elemente block mai mici, şi elemente inline. Această valoare nu este moştenită. Exemple clasice de blocuri sunt: paragrafe, titluri, secţiuni, etc.

inline se prezintă sub forma unui conţinut care nu întrerupe curgerea unui text dintr-un element block. Acest tip poate avea proprietăţi care nu afectează curgerea documentului (care se referă la

culoare şi font) şi nu poate seta indentări şi alinieri. Această valoare nu este moştenită. 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 bucăţi mari de text, care vor fi procesate – sau mai exact, nu vor fi procesate-- mai rapid. Această valoare este moştenită.

Fiecare element block este considerat a fi mărginit de un cadru, unde conţinutul 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 mărimea generală a elementului; de aceea, o fereastră cu lăţimea de 100 de pixeli, şi un padding de 10 pixeli va avea o lăţime totală de 140 de pixeli calculată astfel: 10 padding stâng + 10 padding drept + 100 lăţimea conţinutului.

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 următor. Exemplul următor defineşte un stil cu o frontieră roşie aplicată în partea superioară, un padding de 3 pixeli aplicat pe fiecare parte, margini superioare şi inferioare de 40 de pixeli, şi marginea stângă şi dreaptă de 10 de pixeli.

#image{border-bottom: red 2px;padding: 3px;margin: 40px 10px 40px 10px; }

2.1 Proprietăţile elementelor block

Proprietăţile marginilor unui element block

Fiecare fereastră sau element block are şi patru margini, care au o serie de proprietăţi care se specifică utilizând proprietatea margin. Valorarea acestei proprietăţi este o listă de valori separate cu

spaţii care conţine 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 stânga şi dreapta. Atunci când sunt specificate trei valori, prima valoare va specifica marginea superioară, a doua va specifica marginile din stânga ş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 stânga.

Pentru a preciza exact lăţimea unei anumite părţi a frontierei se poate rafina specificarea utilizând proprietăţile:

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 stânga şi poate avea ca valori dimensiuni absolute sau relative sau valorea implicită auto.

Exemplul următor setează marginile din stânga şi dreapta pentru elementele par la 12% din lăţimea documentului, marginea superioară este 20 de pixeli şi marginea inferioară este lăsată la valoarea implicită a browser-ului.

p{ margin: 20px 12% auto 12%;}

În continuare mai prezentăm un exemplu care implementează această proprietate. Vom considera foaia de stil:

stil.cssh1{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:

Proprietăţile frontierelor unui element block

Fiecare fereastră sau element block are patru frontiere, care sunt definite de lăţime, stil şi culoare. Mai exact, proprietatea border este utilizată pentru a specifica toate proprietăţile frontierelor, aceasta putând avea valorile:

border-width specifică lăţimea 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 următoarele valori predefinite: dashed, dotted, double, groove, hidden, inset, none, outset, ridge şi solid.

Exemplul următor este o aplicaţie a proprietăţii border-color. Vom considera foaia de stil următoare:

stil.css* {border-width:thick}

h1 {border-style: dotted}

h2

{border-style: double}

h3 {border-style: dashed}

h4 {border-style: solid}

Următorul 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 următor este o aplicaţie a proprietăţii border-color. Vom considera foaia de stil următoare:

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}

Următorul 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 proprietăţii border este o listă de valori separate cu spaţii care conţine valorile border-width, border-style şi border-color în orice ordine. Pentru a preciza exact lăţimea unei anumite părţi a frontierei se poate rafina specificarea utilizând proprietăţile:

border-top specifică proprietăţile frontierei superioare a ferestrei şi poate avea valorile: border-top-width, border-top-style şi border-top-color.

border-right specifică proprietăţile frontierei din dreapta a ferestrei şi poate avea valorile: border-right-width, border-right-style şi border-right-color.

border-bottom specifică proprietăţile frontierei inferioare a ferestrei şi poate avea valorile: border-bottom-width, border-bottom-style şi border-bottom-color.

border-left specifică proprietăţile frontierei stângi a ferestrei şi poate avea valorile: border-

left-width, border-left-style şi border-left-color.

Prezentăm în continuare un exemplu care implementează aceste valori. Vom considera foaia de stil: stil.cssh1 {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 următor 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 proprietăţi este şi următorul. Să considerăm următoarea 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 obţine output-ul:

Exemplul următor prezintă o posibilă implementare a proprietăţii border. Să considerăm

următoarea 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 următorul 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 următor defineşte individual proprietăţile 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;}

Proprietăţile padding-ului

Fiecare fereastră sau element block are între margine şi frontieră un spaţiu numit padding. Valoarea acestei proprietăţi este reprezentată de o listă care poate conţine între una şi patru măsuri de lungime. Semnificaţia şi ordinea acestora este aceeaşi cu cea din cazul marginilor.

Pentru a preciza exact lăţimea unei anumite părţi a padding-ului se poate rafina specificarea utilizând proprietăţile:

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 stânga şi poate avea valori dimensiuni absolute sau relative sau valorea implicită auto.

Exemplul următor setează padding-ul din stânga şi dreapta pentru paragrafe la 12% din lăţimea celui mai apropiat element, padding-ul superior la 20 de pixeli şi cel inferior este lăsată la valoarea implicită a browser-ului.

p

{ padding: 20px 12% auto 12%;}

Alt exemplu care implementează proprietăţile de mai sus este şi următorul. Să considerăm foaia de stil următoare:

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 selecţia 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 pătrate. Aceste selectoare, au forma generală:

selector [atribut 1=”val1”]…[atribut n=”val n”]{ proprietate: valoare; }

şi selectează elemente de forma:

<selector atribut 1=”val1”…atribut n=”val n”>

Pentru a selecta toate elementele care au un anumit atribut, numele selectorului se omite. Selecţia 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 spaţii, se poate relaţiona 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ă considerăm 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>


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;}


Un atribut util în definirea mai multor stiluri pentru acelaşi 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 următor defineşte 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 definiţia din foaia de stil. De exemplu dacă vom considera foaia de stil următoare:

stil.cssdoc {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 următor:

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


Există posibilitatea de a asocia mai multe clase cu acelaşi element, separând numele acestora prin spaţii: <p class="stil1 stil2">............</p>

2.3 Pseudoclase CSS

O pseudoclasă CSS furnizează un mijloc de a defini proprietăţi pentru elemente care nu sunt disponibile prin elementele documentului XML. De exemplu, pentru a schimba culoarea unui link, atunci când se mişcă mouse-ul deasupra sa, există o pseudoclasă hoover care poate fi asociată cu clasa etichetei.

Exemplul următor va stabili culoarea link-ului cu valoarea roşu, atunci când mouse-ul este mişcat deasupra sa:

a:hover{color: red;}

Principalele pseudoclase CSS sunt:

active elementul active este în document

after poziţionează conţinutul după un element

before poziţionează conţinutul înaintea unui element

focus specifică faptul că elementul primeşte 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 defineşte limba

link defineşte legăturile nevizitate încă

visited defineşte legăturile care au fost vizitate

Exemplul următor utilizează pseudoclasele first-leter şi first-child pentru a defini o mărime a fontului pentru un nou paragraf:

p.waffle:first-letter{font-size:small;}

p.waffle:first-child{font-size:xx-small;}

Atunci când se specifică stiluri pentru pseudoclasele elementului anchor, ordinea este importantă.

Elememtele first-child pot fi selectate cu selectorul pseudo-class: first:child. Să considerăm 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>


elem1 {color:blue}elem2:first-child {color:red}elem6:first-child {color:green}


Alt exemplu de utilizare a selectorului pseudo-class: first:child, poate fi öi urmütorul. Să considerăm 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>


a1 {color:blue}a1 + a1 {color:red}a2 + a1 {color:green}a1 + a2 {color:maroon}

şi utilizând foaia de stil CSS

*:first-child {color:red

}


Pseudo clasele link and visited marchează legăturile nevizitate şi respective cele vizitate. Să considerăm 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>


a:link {color:red}a:visited {color:green}


În cazul în care se definesc mai multe stiluri pentru aceleaşi elemente, acest element va avea un stil rezultant care va fi o combinaţie a stilurilor componente. Atunci când există conflicte între aceste stiluri, valoarea ultimului stil suprascrie definiţiile anterioare ale acestuia --raţionament conform cu conceptul de cascadă. În lista de stiluri, stilul cel mai puţin semnificativ este primul, iar cel mai semnificativ este ultimul.

În cazul elementului anchor se pot defini următoarele stiluri: link, visited, hover şi respectiv active. Dacă se defineşte un stil de bază pentru elementul anchor, acesta trebuie introdus înaintea pseudoclaselor menţionate 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 acelaşi element). Astfel, se pot preciza stiluri pentru un id, specificând 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 următor defineşte 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 informaţii despre poziţia elementului în ierarhia documentului şi despre părinţii săi pentru a relaţiona elemente. Aceste informaţii sunt utilizate în cazul în care un element trebuie tratat diferit în funcţie 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 menţionat faptul că se pot crea reguli pentru toate elementele care au aceeaşi valoare a atributului id, utilizând formularea:

#prim{ color: blue; }

Această regulă se referă la toate elementele documentului XML care au valoarea atributului id “prim”.

Selectorul class permite realţionarea unei reguli cu o anumită instanţiere a unui element în locul relaţionării clasice care presupune relaţionarea cu toate instanţierile elementului în documentl XML. Pentru exemplificarea acestei idei, vom rămâne 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 consecvenţi cu notaţia 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 menţionat 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ă, utilizând formularea:

.class= “prim”{ color: red; }

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

Cap3. Modelul de ferestre CSS

Proprietăţile paginilor CSS specifică proprietăţile padding-ului adică ale spaţiului inserat între frontieră şi conţinutul propriu-zis al elementului. Pentru a seta dimensiunile padding-ului se pot utiliza următoarele proprietăţi:

padding defineşte cele patru proprietăţi ale padding-ului. Valorile se specifică în sensul acelor ceasului astfel: sus, dreapta, jos şi stânga, separate prin spaţii. Valorile posibile ale acestei proprietăţi 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 stâng. 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ă considerăm exemplul următor:

p { padding: 40px 12% auto 12%; }

Acest exemplu stabileşte padding-ul superior la 40 de pixeli, padding-ul drept şi stâng la 12% din lăţimea celui mai apropiat element şi padding-ul inferior este setat de valoarea implicită a browser-ului.

În 1999, nivelul 2 al CSS a introdus posibilitatea de a controla layout-ul paginilor utilizând tehnici CSS. Până în acel moment acest scop se realiza utilizând tabele. Bineînţeles că table rămâne 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 aşezate unul sub altul, şi elementele inline sunt aşezate de la stânga la dreapta. Layout-ul absolut furnizează mai mult control asupra aspectului, dar poate conduce la suprapunerea elementelor în dispozitive de afişare mici. Layout-urile float se implementează mai uşor, dar se bazează pe “curgerea” documentului pentru a obţine rezultatul dorit.

3.1 Layout-ul absolut

Atunci când un element este poziţionat 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 poziţionat în containerul său utilizând proprietăţile: left, right, top, şi bottom. Fereastra browser-ului poate fi interpretată ca un block container care conţine toate celelalte elemente block ale documentului.

Fereastra următoare este poziţionată astfel: la 120 de pixeli de la marginea stângă a elementului container, 10 de pixeli mai jos faţă de marginea superioară a contaienrului şi are o lăţime 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 când se utilizează tehnica de poziţionare absolută, spaţiul necesar pentru fereastră este deobicei specificat incluzând o margine a altui element pentru a nu suprapune conţinuturile 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>Conţinutul principal</h2> ……………………….</div><div id="top"><h2>Partea superioară a documentului</h2> …………………………………………..</div>

Ordinea poziţionării se poate modifica prin intermediul proprietăţii z-index, ţinând seama de faptul că elementele cu un z-index mai mare sunt plasate în faţa elementelor cu un z-index mai mic. Acest parametru poate avea şi valori negative. Exemplul următor defineşte 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 când un element este poziţionat absolut în fereastra browser-ului, acesta are o poziţie fixă în fereastră, adică atunci când pagina este parcursă, elementul rămâne static pe pagină şi când pagina este tipărită elementul fix va apare pe fiecare pagină. Exemplul următor defineşte un astfel de element fix.

#elementfix{position: fixed;top: 5px;left: 2px

3.2 Layout-ul float Ferestrele cu proprietatea float sunt translate la stânga sau la dreapta liniei curente.

Proprietatea esenţială a acestor ferestre şi care le deosebeşte fundamental de ferestrele poziţionate absolut constă în mobilitatea poziţiei lor. În acest sens, conţinutul unei ferestre float poate “curge” la stânga elementului float (plutitor) stâng ş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 următoarele valori:

left face ca fereastra să fie deplasată la stânga şi conţinutul elementului container să fie deplasat la dreapta. Exemplul următor defineşte 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>


a2 {float:left; color:red; }

va genera output-ul:

right face ca fereastra să fie deplasată la dreapta, şi conţinutul elementului container să fie deplasat la stânga

none face ca fereastra să nu fie deplasată deloc

inherit trebuie setată explicit în proprietăţile elementului container, pentru a activa proprietatea de moştenire

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 următoarele valori:

left conţinutul unui element float anterior nu va fi afişat la stânga acestui element

right conţinutul unui element float anterior nu va fi afişat la dreapta acestui element

both conţinutul unui element float anterior nu va fi afişat nici la stânga şi nici la dreapta acestui element

none nu vor fi impuse constrângeri de tip clear acestui element

Exemplul următor defineşte două ferestre: fereastra 1 şi fereastra 2. Lăţimile celor 2 ferestre sunt de 60% şi sunt amândouă deplasate la dreapta. Deoarece nu este suficient spaţiu pentru a le afişa alăturat, s-a specificat proprietatea clear care determină o afişare una sub alta.

#fereastra1{float: right;width: 60%;}

#fereastra2{float: right;clear: right;width: 60%;}

Cap.4 Proprietăţile textului

4.1 Proprietăţi generale

Într-o foaie de stil CSS, pentru a determina aspectul textului se pot utiliza următoarele proprietăţi 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 proprietăţi. 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 următorul 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>


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 text-bottom

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 proprietăţi. Vom considera foaia de stil:

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

şi următorul 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 afişate şi poate avea valorile: none, capitalize, uppercase şi lowercase. Foaia de stil următoare exemplifică această proprietate.

stil.css

el1 {display: block;text-transform: uppercase;}el2 { display: block;text-transform: lowercase ;}el3{display: block; text-transform: capitalize;}el4 {display: block;text-transform: capitalize;}

Documentul XML următor 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 următorul output:

text-shadow specifică efectul de umbră a textului. Exemplul următor 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ă spaţierea caracterelor şi poate avea ca valori lungimi absolute sau valoarea predefinită normal.

line-height specifică înălţimea 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 stânga sau la dreapta prin valorile ltr sau rtl

word-spacing specifică spaţiul dintre cuvinte şi poate avea ca valoare o lungime absolută sau valoarea predefinită normal. Exemplul următor aplică această proprietate.

stil.cssp.1 {word-spacing: 2em}

p.2 { word-spacing: 4ex }

div.1 { word-spacing: 2cm }

div.2 {word-spacing: 5 mm }

Documenul XML următor 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ă spaţiul dintre litere şi poate avea ca valoare o lungime absolută sau valoarea predefinită normal. La documentul HTML anterior dacă vom ataşa foaia de stil următoare:

stil.cssp.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 următor combină proprietăţile 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>


* {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 următor setează culoarea textului cu valoarea navy, scrie de la dreapta la stânga şi setează spaţierea caracterelor la 4 pixeli:

p{ color: navydirection: rtl;letter-spacing: 4px;}

4.2 Fonturi

Pe lângă aceste proprietăţi, 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 proprietăţilor următoare, separate cu spaţii. Nu este obligatoriu să fie specificate toate aceste proprietăţi, 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 când se specifică mai mult de o familie de fonturi, browser-ul îl va utiliza primul pe care îl recunoaşte. 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 proprietăţi. Vom considera 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}

div.4 {font-family:monospace

} div.5 {font-family:helvetica} div.6 {font-family:sans-serif}

şi următorul 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, extra-expanded, narrower, normal, semi-condensed, semi-expanded, ultra-condensed, ultra-expanded, wider. Foaia de stil următoare prezintă implementarea acestei prioprietăţi.

stil.cssdiv.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ă mărimea fontului. Aceasta poate fi definită relativ la mărimea elementului părinte sau utilizând următoarele mărimi predefinite: xx-small, x-small, small, medium, large, x-large şi xx-large. Există şi două setări care permit mărirea sau micşorarea mărimii fontului faţă de dimensiunea sa curentă: smaller şi larger. În continuare este prezentat un exemplu de implementare a acestei proprietăţi. 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 următorul 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 acelaşi document XML dacă vom ataşa următoarea foaie de stil:

stil.cssdiv.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}


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 proprietăţi. 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 următorul 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 proprietăţi. 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 următorul 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"> 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 class = "7"> Text 7 </div></div></div></div></div></div></div> </doc>

cu output-ul:

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

Exemplul următor stabileşte fontul utilizat în elementul doc ca fiind normal, cu mărimea 1, înălţimea de 1.4 elemente, utilizând unul din fonturile specificate.

doc{ font: normal 1em/1.4em arial, helvetica, sans-serif;}

Tot cu proprietatea font, mai pot fi specificate şi următoarele proprietăţi: caption, icon, menu, message-box, small-caption, şi status-bar. Foaia de stil următoare implementează aceste proprietăţi:

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 următor 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 menţionăm este culoarea. Culorile se specifică astfel: utilizând un nume de culoare predefinit sau intensităţile red, green şi blue ale culorii sau specificând 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ă intensităţile culorilor roşu, verde şi respectiv albastru. Valorile zecimale sunt precedate de cuvântul cheie rgb, şi cele trei valori sunt în intervalul 0-> 255.

Pentru a defini culoarea unui element se implementează proprietăţile:

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 proprietăţile:

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 proprietăţi. Să considerăm 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>


* {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ă poziţia imaginii de fundal şi poate avea ca valoare o mărime relativă specificată în procente sau una din următoarele 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 afişare a fundalului prin valorile: repeat, repeat-x, repeat-y şi no-repeat.

Exemplul următor inserează o imagine în colţul din stânga 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

Proprietăţile listelor sunt utilizate pentru a determina modalitatea de formatare a articolelor listelor şi pentru a specifica numerotarea automată dacă este utilizat un sistem de numărare. În acest sens, pentru a specifica toate proprietăţile unei liste se utilizează proprietatea list-style, care are ca valori toate proprietăţile listei separate prin spaţii. Pentru a rafina specificarea proprietăţilor listei, se pot utiliza şi proprietăţile:

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ă poziţia 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, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian

Exemplul următor setează o imagine pentru a fi utilizată ca marker pentru articolele listei. În cazul în care imaginea nu este găsită 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. Câmpul caption al unei tabele poate fi afişat peste, sub, la dreapta sau la stânga tabelei. Să considerăm 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>


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:

css

Documents