Rezumatul modulului

×
Stilizarea documentului HTML
Introducere în CSS

 CSS (Cascading Style Sheets) este un limbaj care se foloseşte pentru a descrie semantica de
prezentare a documentului scris într-un limbaj descriptiv, aşa cum este HTML.
 Baza limbajului CSS o constituie regulile CSS (engl. CSS Rules).
 Regulile CSS sunt alcătuite din selector şi declaraţie.
 Selectorul CSS indică elementul (sau elementele), la care se referă regula CSS respectivă.
 Declaraţia CSS implementează stilizarea pentru elementul la care se referă regula CSS.
 CSS extern este acel cod CSS care se setează total separat de documentul HTML, într-un fișier
separat.
 CSS intern se află direct în documentul HTML, ale cărui elemente le stilizează.
 CSS Inline presupune definirea stilizării directe a elementului HTML folosind atributul style.

Selectori de bază CSS

 Pentru ca un element să fie stilizat folosind CSS, este necesar să se știe cum se ajunge la el,
respectiv a se efectua selectarea lui.
 Selectorul universal selectează toate elementele de pe pagină, sau toate elementele din cadrul
unui alt element şi se marchează cu caracterul asterisc (*).
 Selectorii de tip permit selectarea elementelor pe baza numelui, respectiv a tipului de element.
 Selectorul Class selectează elementele cu o anumită valoare a atributului class.
 Când valoarea atributului id se utilizează pentru selectarea elementelor, se vorbeşte despre
selectorul ID.
 Pentru a se selecta toţi descendenții unui element (direcţi și indirecţi), care îndeplinesc
anumite criterii, este suficient a crea un selector complex cu spaţiu între părțile selectorului.
 Atunci când trebuie să selectați doar descendenţii direcţi ai unui element, care îndeplinesc
anumite criterii, părţile selectorului se despart prin caracterul "mai mare decât".
 Selectarea primului element înrudit ce urmează, se face folosind caracterul plus (+),
pentru separarea unor părți ale unui selector complex.
 Selectarea tuturor elementelor înrudite următoare, care îndeplinesc anumite criterii, se
realizează cu selectorul, care este construit folosind caracterul tilda (~).

Selectori CSS avansaţi

 Pe lângă selectarea elementelor pe baza atributelor de bază id și class, CSS permite şi

selectarea elementelor pe baza oricărui alt atribut al elementului.
 Pseudoclasele sunt selectori care sunt folosiţi pentru a defini comportamentul elementului în
situații speciale.
 Pseudoclasele stării sunt un grup special de selectori care permit să se stilizeze diferite stări în
care se pot găsi elemente HTML.
 Pseudoclasele structurale permite selectarea elementelor pe baza structurii pe care ele o
construiesc reciproc.
 Pseudoelementele creează elemente noi care nu sunt specificate în structura documentului
HTML.
Stilizarea textului

 Tipografia este tehnica de prezentare a textului într-un mod inteligibil şi lizibil.

 Serif sunt fonturile caracterizate de detaliile de la capetele liniilor.
 Sans Serif sunt fonturile caracterizate de lipsa detaliilor pe care le au fonturile serif.
 Monospace sunt acele fonturi unde toate caracterele ocupă acelaşi spaţiu pe orizontală.
 Alegerea fontului pentru prezentarea textului unui element se face prin setarea
proprietății font-family.
 Selectarea dimensiunii textului se poate realiza prin utilizarea proprietății font-size.
 Culoarea textului în documentul HTML se poate modifica utilizând proprietatea color a regulii
CSS.
 Pentru crearea textului în caractere aldine/bold, este posibilă şi utilizarea proprietății CSS font-
weight.
 Pentru a formata un anumit text ca şi italic/cursiv, este posibil să se utilizeze proprietatea font-
style.
 Pentru alinierea orizontală a textului se foloseşte proprietatea text-align.
 Alinierea pe axa verticală se realizează utilizând proprietatea vertical-align.
 Indentarea textului poate fi realizată utilizând proprietatea text-indent.
 Pentru controlul spaţiului dintre caractere se foloseşte proprietatea letter-spacing, în timp ce
pentru a defini spațiul dintre cuvinte, se foloseşte proprietatea word-spacing.
 Pentru a defini înălțimea unei linii a textului se utilizează proprietatea line-height.
 Pentru setarea liniei care poate fi găsită sub, deasupra sau în mijlocul textului, se foloseşte
proprietatea text-decoration.
 Pentru transformarea textului, respectiv pentru convertirea majusculelor în minuscule şi invers,
se foloseşte proprietatea text-transform.

CSS Box Model

 Diviziunea de bază a tuturor elementelor HTML este inline şi block.

 Elementele block încep întotdeauna într-un rând nou și ocupă întreaga lățime disponibilă,
împingând celelalte elemente într-un rând nou.
 Elementele Inline sunt plasate unul lângă celălalt într-o linie, iar dimensiunile lor depind doar
de dimensiunile conținutului pe care îl dețin.
 Din punctul de vedere al CSS-ului, toate elementele HTML sunt tratate ca o cutie (box). Astfel,
în jurul fiecărui element HTML există un cadru imaginar care poate fi stilizat folosind CSS.
 Marginile sunt elemente care nu au o reprezentare vizuală şi se folosesc pentru a separa
