Cheat Sheet degli stili CSS

Il CSS (Cascading Style Sheets) viene utilizzato per controllare il layout e lo stile delle pagine web. Questa cheat sheet copre le proprietà e i selettori più comunemente usati.

Selettori

Tipo	Esempio	Descrizione
All	`* { }`	Seleziona tutti gli elementi
Type	`h1 { }`	Seleziona un tag HTML specifico
Class	`.header { }`	Seleziona elementi con class=“header”
ID	`#main { }`	Seleziona l’elemento con id=“main”
Descendant	`div p { }`	Seleziona tutti i p dentro div
Pseudo	`a:hover { }`	Stato al passaggio del mouse

Modello a Scatola

.box {
  width: 300px;
  height: 200px;
  padding: 10px;    /* Distanza interna */
  border: 1px solid #ccc; /* Bordo */
  margin: 20px;     /* Distanza esterna */
  box-sizing: border-box; /* Include bordo e padding */
}

Tipografia

Property	Descrizione	Esempio
`font-family`	Famiglia di font	`font-family: Arial, sans-serif;`
`font-size`	Dimensione font	`font-size: 16px;`
`font-weight`	Peso font	`font-weight: bold;`
`text-align`	Allineamento testo	`text-align: center;`
`line-height`	Altezza riga	`line-height: 1.5;`
`color`	Colore testo	`color: #333;`

Colori e Sfondi

Property	Descrizione	Esempio
`background-color`	Colore di sfondo	`background-color: #f0f0f0;`
`background-image`	Immagine di sfondo	`background-image: url('bg.jpg');`
`background-size`	Dimensione sfondo	`background-size: cover;`
`opacity`	Opacità	`opacity: 0.8;`

Posizionamento

position: static; : Layout a flusso predefinito
position: relative; : Spostamento rispetto alla propria posizione normale
position: absolute; : Posizionamento rispetto al primo antenato non statico
position: fixed; : Posizionamento rispetto alla finestra del browser
position: sticky; : Fisso quando si scorre in una posizione specifica
z-index: 10; : Controllo dell’ordine di sovrapposizione

Visualizzazione e Layout

display: block; : Elemento blocco
display: inline; : Elemento inline
display: inline-block; : Elemento inline-block
display: flex; : Attiva layout flex
display: grid; : Attiva layout grid
display: none; : Nasconde l’elemento senza occupare spazio

Shorthand delle Proprietà

margin: 10px 5px 15px 20px; (Alto Destra Basso Sinistra)
padding: 10px 5px; (Alto-Basso Sinistra-Destra)
border: 1px dashed red; (Larghezza Stile Colore)