I CSS (Cascading Style Sheets) sono utilizzati per applicare stili e impaginazione delle pagine web — per esempio modificare i caratteri, colori, dimensioni e spaziature dei contenuti, dividerli in colonne o aggiungere animazioni e altre caratteristiche decorative. Questo modulo inizia il tuo percorso di conoscenza del CSS a partire da come funziona il CSS, cosa sono selettori e proprietà, come si scrivono le regole CSS e come si applicano all’HTML, come si specificano dimensioni, colori e altre unità in CSS, cos’è l’ereditarietà e il cascade, fino a come fare debugging del CSS.

Prerequisiti

Prima di cominciare questo modulo, verifica di avere:

  1. Una familiarità di base con l’uso dei computer, e del Web (nel senso di uso passivo, cioè di consumarne contenuti navigando)
  2. Un ambiente di lavoro di base come descritto in dettaglio in Installazione del software di base, e una conoscenza di come creare e gestire file, come descritto in dettaglio in Gestire i file.
  3. Una familiarità di base con l’HTML, come già spiegato nel modulo di Introduzione all’HTML.

Nota: Se lavori da un computer/tablet/ o altro disposito che non ti permetta di creare file propri, puoi provare a mettere in pratica gran parte del codice di esempio di un ambiente di sviluppo online come per esempio JSBin (in Inglese) o Thimble.

Guide

Questo modulo contiene articoli che ti porteranno a scoprire la teoria di base del CSS, fornendo ampie opportunità per mettere alla prova le tue conoscenze.

Come funziona il CSS
In questo modulo iniziamo con un po’ di basi teoriche, imparando cos’è il CSS, come un browser trasforma l’HTML nel DOM, come viene applicato il CSS alle diverse componenti del DOM, alcuni esempi di base della sintassi e che codice utilizziamo per includere il CSS all’interno delle nostre pagine web.
Sintassi CSS
Subito dopo, entriamo nel dettaglio del CSS imparando come le proprietà e i loro valori formino una dichiarazione CSS, come dichiarazioni multiple formino un blocco di dichiarazioni, e come blocchi di dichiarazioni e selettori formino una regola CSS completa. Per finire, vedremo altre caratteristiche CSS come commenti e gestione della spaziatura.
Selettori
Abbiamo già citato i selettori nell’articolo precedente; in questa guida vediamo in dettaglio quali tipi di selettori sono disponibili e come funzionano.
Valori e unità di misura CSS
Esistono diversi tipi di valori per le proprietà CSS, da quelli numerici ai colori, fino alle funzioni che implementano comportamenti specifici (come includere un’immagine di sfondo o ruotare un elemento). Alcuni di questi valori fanno riferimento a unità specifiche per dichiarare il valore esatto che rappresentano — questo elemento deve essere di 30 pixels di larghezza, 30 centimetri, o 30 ems? In questa guida prendiamo in esame le tipologie più comuni, come lunghezze, colori e funzioni più semplici, senza dimenticare di esplorare unità meno comuni, come gradi o valori numerici senza unità di riferimento.
Cascade e ereditarietà
Il CSS dispone di due sistemi diversi ma correlati per risolvere situazioni in cui esiste un conflitto tra selettori (è il caso in cui selettori diversi si applicano allo stesso elemento: quale vince e risulta effettivamente applicato?) e quello in cui un elemento è annidato all’interno di altri elementi (per cui alcuni degli stili applicati agli elementi padre ha senso che vengano ereditati dai figli, mentre altri no). Questo articolo esamina entrambi i sistemi in modo sufficientemente dettagliato per essere utile, ma non tanto da risultare eccessivamente faticoso.
Il box model
Il box model CSS (che chiameremo in inglese per coerenza con la documentazione originale) è alla base dell’impaginazione sul Web — ogni elemento è rappresentato da un box rettangolare, con il contenuto del box, il padding (la spaziatura interna), il bordo, e i margini costruiti come anelli concentrici simili agli strati di una cipolla. Quando un browser renderizza una pagina web calcola quali stili sono applicati al contenuto di ogni box, le dimensioni degli strati concentrici e dove si colloca lo specifico box in relazione agli altri presenti in pagina. Prima di capire come creare impaginazioni CSS è necessario padroneggiare il box model.
CSS Debugging
Nell’ultimo articolo di questo modulo prendiamo in esame le nozioni di base di debugging CSS, dall’analisi di quale CSS è effettivamente applicato a una pagina agli strumenti che ci aiutano a identificare errori CSS.

Valutazione

I test di valutazione seguenti testano la comprensione dei fondamentali CSS descritti nelle guide precedenti.

Comprensione di base del CSS
Questo test di valutazione esamina la comprensione delle guide precedenti con alcuni esercizi appositamente costruiti.

Vedi anche

Competenza Web Intermedia 1: Introduzione al CSS
Un eccellente corso di base di Mozilla che esplora e esamina molte delle competenze discusse in Introduzione ai moduli CSS. Impara come stilizzare gli elementi HTML di una pagina web, i selettori CSS, gli attributi e i valori.

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: therealpecus, chrisdavidmills
Ultima modifica di: therealpecus,