Questo corso suddivide i concetti fondamentali di CSS in parti chiare e digeribili. Nei prossimi moduli scoprirai come funzionano gli aspetti principali del CSS e come utilizzarli in modo efficace nei tuoi progetti. Usa il riquadro dei menu accanto al logo "Impara CSS" per spostarti all'interno dei moduli.
Imparerai i concetti fondamentali di CSS, come modello box, cascade e specificità, flexbox, griglia e z-index. Scoprirai inoltre funzioni, tipi di colore, gradienti, proprietà logiche ed ereditarietà per diventare uno sviluppatore frontend completo, pronto a utilizzare qualsiasi interfaccia utente.
Ogni modulo è ricco di demo interattive e autovalutazioni per testare le tue conoscenze. Oltre all'apprendimento attraverso la lettura e le dimostrazioni, c'è un episodio del podcast che accompagna ogni argomento e offre un ulteriore modo per imparare e continuare ad ampliare le tue conoscenze.
Questo corso è stato creato per gli sviluppatori CSS principianti e avanzati. Puoi esaminare la serie dall'inizio alla fine per acquisire una conoscenza generale di CSS dall'alto verso il basso oppure utilizzarla come riferimento per specifici argomenti di stile. Per chi non ha familiarità con lo sviluppo web in generale, consulta Impara HTML per sapere come scrivere markup e collegare fogli di stile.
Ecco cosa imparerai:
Modello di scatola
Poiché tutto ciò che viene visualizzato da CSS è un riquadro, comprendere come funziona il modello Box CSS è una base fondamentale del CSS.
Selettori
Per applicare il codice CSS a un elemento, devi selezionarlo. CSS ti offre vari modi per eseguire questa operazione e puoi esplorarli in questo modulo.
La cascata
A volte a un elemento possono essere applicate due o più regole CSS in competizione. Scopri come il browser sceglie quali funzionalità usare e come controllare questa selezione.
Specificità
Questo modulo analizza più da vicino la specificità, una parte fondamentale del processo a cascata.
Ereditarietà
Alcune proprietà CSS ereditano se non specifichi un valore per queste proprietà. Scopri come funziona e come sfruttarlo a tuo vantaggio in questo modulo.
Colore
Esistono diversi modi per specificare un colore in CSS. Questo modulo esamina i valori dei colori più utilizzati.
Unità di misura
Scopri come ridimensionare gli elementi utilizzando CSS, lavorando con il mezzo flessibile del web.
Layout
Una panoramica dei vari metodi di layout tra cui scegliere durante la creazione di un componente o di un layout di pagina.
Flexbox
Flexbox è un meccanismo di layout progettato per disporre gruppi di elementi in un'unica dimensione. Scopri come utilizzarlo in questo modulo.
Griglia
Il layout griglia CSS offre 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 a CSS.
Spaziatura
Scopri come selezionare il metodo migliore di spaziatura tra gli elementi per il metodo di layout in uso e il componente che stai creando.
Pseudo-elementi
Uno pseudo-elemento è come l'aggiunta o il targeting di un elemento aggiuntivo senza dover aggiungere altro HTML. Hanno una varietà di ruoli e puoi scoprirli in questo modulo.
Pseudo-classi
Le pseudo-classi consentono di applicare il codice CSS in base alle modifiche dello stato. Ciò significa che il tuo design può reagire all'input dell'utente, ad esempio a un indirizzo email non valido.
Bordi
Un bordo fornisce una cornice per i tuoi riquadri. Scopri come modificare le dimensioni, lo stile e il colore dei bordi utilizzando CSS.
Ombre
Esistono diversi modi per aggiungere ombre a testo ed elementi in CSS. Scopri come utilizzare ciascuna opzione e le attività per le quali sono state progettate.
Messa a fuoco
Comprendi l'importanza di concentrarsi nelle applicazioni web. Imparerai a gestire lo stato attivo e ad assicurarti che il percorso nella pagina funzioni sia per gli utenti che utilizzano un mouse sia per quelli che utilizzano la tastiera per la navigazione.
Contesto Z-index e stack
Scopri come controllare l'ordine in cui gli elementi si sovrappongono l'uno sull'altro utilizzando z-index e il contesto di stack.
Funzioni
CSS offre una serie di funzioni integrate. Scopri alcune delle funzioni chiave e come utilizzarle.
Gradienti
In questo modulo scoprirai come utilizzare i vari tipi di gradiente disponibili in CSS. I gradienti possono creare tutta una serie di effetti utili, senza bisogno di app grafiche per creare immagini.
Animazioni
L'animazione è un ottimo modo per evidenziare 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 consentono di applicare effetti che potresti considerare solo possibili in un'applicazione grafica. In questo modulo imparerai a conoscere le risorse disponibili.
Modalità 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
Un elenco, strutturalmente, è composto da un elemento container elenco riempito con elementi di elenco. In questo modulo imparerai come applicare gli stili a tutte le parti di 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 dell'utente.
Riversamento
L'overflow è il modo in cui gestisci i contenuti che non rientrano in una dimensione principale impostata. In questo modulo penserai fuori dagli schemi e imparerai ad applicare uno stile ai contenuti in eccesso.
Sfondi
Scopri come applicare uno stile agli sfondi delle caselle utilizzando CSS.
Testo e tipografia
Scopri come applicare uno stile al testo sul web.
Conclusione e passaggi successivi
Ulteriori risorse per aiutarti a intraprendere i prossimi passi.
Vuoi iniziare a imparare i CSS? Iniziamo.