Guida CSS di base

I CSS servono per gestire tutto il layout di un sito Web. Grazie ad essi è possibile intervenire sulla formattazione del testo, sul posizionamento degli elementi grafici e sulla disposizione che questi elementi avranno rispetto a diversi media e device. Questa guida permette di comprendere e manipolare le nozioni più importanti per la creazione di layout e sfruttare caratteristiche universalmente condivise da tutti i browser.

1. 1. Introduzione

   Cosa sono e a cosa servono i CSS, cosa si può arrivare a realizzare...

I CSS e i documenti HTML

1. 2. Classificazione degli elementi HTML e albero del DOM

   Capire gli elementi di una pagina Web: elementi blocco, in linea e...

2. 3. Come è fatto un CSS: regole, proprietà, commenti

   La struttura di un foglio di stile

3. 4. Valori e unità di misura nei CSS

   Tutti i valori e le unità di misura dei CSS: dalle dimensioni alle...

4. 5. Inserire i fogli di stile CSS in un documento

   Come inserire i CSS in un documento: i link e l'oggetto @import

5. 6. L'attributo media e i tipi di media

   Differenziare i fogli di stile in base al dispositivo che li...

Selettori e pseudo-elementi

1. 7. I selettori CSS di base: universale, di tipo, id, classi

   Come associare i fogli di stile alle parti di un documento

2. 8. I selettori combinatori o di relazione

3. 9. I selettori di attributo

   Le fondamenta di un foglio di stile: i selettori

4. 10. Le pseudo-classi

   Le classi speciali: come definire lo stato di un elemento

5. 11. Gli pseudo-elementi

   Creare al volo elementi fittizi non presenti nel codice del documento

6. 12. Ereditarietà, cascata, conflitti tra gli stili

   Come i CSS gestiscono la priorità e la precedenza delle regole. il...

Il Box Model: impostare la struttura della pagina

1. 13. Il box model

   Come i CSS gestiscono la visualizzazione degli elementi nella pagina

2. 14. Impostare l'altezza con i CSS: le proprietà height e overflow

   Definire l'altezza di un elemento: sintassi e valori

3. 15. Impostare la larghezza con i CSS: la proprietà width

   Definire la larghezza di un elemento: sintassi e valori

CSS all’opera: le proprietà di base

1. 16. Margin: gestire i margini con i CSS

   Come spaziare i vari elementi tra loro: le cinque proprietà...

2. 17. Gestire il padding con i CSS

   Creare spazi attorno agli elementi senza usare i margini

3. 18. Border e outline: gestire i bordi con i CSS

   Definire lo stile, la grandezza, il colore e tutte le proprietà dei...

4. 19. Gestire il colore con i CSS

   Cambiare il colore agli elementi, ai bordi, allo sfondo di un elemento

5. 20. Gestione dello sfondo

   Come gestire lo sfondo delle pagine Web con i CSS, impostare colori,...

Modello visuale e posizione degli elementi nella pagina

1. 21. Display: impostare la presentazione di un elemento

   Nascondere un elemento sulla pagina o posizionarlo in dipendenza di...

2. 22. Float e clear

3. 23. Posizionare gli elementi con i CSS

   Posizionamento assoluto relativo: tutti i dettagli sul loro...

4. 24. Impostare la posizione degli elementi

   Come collocare con precisione gli elementi in una pagina Web

5. 25. Z-index, visibility, clip: altre proprietà per la presentazione di un elemento

Testi ed elementi tipografici

1. 26. Gestione del testo: proprietà di base

   Le proprietà base del testo: impostare il tipo di carattere, la...

2. 27. Maiuscoletto, indentazione, spazi nel testo con i CSS

   Le proprietà avanzate del testo: rendere più leggibile una pagina,...

3. 28. Impostare la presentazione delle liste con i CSS

   Gestire lo stile delle liste e associare un'immagine al segnaposto

4. 29. Impostare la presentazione delle tabelle con i CSS

   Modifica dello stile delle tabelle: table-layout, border-collapse,...

Altre Proprietà

1. 30. Modificare l'aspetto del cursore con i CSS

   Le proprietà cursor, content, direction, outline, quotes,...

2. 31. Le @-rules

   Le funzioni e la sintassi di tutte le @-rules dei CSS

3. 32. CSS per la stampa di documenti

   La formattazione delle pagine destinate alla stampa con i CSS

Risorse utili

1. 33. Compatibilità cross-browser e CSS per Internet Explorer

   Risorse per testare e verificare la corretta sintassi dei CSS