elementul de alte elemente de pe pagină.
 Cadrele sunt elementele care definesc vizual limita unui element.
 Padding se foloseşte pentru separarea conţinutului elementului de cadrele sale.
 Height se referă la înălţimea conţinutului elementului.
 Width se referă la lăţimea conţinutului.
Crearea layout-ului

 Ca să aranjăm elementele pe pagină putem utiliza următoarele abordări: tabelele HTML , CSS,
CSS framework, CSS Flexbox.
 Fiecare element HTML poate fi poziționat într-unul din următoarele patru moduri: static,
relativ, absolut sau fix.
 Poziționarea statică este poziționarea implicită a elementelor HTML. Cu această
poziționare, elementele sunt aranjate după un flux normal în document.Elementul cu
poziționare relativă, este poziționat relativ în raport cu poziția sa normală pe care ar trebui să o
aibă dacă ar fi poziționat ca un element static.
 Un element este poziţionat absolut atunci când este poziționat relativ cu cel mai apropiat
predecesor care a fost poziționat în orice alt mod, în afara utilizării poziționării static.
 Poziționarea fixă permite ca elementul să fie poziționat relativ în raport cu afişajul (viewport)
browserului.
 Utilizând proprietatea float, putem să exportăm elementul din fluxul normal al documentului și
să-l poziționăm în extrema stângă sau în extrema dreaptă în cadrul containerului său părinte.
 Cu proprietatea clear se controlează comportamentul elementelor care se află în jurul
elementelor care sunt floated.
 Atunci când două elemente se suprapun, elementul care apare mai târziu în cod, va apărea
deasupra elementului vizual care a apărut anterior în cod. Totuşi, acest comportament implicit
poate fi influenţat cu proprietatea z-index.
 Proprietatea display poate avea şi alte valori cu care se defineşte tipul de cutie/box în care se
află elementul HTML.
 Proprietatea visibility permite ca un anumit element HTML să se ascundă, dar spațiul pe care îl
ocupă să rămână rezervat.
 CSS ne permite să definim ce se va întâmpla cu conținutul care depășește cadrul părintelui său,
folosind proprietatea overflow.

Flexbox Layout

 Flexbox Layout este destinat aranjării, centrării şi alinierii mai eficiente a elementelor în cadrul
elementelor container, părinte, chiar și atunci când dimensiunea acestor elemente nu este
cunoscută dinainte.
 Flex layout a fost conceput ca un mod alternativ modern de aranjare a componentelor,
folosind proprietatea float.
 Flexbox Layout distinge între două tipuri de componente: flex container, flex items,
iar containerul flex conţine elemente flexibile.
 Pentru a transforma un element într-un container flexbox, este suficient să definim
proprietatea display CSS, cu valoarea flex.
 Containerul Flexbox funcţionează pe baza a două axe: una principală, de-a lungul căreia sunt
distribuite elementele și alta secundară, așa-numita axă cross.
 Pentru a controla comportamentul containerului flexbox și al elementelor care se află în cadrul
acestuia, există un număr mare de proprietăți, dintre care unele pot fi definite pe elementul
container, iar altele pe elemente flexibile ale descendenților.
Responsive design

 Responsive design este o abordare a creării interfeţei utilizator a aplicaţiilor, astfel încât să se
afişeze adecvat pe orice dispozitiv (pe calculatoarele desktop, pe tablete și telefoane).
 Regula de bază pe care trebuie să o respectăm când creăm un layout adaptabil este să
acordăm prioritate unităților relative în raport cu cele absolute.
 Unităţile Viewport permit ca valorile să fie definite relativ la înălţimea şi lăţimea câmpului
vizual.
 Unitatea vw este relativă la lăţimea câmpului vizual.
 Unitatea vh este relativă la înălţimea câmpului vizual.
 Unitatea vmin este relativă la o dimensiune mai mică a câmpului vizual.
 Unitatea vmax este relativă la o dimensiune mai mare a câmpului vizual.
 Interogările media (engl. Media Query) permit ca anumite reguli CSS să fie aplicate numai în
cazul îndeplinirii unor condiții.

Transformările şi stilizările CSS

 Transformările permit transformarea elementului HTML influențând caracteristicile lor vizuale.

 Pentru a se deplasa elementul în raport cu poziția sa normală, se poate utiliza transformarea
translate.
 Metoda CSS rotate a proprietăţii transform permite rotaţia elementului.
 Pentru a mări și a micșora elementele HTML este posibil să se utilizeze metoda scale() a
proprietăţii transform.
 Metoda skewX() realizează înclinarea elementului pe axa x. Metoda skewY() face același lucru,
dar pe axa y, în timp ce metoda skew() poate realiza înclinarea elementului pe ambele axe.
 Metoda matrix acceptă 6 parametri și, astfel, permite definirea valorilor pentru toate
transformările dintr-o dată.
 Transformările 3D funcționează într-un mod similar cu transformările 2D prezentate, însă
acestea permit transformarea elementelor cu ajutorul unui sistem de coordonate cu trei axe.
 Atunci când schimbarea elementului se face uşor și treptat, într-o anumită perioadă de timp,
este vorba de tranziție.