Non è facile fare un riassunto delle centinaia di proprietà CSS 3usate nei fogli di stile. Certo è che ce ne sono alcune decisamente più usate e che è quasi irrinunciabile non conoscerle. Lo studente spaesato, con esercizi ripetuti, potrà certamente memorizzarle in modo semplice. Vediamo un prontuario simil cheat sheet suggerito per le esercitazioni a scuola.
Cerchiamo di dividerle in sotto-categorie ricordando che possono essere utilizzate con tutti i selettori CSS, da quelli dei tag standard, alle classi con . e agli id con #:
Indice dei contenuti
Testo
color: red; /* colore testo con valore in inglese o esadecimale #123456*/
font-size: 15px; /* grandezza del font in pixel, em o pt */
font-style: italic; /* stile del testo (italic, oblique, normal) */
font-weight: bold; /* oppure un valore numerico in centinaia 200,400,600*/
text-align: center; /* allineamento del testo (left, center, right) */
Sfondo di tag/contenitori
background-color: white-smoke; /* sfondo di colore grigetto o con #f5f5f5*/
background-image: url("pippo.jpg"); /* immagine di sfondo */
background-repeat: no-repeat; /* ripeti immagine (no-repeat, repeat-y repeat-x) */Bordi
border: 1px solid red; /*grandezza linea in px / solid, dottet, dashed / colore inglese o hex */Margini e spaziature
/* spazio esterno */
margin: 10px 0 1em 2pt; /* valore da sopra destra sotto sinistra in px, pt, em */
/* spazio interno */
padding: 10px 0 1em 2pt; /* valore da sopra destra sotto sinistra in px, pt, em */
Dimensione dei contenitori
width: 100%; /* larghezza o %, px, em */
height: 200px; /* altezza in genere px o em, meno diffuso % */Disposizione
display: block; /* o inline(flex), inline-block(inline-flex), table, table-row, table-cell, */
float: left; /* left o right*/
clear: both; /* both, left o right */Ultima modifica 28 Dicembre 2023
