Diamo un'occhiata al seguente codice:
Rispetto al documento precedentemente scritto ci sono due novità
- nell'elemento head è stato aggiunto un nuovo tipo di elemento. detto di stile, con i suoi due marcatori style e /style, al cui interno è riportata una certa informazione
- nel primo elemento paragrafo, precisamente nel marcatore p, è stato aggiunto
class="tit1"
Esaminiamo cosa è scritto all'interno dell'elemento di stile:
.tit1 {font-family: Arial; font-size: 16px; font-weight: bold; color: red; text-align: center; background-color: yellow;}
Si può subito notare che tit1, dopo il punto, è il valore dell'attibuto class nel marcatore dell'elemento paragrafo. Quanto indicato tra le parentesi {} si riferisce alla classe di elementi tit1. Tutti gli elementi indicati come appartenenti alla classe tit1 avranno le caratteristiche di stile riportate tra le parentesi.
Diamo uno sguardo al risultato:
Come si vede, il titolo ha cambiato notevolmente stile: tipo di carattere (font-family: Arial), dimensione (font-size: 16px, ossia 16 pixel), grassetto (font-weight: bold), colore del carattere (color: red), colore di sfondo della riga (background-color: yellow), allineamento (text-align: center).
Nel vecchio HTML, ancora accettato dai browser, molte delle informazioni di stile erano mischiate al testo, sia mediante l'uso di attributi degli elementi, che con l'uso di elementi di stile.
Adesso si tende a separare nettamente il contenuto testuale, che è compreso negli elementi contenuti nel corpo (body), dalll'informazione di stile, che è compresa nell'elemento di stile (style) , all'interno dell'intestazione (head).
Prossimamente vedremo come ordinare lo spazio della pagina.
***
Nessun commento:
Posta un commento