Dr. Sabin BuragaFacultatea de Informatică, UAIC – Iași, România
profs.info.uaic.ro/~busaco/
Foi de stiluri CSS
concepte esențiale(…și puțin mai mult)
În „antichitate” (până la sfârșitul secolului XX), un document HTML includea atât conținut
hipermedia – i.e. datele propriu-zise + legături spre alte resurse –, cât și marcaje indicând modul
de redare a acestuia de către navigatorul Web
<TITLE>HTML pre-CSS</TITLE><BODY BGCOLOR=white TEXT=#336633 LINK=black VLINK=green><CENTER><H1><FONT COLOR=#009900>HTML pre-CSS</FONT></H1><HR SIZE=3 WIDTH=50%><P ALIGN=center><I>Web-ul antic</I> era
<B><FONT FACE=Courier SIZE=5>diferit</FONT></B>de cel actual.</P><HR SIZE=7 WIDTH=70%>
<DIV><SMALL>Amintirile din 1996 ale lui <A HREF=http://profs.info.uaic.ro/~busaco>Sabin Buraga</A></SMALL></DIV>
Există o modalitate de
a asocia paginilor Web
stiluri de redare
(prezentare)
a conținutului?
Cascading Style Sheets
suită de specificații ale Consorțiului Web
autori inițiali: Håkon Wium Lie & Bert Bos (1996)
www.w3.org/Style/CSS/
Foi de stiluri CSS
grupuri de proprietăți determinând redarea unor elemente (marcaje) specifice
asociate unor limbaje de marcare:HTML (HyperText Markup Language)
SVG (Scalable Vector Graphics)XML (Extensible Markup Language)
…
Foi de stiluri CSS
asigură separarea conținutului– i.e. modelul & structura datelor –
de maniera de formatare (prezentare)
„îmbrăcăminte” pentru paginile Web
fără CSS
cu CSS
1 foaie de stiluri CSSN documente HTML
se menține consistența redării(look & feel)
pentru documente multiple
N foi de stiluri CSS1 document HTML
formatări diferiteîn funcție de mediile
de redare – e.g., ecran(e), imprimantă, TV,... –
sau de preferințe(de pildă, teme cromatice)
formatarea e bazată pe „cutii” – box model
margine (margin)chenar (border)
zonă de „umplutură” (padding) conținut propriu-zis
formatarea e bazată pe „cutii” – box model
margine (margin)chenar (border)
zonă de „umplutură” (padding) conținut propriu-zis
poziționare (position) – relativă ori absolutălățime (width)
înălțime (height)strat de redare (z-index)
formatarea e bazată pe „cutii” – box model
formatarea e bazată pe „cutii” – box model
margine (margin)chenar (border)
zonă de „umplutură” (padding) conținut propriu-zis
poziționare (position) – relativă ori absolutălățime (width)
înălțime (height)strat de redare (z-index)
distanțele față de marginile containerului-părinte: la stânga (left), la dreapta (right),
de sus (top), de jos (bottom)
terminologie
h1 { color: blue; font-size: 16pt; }
selector
declarație declarație
proprietate
valoare
moduri de utilizare
local – la nivelul unui marcator via atributul style
<h1 style="color: green; text-align: center;font-family: sans-serif;text-decoration: overline underline;">
HTML + CSS intern</h1><p style="color: black; text-align: center;
font-family: serif;">Stiluri de redare proprii unui element HTML.
</p>
moduri de utilizare
local – la nivelul unui marcator via atributul style
<h1 style="color: green; text-align: center;font-family: sans-serif;text-decoration: overline underline;">
HTML + CSS intern</h1><p style="color: black; text-align: center;
font-family: serif;">Stiluri de redare proprii unui element HTML.
</p>
moduri de utilizare
local – gruparea declarațiilor CSS în antetuldocumentului HTML folosind elementul <style>
<head><style type="text/css">
body { background: white; color: sienna; }p { padding-left: 0.3em;
border-left: 3px solid gray; }</style>
</head><body><p>CSS e minunat!?</p><p>Desigur.</p>
</body>
moduri de utilizare
local – gruparea declarațiilor CSS în antetuldocumentului HTML folosind elementul <style>
<head><style type="text/css">
body { background: white; color: sienna; }p { padding-left: 0.3em;
border-left: 3px solid gray; }</style>
</head><body><p>CSS e minunat!?</p><p>Desigur.</p>
</body>
moduri de utilizare
extern – definițiile de stiluri sunt stocate într-un fișier text (mai general, o resursă Web
desemnată de un URL – Uniform Resource Locator)
<head><link rel="stylesheet"
type="text/css" href="web.css" />
...</head>
tip MIME
URL
<!-- stiluri implicite, pentru redarea pe ecran, proiector sau TV -->
<link href="../CSS/default"media="screen, projection, tv" rel="stylesheet" title="Tema implicită" />
<!-- stiluri alternative (aici: temă cromatică) --><link href="../CSS/green"
media="screen, projection, tv" rel="alternate stylesheet" title="Verde" />
<!-- stiluri specifice pentru tipărire --><link href="../CSS/twocolumn-print"
media="print" rel="stylesheet" />
foi de stiluri CSS multiple, folosite în funcție de mediul de redare și/sau de preferințele utilizatorului
moduri de utilizare
extern – importarea foilor de stiluri(disponibile pe aceeași mașină sau la distanță via URL)
prin utilizarea directivei @import
<style type="text/css">@import url('https://www.w3.org/StyleSheets/base');@import url('styles/typography.css');@import url('styles/layout.css');@import url('styles/fineprint.css') print;</style>
developer.mozilla.org/Web/CSS/@import
moduri de utilizare
extern – importarea foilor de stiluri(disponibile pe aceeași mașină sau la distanță via URL)
prin utilizarea directivei @import
<style type="text/css">@import url('https://www.w3.org/StyleSheets/base');@import url('styles/typography.css');@import url('styles/layout.css');@import url('styles/fineprint.css') print;</style>
construcția @ este denumită regulă CSS (at-rule)http://devdocs.io/css/at-rule
stiluripredefinite
browser
stiluri preluate din fișier(e) CSS atașat(e)
fișier(e) CSS
stiluri specificateîn antetul HTML
pag. Web
stiluri precizate via atributul style
elem. individual
dom
inan
ța î
n c
adru
l ca
scad
eicascada: fiecare nivel superior suprascrie
declarațiile de stiluri ale nivelului anterior
https://docs.webplatform.org/wiki/tutorials/inheritance_and_cascade
<head><!-- folosim o foaie CSS externă preluată de la un URL --><link rel="stylesheet" type="text/css"
href="https://www.w3.org/StyleSheets/base.css" /><!-- includem o foaie CSS stocată în același director
cu acest document HTML --><link rel="stylesheet" type="text/css" href="web.css" /><style type="text/css">/* suprascriem stiluri, folosind declarații locale în <head> */body { background-color: white; }h1 { text-emphasis: sesame darkgreen; }.text { text-emphasis-color: gray; text-decoration: underline;
letter-spacing: 0.3em; }</style></head><body><h1 class="text">Cascada
<span style="color: green; text-emphasis-style: '\2605';">CSS</span>...?
</h1></body>
http://profs.info.uaic.ro/~busaco/teach/labs/css/
Cum selectăm (grupuri de)
elemente HTML
pentru a oferi diverse
moduri de redare?
selectori CSS
privind elementele HTML
un singur element:
article {width: 40em; margin: 0 auto;font-size: 2em;color: navy;background-color: lightgray;
}
selectori CSS
privind elementele HTML
toate elementele:
* { margin: 0;
}
pentru valori nule nu trebuie precizată unitatea de măsură
selectori CSS
privind elementele HTML
mai multe elemente:
h2, h3 {color: black;font-variant: small-caps;
}
selectori CSS
o serie de proprietăți pot fi aplicate unei clase(grup) de elemente
.intens {font-weight: bolder; color: green;
}
selectori CSS
o serie de proprietăți pot fi aplicate unei clase(grup) de elemente
.intens {font-weight: bolder; color: green;
}
utilizare în HTML prin intermediul atributului class
<h1 class="intens">Îngroșat și verde.</h1><p class="intens">Și eu-s îngroşat și verde.</p>
selectori CSS
stabilirea de proprietăți de stil pentru elemente identificate unic
#intens {font-weight: bolder; color: green;
}
selectori CSS
stabilirea de proprietăți de stil pentru elemente identificate unic
#intens {font-weight: bolder; color: green;
}
documentul HTML va include un singur element identificat prin valoarea atributului id
<div id="intens">Doar eu voi fi îngroșat și verde.
</div>
selectori CSS
aplicarea de stiluri în funcție de contextul de apariție
section emsection îl are ca descendent pe em
exemplu:
section em { color: blue; }...
<section><div>Text albastru <em>doar aici</em>.</div><p><em>Acesta este oare albastru?</em></p>
</section>
selectori CSS
aplicarea de stiluri în funcție de contextul de apariție
section > emsection îl are ca element-copil pe em
exemplu:
section > em { color: blue; }p > em { color: green; }
...<section>
<div>Text albastru <em>doar aici</em>.</div><p><em>Acesta este oare albastru?</em></p>
</section>
body este element-copil al lui htmldiv este element-copil al lui section
relație părinte-copilîntre elementele HTML
selectori CSS
aplicarea de stiluri în funcție de contextul de apariție
div + pdiv este urmat imediat de elementul p (siblings)
exemplu:
div + p { color: blue; }...
<section><div>Text albastru <em>doar aici</em>.</div><p><em>Acesta este oare albastru?</em></p>
</section>
inspectarea proprietăților CSS via instrumentele
pentru dezvoltatori oferite de browser
a se experimenta și extensia Firebuggetfirebug.com
selectori CSS
pseudo-clase
clase speciale, disponibile la nivel de navigator Web
uzual, asociate cu legăturile hipermedia – elementul a:link :visited :active :hover
a:link { color: red; }a:active { font-weight: bold; }a:visited img { border-style: dashed; }a:hover { text-decoration: underline overline; }
p:hover { font-size: +150%; background: lightyellow; }
selectori CSS
pseudo-clase
clase speciale, disponibile la nivel de navigator Web
vizând interacțiunea cu utilizatorule.g., câmpurile unui formular – elementul input
:checked :focus :invalid :valid :required
:focus {background-color: lightgray;
}
selectori CSS
pseudo-elemente
desemnează fragmente speciale de conținut
::first-letter ::first-line ::after ::before ::selection
/* elem. <h2> au ca prefix caract. Unicode ‘❀ ’ */h2::before { content: "\2740\ "; }/* prima linie va fi indentată – aliniat */p::first-line { text-indent: 5%; }/* prima literă va fi mai mare – letrină */p::first-letter { font-size: 250%; float: left; }
* {font-family: serif;text-align: justify;width: 15em;
}p::first-letter { font-size: 250%;font-style: italic; float: left; color: navy;padding: 0.2em;margin: 0.2em;text-shadow:
2px 2px 5px gray;}p::after {content: "\2605";
}
letrină
https://jsfiddle.net/busaco/ewby10jd/
exemplul #1:
„înfrumusețarea”
unui formular Web
<form method="get" action="javascript:alert('De implementat...');">
<fieldset><legend>Identitatea participantului</legend><label for="identitate">Identitate:</label><input type="text" id="identitate" />
</fieldset><fieldset><legend>Contact</legend><label for="adr">Adresa de e-mail:</label><input type="email" required="required" id="adr" />
</fieldset><fieldset id="evenim"><legend>Excursie</legend><label for="excursie">Participare la excursie?</label><input type="checkbox" id="excursie" />Desigur, particip!
</fieldset><input type="submit" value="Trimite datele" />
</form>
un formular HTML folosit pentru a prelua valori ale unor câmpuri privind participarea la un eveniment
input[type='email']:invalid { /* selecție bazată pe atribut */background: linear-gradient(to right,red,orange,salmon); color: yellow;
}:focus {
background-color: lightgray;}#evenim::before {content: '\2691'; /* caracterul ‘⚑’ */float: left;padding-right: 0.3em;
}input[type='submit'] {
margin-top: 1em;background: lightgreen;padding: 0.5em;border: thin solid green;
}input[type='submit']:hover {
color: white;background: linear-gradient(to bottom, darkgreen, rgba(0,127,0,0.5));
}
diverse definiții de stiluri ce recurg – printre altele –
la funcții CSS
aici, funcțiile linear-gradient() și rgba()
un posibil rezultat al completării formularului Web
de studiat codul-sursă disponibil onlineîn cadrul editorului JSFiddle
https://jsfiddle.net/busaco/mcw465uv/
exemplul #2:
redarea datelor
structurate tabelar
tabel HTML incluzând date despre unele personalități
<table><caption>Persoane importante ale Web-ului</caption><thead><tr><th>Identitate</th><th>Magie</th></tr></thead><tbody>
<tr><td id="tbl">Tim Berners-Lee</td><td>inventator al Web-ului (inclusiv HTML, URI, HTTP)</td>
</tr>...<tr><td>Bert Bos</td><td>co-inventator al CSS</td>
</tr><tr><td>Dave Raggett</td><td></td>
</tr></tbody></table>
exemplul complet e disponibil lahttps://jsfiddle.net/busaco/omukjjey/
td#tbl::before { /* plasăm un șir de caractere ca prefix */content: "Sir ";
}tr:nth-child(even) { /* rândurile pare vor fi redate diferit */
background: linear-gradient(to top, darkgray, silver);}tr td:first-child { /* prima celulă a fiecărui rând... */
text-align: center;width: 33%;font-variant: small-caps;color: rgb(0, 127, 30);
}tr td:last-child { /* ultima celulă a fiecărui rând... */
font-style: italic;width: auto;
} td:empty::after { /* o celulă vidă are conținut predefinit */
content: "detalii la https://www.w3.org/People/";}/* ghilimele pt. textul din ultima celulă a antetului de tabel*/thead th:last-child::before { content: open-quote; }thead th:last-child::after { content: close-quote; }
exemplul #3:
selectarea
(puțin) mai
complexă
a elementelor
varianta actuală poate fi consultată pe Web lahttp://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html
considerăm documentul HTML stocat în memorie ca arbore DOM
(Document Object Model)
Ce efect are fragmentul CSS?
section[id*="week"] > * > li:not(:nth-child(3n)) {border: 2px solid rgb(200, 200, 170);border-radius: 0.3em;background: rgba(200, 200, 170, 0.5);
}
CSS Dinerexerciții amuzante privind selectorii CSS
flukeout.github.io
selectori CSS
pentru amănunte, de parcurs resursele Web:
CSS Selectors – MDN (Mozilla Developer Network)developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
An Ultimate Guide to CSS Pseudo-Classes &Pseudo-Elements – Smashing Magazine (2016)
www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-
pseudo-classes-and-pseudo-elements/
CSS3 Selectors – recomandare W3C (2011)https://www.w3.org/TR/css3-selectors/
Niște amănunte
despre valorile
proprietăților CSS?
selector { proprietate: valoare; }
definită de diverse specificații ale Consorțiului Web
selector { proprietate: valoare; }
definită de diverse specificații ale Consorțiului Web
valorile pot fi:
constante predefinite
șiruri de caracteredelimitate de apostrofuri sau ghilimele
numere (întregi, fracționare, în baza 16)absolute – conform unor unități de măsură – vs. relative
rezultate ale unor funcții CSS
constante CSS predefinite
nume de culoriaqua, crimson, gold, lime, navy, plum, tan, teal, tomato,…
http://www.cssportal.com/css3-color-names/
serif
sans-serif
cursive
fantasy
monospace
familii de corpuri de literă (fonturi) – www.cssfontstack.comfont-family: Constantia, Garamond, serif;
constante CSS predefinite
stiluri de fonturi: normal, italic, obliquehttps://developer.mozilla.org/en/docs/Web/CSS/font-style
grosimea corpului de literă: bold, bolder, light, lighter,…https://developer.mozilla.org/en/docs/Web/CSS/font-weight
dimensiunea fontului: x-small, small, medium, large etc.https://developer.mozilla.org/en/docs/Web/CSS/font-size
constante CSS predefinite
tipuri de alinieriorizontale: left, right, center, justify
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
http://howtocenterincss.com/
verticale: baseline, sub, sup, middle, top, bottom,…https://developer.mozilla.org/en/docs/Web/CSS/vertical-align
stiluri de chenar – exemple: dashed, dotted, solid, nonehttps://developer.mozilla.org/en/docs/Web/CSS/border-style
…și multe altele
constante CSS predefinite
tipuri de aranjament vizual – layout modeafișare a „cutiilor” de conținut via proprietatea display
documentul în ansamblu – blocktextul din cadrul unei „cutii” – inline
conținutul tabelar – table, table-row, table-column,…elemente de sine-stătătoare, poziționate fix/relativ
elemente dintr-o interfață Web, aranjate flexibil – flexboxcaroiaj de informații – grid
https://developer.mozilla.org/Web/CSS/Layout_mode
Learn CSS Layout – http://learnlayout.com/toc.html
section {display: table;border: 1px solid gray;width: 100%;
}ol {
display: table-row;}li {
display: table-cell;width: 25%;text-align: center;
}li:nth-child(odd) {
background-color: #CFC;}
<section><ol><li>Linux</li><li>Web</li><li>Software liber</li><li>Programare</li>
</ol></section>
fără CSS
cu CSS
unități de măsură CSS
absolute
cm – centimetriin – inci: 1in = 2.54cmpt – puncte tipografice
pc – pica: 1pc = 12ptpx – pixeli
@media print {body { width: 16cm; font-size: 12pt; }
}
redarea poate depinde de dispozitivul folosit
unități de măsură CSS
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
.slogan { text-align: center; font-size: 1.3em; padding-top: 0.3em; padding-bottom: 0.3em;
}
unități de măsură CSS
relative
valori procentuale
măresc/micșorează relativ la valoarea curentă
sup, sub {font-size: 85%;
}img {width: 50%; height: 50%;
}
amănunte tehnice în www.w3.org/TR/css-values/
O serie de detalii
despre funcțiile CSS?
funcții CSS uzuale
url(adresăWeb)desemnează o resursă identificată de un URL
.fundal {background-color: white; background-repeat: repeat-y; background-attachment: fixed;background-position: bottom left;background-size: 30px;background-image: url("./Tux.png");
}
funcții CSS uzuale
rgb(valoareRoșu, valoareVerde, valoareAlbastru)numere întregi în intervalul [0, 255] sau procente
/* valori RGB – Red, Green, Blue */background-color: rgb(204,255,51);background-color: rgb(80%,100%,20%);background-color: #ccff33; /* prescurtat: #cf3 *//* valori HSL – Hue, Saturation, Lightness */background-color: hsl(75,100%,60%);
http://www.color-hex.com/color/ccff33
funcții CSS uzuale
linear-gradient(), radial-gradient()generează un dégradé
.chenar { border: 30px solid;border-image: radial-gradient(farthest-corner at 45px 45px,
green 0%, blue 100%);padding: 20px;
}
un instrument Web util: CSSmatic – www.cssmatic.com
experimentarea diverselor construcții CSSpe baza aplicației Web JSFiddle
în acest caz, de analizat https://jsfiddle.net/busaco/ndny1um4/
Să explorăm aspectele
mai „exotice”
ale CSS în contextul
designului Web…
module CSS – standardizate/în curs de standardizare –specificând diverse funcționalități:
Syntax Selectors Color Fonts Media Queries Shapes
Flexible box Multi-column Layout Conditional Rules
Animations Text Decoration Transforms Transitions
Masking Basic User Interface
AnimationsBackground-image optionsBorder imagesBorder radius (rounded corners) Box shadowsBox sizingCascading and inheritanceColorsCompositing and BlendingDevice AdaptationDownloadable fonts (@font-face) ExclusionsFeature queries (@supports) Filter EffectsFixed positioning (position:fixed) Flexible box layout (Flexbox) Font-feature settingsFont loadingGradientsGrid layout HyphenationImage Values & Replaced Content Logical properties
MaskingMedia QueriesMotion pathsMultiple-column layout Multiple backgroundsOpacityOverflowPointer eventsPseudo-elementsScroll Snap PointsSelectorsShapesSticky positioning (position:sticky) Style attributesSyntaxText decorationText overflowText shadowsTransforms (2D) Transforms (3D) TransitionsValues and UnitsWriting modes
htt
ps://pla
tfor
m.h
tml5
.org
/
Responsive Web design
adaptarea designului la contextul de redare:orientare a ecranului, rezoluție, densitate de pixeli,…
rezoluții de ecran diverserecurgerea la valori diferite pentru anumite proprietăți CSS via reguli @media
pentru detalii, a se parcurge prezentareaSabin Buraga, Design (Web) responsiv (2015)
http://www.slideshare.net/busaco/design-web-responsiv
@media screen and (max-width: 768px) and (orientation: portrait) { /* stiluri pentru tablete*/
}
/* redarea pe 2 coloane pentru rezoluții mari */@media (min-width:1140px) and (min-resolution: 300dpi) {
.content { column-count: 2; column-gap: 1em; } }
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { /* ecran lat */
}
https://responsivedesign.is/
http://developer.mozilla.org/docs/Web/Guide/CSS/Media_queries
a se studia codul-sursă al foii de stiluriprofs.info.uaic.ro/~busaco/teach/courses/web/web.css
Grafică Web via CSSscale(), scale3d(), translate(), translate3d(), skew(),
rotate(), rotate3d(), perspective(), matrix() etc.realizarea de transformări geometrice 2D și/sau 3D
https://developer.mozilla.org/Web/CSS/transformhttp://desandro.github.io/3dtransforms/
instrument Web util: Create CSS – www.createcss3.com
Grafică Web via CSSblur(), brightness(), contrast(), grayscale(), invert(),
opacity(), saturate(), sepia(),…aplicarea de filtre asupra conținutului grafic
https://developer.mozilla.org/Web/CSS/filterhttps://css-tricks.com/almanac/properties/f/filter/
img { filter: hue-rotate(90deg)
brightness(1.2) drop-shadow(10px 10px 5px gray);
transform: rotate(-15deg); }
Animații realizate via declarații CSSproprietăți: animation-duration, animation-direction,
animation-play-state etc. + regula @keyframes
https://developer.mozilla.org/Web/CSS/CSS_Animationshttps://css-tricks.com/almanac/properties/a/animation/
#tux {animation-name: tux-animat;animation-duration: 7s; animation-iteration-count: infinite;animation-play-state: running;
}
@keyframes tux-animat {from { transform: rotate(0deg); width: 40%; }to { transform: rotate(180deg); width: 10%; }
}...<img src="Tux.png" id="tux"/>
Aranjament vizual (layout) flexibil – flexbox
facilitează aranjarea elementelor de interfață
ghiduri & resurse:Flexbox in 5 minutes – http://flexboxin5.com/
Dimitar Stojanov, A Visual Guide to CSS3 Flexbox Properties (2015)https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
Chris Coyier, A Complete Guide to Flexbox (2016)https://css-tricks.com/snippets/css/a-guide-to-flexbox/
soluții utile oferite de Philip Walton, Solved by Flexboxhttps://philipwalton.github.io/solved-by-flexbox/
Flexbox Froggyexerciții amuzante pentru a învăța flexbox
flexboxfroggy.com
de experimentat și generatorul de cod Flexy Boxeshttp://the-echoplex.net/flexyboxes/
Care-s următorii pași
pentru a aprofunda CSS?
considerarea suportului oferit de browser pentru o anumită facilitate CSS
http://caniuse.com/
verificarea corectitudiniifolosind aplicațiile Web
W3C CSS Validatorhttps://jigsaw.w3.org/css-validator/
CSS Linthttp://csslint.net/
aici, un experiment disponibil online la Codepen.io
Sass (Syntactically Awesome StyleSheets) recurgerea la un preprocesor CSS pentru creșterea productivității
http://sass-lang.com/
studii de caz: thesassway.com
CSS @ Devdocshttp://devdocs.io/css/
Awesome CSSgithub.com/sotayamashita/awesome-css
Frontend Focus (HTML5 Weekly)html5weekly.com
Front-End Technologiesuptodate.frontendrescue.org
Sabin Buraga, Dezvoltarea aplicațiilor Web la nivel de client
profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Sabin Buraga, Proiectarea siturilor Web (ed. II), 2005www.slideshare.net/busaco/sabin-buraga-proiectarea-siturilor-web
surse fotografice:awkwardfamilyphotos.com onlyweirdpics.com www.angryduck.com
Foi de stiluri CSS
în contextul designului Web
Dr. Sabin Buraga
FII, UAIC – Iași, România
www.slideshare.net/busaco/
Recommended