web - css (lab)

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

Tehnologii Web

Dr. Sabin­Corneliu BuragaFacultatea de Informatica

Universitatea “A.I.Cuza” – Iasi, Romania

http://www.infoiasi.ro/~busaco/

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

DetaliiDetalii in in [[PSW, 163PSW, 163‐‐196 + CD196 + CD]] [[NW, 105NW, 105‐‐125]125]

Foi de stiluri in cascada

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

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

/usr/games/fortune

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

Caracteristici generaleCSS – nivelul 1CSS – nivelul 2

Resurse

cuprins

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

intrebare

Exista o modalitate de a asociaelementelor XHTML stiluri de redare?

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS

Cascading Style Sheets

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

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”

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS

Cascading Style Sheets – nivelul 1decembrie 1996

Cascading Style Sheets – nivelul 2mai 1998

Cascading Style Sheets – nivelul 3în curs de standardizare

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS

Model de formatare bazat pe “cutii”

margine, chenar, padding, conținut

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Terminologie

h1 h1 {{ colorcolor:: #CCC#CCC;; fontfont--sizesize:: 16pt16pt;; }}

SelectorDeclarație Declarație

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Moduri de utilizare

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

</div>

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Moduri de utilizare

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

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" />

Specifică un URL

Apare în antetul

paginii Web

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

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 }

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

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>

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

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>

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Context

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

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Grupare

Gruparea de stiluri se realizeazăenumerând selectorii:

h1, h2, a { font­family: Arial; font­size: 11pt }h2 { font­style: italic }

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

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: blue; border: solid 1px gray }a:active { background‐color: yellow }

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Pseudo‐clase

Alt exemplu:

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

text‐decoration: underline; }

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

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 }

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Pseudo‐elemente

Letrina

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

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)

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Unități de măsură

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

sup, sub { font­size: 85% }

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Proprietăți

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Proprietăți

Stilul corpului de literăfont­style: normalitalicoblique 

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Proprietăți

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Proprietăți

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Proprietăți

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

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Proprietăți

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Proprietăți

Fundaluribody {

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

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

}

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Proprietăți

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

h3 { word­spacing: 1em }

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Proprietăți

Decorațiuni ale conținutului textualtext­decoration:noneunderlineoverlineline‐through

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Proprietăți

Transformarea conținutului textualtext­transform:capitalizeuppercaselowercasenone

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Proprietăți

text­align:leftrightcenterjustify

vertical­align:topmiddlebottom

Alinieri

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

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 }

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Proprietăți

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Proprietăți

Boxe de afişareSpecificarea marginilor: margin‐top margin‐right margin‐bottom margin‐left

Precizarea padding‐ului: padding‐top padding‐right padding‐bottom padding‐left

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Proprietăți

Boxe de afişareSpecificarea chenarului: border­width: numărborder­color: culoareborder­style: none | dotted | solid | double | …

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS: Exemple

Foile de stiluri folosite in cadrul paginilor Web ale cursuluihttp://www.infoiasi.ro/~busaco/teach/courses/web/web.css

Foile de stiluri utilizate de situl Webal Facultatii de Informatica

– consultati codul‐sursa XHTML al paginii principalehttp://www.infoiasi.ro/

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

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 }

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS – nivelul 2

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

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS – nivelul 2

Poziționarea conținutuluiposition:staticrelativeabsolutefixed

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS – nivelul 2

Poziționarea conținutului– plasarea sub/peste o alta “cutie”(modificarea ordinii de redare)

z­index: număr

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS – nivelul 2

float:leftrightnone

clear:leftrightbothnone

Controlul elementelor float

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS – nivelul 2

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

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS – nivelul 2

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

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS – nivelul 2

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

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>

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

CSS – nivelul 2

Generarea de continut via pseudo‐elementele:before si :after si proprietatea content

h1:before {content: "CSS";display: block;color: #FFF;

}

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

important

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!

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

intrebare

Exista si intrumente ajutatoare?

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

răspuns

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

răspuns

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

răspuns

Extensia Firebug pentru Firefoxgetfirebug.com

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

resurse

CSS – level 1 (recomandare W3C): www.w3.org/TR/REC­CSS1 

CSS – level 2, revision 1 (recomandare W3C): www.w3.org/TR/REC­CSS21

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

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

resurse

CSS Zen Garden: www.csszengarden.com/

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

Quirks Mode: www.quirksmode.org/

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

??