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) ori Edge Developer Tools (Microsoft).

  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. Variabile (proprietăţi definite de utilizator) – exemplificarea folosirii funcţiilor var() şi calc().

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

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

    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.

  14. Animaţii simple – un exemplu de specificare declarativă a animaţiilor rulate ad infinitum + diverse exemplificări: Epic Spinners.

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

  15. Aranjament vizual flexibil – un tutorial interactiv referitor la flexbox – a se parcurge şi A Complete Guide to Flexbox.

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

  17. 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:

Inspiraţie:

✔ Resurse utile

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