Post on 28-Jan-2017
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?