Web - CSS (Lab)
-
Upload
sabin-buraga -
Category
Technology
-
view
1.207 -
download
9
Transcript of Web - CSS (Lab)
![Page 1: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/1.jpg)
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/
![Page 2: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/2.jpg)
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
![Page 3: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/3.jpg)
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
![Page 4: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/4.jpg)
Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/
TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />
Caracteristici generaleCSS – nivelul 1CSS – nivelul 2
Resurse
cuprins
![Page 5: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/5.jpg)
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?
![Page 6: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/6.jpg)
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/
![Page 7: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/7.jpg)
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”
![Page 8: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/8.jpg)
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
![Page 9: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/9.jpg)
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
![Page 10: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/10.jpg)
Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/
TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />
CSS
![Page 11: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/11.jpg)
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
![Page 12: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/12.jpg)
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>
![Page 13: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/13.jpg)
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>
![Page 14: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/14.jpg)
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
![Page 15: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/15.jpg)
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 }
![Page 16: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/16.jpg)
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>
![Page 17: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/17.jpg)
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>
![Page 18: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/18.jpg)
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>
![Page 19: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/19.jpg)
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 }
![Page 20: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/20.jpg)
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 }
![Page 21: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/21.jpg)
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; }
![Page 22: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/22.jpg)
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 }
![Page 23: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/23.jpg)
Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/
TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />
CSS: Pseudo‐elemente
Letrina
![Page 24: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/24.jpg)
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)
![Page 25: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/25.jpg)
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
![Page 26: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/26.jpg)
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% }
![Page 27: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/27.jpg)
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)
![Page 28: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/28.jpg)
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
![Page 29: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/29.jpg)
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
![Page 30: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/30.jpg)
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%
![Page 31: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/31.jpg)
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) }
![Page 32: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/32.jpg)
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 }
![Page 33: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/33.jpg)
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
![Page 34: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/34.jpg)
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;
}
![Page 35: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/35.jpg)
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 }
![Page 36: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/36.jpg)
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
![Page 37: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/37.jpg)
Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/
TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />
CSS: Proprietăți
Transformarea conținutului textualtexttransform:capitalizeuppercaselowercasenone
![Page 38: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/38.jpg)
Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/
TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />
CSS: Proprietăți
textalign:leftrightcenterjustify
verticalalign:topmiddlebottom
Alinieri
![Page 39: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/39.jpg)
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 }
![Page 40: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/40.jpg)
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…
![Page 41: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/41.jpg)
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 }
![Page 42: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/42.jpg)
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 }
![Page 43: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/43.jpg)
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/
![Page 44: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/44.jpg)
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
![Page 45: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/45.jpg)
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 }
![Page 46: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/46.jpg)
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
![Page 47: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/47.jpg)
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 } }
![Page 48: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/48.jpg)
Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/
TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />
CSS – nivelul 2
Poziționarea conținutuluiposition:staticrelativeabsolutefixed
![Page 49: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/49.jpg)
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% }
![Page 50: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/50.jpg)
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
![Page 51: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/51.jpg)
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
![Page 52: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/52.jpg)
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% }
![Page 53: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/53.jpg)
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% }
![Page 54: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/54.jpg)
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…
![Page 55: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/55.jpg)
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>
![Page 56: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/56.jpg)
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;
}
![Page 57: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/57.jpg)
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!
![Page 58: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/58.jpg)
Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/
TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />
intrebare
Exista si intrumente ajutatoare?
![Page 59: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/59.jpg)
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/
![Page 60: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/60.jpg)
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
![Page 61: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/61.jpg)
Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/
TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />
răspuns
Extensia Firebug pentru Firefoxgetfirebug.com
![Page 62: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/62.jpg)
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
![Page 63: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/63.jpg)
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/
![Page 64: Web - CSS (Lab)](https://reader034.fdocuments.in/reader034/viewer/2022042518/55964fd31a28abd30e8b46d0/html5/thumbnails/64.jpg)
Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/
TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />
??