CSS (Cascading Style Sheets)Linguaggio per stilizzare pagine web
1. Concetti Base
  1. Cos'è: CSS (Cascading Style Sheets) è un linguaggio di stile utilizzato per descrivere la presentazione di un documento scritto in HTML o XML.
  2. A cosa serve: Serve a separare il contenuto (HTML) dalla presentazione, permettendo di controllare layout, colori, font e altri aspetti visivi di una pagina web.
  3. Quando usarlo: Quando devi definire lo stile e il layout di pagine web.
SelectorsLinguaggio per stilizzare pagine web
1. Concetti Base
  1. Cos'è: I selettori CSS sono pattern utilizzati per selezionare e stilizzare uno o più elementi HTML in una pagina web.
  2. A cosa serve: Servono a identificare specifici elementi HTML a cui applicare regole di stile, permettendo una personalizzazione precisa e mirata del layout e dell'aspetto della pagina.
  3. Quando usarlo: Quando devi selezionare elementi specifici per l'applicazione di stili.
ColorProprietà per definire il colore degli elementi
1. Concetti Base
  1. Cos'è: La proprietà CSS 'color' definisce il colore del testo e di alcuni bordi decorativi degli elementi HTML.
  2. A cosa serve: Serve a controllare l'aspetto cromatico del contenuto testuale e di alcuni elementi decorativi, migliorando la leggibilità e l'estetica della pagina web.
  3. Quando usarlo: Quando devi definire il colore del testo.
BackgroundProprietà per definire lo sfondo degli elementi
1. Concetti Base
  1. Cos'è: La proprietà CSS 'background' è una shorthand che permette di definire tutti gli aspetti dello sfondo di un elemento in un'unica dichiarazione.
  2. A cosa serve: Serve a controllare l'aspetto dello sfondo degli elementi HTML, permettendo di creare design visivamente accattivanti e migliorare l'estetica complessiva della pagina web.
  3. Quando usarlo: Quando devi impostare colori di sfondo.
Font-FamilyProprietà per definire i caratteri tipografici
1. Concetti Base
  1. Cos'è: La proprietà CSS 'font-family' specifica la famiglia di caratteri (o una lista prioritizzata di famiglie) da utilizzare per un elemento selezionato.
  2. A cosa serve: Serve a controllare l'aspetto tipografico del testo, influenzando la leggibilità, lo stile e l'atmosfera complessiva del design di una pagina web.
  3. Quando usarlo: Quando devi definire il tipo di carattere principale per il testo.
Text-AlignProprietà per allineare il testo orizzontalmente
1. Concetti Base
  1. Cos'è: La proprietà CSS 'text-align' specifica l'allineamento orizzontale del testo all'interno di un elemento blocco o di una cella di tabella.
  2. A cosa serve: Serve a controllare la disposizione orizzontale del testo, migliorando la leggibilità e l'organizzazione visiva del contenuto all'interno di un elemento.
  3. Quando usarlo: Quando devi allineare il testo a sinistra, a destra, al centro o giustificarlo.
MarginProprietà per definire lo spazio esterno agli elementi
1. Concetti Base
  1. Cos'è: La proprietà CSS 'margin' controlla lo spazio esterno attorno a un elemento, creando una distanza tra il bordo dell'elemento e gli elementi adiacenti.
  2. A cosa serve: Serve a gestire la spaziatura e il layout degli elementi in una pagina, permettendo di creare una separazione visiva e migliorare la leggibilità e l'organizzazione del contenuto.
  3. Quando usarlo: Quando devi creare spazio tra elementi adiacenti.
PaddingProprietà per definire lo spazio interno agli elementi
1. Concetti Base
  1. Cos'è: La proprietà CSS 'padding' controlla lo spazio interno di un elemento, creando una distanza tra il contenuto dell'elemento e il suo bordo.
  2. A cosa serve: Serve a gestire la spaziatura interna degli elementi, migliorando la leggibilità del contenuto e l'estetica complessiva del layout.
  3. Quando usarlo: Quando devi creare spazio attorno al contenuto all'interno di un elemento.
BorderProprietà per definire i bordi degli elementi
1. Concetti Base
  1. Cos'è: La proprietà CSS 'border' è una shorthand che permette di definire lo stile, la larghezza e il colore del bordo di un elemento in un'unica dichiarazione.
  2. A cosa serve: Serve a creare e personalizzare i bordi degli elementi, migliorando l'aspetto visivo, definendo confini e creando separazioni tra elementi diversi.
  3. Quando usarlo: Quando devi definire visivamente i confini di un elemento.
Box ModelModello di layout per elementi HTML
1. Concetti Intermedi
  1. Cos'è: Il CSS Box Model è un concetto fondamentale che descrive come gli elementi HTML sono rappresentati come box rettangolari, composti da content, padding, border e margin.
  2. A cosa serve: Serve a definire la struttura e il layout degli elementi in una pagina web, controllando le dimensioni, lo spazio interno ed esterno, e i bordi di ogni elemento.
  3. Quando usarlo: Quando devi calcolare le dimensioni effettive degli elementi.
SpecificityMeccanismo di priorità dei selettori CSS
1. Concetti Intermedi
  1. Cos'è: La specificità in CSS è un algoritmo che determina quale regola di stile viene applicata a un elemento quando più regole competono per lo stesso.
  2. A cosa serve: Serve a risolvere conflitti tra regole CSS sovrapposte, garantendo che le proprietà più specifiche o importanti abbiano la precedenza.
  3. Quando usarlo: Quando devi determinare quale stile viene applicato in caso di conflitto.
InheritanceMeccanismo di trasmissione delle proprietà CSS
1. Concetti Intermedi
  1. Cos'è: L'ereditarietà in CSS è un meccanismo attraverso il quale le proprietà di un elemento genitore vengono trasmesse ai suoi elementi figli, a meno che non siano esplicitamente...
  2. A cosa serve: Serve a semplificare la scrittura del CSS, permettendo di definire stili a livello più alto nella gerarchia del DOM e lasciando che questi si propaghino naturalmente agli elementi...
  3. Quando usarlo: Quando devi applicare stili coerenti a gruppi di elementi correlati.
CascadeAlgoritmo di risoluzione dei conflitti CSS
1. Concetti Intermedi
  1. Cos'è: La cascata in CSS è l'algoritmo che determina quali regole di stile vengono applicate a un elemento quando esistono più regole in conflitto.
  2. A cosa serve: Serve a risolvere conflitti tra dichiarazioni CSS multiple, stabilendo un ordine di priorità basato su origine, specificità e ordine di apparizione delle regole.
  3. Quando usarlo: Quando devi determinare quale stile viene applicato in caso di regole sovrapposte.
Units of MeasurementUnità per esprimere dimensioni e valori in CSS
1. Concetti Intermedi
  1. Cos'è: Le unità di misura in CSS sono valori utilizzati per specificare dimensioni, distanze e altre proprietà numeriche degli elementi in una pagina web.
  2. A cosa serve: Servono a definire in modo preciso e flessibile le dimensioni e le proporzioni degli elementi, consentendo layout responsivi e adattabili a diversi dispositivi e contesti di...
  3. Quando usarlo: Quando devi definire dimensioni di elementi (larghezza, altezza, margini, padding).
Shorthand PropertiesProprietà CSS che combinano più valori in una singola dichiarazione
1. Concetti Intermedi
  1. Cos'è: Le proprietà abbreviate (shorthand properties) in CSS sono proprietà che permettono di impostare i valori di più proprietà correlate in un'unica dichiarazione, semplificando e...
  2. A cosa serve: Servono a rendere il codice CSS più conciso, leggibile e facile da mantenere, riducendo la ripetizione e permettendo una rapida definizione di stili complessi.
  3. Quando usarlo: Quando devi definire rapidamente stili per bordi, margini, padding e font.
