foi de stiluri – standardul css

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

Comunicare în medii electronice

Dr. Sabin‐Corneliu Buraga

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

Foi de stiluri – standardul CSS

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

Este dificil să vezi un tablouatunci când eşti în interiorul ramei.

/usr/games/fortune

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

Întrebare

Cum putem publica pe Web?

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

Întrebare

Există o modalitate de a asociaelementelor XHTML stiluri de redare?

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS

Cascading Style Sheets

Set de specificații ale Consorțiului Webhttp://www.w3.org/Style/

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS

Foi de stilurigrupuri de proprietăți definind modul de redare a elementelor unor limbaje de marcare – e.g., (X)HTML, SVG,…

“Clothing for Web pages”

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS

Cascading Style Sheets – nivelul 1decembrie 1996

Cascading Style Sheets – nivelul 2mai 1998

Cascading Style Sheets – nivelul 3în curs de standardizare

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS

Model de formatare bazat pe “cutii”margine, chenar, padding, conținut

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Terminologie

h1 { color: #CCC; font-size: 16pt; }

SelectorDeclarație Declarație

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Moduri de utilizare

Local, la nivelul unui marcator – via atributul style: <div style="font‐size: 8pt; text‐align: right">…

</div>

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Moduri de utilizare

Gruparea declarațiilor CSS în antetuldocumentului – prin elementul <style>: <style type="text/css">h3 { color: #C60; margin: 1em }</style>

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Moduri de utilizare

Extern, definițiile de stiluri fiind stocateîntr‐un fişier text .css: 

<link rel="stylesheet" type="text/css"href="web.css" />

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Clase

O serie de proprietăți pot fi aplicate unei clase(grup) de elemente – sintactic: .nume_de_clasă

.intens { font‐weight: bolder; color: green }

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Clase

Utilizare prin intermediul atributului class:

<p class="intens">Paragraf îngroşat şi verde.</p><h2 class="intens">Titlu îngroşat şi verde.</h2>

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Identificatori

Un element poate fi identificat unicprin valoarea atributului id:

#intens { font‐weight: bolder; color: green }<p id="intens">Paragraf îngroşat şi verde.</p>

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Context

Aplicarea proprietăților de stilîn funcție de contextul apariției unor marcaje:

p em { color: blue }<p>Text <em>albastru doar aici</em>…</p><em>Acesta este numai italic!</em>

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Grupare

Gruparea de stiluri se realizeazăenumerând selectorii:

h1, h2, a, td { font‐family: Arial; font‐size: 16pt }h2 { font‐style: italic }

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Pseudo‐clase

Clase speciale, oferit la nivel de browser:a:link a:visited a:active a:hover

a:link { color: red }a:visited img { color: yellow; border: solid 1px gray }a:active { background‐color: blue }

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Pseudo‐clase

Alt exemplu:

a:hover { color: #C60; text‐decoration: none; }a { font‐family: sans‐serif; font‐weight: bold;

text‐decoration: underline; }

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Pseudo‐elemente

Desemnează fragmente speciale de conținut:first‐line first‐letter 

/* prima linie va fi indentată – aliniat */p:first‐line { text‐indent: 5% }/* prima literă va fi mai mare – letrină */p:first‐letter { font‐size: 200%; float: left }

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Pseudo‐elemente

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Unități de măsură

Absolute:cm – centimetriin – inci: 1in = 2.54cmpt – puncte tipograficepc – pica‐uri: 1pc = 12ptpx – pixeli

(redarea poate depinde de dispozitivul folosit)

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Unități de măsură

Relative:em – lățimea literei m a fontului curentex – înălțimea literei x a fontului curent

Utile pentru afişări independente de browser,monitor sau preferințele utilizatorului

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Unități de măsură

Valori procentuale:măresc/micşorează relativ la valoarea curentă

sup, sub { font‐size: 85% }

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Proprietăți

Familia corpului de literăfont‐family: serif (Amherst) sans‐serif (Arial)cursive (Nuptial)fantasy (STOP)monospace (Courier)

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Proprietăți

Stilul corpului de literăfont‐style: normalitalicoblique 

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Proprietăți

Grosimea corpului de literăfont‐weight: normalbold(er/est)light(er/est)100 .. 900

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Proprietăți

Dimensiunea corpului de literăfont‐size: x‐smallmediumlarge(r)NNpt+NN%

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Proprietăți

Culoricolor: denumire_culoare –white, green, blue, gray,… #RRGGBB – #FFFFF, #00FF00, #00F etc.rgb (rosu, verde, albastru) – rgb (255, 255, 255)

h2 { color: rgb (127, 250, 127) }

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Proprietăți

Culoribackground‐color: denumire_culoare#RRGGBBrgb (rosu, verde, albastru) 

body { background‐color: #000; color: #FFF }

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Proprietăți

Fundaluribackground‐image: url (adresa)background‐position: poz_vertic poz_orizbackground‐repeat: repeat‐x repeat‐yno‐repeat

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Proprietăți

Fundaluribody { 

background‐image: url(http://www.infoiasi.ro/~busaco/csb‐myself2);

background‐repeat: no‐repeat;background‐position: top right; 

}

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Proprietăți

Spațieriletter‐spacing: numărword‐spacing: număr

h3 { word‐spacing: 1em }

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Proprietăți

Decorațiuni ale conținutului textualtext‐decoration:noneunderlineoverlineline‐throughblink

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Proprietăți

Transformarea conținutului textualtext‐transform:capitalizeuppercaselowercasenone

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Proprietăți

text‐align:leftrightcenterjustify

vertical‐align:topmiddlebottom

Alinieri

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Proprietăți

Altele privind conținutul textualline‐height: număr – înălțimea unei linii de textwhite‐space: normalprewrap

.cod_sursa { height: 1.2; white‐space: pre }

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Proprietăți

Stilul de redare a listelorlist‐style‐type:disccircledecimallower‐roman…

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Proprietăți

Boxe de afişareSpecificareamarginilor: 

margin‐top margin‐right margin‐bottom margin‐leftPrecizarea padding‐ului: 

padding‐top padding‐right padding‐bottom padding‐left

p { margin‐top: 0.6em; margin‐bottom: 0.4em }

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS: Proprietăți

Boxe de afişareSpecificarea chenarului: 

border‐width: numărborder‐color: culoareborder‐style: none | dotted | dashed | solid | double | …

p { border‐style: solid; border‐color: #336; border‐width: 2pt }a img { border: none }

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS – nivelul 2

Facilități importanteMecanisme complexe de selectare a elementelorDependența de medii de comunicare (@media)Stiluri pentru redarea tabelelorPoziționare absolută/relativă a conținutuluiSuport pentru redare sofisticatăStiluri aurale – proprietățile volume, speak, pause, cue, azimuth, elevation

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS – nivelul 2

Selectarea elementelorDescendenți ai altor elementeol > li { background: rgb (127,200,0) }

Elemente care urmează imediat după alteleh1 + h2 { margin‐top: ‐5mm }

Elemente cu atribute având diverse valori*[lang="en"] { display: none }

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS – nivelul 2

Redare pe baza mediilorTipuri: aural, braille, handheld, print,projection, screen, tty, tv

Clasificare: continue (continuous) sau paginate (paged)vizuale (visual), sonore (aural) ori tactile (tactile)interactive sau statice

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS – nivelul 2

Redare pe baza mediilor@media print { body { font‐size: 12pt } } 

@media screen { body { font‐size: 10pt; background‐color: #CCC } }

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS – nivelul 2

Poziționarea conținutuluiposition:staticrelativeabsolutefixed

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS – nivelul 2

Poziționarea conținutului– plasarea la coordonate absolutetop: număr | autoleft: număr | autobottom: număr | autoright: număr | auto

h4 { position: absolute; top: 30px; left: 20% }

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS – nivelul 2

float:leftrightnone

clear:leftrightbothnone

Controlul elementelor float

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS – nivelul 2

Poziționarea conținutului – stabilirea lățimiiwidth:numărprocentajauto

div.content { width: 600px } .pic { width: 50% }

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS – nivelul 2

Poziționarea conținutului – stabilirea înălțimiiheight:numărprocentajauto

table { height: 600px } .pic { height: 50% }

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

Exemplu

Folosirea proprietăților CSS 2 pentru a definiaranjamentul (layout‐ul) unei pagini Web,fără a folosi tabele XHTML

A se consulta: www.infoiasi.ro/~busaco/teach/courses/iCome/resources/css2.html

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS – nivelul 2

Controlul afişării conținutuluidisplay:inlineblocklist‐itemtablenone…

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

CSS – nivelul 2

Controlul afişării conținutuluivisibility: visible | hiddenoverflow: visible | hidden | scroll | autoclip: rect (sus, dreapta, jos, stanga)

<pre style="overflow: scroll; height: 100px; width: 200px">…

</pre>

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

De reținut

Pot fi folosite la un moment dat fişiere CSS multiple

Unele proprietăți vor fi ignorate sau vor fi eronatinterpretate de unele navigatoare

Utilizatorii pot inhiba suportul pentru CSS

De testat (+optimizat) foile CSS înainte de utilizare!

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

Întrebare

Există şi instrumente ajutătoare?

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

Răspuns

Validatorul de foi de stiluri CSShttp://jigsaw.w3.org/css‐validator/

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

Răspuns

ExtensiaWeb Developer pentru Firefoxhttp://addons.mozilla.org/addon/60

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

Răspuns

Extensia Firebug pentru Firefoxgetfirebug.com

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

Resurse

CSS – level 1 (recomandareW3C): www.w3.org/TR/REC‐CSS1 

CSS – level 2, revision 1 (recomandareW3C): www.w3.org/TR/REC‐CSS21

Learning CSS: www.w3.org/Style/CSS/learning

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

Resurse

CSS Zen Garden: www.csszengarden.com/ 

CSS Edge: www.meyerweb.com/eric/css/edge/ 

Quirks Mode: www.quirksmode.org/

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

Rezumat

Redarea conținutului marcatprin intermediul proprietăților de stil CSS

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

Întrebări?