1. Introduzione a CSS e Regole di Cascata
CSS (Cascading Style Sheets) è il linguaggio utilizzato per definire l'aspetto visivo, il layout e la formattazione dei documenti strutturati in HTML. La "cascata" determina quale regola CSS viene applicata quando più selettori competono per lo stesso elemento, valutando specificità, importanza e ordine di comparsa.
/* Sintassi di base e selettori CSS */
body {
background-color: #0f172a;
font-family: sans-serif;
color: #e2e8f0;
}
.card-box {
display: flex;
padding: 1.5rem;
border-radius: 8px;
}
2. Indice Completo delle Proprietà CSS Principali
Di seguito viene presentata la classificazione dettagliata delle proprietà fondamentali suddivise per categoria funzionale:
| Categoria | Proprietà Principali | Descrizione e Funzione |
|---|---|---|
| Tipografia e Testo | color, font-size, font-weight,
text-align, line-height |
Definiscono lo stile, la dimensione, il peso e l'allineamento dei caratteri testuali. |
| Box Model | width, height, margin, padding,
border |
Regolano le dimensioni geometriche, i margini esterni, i riempimenti interni e i bordi degli elementi. |
| Layout & Flexbox | display, justify-content, align-items,
flex-direction, gap |
Gestiscono il posizionamento flessibile unidimensionale degli elementi all'interno di un contenitore. |
| Grid System | display: grid, grid-template-columns, grid-gap |
Configurano griglie bidimensionali complesse per layout strutturati di pagina. |
| Sfondi e Colori | background-color, background-image, opacity,
box-shadow |
Applicano tinte di sfondo, sfumature, trasparenze e ombreggiature visive. |
| Transizioni e Responsive | transition, transform, @media |
Permettono animazioni fluide al passaggio del mouse e adattamenti per dispositivi mobili. |
3. Simulatore Interattivo: Generatore di Stili CSS
Seleziona una proprietà di stile per visualizzarne la sintassi corretta e un esempio d'uso immediato.
css-helper@nexus-core:~#
Style Inspector
> Seleziona una proprietà e premi il pulsante per ispezionarne la struttura.