Questo corso suddivide i concetti fondamentali dei CSS in parti chiare e comprensibili. Nei prossimi moduli imparerai come funzionano gli aspetti principali di CSS e come utilizzarli in modo efficace nei tuoi progetti. Utilizza il riquadro del menu accanto al logo "Learn CSS" per navigare tra i moduli.
Imparerai le nozioni di base di CSS, come il modello a scatola, la cascata e la specificità, flexbox, griglia e z-index. Imparerai anche a conoscere funzioni, tipi di colore, sfumature, proprietà logiche ed ereditarietà per diventare uno sviluppatore frontend completo, pronto ad affrontare qualsiasi interfaccia utente.
Ogni modulo è ricco di demo interattive e autovalutazioni per mettere alla prova le tue conoscenze. Oltre a imparare attraverso la lettura e le demo, per ogni argomento è disponibile un episodio di podcast che ti offre un altro modo per apprendere e continuare ad ampliare le tue conoscenze.
Questo corso è stato creato per sviluppatori CSS principianti e avanzati. Puoi seguire la serie dall'inizio alla fine per acquisire una comprensione generale del CSS dall'alto verso il basso oppure puoi utilizzarla come riferimento per argomenti di stile specifici. Per chi non ha esperienza di sviluppo web, consulta Learn HTML per scoprire come scrivere il markup e collegare i fogli di stile.
Ecco cosa imparerai:
Modello Box
Poiché tutto ciò che viene visualizzato in CSS è una casella, capire come funziona il modello di casella CSS è un elemento fondamentale di CSS.
Selettori
Per applicare il CSS a un elemento, devi selezionarlo. Il CSS ti offre diversi modi per farlo e puoi esplorarli in questo modulo.
Nesting
L'annidamento delle regole di stile CSS può rendere i fogli di stile più organizzati, più facili da leggere e più gestibili.
La cascata
A volte, a un elemento possono essere applicate due o più regole CSS in competizione. Scopri come il browser sceglie quale utilizzare e come controllare questa selezione.
Specificità
Questo modulo esamina più da vicino la specificità, una parte fondamentale della cascata.
Ereditarietà
Alcune proprietà CSS vengono ereditate se non specifichi un valore. Scopri come funziona e come utilizzarlo a tuo vantaggio in questo modulo.
Colore
Esistono diversi modi per specificare il colore in CSS. Questo modulo esamina i valori di colore più comunemente utilizzati.
Unità di misura
Scopri come dimensionare gli elementi utilizzando CSS, lavorando con il mezzo flessibile del web.
Layout
Una panoramica dei vari metodi di layout tra cui scegliere quando crei un layout di componente o di pagina.
Flexbox
Flexbox è un meccanismo di layout progettato per disporre gruppi di elementi in una dimensione. Scopri come utilizzarlo in questo modulo.
Griglia
CSS Grid Layout fornisce un sistema di layout bidimensionale, che controlla il layout in righe e colonne. Scopri tutto ciò che la griglia ha da offrire.
Proprietà logiche
Le proprietà e i valori logici relativi al flusso sono collegati al flusso di testo, non alla forma fisica dello schermo. Scopri come sfruttare questo nuovo approccio al CSS.
Proprietà personalizzate
Le proprietà personalizzate, o variabili CSS, ti consentono di organizzare e riutilizzare i valori nel CSS, in modo che gli stili siano più flessibili e più facili da comprendere.
Spaziatura
Scopri come selezionare il metodo migliore per spaziare gli elementi per il metodo di layout che utilizzi e il componente che stai creando.
Pseudo-elementi
Uno pseudo-elemento è come aggiungere o scegliere come target un elemento aggiuntivo senza dover aggiungere altro codice HTML. Hanno una serie di ruoli e puoi scoprirli in questo modulo.
Pseudo-classi
Le pseudo-classi ti consentono di applicare CSS in base alle modifiche dello stato. Ciò significa che il tuo design può reagire all'input dell'utente, ad esempio un indirizzo email non valido.
Bordi
Un bordo fornisce una cornice per le caselle. Scopri come modificare le dimensioni, lo stile e il colore dei bordi utilizzando CSS.
Ombre
Esistono diversi modi per aggiungere ombreggiature a testo ed elementi in CSS. Scopri come utilizzare ogni opzione e le attività per cui sono state progettate.
Messa a fuoco
Comprendi l'importanza della messa a fuoco nelle tue applicazioni web. Imparerai a gestire lo stato attivo e a fare in modo che il percorso nella pagina funzioni sia per le persone che utilizzano un mouse sia per quelle che utilizzano la tastiera per navigare.
Cursori e puntatori
Il cursore è un modo essenziale per consentire agli utenti di sapere con cosa stanno interagendo. In questo modulo, scopri come personalizzare i cursori in circostanze specifiche.
Z-index e contesti di impilamento
Scopri come controllare l'ordine in cui gli elementi si sovrappongono l'uno all'altro utilizzando l'indice z e il contesto di sovrapposizione.
Posizionamento dell'ancoraggio
Il posizionamento dell'ancora CSS consente di posizionare in modo dichiarativo un elemento rispetto a un altro elemento.
Popover e finestra di dialogo
Un popover è qualsiasi elemento con un attributo popover ed è utile per un'ampia gamma di pattern interattivi, tra cui suggerimenti, avvisi, toast e altro ancora.
Funzioni
CSS ha una serie di funzioni integrate. Scopri alcune delle funzioni principali e come utilizzarle.
Tracciati, forme, ritaglio e mascheratura
Tracciati, forme, ritaglio e mascheramento consentono agli sviluppatori di eseguire il rendering di forme complesse in CSS tramite una serie di funzioni che possono creare esperienze memorabili per gli utenti.
Gradienti
In questo modulo scoprirai come utilizzare i vari tipi di sfumature disponibili in CSS. I gradienti possono creare una serie di effetti utili, senza la necessità di app grafiche per creare immagini.
Animazioni
L'animazione è un ottimo modo per evidenziare gli elementi interattivi e aggiungere interesse e divertimento ai tuoi progetti. Scopri come aggiungere e controllare gli effetti di animazione con CSS.
Filtri
I filtri in CSS ti consentono di applicare effetti che potresti pensare siano possibili solo in un'applicazione grafica. In questo modulo puoi scoprire cosa è disponibile.
Metodi di fusione
Crea effetti compositivi mescolando due o più livelli e scopri come isolare un'immagine con uno sfondo bianco in questo modulo sulle modalità di fusione.
Elenchi
A livello strutturale, un elenco è composto da un elemento contenitore di elenco riempito con elementi di elenco. In questo modulo imparerai a definire lo stile di tutte le parti di un elenco.
Contatori
Il CSS offre diversi modi per controllare i contatori in un elenco per diversi casi d'uso. In questo modulo imparerai a controllare i contatori in un elenco.
Transizioni
Scopri come definire le transizioni tra gli stati di un elemento. Utilizza le transizioni per migliorare l'esperienza utente fornendo un feedback visivo per l'interazione utente.
Visualizzare le transizioni per le SPA
Le transizioni di visualizzazione ti consentono di mostrare la continuità o il contesto tra le pagine della tua SPA.
Overflow
L'overflow è il modo in cui gestisci i contenuti che non rientrano in una dimensione principale impostata. In questo modulo imparerai a pensare fuori dagli schemi e a dare uno stile ai contenuti in overflow.
Sfondi
Scopri come applicare uno stile agli sfondi delle caselle utilizzando CSS.
Testo e tipografia
Scopri come formattare il testo sul web.
Query container
A differenza delle media query, le container query ti consentono di apportare modifiche più specifiche agli elementi in base alle dimensioni e allo stato dei relativi elementi principali o contenitori.
Conclusioni e passaggi successivi
Altre risorse per aiutarti a compiere i prossimi passi.
Allora, sei pronto a imparare CSS? Iniziamo.