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


Foi de stiluri – standardul CSS

here://iCome


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

/usr/games/fortune

here://iCome


Întrebare

Cum putem publica pe Web?

here://iCome


Întrebare

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

here://iCome


CSS

Cascading Style Sheets

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

here://iCome


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


CSS

Cascading Style Sheets – nivelul 1decembrie 1996

Cascading Style Sheets – nivelul 2mai 1998

Cascading Style Sheets – nivelul 3în curs de standardizare

here://iCome


CSS

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

here://iCome


CSS

here://iCome


CSS: Terminologie

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

SelectorDeclarație Declarație

here://iCome


CSS: Moduri de utilizare

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

</div>

here://iCome



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

here://iCome



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

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

here://iCome


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


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


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


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


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


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


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


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


CSS: Pseudo‐elemente

here://iCome


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



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



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

sup, sub { font‐size: 85% }

here://iCome


CSS: Proprietăți

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

here://iCome


CSS: Proprietăți

Stilul corpului de literăfont‐style: normalitalicoblique

here://iCome


CSS: Proprietăți

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

here://iCome


CSS: Proprietăți

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

here://iCome


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


CSS: Proprietăți

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

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

here://iCome


CSS: Proprietăți

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

here://iCome


CSS: Proprietăți

Fundaluribody {

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

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

}

here://iCome


CSS: Proprietăți

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

h3 { word‐spacing: 1em }

here://iCome


CSS: Proprietăți

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

here://iCome


CSS: Proprietăți

Transformarea conținutului textualtext‐transform:capitalizeuppercaselowercasenone

here://iCome


CSS: Proprietăți

text‐align:leftrightcenterjustify

vertical‐align:topmiddlebottom

Alinieri

here://iCome


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


CSS: Proprietăți

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

here://iCome


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


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


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


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


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


CSS – nivelul 2

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

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

here://iCome


CSS – nivelul 2

Poziționarea conținutuluiposition:staticrelativeabsolutefixed

here://iCome


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


CSS – nivelul 2

float:leftrightnone

clear:leftrightbothnone

Controlul elementelor float

here://iCome


CSS – nivelul 2

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

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

here://iCome


CSS – nivelul 2

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

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

here://iCome


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


here://iCome


CSS – nivelul 2

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

here://iCome


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


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


Întrebare

Există şi instrumente ajutătoare?

here://iCome


Răspuns

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

here://iCome


Răspuns

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

here://iCome


Răspuns

Extensia Firebug pentru Firefoxgetfirebug.com

here://iCome


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


Resurse

CSS Zen Garden: www.csszengarden.com/

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

Quirks Mode: www.quirksmode.org/

here://iCome


Rezumat

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

here://iCome


Întrebări?

foi de stiluri – standardul css

Documents