Custom PropertiesVariabili definite dall'utente per valori CSS riutilizzabili
1. Concetti Avanzati
  1. Cos'è: Le Custom Properties, anche note come variabili CSS, sono entità definite dall'utente che contengono valori specifici da riutilizzare all'interno di un documento CSS.
  2. A cosa serve: Servono a creare valori riutilizzabili in CSS, migliorando la manutenibilità, la coerenza e la flessibilità del codice, permettendo anche modifiche dinamiche attraverso JavaScript.
  3. Quando usarlo: Quando devi definire colori, dimensioni e altri valori riutilizzabili.
CSS VariablesVariabili native di CSS per valori riutilizzabili e dinamici
1. Concetti Avanzati
  1. Cos'è: Le CSS Variables, ufficialmente chiamate Custom Properties, sono entità che permettono di memorizzare valori specifici da riutilizzare in tutto un documento CSS, offrendo...
  2. A cosa serve: Servono a creare codice CSS più manutenibile, modulare e dinamico, permettendo di definire valori una volta e riutilizzarli in tutto il foglio di stile, con la possibilità di...
  3. Quando usarlo: Quando devi centralizzare la definizione di colori, dimensioni e altri valori ripetuti.
Calc()Funzione CSS per calcoli dinamici di valori
1. Concetti Avanzati
  1. Cos'è: La funzione calc() in CSS permette di eseguire calcoli matematici per determinare valori di proprietà CSS, consentendo l'uso di operazioni aritmetiche con unità di misura diverse.
  2. A cosa serve: Serve a creare layout flessibili e responsivi, combinando unità di misura diverse e permettendo calcoli dinamici che non sarebbero possibili con valori statici.
  3. Quando usarlo: Quando devi combinare unità di misura diverse (es.
Element SelectorSelettore CSS per il target di elementi HTML specifici
2. Selettori e Combinatori Base
  1. Cos'è: Un selettore di elemento in CSS è un tipo di selettore per il target di tutti gli elementi HTML di un tipo specifico in un documento.
  2. A cosa serve: Serve a applicare stili a tutti gli elementi di un determinato tipo HTML, fornendo una base per la formattazione generale del documento.
  3. Quando usarlo: Quando devi definire stili di base per elementi HTML comuni.
Class SelectorSelettore CSS per il target degli elementi con una classe specifica
2. Selettori e Combinatori Base
  1. Cos'è: Un selettore di classe in CSS è un tipo di selettore per il target di elementi HTML che hanno un attributo class specifico.
  2. A cosa serve: Serve a applicare stili a gruppi specifici di elementi, indipendentemente dal loro tipo HTML, permettendo una maggiore flessibilità e riusabilità nel design.
  3. Quando usarlo: Quando devi applicare stili a gruppi specifici di elementi.
ID SelectorSelettore CSS per il target di un elemento con un ID specifico
2. Selettori e Combinatori Base
  1. Cos'è: Un selettore di ID in CSS è un tipo di selettore per il target di un elemento HTML specifico e unico che ha un attributo id corrispondente.
  2. A cosa serve: Serve a applicare stili a un elemento unico e specifico all'interno di una pagina HTML, permettendo una personalizzazione mirata e ad alta specificità.
  3. Quando usarlo: Quando devi stilizzare elementi unici come header, footer, o sidebar.
Descendant SelectorSelettore CSS per il target di elementi annidati all'interno di altri elementi
2. Selettori e Combinatori Intermedi
  1. Cos'è: Un selettore discendente in CSS è un tipo di selettore per il target di elementi che sono discendenti (figli, nipoti, ecc.) di un altro elemento specificato, indipendentemente dal...
  2. A cosa serve: Serve a applicare stili a elementi specifici basandosi sulla loro posizione nella struttura del documento HTML, permettendo una maggiore precisione e controllo nella stilizzazione.
  3. Quando usarlo: Quando devi stilizzare elementi all'interno di contenitori specifici.
Pseudo-classesSelettori CSS per il target di elementi in stati o condizioni specifiche
2. Selettori e Combinatori Intermedi
  1. Cos'è: Le pseudo-classi in CSS sono parole chiave che possono essere aggiunte ai selettori per specificare uno stato particolare o una relazione degli elementi selezionati.
  2. A cosa serve: Servono a applicare stili a elementi in condizioni specifiche o stati particolari, permettendo una maggiore interattività e dinamicità senza la necessità di modificare il markup...
  3. Quando usarlo: Quando devi stilizzare elementi in stati di interazione (hover, focus, active).
Pseudo-elementsSelettori CSS per il target di parti specifiche di un elemento o per la creazione di contenuti virtuali
2. Selettori e Combinatori Intermedi
  1. Cos'è: I pseudo-elementi in CSS sono parole chiave che possono essere aggiunte ai selettori per stilizzare parti specifiche di un elemento o per creare contenuti virtuali senza...
  2. A cosa serve: Servono a manipolare e stilizzare parti di un elemento che non sono direttamente accessibili tramite il DOM, o per aggiungere contenuti decorativi senza alterare la struttura HTML.
  3. Quando usarlo: Quando devi stilizzare la prima lettera o riga di un elemento di testo.
CombinatorsSelettori CSS per il target di elementi basato sulla loro relazione nel DOM
2. Selettori e Combinatori Avanzati
  1. Cos'è: I combinatori in CSS sono simboli speciali utilizzati per esprimere relazioni tra selettori, permettendo di selezionare elementi in base alla loro posizione nel Document Object...
  2. A cosa serve: Servono a creare selettori più precisi e potenti, consentendo di applicare stili a elementi basati sulla loro relazione strutturale con altri elementi, senza la necessità di...
  3. Quando usarlo: Quando devi selezionare elementi figli diretti di un elemento genitore.
Attribute SelectorsSelettori CSS per il target di elementi basato sui loro attributi HTML
2. Selettori e Combinatori Avanzati
  1. Cos'è: I selettori di attributo in CSS sono selettori speciali che permettono di selezionare elementi HTML basandosi sulla presenza o sul valore dei loro attributi.
  2. A cosa serve: Servono a applicare stili a elementi con attributi specifici o valori di attributi particolari, offrendo una maggiore flessibilità e precisione nella selezione degli elementi...
  3. Quando usarlo: Quando devi selezionare elementi con attributi specifici.
:Not()Pseudo-classe CSS per il target di elementi che non corrispondono a un selettore specifico
2. Selettori e Combinatori Avanzati
  1. Cos'è: not() è una pseudo-classe in CSS che seleziona elementi che non corrispondono a un selettore o a una lista di selettori specificati come argomento.
  2. A cosa serve: Serve a escludere elementi specifici da una selezione, permettendo di applicare stili a tutti gli elementi tranne quelli che soddisfano determinati criteri.
  3. Quando usarlo: Quando devi applicare stili a tutti gli elementi tranne quelli specificati.
DisplayProprietà CSS per il controllo del comportamento di rendering degli elementi
3. Layout e Posizionamento Base
  1. Cos'è: La proprietà display in CSS determina come un elemento deve essere visualizzato nel layout di una pagina, definendo il suo comportamento di rendering e il suo ruolo nel flusso del...
  2. A cosa serve: Serve a controllare il tipo di box di rendering generato da un elemento, influenzando il suo posizionamento, la sua interazione con altri elementi e il suo comportamento nel...
  3. Quando usarlo: Quando devi definire se un elemento è trattato come blocco o inline.
BlockValore della proprietà display per la creazione di box a livello di blocco
3. Layout e Posizionamento Base
  1. Cos'è: Block è un valore della proprietà display in CSS che crea un box a livello di blocco, occupando tutto lo spazio orizzontale disponibile e iniziando su una nuova riga.
  2. A cosa serve: Serve a creare elementi che formano blocchi distinti nel layout, controllando il flusso del documento e fornendo una base per la strutturazione del contenuto della pagina.
  3. Quando usarlo: Quando devi creare sezioni distinte nel layout della pagina.
InlineValore della proprietà display per la creazione di elementi in linea con il testo
3. Layout e Posizionamento Base
  1. Cos'è: Inline è un valore della proprietà display in CSS che crea un box inline, permettendo all'elemento di fluire con il testo circostante e di occupare solo lo spazio necessario al...
  2. A cosa serve: Serve a creare elementi che si comportano come parte del flusso del testo, consentendo di incorporare contenuti all'interno di paragrafi o altri blocchi di testo senza...
  3. Quando usarlo: Quando devi incorporare elementi all'interno di linee di testo.
Inline-blockValore della proprietà display che combina caratteristiche di elementi inline e block
3. Layout e Posizionamento Base
  1. Cos'è: Inline-block è un valore della proprietà display in CSS che crea un box che è inline (scorre con il testo circostante) ma si comporta come un elemento block in termini di...
  2. A cosa serve: Serve a creare elementi che fluiscono come testo inline ma mantengono le caratteristiche di formattazione dei blocchi, permettendo layout flessibili e il controllo preciso delle...
  3. Quando usarlo: Quando devi creare layout orizzontali con elementi dimensionabili.
NoneValore della proprietà display per nascondere completamente un elemento dal rendering
3. Layout e Posizionamento Base
  1. Cos'è: None è un valore della proprietà display in CSS che rimuove completamente l'elemento dal flusso del documento, facendo sì che non venga renderizzato e non occupi spazio nella...
  2. A cosa serve: Serve a nascondere elementi dalla visualizzazione e dal layout della pagina, permettendo di controllare dinamicamente la visibilità dei contenuti senza rimuoverli dal DOM.
  3. Quando usarlo: Quando devi nascondere elementi temporaneamente o condizionalmente.
PositionProprietà CSS per controllare il metodo di posizionamento degli elementi
3. Layout e Positionamento Intermedio
  1. Cos'è: La proprietà position in CSS determina il metodo di posizionamento utilizzato per un elemento all'interno del suo contesto di formattazione.
  2. A cosa serve: Serve a controllare come un elemento è posizionato nel layout della pagina, permettendo posizionamenti precisi, sovrapposti o relativi ad altri elementi.
  3. Quando usarlo: Quando devi creare layout complessi e sovrapposti.
StaticValore predefinito della proprietà position per il posizionamento normale nel flusso del documento
3. Layout e Positionamento Intermedio
  1. Cos'è: Static è il valore predefinito della proprietà position in CSS, che posiziona gli elementi secondo il normale flusso del documento, senza alcun posizionamento speciale.
  2. A cosa serve: Serve a mantenere gli elementi nel loro ordine naturale all'interno del flusso del documento, senza alcuna manipolazione di posizione.
  3. Quando usarlo: Quando devi mantenere il layout predefinito della pagina.
RelativeValore della proprietà position per il posizionamento relativo alla posizione normale dell'elemento
3. Layout e Positionamento Intermedio
  1. Cos'è: Relative è un valore della proprietà position in CSS che posiziona un elemento relativamente alla sua posizione normale nel flusso del documento, permettendo spostamenti senza...
  2. A cosa serve: Serve a spostare un elemento dalla sua posizione originale mantenendo il suo spazio nel layout, creando un contesto per elementi figli con posizione assoluta e permettendo...
  3. Quando usarlo: Quando devi spostare leggermente elementi dalla loro posizione originale.
AbsoluteValore della proprietà position per il posizionamento assoluto rispetto all'antenato posizionato più vicino
3. Layout e Positionamento Intermedio
  1. Cos'è: Absolute è un valore della proprietà position in CSS che rimuove l'elemento dal flusso normale del documento e lo posiziona in relazione al suo antenato posizionato più vicino o...
  2. A cosa serve: Serve a posizionare elementi con precisione all'interno di un contesto specifico, permettendo sovrapposizioni, layout complessi e posizionamenti indipendenti dal flusso del...
  3. Quando usarlo: Quando devi creare elementi sovrapposti come modal, tooltip, o menu a discesa.
FixedValore della proprietà position per il posizionamento fisso rispetto al viewport
3. Layout e Positionamento Intermedio
  1. Cos'è: Fixed è un valore della proprietà position in CSS che posiziona un elemento in modo fisso rispetto al viewport, mantenendolo nella stessa posizione anche durante lo scorrimento...
  2. A cosa serve: Serve a creare elementi che rimangono sempre visibili e in una posizione specifica sullo schermo, indipendentemente dallo scorrimento della pagina, utile per elementi di...
  3. Quando usarlo: Quando devi creare barre di navigazione fisse in cima o in fondo alla pagina.
StickyValore della proprietà position per il posizionamento ibrido tra relative e fixed
3. Layout e Positionamento Intermedio
  1. Cos'è: Sticky è un valore della proprietà position in CSS che permette a un elemento di alternare tra posizionamento relativo e fisso, a seconda della posizione di scorrimento del...
  2. A cosa serve: Serve a creare elementi che rimangono nella loro posizione normale fino a raggiungere un punto specifico durante lo scorrimento, dopodiché si comportano come elementi fissi fino a...
  3. Quando usarlo: Quando devi creare intestazioni di sezione che rimangono visibili durante lo scorrimento.
FloatProprietà CSS per posizionare elementi a sinistra o a destra del loro contenitore
3. Layout e Positionamento Intermedio
  1. Cos'è: Float è una proprietà CSS che rimuove un elemento dal normale flusso del documento e lo posiziona a sinistra o a destra del suo contenitore, permettendo al contenuto circostante...
  2. A cosa serve: Serve principalmente a creare layout multi-colonna, posizionare immagini all'interno del testo, e implementare design che richiedono elementi affiancati con testo che li circonda.
  3. Quando usarlo: Quando devi creare layout a colonne senza l'uso di tabelle.
ClearProprietà CSS per controllare il comportamento degli elementi rispetto agli elementi flottanti
3. Layout e Positionamento Intermedio
  1. Cos'è: Clear è una proprietà CSS che specifica se un elemento può essere posizionato accanto a elementi flottanti che lo precedono, o se deve essere spostato sotto di essi (cioè "pulito"...
  2. A cosa serve: Serve a controllare il flusso del layout in presenza di elementi flottanti, prevenendo sovrapposizioni indesiderate e gestendo correttamente il posizionamento degli elementi non...
  3. Quando usarlo: Quando devi prevenire che elementi si affianchino a elementi flottanti.
Z-indexProprietà CSS per controllare l'ordine di sovrapposizione degli elementi
3. Layout e Positionamento Intermedio
  1. Cos'è: Z-index è una proprietà CSS che specifica l'ordine di impilamento di un elemento lungo l'asse Z (profondità) rispetto ad altri elementi sovrapposti all'interno dello stesso...
  2. A cosa serve: Serve a controllare quale elemento appare sopra gli altri quando si sovrappongono, permettendo di creare layout complessi con elementi sovrapposti e gestire la visibilità di...
  3. Quando usarlo: Quando devi gestire la sovrapposizione di elementi posizionati (non static).
FlexboxModulo di layout CSS per la creazione di design flessibili e responsivi
3. Layout e Positionamento Avanzato
  1. Cos'è: Flexbox, o Flexible Box Layout, è un modulo di layout CSS progettato per facilitare la creazione di design flessibili e efficienti, distribuendo lo spazio e allineando gli...
  2. A cosa serve: Serve a creare layout responsivi e adattabili, semplificando la distribuzione dello spazio tra elementi, l'allineamento e l'ordinamento degli elementi, e la gestione di dimensioni...
  3. Quando usarlo: Quando devi creare layout a una dimensione (riga o colonna).
Flex ContainerElemento genitore che definisce un contesto flex per i suoi figli diretti
3. Layout e Positionamento Avanzato
  1. Cos'è: Un Flex Container è un elemento HTML che ha la proprietà display impostata su flex o inline-flex, creando un contesto di formattazione flex per i suoi elementi figli diretti, noti...
  2. A cosa serve: Serve a creare un ambiente di layout flessibile in cui gli elementi figli possono essere organizzati e dimensionati dinamicamente, permettendo una disposizione e un allineamento...
  3. Quando usarlo: Quando devi creare layout a una dimensione (riga o colonna).
Flex ItemElemento figlio diretto di un flex container che partecipa al layout flex
3. Layout e Positionamento Avanzato
  1. Cos'è: Un Flex Item è un elemento figlio diretto di un flex container che partecipa automaticamente al layout flex, adattandosi e ridimensionandosi in base alle proprietà del container e...
  2. A cosa serve: Serve a creare elementi flessibili all'interno di un layout Flexbox, permettendo un controllo preciso sulla loro crescita, riduzione, allineamento e ordine, indipendentemente...
  3. Quando usarlo: Quando devi creare elementi che si adattano dinamicamente allo spazio disponibile.
Main AxisAsse principale lungo il quale vengono disposti i flex items in un flex container
3. Layout e Positionamento Avanzato
  1. Cos'è: Il Main Axis in Flexbox è l'asse primario lungo il quale vengono disposti i flex items all'interno di un flex container.
  2. A cosa serve: Serve a definire la direzione principale del layout in un flex container, determinando come i flex items vengono posizionati e come lo spazio viene distribuito tra di essi.
  3. Quando usarlo: Quando devi definire l'orientamento principale del layout (orizzontale o verticale).
Cross AxisAsse perpendicolare al main axis in un flex container
3. Layout e Positionamento Avanzato
  1. Cos'è: Il Cross Axis in Flexbox è l'asse perpendicolare al main axis all'interno di un flex container.
  2. A cosa serve: Serve a definire l'allineamento e il posizionamento secondario dei flex items, permettendo il controllo della disposizione degli elementi perpendicolarmente alla direzione...
  3. Quando usarlo: Quando devi allineare i flex items perpendicolarmente alla direzione principale del layout.
Grid LayoutSistema di layout bidimensionale per creare strutture complesse e responsive
3. Layout e Positionamento Avanzato
  1. Cos'è: CSS Grid Layout è un sistema di layout bidimensionale che permette di creare griglie complesse di righe e colonne, offrendo un controllo preciso sul posizionamento e...
  2. A cosa serve: Serve a creare layout web complessi e responsivi, permettendo di definire aree di contenuto in modo flessibile e di gestire efficacemente lo spazio sia in orizzontale che in...
  3. Quando usarlo: Quando devi creare layout di pagina complessi e responsive.
Grid ContainerElemento che definisce una griglia CSS e contiene gli elementi della griglia
3. Layout e Positionamento Avanzato
  1. Cos'è: Un Grid Container è un elemento HTML che ha la proprietà display impostata su grid o inline-grid, creando un contesto di formattazione grid per i suoi elementi figli diretti, noti...
  2. A cosa serve: Serve a stabilire una griglia bidimensionale in cui posizionare e allineare gli elementi figli, permettendo la creazione di layout complessi e responsivi con un controllo preciso...
  3. Quando usarlo: Quando devi creare layout di pagina strutturati e flessibili.
Grid ItemsElementi figli diretti di un grid container che partecipano al layout della griglia
3. Layout e Positionamento Avanzato
  1. Cos'è: I Grid Items sono gli elementi figli diretti di un grid container che partecipano automaticamente al layout della griglia CSS, posizionandosi e dimensionandosi in base alle...
  2. A cosa serve: Servono a organizzare e strutturare il contenuto all'interno di una griglia CSS, permettendo un controllo preciso sul posizionamento, dimensionamento e allineamento degli elementi...
  3. Quando usarlo: Quando devi posizionare elementi specifici in celle o aree della griglia.
FR UnitUnità di misura flessibile per la distribuzione dello spazio in CSS Grid
3. Layout e Positionamento Avanzato
  1. Cos'è: L'unità FR (Fraction) in CSS Grid è un'unità di misura flessibile che rappresenta una frazione dello spazio disponibile all'interno di un grid container, permettendo la...
  2. A cosa serve: Serve a creare layout flessibili e responsivi in CSS Grid, permettendo di distribuire lo spazio disponibile in modo proporzionale tra colonne e righe, senza la necessità di...
  3. Quando usarlo: Quando devi definire colonne o righe flessibili in una griglia CSS.
Repeat FunctionFunzione CSS per ripetere pattern di tracce in una griglia
3. Layout e Positionamento Avanzato
  1. Cos'è: La funzione repeat() in CSS Grid è un'utilità che permette di ripetere un pattern di tracce (colonne o righe) un numero specifico di volte o in base allo spazio disponibile,...
  2. A cosa serve: Serve a creare layout di griglia flessibili e responsivi in modo più conciso, permettendo di definire facilmente strutture ripetitive e adattabili senza dover specificare...
  3. Quando usarlo: Quando devi creare griglie con un numero fisso di colonne o righe identiche.
GapProprietà CSS per definire lo spazio tra righe e colonne in Grid e Flexbox
3. Layout e Positionamento Avanzato
  1. Cos'è: La proprietà gap in CSS è una shorthand che definisce lo spazio tra le righe e le colonne in un layout Grid o Flexbox, permettendo di controllare facilmente la spaziatura tra gli...
  2. A cosa serve: Serve a creare spazi uniformi e coerenti tra gli elementi in layout Grid e Flexbox, semplificando la gestione della spaziatura e migliorando la leggibilità e l'estetica del design.
  3. Quando usarlo: Quando devi definire spazi uniformi tra righe e colonne in Grid.
Font-sizeProprietà CSS per definire la dimensione del carattere del testo
4. Tipografia e Testo Base
  1. Cos'è: La proprietà font-size in CSS definisce la dimensione del carattere per il testo di un elemento, controllando la grandezza con cui il contenuto testuale viene visualizzato.
  2. A cosa serve: Serve a controllare la leggibilità, l'enfasi e la gerarchia visiva del testo all'interno di un documento web, permettendo di adattare le dimensioni del testo per diversi...
  3. Quando usarlo: Quando devi definire la dimensione base del testo per il documento.
Font-weightProprietà CSS per definire lo spessore o la grassezza del carattere
4. Tipografia e Testo Base
  1. Cos'è: La proprietà font-weight in CSS specifica lo spessore o la grassezza dei caratteri del testo, controllando quanto "bold" o leggero appare il testo all'interno di un elemento.
  2. A cosa serve: Serve a creare contrasto e gerarchia visiva nel testo, enfatizzare parti specifiche del contenuto, e migliorare la leggibilità e l'estetica complessiva della tipografia in un...
  3. Quando usarlo: Quando devi definire lo spessore del testo per diversi elementi (titoli, paragrafi, link).
Font-styleProprietà CSS per definire lo stile del carattere, principalmente per il corsivo
4. Tipografia e Testo Base
  1. Cos'è: La proprietà font-style in CSS specifica lo stile del carattere per il testo, principalmente utilizzata per applicare o rimuovere lo stile corsivo (italic) ai caratteri.
  2. A cosa serve: Serve a controllare l'aspetto stilistico del testo, permettendo di enfatizzare parti del contenuto, creare distinzioni visive, e migliorare l'espressività tipografica all'interno...
  3. Quando usarlo: Quando devi applicare lo stile corsivo a elementi di testo specifici.
Line-heightProprietà CSS per definire l'altezza delle linee di testo
4. Tipografia e Testo Base
  1. Cos'è: La proprietà line-height in CSS specifica l'altezza minima di una casella di linea all'interno di un elemento.
  2. A cosa serve: Serve a controllare la spaziatura verticale del testo, migliorando la leggibilità, l'aspetto estetico e la struttura visiva del contenuto testuale in un design web.
  3. Quando usarlo: Quando devi migliorare la leggibilità del testo, specialmente per blocchi di testo lunghi.
Text-decorationProprietà CSS per aggiungere o rimuovere decorazioni al testo
4. Tipografia e Testo Base
  1. Cos'è: La proprietà text-decoration in CSS specifica le decorazioni da aggiungere al testo, come sottolineature, linee sopra il testo o barrature.
  2. A cosa serve: Serve a migliorare l'aspetto visivo del testo, enfatizzare parti specifiche del contenuto, e fornire indicazioni visive sullo stato o la funzione di elementi testuali, come i link.
  3. Quando usarlo: Quando devi aggiungere o rimuovere sottolineature dai link.
Text-transformProprietà CSS per controllare la capitalizzazione del testo
4. Tipografia e Testo Intermedio
  1. Cos'è: La proprietà text-transform in CSS controlla la capitalizzazione del testo, permettendo di modificare l'aspetto delle lettere senza alterare il contenuto HTML sottostante.
  2. A cosa serve: Serve a modificare la presentazione visiva del testo, migliorando la leggibilità, enfatizzando parti specifiche del contenuto, e mantenendo la coerenza tipografica senza la...
  3. Quando usarlo: Quando devi convertire il testo in maiuscolo o minuscolo.
Letter-spacingProprietà CSS per controllare lo spazio tra i caratteri del testo
4. Tipografia e Testo Intermedio
  1. Cos'è: La proprietà letter-spacing in CSS controlla lo spazio orizzontale tra i caratteri del testo, permettendo di aumentare o diminuire la distanza tra le lettere di un elemento...
  2. A cosa serve: Serve a migliorare la leggibilità, l'aspetto estetico e l'impatto visivo del testo, consentendo un controllo fine sulla composizione tipografica e sull'aspetto complessivo del...
  3. Quando usarlo: Quando devi migliorare la leggibilità di testi piccoli o densi.
Word-spacingProprietà CSS per controllare lo spazio tra le parole nel testo
4. Tipografia e Testo Intermedio
  1. Cos'è: La proprietà word-spacing in CSS controlla lo spazio aggiuntivo tra le parole all'interno di un elemento, permettendo di aumentare o diminuire la distanza tra le parole rispetto...
  2. A cosa serve: Serve a migliorare la leggibilità, l'estetica e la composizione del testo, consentendo un controllo fine sulla distribuzione delle parole e sull'aspetto complessivo dei paragrafi...
  3. Quando usarlo: Quando devi migliorare la leggibilità di testi densi o compatti.
White-spaceProprietà CSS per controllare la gestione degli spazi bianchi e dei ritorni a capo nel testo
4. Tipografia e Testo Intermedio
  1. Cos'è: La proprietà white-space in CSS controlla come vengono gestiti gli spazi bianchi (spazi, tabulazioni, ritorni a capo) all'interno di un elemento, influenzando il modo in cui il...
  2. A cosa serve: Serve a definire come il browser deve interpretare e renderizzare gli spazi bianchi nel testo, permettendo un controllo preciso sulla formattazione e sull'aspetto del contenuto...
  3. Quando usarlo: Quando devi preservare la formattazione originale del testo, inclusi ritorni a capo e spazi multipli.
Text-shadowProprietà CSS per aggiungere ombre o effetti di bagliore al testo
4. Tipografia e Testo Intermedio
  1. Cos'è: La proprietà text-shadow in CSS permette di aggiungere una o più ombre al testo, creando effetti di profondità, bagliore o enfasi visiva sui caratteri.
  2. A cosa serve: Serve a migliorare la leggibilità del testo su diversi sfondi, creare effetti decorativi, enfatizzare elementi testuali e aggiungere profondità visiva al design della pagina.
  3. Quando usarlo: Quando devi migliorare il contrasto tra testo e sfondo.
@font-faceRegola CSS per definire e incorporare font personalizzati in una pagina web
4. Tipografia e Testo Avanzato
  1. Cos'è: La regola @font-face in CSS permette di definire e caricare font personalizzati da utilizzare in una pagina web, consentendo l'uso di caratteri non standard o non installati sul...
  2. A cosa serve: Serve a espandere le opzioni tipografiche disponibili per i web designer, permettendo l'uso di font personalizzati e migliorando la coerenza visiva tra diversi dispositivi e...
  3. Quando usarlo: Quando devi incorporare font personalizzati in un sito web.
Font-displayProprietà CSS per controllare il comportamento di rendering dei font personalizzati durante il caricamento
4. Tipografia e Testo Avanzato
  1. Cos'è: La proprietà font-display specifica come un font personalizzato deve essere visualizzato durante il suo caricamento e quando il caricamento fallisce, controllando il comportamento...
  2. A cosa serve: Serve a migliorare l'esperienza utente durante il caricamento dei font personalizzati, bilanciando la velocità di visualizzazione del contenuto con la coerenza visiva, e gestendo...
  3. Quando usarlo: Quando devi ottimizzare la visualizzazione del testo durante il caricamento dei font.
RGBModello di colore additivo utilizzato in CSS per definire i colori
5. Colori e Sfondi Base
  1. Cos'è: RGB (Red, Green, Blue) è un modello di colore additivo che crea colori combinando diverse intensità di rosso, verde e blu, utilizzato in CSS per definire i colori degli elementi...
  2. A cosa serve: Serve a rappresentare una vasta gamma di colori in modo digitale, permettendo ai web designer di specificare con precisione i colori desiderati per vari elementi dell'interfaccia...
  3. Quando usarlo: Quando devi definire colori per testo, sfondi, bordi e altri elementi CSS.
HEXFormato di notazione esadecimale per specificare i colori in CSS
5. Colori e Sfondi Base
  1. Cos'è: Il formato HEX (esadecimale) in CSS è un metodo per specificare i colori utilizzando una notazione a sei cifre (o tre cifre in forma abbreviata) che rappresenta i valori di rosso,...
  2. A cosa serve: Serve a fornire un modo conciso e ampiamente supportato per definire i colori nel web design, permettendo una rappresentazione precisa di una vasta gamma di colori con una...
  3. Quando usarlo: Quando devi definire colori per testo, sfondi, bordi e altri elementi CSS.
Named ColorsParole chiave predefinite per specificare colori comuni in CSS
5. Colori e Sfondi Base
  1. Cos'è: I Named Colors in CSS sono parole chiave predefinite che rappresentano colori specifici, permettendo di utilizzare nomi in linguaggio naturale invece di valori numerici o codici...
  2. A cosa serve: Servono a fornire un modo intuitivo e facilmente memorizzabile per specificare colori comuni nel CSS, semplificando il processo di styling e migliorando la leggibilità del codice,...
  3. Quando usarlo: Quando devi definire rapidamente colori comuni senza ricordare codici specifici.
HSLModello di colore basato su tonalità, saturazione e luminosità per definire colori in CSS
5. Colori e Sfondi Base intermedio
  1. Cos'è: HSL (Hue, Saturation, Lightness) è un modello di colore in CSS che rappresenta i colori utilizzando tre componenti: tonalità, saturazione e luminosità, offrendo un approccio più...
  2. A cosa serve: Serve a fornire un metodo più naturale e logico per specificare e manipolare i colori nel web design, facilitando la creazione di schemi di colore coerenti e l'adattamento dei...
  3. Quando usarlo: Quando devi definire colori in modo più intuitivo rispetto a RGB o HEX.
OpacityProprietà CSS per controllare la trasparenza di un elemento e del suo contenuto
5. Colori e Sfondi Intermedio
  1. Cos'è: La proprietà opacity in CSS controlla il livello di trasparenza di un elemento e di tutto il suo contenuto, determinando quanto l'elemento è visibile o invisibile rispetto allo...
  2. A cosa serve: Serve a creare effetti di trasparenza, sfumature e sovrapposizioni, migliorando l'estetica del design, creando gerarchie visive e facilitando la creazione di interfacce utente più...
  3. Quando usarlo: Quando devi creare effetti di dissolvenza per elementi dell'interfaccia.
RGBA/HSLAModelli di colore in CSS che includono il controllo dell'opacità
5. Colori e Sfondi Intermedio
  1. Cos'è: RGBA (Red, Green, Blue, Alpha) e HSLA (Hue, Saturation, Lightness, Alpha) sono estensioni dei modelli di colore RGB e HSL che includono un canale alpha per controllare l'opacità...
  2. A cosa serve: Servono a definire colori con trasparenza variabile, permettendo la creazione di effetti di sovrapposizione, sfumature e transizioni di colore più sofisticate, migliorando la...
  3. Quando usarlo: Quando devi creare overlay semi-trasparenti su immagini o sfondi.
GradientFunzione CSS per creare transizioni graduali tra due o più colori
5. Colori e Sfondi Avanzato
  1. Cos'è: Un gradient in CSS è una funzione che crea una transizione graduale tra due o più colori, permettendo di generare sfondi e effetti visivi complessi senza l'uso di immagini.
  2. A cosa serve: Serve a creare effetti visivi sofisticati, migliorare l'estetica del design, aggiungere profondità e dimensione agli elementi, e ottimizzare le prestazioni utilizzando CSS invece...
  3. Quando usarlo: Quando devi creare sfondi sfumati per elementi o intere pagine.
Background-blend-modeProprietà CSS per definire come gli sfondi multipli di un elemento si fondono tra loro
5. Colori e Sfondi Avanzato
  1. Cos'è: Background-blend-mode è una proprietà CSS che specifica come le immagini di sfondo multiple e/o il colore di sfondo di un elemento devono fondersi tra loro, creando effetti visivi...
  2. A cosa serve: Serve a creare effetti visivi avanzati combinando sfondi multipli, permettendo di realizzare composizioni grafiche sofisticate direttamente in CSS senza ricorrere a software di...
  3. Quando usarlo: Quando devi creare effetti di sovrapposizione tra immagini e colori di sfondo.
ViewportArea visibile di una pagina web su un dispositivo
6. Responsive Design Base
  1. Cos'è: Il viewport è l'area visibile di una pagina web all'interno della finestra del browser o del dispositivo dell'utente.
  2. A cosa serve: Serve come riferimento per il layout e il dimensionamento degli elementi in una pagina web, permettendo di creare design responsivi che si adattano a diverse dimensioni di schermo...
  3. Quando usarlo: Quando devi definire il layout responsivo per diversi dispositivi.
Media QueriesTecnica CSS per applicare stili in base alle caratteristiche del dispositivo o del browser
6. Responsive Design Base
  1. Cos'è: Le Media Queries sono una tecnica CSS che permette di applicare stili diversi in base alle caratteristiche del dispositivo o del browser, come la larghezza dello schermo,...
  2. A cosa serve: Servono a creare layout e design responsivi che si adattano a diversi dispositivi e condizioni di visualizzazione, migliorando l'esperienza utente su una vasta gamma di schermi e...
  3. Quando usarlo: Quando devi adattare il layout per diverse dimensioni di schermo (desktop, tablet, mobile).
Mobile FirstApproccio di design che prioritizza l'esperienza mobile nel processo di sviluppo web
6. Responsive Design Intermedio
  1. Cos'è: Mobile First è un approccio di design e sviluppo web che inizia progettando per i dispositivi mobili come priorità, per poi adattare progressivamente il layout a schermi più...
  2. A cosa serve: Serve a ottimizzare l'esperienza utente su dispositivi mobili, migliorare le prestazioni, focalizzarsi sui contenuti essenziali e creare una base solida per un design responsivo...
  3. Quando usarlo: Quando devi progettare interfacce utente ottimizzate per schermi piccoli.
Responsive ImagesTecniche per ottimizzare le immagini in base alle caratteristiche del dispositivo
6. Responsive Design Intermedio
  1. Cos'è: Le Responsive Images sono tecniche e strumenti CSS e HTML che permettono di fornire immagini ottimizzate in base alle caratteristiche del dispositivo, come dimensioni dello...
  2. A cosa serve: Migliorare le prestazioni, ridurre il consumo di dati e garantire una visualizzazione ottimale delle immagini su diversi dispositivi e connessioni.
  3. Quando usarlo: Quando devi adattare le dimensioni e la risoluzione delle immagini al dispositivo.
Container QueriesTecnica CSS per applicare stili in base alle dimensioni del contenitore padre
6. Responsive Design Avanzato
  1. Cos'è: Le Container Queries sono una tecnica CSS emergente che permette di applicare stili a un elemento in base alle dimensioni del suo contenitore padre, piuttosto che alle dimensioni...
  2. A cosa serve: Fornire un controllo più granulare e modulare sul layout e lo stile dei componenti, permettendo loro di adattarsi in modo responsivo al contesto in cui sono inseriti,...
  3. Quando usarlo: Quando devi applicare stili in base alle dimensioni del contenitore padre.
TransitionProprietà CSS per creare transizioni fluide tra stati di un elemento
7. Trasformazioni e Animazioni Base
  1. Cos'è: Le CSS Transitions sono un insieme di proprietà che permettono di definire transizioni fluide e graduali tra diversi stati di un elemento HTML, creando animazioni semplici senza...
  2. A cosa serve: Migliorare l'esperienza utente creando interfacce più dinamiche e interattive, fornendo feedback visivi sulle azioni dell'utente e rendendo i cambiamenti di stato degli elementi...
  3. Quando usarlo: Quando devi creare transizioni fluide tra stati di un elemento.
TransformProprietà CSS per modificare la posizione, la scala, la rotazione e l'inclinazione di un elemento
7. Trasformazioni e Animazioni Intermedio
  1. Cos'è: La proprietà CSS transform permette di modificare la posizione, la scala, la rotazione e l'inclinazione di un elemento nel spazio 2D o 3D, senza influenzare il flusso del...
  2. A cosa serve: Consentire manipolazioni visive complesse degli elementi HTML in modo efficiente e flessibile, supportando animazioni fluide e layout dinamici senza alterare la struttura del DOM.
  3. Quando usarlo: Quando devi modificare la posizione, la scala, la rotazione e l'inclinazione di un elemento.
AnimationTecnica CSS per creare animazioni complesse senza l'uso di JavaScript
7. Trasformazioni e Animazioni Intermedio
  1. Cos'è: Le CSS Animations sono un insieme di proprietà che permettono di creare animazioni complesse e controllate direttamente in CSS, senza l'uso di JavaScript, definendo una sequenza...
  2. A cosa serve: Fornire un metodo potente e performante per creare animazioni web, migliorando l'interattività e l'esperienza utente, e riducendo la dipendenza da script per effetti visivi...
  3. Quando usarlo: Quando devi creare animazioni complesse senza l'uso di JavaScript.
KeyframesRegola at-rule per definire gli stati di un'animazione CSS
7. Trasformazioni e Animazioni Intermedio
  1. Cos'è: I CSS Keyframes sono una regola at-rule (@keyframes) che definisce gli stati intermedi di un'animazione CSS, specificando come gli stili di un elemento dovrebbero cambiare in...
  2. A cosa serve: Permettere agli sviluppatori di creare animazioni complesse e multi-stato in CSS, definendo precisamente come le proprietà di un elemento cambiano nel corso del tempo, senza la...
  3. Quando usarlo: Quando devi definire gli stati di un'animazione CSS.
3D TransformsTecniche CSS per manipolare elementi nello spazio tridimensionale
7. Trasformazioni e Animazioni Avanzato
  1. Cos'è: CSS 3D Transforms sono un insieme di proprietà e funzioni che permettono di manipolare elementi HTML nello spazio tridimensionale, consentendo rotazioni, traslazioni e scalature...
  2. A cosa serve: Creare effetti visivi tridimensionali e interattivi direttamente nel browser, migliorando l'esperienza utente e consentendo la creazione di interfacce più coinvolgenti senza l'uso...
  3. Quando usarlo: Quando devi manipolare elementi nello spazio tridimensionale.
Animation Timing FunctionsFunzioni CSS che controllano la progressione di un'animazione nel tempo
7. Trasformazioni e Animazioni Avanzato
  1. Cos'è: Le Animation Timing Functions in CSS sono funzioni che determinano come un'animazione progredisce nel tempo, controllando la velocità dell'animazione in diversi punti della sua...
  2. A cosa serve: Migliorare la qualità e la naturalezza delle animazioni CSS, permettendo agli sviluppatori di creare movimenti più realistici o espressivi che si adattano meglio al contesto e...
  3. Quando usarlo: Quando devi controllare la progressione di un'animazione nel tempo.
VisibilityProprietà CSS che controlla la visibilità di un elemento senza alterare il layout
8. Accessibilità e User Experience Base
  1. Cos'è: La proprietà CSS `visibility` controlla se un elemento è visibile o meno, senza modificare il layout della pagina.
  2. A cosa serve: Permettere agli sviluppatori di nascondere o mostrare elementi senza influenzare il flusso del documento, utile per creare interfacce dinamiche, gestire contenuti temporanei o...
  3. Quando usarlo: Quando devi controllare la visibilità di un elemento senza alterare il layout.
CursorProprietà CSS che controlla l'aspetto del cursore del mouse su un elemento
8. Accessibilità e User Experience Base
  1. Cos'è: La proprietà CSS `cursor` specifica il tipo di cursore da visualizzare quando il puntatore del mouse si trova sopra un elemento.
  2. A cosa serve: Migliorare l'usabilità e l'esperienza utente fornendo indicazioni visive sulle azioni possibili o lo stato degli elementi dell'interfaccia, aumentando l'intuitività e la chiarezza...
  3. Quando usarlo: Quando devi indicare elementi cliccabili (bottoni, link) con cursor: pointer.
Focus StylesStili CSS applicati agli elementi quando ricevono il focus
8. Accessibilità e User Experience Intermedio
  1. Cos'è: I Focus Styles in CSS sono stili applicati agli elementi interattivi quando ricevono il focus, sia attraverso l'interazione con il mouse che tramite la navigazione da tastiera.
  2. A cosa serve: Migliorare l'accessibilità e l'usabilità del sito web, fornendo indicazioni visive chiare su quale elemento ha il focus, essenziale per la navigazione da tastiera e per utenti che...
  3. Quando usarlo: Quando vuoi rendere chiaro quale elemento ha il focus.
User-selectProprietà CSS che controlla la selezione del testo da parte dell'utente
8. Accessibilità e User Experience Avanzato
  1. Cos'è: La proprietà CSS `user-select` controlla se e come il testo di un elemento può essere selezionato dall'utente.
  2. A cosa serve: Migliorare l'esperienza utente controllando la selezionabilità del testo, prevenire selezioni accidentali, proteggere contenuti sensibili e ottimizzare l'interazione con elementi...
  3. Quando usarlo: Quando devi disabilitare la selezione su elementi dell'interfaccia come pulsanti o menu.
Pointer-eventsProprietà CSS che controlla come gli elementi rispondono agli eventi del puntatore
8. Accessibilità e User Experience Avanzato
  1. Cos'è: La proprietà CSS `pointer-events` specifica in che circostanze (se del caso) un particolare elemento grafico può diventare il target di eventi del puntatore.
  2. A cosa serve: Permette di controllare l'interattività degli elementi, disabilitando o abilitando la loro risposta agli eventi del puntatore.
  3. Quando usarlo: Quando devi creare overlay trasparenti che non interferiscono con gli elementi sottostanti.
Vendor PrefixesPrefissi utilizzati per implementare funzionalità CSS sperimentali o specifiche del browser
9. Tecniche Avanzate e Ottimizzazione Intermedio
  1. Cos'è: I Vendor Prefixes sono prefissi speciali aggiunti alle proprietà CSS, ai valori o alle regole at-rule per implementare funzionalità sperimentali o specifiche del browser.
  2. A cosa serve: Consentire agli sviluppatori di utilizzare nuove funzionalità CSS in fase di sviluppo o standardizzazione, mantenendo la compatibilità tra diversi browser e versioni.
  3. Quando usarlo: Quando devi implementare funzionalità CSS sperimentali o specifiche del browser.
Fallback ValuesValori alternativi utilizzati quando una proprietà o un valore CSS non è supportato
9. Tecniche Avanzate e Ottimizzazione Intermedio
  1. Cos'è: I Fallback values in CSS sono valori alternativi forniti per proprietà o funzionalità CSS che potrebbero non essere supportate da tutti i browser.
  2. A cosa serve: Assicurare una degradazione graduale (graceful degradation) dell'aspetto di un sito web su browser meno recenti o meno capaci, mantenendo la funzionalità e l'estetica di base,...
  3. Quando usarlo: Quando devi prevedere fallback per proprietà o valori non supportati.
Normalize.cssFoglio di stile CSS che normalizza gli stili predefiniti tra diversi browser
9. Tecniche Avanzate e Ottimizzazione Intermedio
  1. Cos'è: Normalize.css è un piccolo foglio di stile CSS moderno e pronto all'uso che fornisce una migliore coerenza cross-browser negli stili predefiniti degli elementi HTML.
  2. A cosa serve: Normalizzare gli stili tra diversi browser per ridurre le inconsistenze, mantenendo gli stili utili predefiniti del browser.
  3. Quando usarlo: Quando devi normalizzare gli stili predefiniti tra diversi browser.
Reset CSSTecnica CSS per rimuovere gli stili predefiniti del browser
9. Tecniche Avanzate e Ottimizzazione Intermedio
  1. Cos'è: Reset CSS è una tecnica che consiste nell'utilizzare un foglio di stile che rimuove o "resetta" tutti gli stili predefiniti del browser applicati agli elementi HTML.
  2. A cosa serve: Eliminare le inconsistenze tra i diversi browser riguardo gli stili predefiniti, fornendo agli sviluppatori un punto di partenza uniforme per applicare i propri stili.
  3. Quando usarlo: Quando devi rimuovere gli stili predefiniti del browser.
Critical CSSTecnica di ottimizzazione che estrae e inserisce gli stili CSS essenziali per il rendering iniziale della pagina
9. Tecniche Avanzate e Ottimizzazione Avanzato
  1. Cos'è: Critical CSS è una tecnica di ottimizzazione delle prestazioni che consiste nell'identificare e inserire inline gli stili CSS essenziali per il rendering della parte visibile...
  2. A cosa serve: Migliorare significativamente i tempi di caricamento percepiti e le metriche di prestazione come First Contentful Paint (FCP) e Largest Contentful Paint (LCP), fornendo agli...
  3. Quando usarlo: Per estrarre e inserire gli stili CSS essenziali per il rendering iniziale della pagina.
MinificazioneProcesso di ottimizzazione che riduce la dimensione dei file di codice sorgente
9. Tecniche Avanzate e Ottimizzazione Avanzato
  1. Cos'è: La minificazione è un processo di ottimizzazione che consiste nel ridurre la dimensione dei file di codice sorgente (come CSS, JavaScript e HTML) rimuovendo tutti i caratteri non...
  2. A cosa serve: Migliorare le prestazioni di caricamento e di esecuzione delle pagine web riducendo la quantità di dati che devono essere trasferiti dal server al client, risultando in tempi di...
  3. Quando usarlo: Per ridurre la dimensione dei file di codice sorgente.
Sass/SCSSPreprocessore CSS che estende le funzionalità del CSS standard
10. Preprocessori e Framework Intermedio
  1. Cos'è: Sass (Syntactically Awesome Style Sheets) è un preprocessore CSS che estende le funzionalità del CSS standard, offrendo caratteristiche come variabili, nesting, mixin, e funzioni.
  2. A cosa serve: Migliorare l'efficienza e la manutenibilità del codice CSS, fornendo strumenti per scrivere stili più modulari, riutilizzabili e organizzati.
  3. Quando usarlo: Quando devi estendere le funzionalità del CSS standard.
LessPreprocessore CSS che estende le funzionalità del CSS standard
10. Preprocessori e Framework Intermedio
  1. Cos'è: Less (Leaner Style Sheets) è un preprocessore CSS dinamico che estende le funzionalità del CSS standard, offrendo caratteristiche come variabili, nesting, mixin, operazioni e...
  2. A cosa serve: Migliorare l'efficienza e la manutenibilità del codice CSS, fornendo strumenti per scrivere stili più modulari, riutilizzabili e organizzati.
  3. Quando usarlo: Quando devi estendere le funzionalità del CSS standard.
BootstrapFramework CSS e JavaScript per lo sviluppo di siti web responsivi e mobile-first
10. Preprocessori e Framework Avanzato
  1. Cos'è: Bootstrap è un framework CSS e JavaScript open-source, creato originariamente da Twitter, per lo sviluppo di siti web e applicazioni web responsivi e mobile-first.
  2. A cosa serve: Semplificare e accelerare il processo di sviluppo front-end, fornendo un sistema di griglia flessibile, componenti riutilizzabili e plugin JavaScript.
  3. Quando usarlo: Per lo sviluppo di siti web responsivi e mobile-first.
Tailwind CSSFramework CSS utility-first per la creazione rapida di design personalizzati
10. Preprocessori e Framework Avanzato
  1. Cos'è: Tailwind CSS è un framework CSS utility-first che fornisce classi di utilità a basso livello per costruire design personalizzati direttamente nel markup HTML.
  2. A cosa serve: Permettere agli sviluppatori di creare design completamente personalizzati senza lasciare l'HTML, accelerando il processo di sviluppo e riducendo la necessità di scrivere CSS...
  3. Quando usarlo: Per la creazione rapida di design personalizzati.
Box-shadowProprietà CSS per aggiungere ombre a elementi HTML
11. Effetti Visivi e Funzionalità Speciali Intermedio
  1. Cos'è: Box-shadow è una proprietà CSS che permette di aggiungere effetti ombra a elementi HTML.
  2. A cosa serve: Serve ad aggiungere profondità e separazione visiva agli elementi.
  3. Quando usarlo: Quando devi aggiungere profondità a elementi UI come pulsanti o card.
Text-overflowProprietà CSS per controllare come il testo in eccesso viene visualizzato
11. Effetti Visivi e Funzionalità Speciali Intermedio
  1. Cos'è: Text-overflow è una proprietà CSS che specifica come il contenuto testuale in eccesso, che non rientra nel box del suo contenitore, deve essere segnalato all'utente.
  2. A cosa serve: Serve a controllare come il testo in eccesso viene visualizzato.
  3. Quando usarlo: Per titoli lunghi in card o liste.
OverflowProprietà CSS per controllare il contenuto che eccede i limiti del suo contenitore
11. Effetti Visivi e Funzionalità Speciali Intermedio
  1. Cos'è: Overflow è una proprietà CSS che controlla come il contenuto che eccede le dimensioni del suo contenitore (in altezza o larghezza) deve essere gestito.
  2. A cosa serve: Serve a gestire il contenuto che supera i limiti del suo contenitore.
  3. Quando usarlo: Quando devi creare aree di contenuto scrollabile in layout fissi.
Clip-pathProprietà CSS per creare forme complesse ritagliando un elemento
11. Effetti Visivi e Funzionalità Speciali Avanzato
  1. Cos'è: Clip-path è una proprietà CSS che crea una regione di ritaglio che definisce quale parte di un elemento dovrebbe essere visibile.
  2. A cosa serve: Serve a creare forme complesse ritagliando un elemento.
  3. Quando usarlo: Quando devi creare bottoni e elementi UI con forme non rettangolari.
FilterProprietà CSS per applicare effetti visivi a elementi
11. Effetti Visivi e Funzionalità Speciali Avanzato
  1. Cos'è: La proprietà CSS filter applica effetti grafici come sfocatura o alterazione del colore a un elemento.
  2. A cosa serve: Serve ad applicare effetti visivi come blur, contrasto o saturazione.
  3. Quando usarlo: Per migliorare o alterare l'aspetto di immagini e componenti.
Backdrop-filterProprietà CSS per applicare effetti visivi all'area dietro un elemento
11. Effetti Visivi e Funzionalità Speciali Avanzato
  1. Cos'è: Backdrop-filter è una proprietà CSS che permette di applicare effetti grafici all'area dietro un elemento, anziché all'elemento stesso.
  2. A cosa serve: Serve ad applicare effetti visivi allo sfondo visibile dietro un elemento.
  3. Quando usarlo: Per creare overlay semi-trasparenti, modali o pannelli con effetto vetro.
MaskProprietà CSS per nascondere parti di un elemento usando immagini o forme
11. Effetti Visivi e Funzionalità Speciali Avanzato
  1. Cos'è: La proprietà CSS mask permette di nascondere parti di un elemento applicando una maschera, che può essere un'immagine, un gradiente, o una forma SVG.
  2. A cosa serve: Serve a nascondere parti di un elemento usando immagini o forme.
  3. Quando usarlo: Quando devi creare effetti di dissolvenza su immagini o testo.
CSS HoudiniSet di API low-level per estendere le capacità di CSS
12. API CSS e Integrazione Avanzato
  1. Cos'è: CSS Houdini è un set di API low-level che permettono agli sviluppatori di accedere al motore di rendering CSS del browser, consentendo di creare nuove funzionalità CSS senza...
  2. A cosa serve: Serve a estendere le capacità di CSS con funzionalità personalizzate.
  3. Quando usarlo: Quando devi estendere le capacità di CSS.
CSS-in-JSApproccio per scrivere CSS direttamente in JavaScript
12. API CSS e Integrazione Avanzato
  1. Cos'è: CSS-in-JS è un approccio allo styling in applicazioni web che prevede la scrittura di CSS direttamente all'interno del codice JavaScript.
  2. A cosa serve: Serve a scrivere CSS direttamente in JavaScript.
  3. Quando usarlo: Quando devi scrivere CSS direttamente in JavaScript.
CSS ModulesApproccio per scrivere CSS con scope locale in applicazioni modulari
12. API CSS e Integrazione Avanzato
  1. Cos'è: CSS Modules è una tecnica di styling che permette di scrivere CSS con scope locale per default.
  2. A cosa serve: Serve a scrivere CSS con scope locale in applicazioni modulari.
  3. Quando usarlo: Quando devi scrivere CSS con scope locale in applicazioni modulari.