web - css (lab)
TRANSCRIPT
Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/
TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />
Tehnologii Web
Dr. SabinCorneliu 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="fontsize: 8pt; textalign: 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 { fontweight: 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 { fontweight: 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 { fontfamily: Arial; fontsize: 11pt }h2 { fontstyle: 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:firstline firstletter
/* prima linie va fi indentată – aliniat */p:firstline { textindent: 5% }/* prima literă va fi mai mare – letrină */p:firstletter { fontsize: 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 { fontsize: 85% }
Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/
TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />
CSS: Proprietăți
Familia corpului de literăfontfamily: 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ăfontstyle: normalitalicoblique
Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/
TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />
CSS: Proprietăți
Grosimea corpului de literăfontweight: 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ăfontsize: 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
Culoribackgroundcolor: denumire_culoare#RRGGBBrgb (rosu, verde, albastru)
body { backgroundcolor: #000; color: #FFF }
Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/
TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />
CSS: Proprietăți
Fundaluribackgroundimage: url (adresa)backgroundposition: poz_vertic poz_orizbackgroundrepeat: 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țieriletterspacing: numărwordspacing: număr
h3 { wordspacing: 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 textualtextdecoration:noneunderlineoverlineline‐through
Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/
TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />
CSS: Proprietăți
Transformarea conținutului textualtexttransform:capitalizeuppercaselowercasenone
Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/
TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />
CSS: Proprietăți
textalign:leftrightcenterjustify
verticalalign: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 textuallineheight: număr – înălțimea unei linii de textwhitespace: normalprewrap
.cod_sursa { height: 1.2; whitespace: pre }
Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/
TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />
CSS: Proprietăți
Stilul de redare a listelorliststyletype: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 { margintop: 0.6em; marginbottom: 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: borderwidth: numărbordercolor: culoareborderstyle: 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)
zindex: 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/cssvalidator/
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/RECCSS1
CSS – level 2, revision 1 (recomandare W3C): www.w3.org/TR/RECCSS21
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=“…” />
??