CREARE SITI WEB in HTML e CSS > Fogli Stile CSS - Tabelle riassuntive
Prima di elencare altre proprietà dei Fogli Stile, riassumiamo quello che finora è stato studiato fin qui.
Per applicare un Foglio Stile, inserisci tra i tag "head" il codice:
<style type="text/css"> </style>
Per esprimere una dichiarazione usa la seguente sintassi:
selettore {
proprietà1: valore1;
proprietà2: valore2;
}
proprietà1: valore1;
proprietà2: valore2;
}
Il selettore può essere:
un TAG HTML (es.: h1)
una classe (es.: .nerobianco)
un identificatore (es.: #intestazione)€
Le proprietà CSS (viste nelle lezioni precedenti):
| proprietà | descrizione | esempio |
| font-size | dimensiona il carattere | { font-size: 14pt; } |
| color | colora il carattere | { color: red; } |
| text-align | allinea il testo | { text-align: center; } |
| background-color | colorare lo sfondo | { background-color: yellow; } |
| border | inserisce un bordo su tutti i quattro lati | {border: 5px solid green;} |
| border-top | inserisce un bordo nel lato superiore | {border-top: 5px dotted gray ;} |
| border-left | inserisce un bordo nel lato sinistro | {border-left: 5px dotted gray;} |
| border-bottom | inserisce un bordo nel lato inferiore | {border-bottom: 10px solid black;} |
| border-right | inserisce un bordo nel lato destro | {border-right: 10px solid black;} |
| margin | imposta i margini su tutti i quattro lati | {margin: 5px;} |
| margin-top | imposta il margine sul lato superiore | {margin-top: 5px;} |
| margin-left | imposta il margine sul lato sinistro | {margin-left: 10px; |
| margin-bottom | imposta il margine sul lato inferiore | {margin-bottom: 20px;} |
| margin-right | imposta il margine sul lato destro | {margin-right: 10px;} |
È possibile dichiarare il margine usando anche questi metodi:
| codice CSS | descrizione del codice |
| {margin: 5px 10px;} | Il primo valore (5px) viene assegnato al
margine superiore ed inferiore; il secondo valore (10px) viene assegnato al margine sinistro e destro. |
| {margin: 5px 10px 25px;} | Il primo valore (5px) viene assegnato al
margine superiore; il secondo valore (10px) viene assegnato al margine sinistro e destro; Il terzo valore (25px) viene assegnato al margine inferiore. |
| {margin: 5px 10px 25px 15px;} | I quattro valori vengono assegnati
rispettivamente al margine: superiore (5px), destro(10px), inferiore(25px), sinistro(15px). |
Le proprietà CSS (continua):
| proprietà | descrizione | esempio |
| font-weight | formatta il testo in grassetto | {font-weight: bold;} |
| font-style | formattare il testo in corsivo | {font-weight: italic;} |
| height | imposta l'altezza di un blocco | {height: 50px;} |
| width | imposta la larghezza di un blocco | {width: 300px;} |
| overflow | imposta eventuali barre di scorrimento | {overflow: auto} {overflow: scroll} |
| float | fa fluttuare i blocchi | {float: left} |
| clear | cancella proprietà precedentemente impostate | {clear: left} |
| /* */ | inserisce commenti | /* questo commento verrà ignorato */ |
Altre proprietà presenti nel layout di base n.7 (d'esempio) ma non ancora analizzate nelle lezioni precedenti.
(Non preoccuparti se non comprendi subito la loro applicazione. Più avanti verranno illustrate dettagliatamente).
| proprietà | descrizione | esempio |
| padding | imposta dello spazio tra la linea di bordo e il contenuto (testo o immagine) | {padding:5px} oppure {padding:5px 10px} |
| padding-top | imposta il padding sul lato superiore | {padding-top:10px} |
| padding-left | imposta il padding sul lato sinistro | {padding-left:15px} |
| padding-bottom | imposta il padding sul lato inferiore | {padding-bottom:5px} |
| padding-right | imposta il padding sul lato destro | {padding-right:20px} |
| font | imposta genericamente il carattere | {font: 76% arial,sans-serif;} |
| display | - associato al valore "block" rende un elemento a livello di blocco (ovvero alla chiusura del tag c'è il cambio di riga) - associato al valore "inline" rende un elemento a livello di linea (ovvero alla chiusura del tag non c'è il cambio di riga) |
{display:block;} oppure {display:inline;} |
| position | definisce la posizione del blocco. Se deve essere statica (predefinita), relativa, o assoluta. È solitamente associata ad almeno una proprietà di riferimento (es.: top, left, bottom, right) |
{position:relative; right:10px; top:20px} oppure {position:absolute right:100px; top:25px} |
| line-height | imposta l'interlinea, ovvero lo spazio tra una linea e l'altra | {line-height:80px} oppure {line-height:1.5} |