foi de stiluri css – concepte esențiale (...și puțin mai mult)

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




poziționare (position) – relativă ori absolutălățime (width)

înălțime (height)strat de redare (z-index)




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 – 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

<link href="../CSS/default"media="screen, projection, tv" rel="stylesheet" title="Tema implicită" />

<link href="../CSS/green"

media="screen, projection, tv" rel="alternate stylesheet" title="Verde" />

<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><link rel="stylesheet" type="text/css"

href="https://www.w3.org/StyleSheets/base.css" /><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


toate elementele:

* { margin: 0;

}

pentru valori nule nu trebuie precizată unitatea de măsură

selectori CSS


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


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


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;


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


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


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


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;

}


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/

foi de stiluri css – concepte esențiale (...și puțin mai mult)

Technology