Laborator: Foi de stiluri CSS

concepte esenţiale (...şi puţin mai mult)

Acest document reprezintă o colecţie de resurse – prezentări, exemple de cod-sursă, tutoriale etc. – pentru (re)familiarizarea şi aprofundarea cunoştinţelor de CSS, în contextul mai larg al designului Web.

Preliminarii

O serie de informaţii ce pot fi asimilate în prealabil, utile mai ales novicilor:

Tutorial CSS

Acest laborator are la bază prezentarea Foi de stiluri CSS:

Exemple CSS

Câteva exemplificări şi studii de caz ilustrând caracteristicile de bază ale foilor de stiluri în cascadă:

  1. Proprietăţi CSS declarate local via atributul style precizat pentru fiecare element HTML.

    alternativă: documentul HTML complet – de vizualizat codul sursă via opţiunea View Source a navigatorului Web sau – mai bine – de recurs la instrumentele dedicate dezvoltatorilor Web: Firefox Developer Tools (Mozilla), Chrome DevTools (Google), Edge DevTools (Microsoft) ori Safari Web Development Tools (Apple).

  2. Proprietăţi în antetul paginii Web.

    alternativă: varianta HTML completă (de explorat codul sursă).

  3. Cascada CSS – un exemplu simplu referitor la aplicarea proprietăţilor de redare în cascadă (sunt incluse 2 foi de stiluri, prima fiind oferită de Consorţiul Web, iar cealaltă disponibilă pe serverul unde e stocat documentul HTML, apoi se definesc via CSS maniere de afişare în antetul HTML, plus inline via atributul style precizat pentru un element <span>).

  4. Selectori CSS – specificarea unor proprietăţi CSS doar pentru anumite elemente HTML.

  5. Letrină în CSS – un experiment de utilizare a pseudo-elementelor.

  6. Formular Web redat via CSS – se recurge la selectare bazată pe numele atributelor, pseudo-clase şi pseudo-elemente; de asemenea, se folosesc diverse funcţii CSS predefinite.

  7. Formatarea unui tabel HTML – un exemplu ce adoptă alte metode de selectare oferite de CSS.

  8. Aranjament vizual cu CSS – exemplificarea utilizării proprietăţii display pentru a reda conţinutul în formă tabelară.

  9. Specificarea fundalului – se recurge la diverse proprietăţi vizând ajustarea fundalului (background), plus specificarea unei resurse via funcţia url().

  10. Alinieri, imagini, chenare CSS – un alt exemplu de "înfrumuseţare" a afişării datelor.

  11. Design (Web) responsiv – o prezentare referitoare la designul Web responsiv + tehnologiile aferente.

  12. Understanding Z-Index in CSS – un ghid vizual privitor la utilizarea proprietăţii z-index.

  13. Variabile (proprietăţi definite de utilizator) – exemplificarea folosirii funcţiilor var() şi calc().

  14. Aplicarea de efecte asupra imaginilor – o exemplificare de utilizare a filtrelor şi transformărilor 2D.

    alternativă: varianta HTML completă (de parcurs codul sursă).

    Detalii practice în articolul The World of CSS Transforms. Pentru aspecte mai avansate, a se studia tutorialul Advanced effects with CSS background blend modes care prezintă diverse detalii referitoare la facilităţile definite de specificaţia CSS Blend Modes.

  15. Animaţii simple – un exemplu de specificare declarativă a animaţiilor rulate ad infinitum + diverse exemplificări: Epic Spinners şi Animarea ilustraţiilor SVG cu CSS.

    alternativă: documentul HTML complet (de studiat codul sursă).

  16. An Interactive Guide to CSS Transitions – un ghid vizând realizarea de animaţii (mai) complexe via proprietatea transition.

  17. Aranjament vizual flexibil – un tutorial interactiv referitor la flexbox – a se parcurge şi A Complete Guide to Flexbox, plus tutorialul interactiv Learn Box Alignment.

  18. Caroiaje: CSS Grid – un ghid de utilizare practică + un studiu de caz concret: Rebuilding slack.com.

  19. The Shapes of CSS – redarea de forme geometrice 2D folosind exclusiv CSS.

Instrumente & studii de caz

O enumerare a unor instrumente de interes:

Soluţii de design Web doar cu CSS:

Metodologii: Understanding CSS Writing Methodologies – a se considera BEM (Block, Element, Modifier) şi/sau alte abordări.

🎨 Inspiraţie

Resurse utile

Pentru aprofundarea unor aspecte, recomandăm consultarea următoarelor: