10 - HTML 5

I fogli di stile

I fogli di stile a cascata (o CSS - Cascading Style Sheets) permettono di cambiare l'aspetto della pagine che abbiamo creato. In effetti, per il momento le nostre pagine saranno tutte di un noioso testo nero su sfondo bianco.

I fogli di stile permettono di specificare una serie di regole che vengono applicate una dopo l'altra ("a cascata"), a determinati elementi (i vari comandi HTML). È importante sapere che, per ogni comando, è possibile assegnare:

Una o più classi, tramite l'attributo class. Ad esempio, <div class="verde"> costruisce una "scatola" con la classe "verde", mentre <div class="verde grande"> assegna a questo box le classi "verde" e "grande".
Un identificatore (id), che deve essere unico ed apparire un'unica volta in tutta la pagina. Ad esempio, possiamo identificare un paragrafo con <p id="principale">.

Non è necessario specificare questi attributi nel tag di chiusura, che rimarranno </div>, </p>, ecc.

La sintassi del file CSS si compone di una serie di regole, e ricorda un po' quella del C (anche i commenti si fanno nello stesso modo). Proviamo a creare nella nostra public_html un file stile.css con il seguente contenuto:

/* Questa regola si applica a tutti i tag body, anche se in ogni 
   documento ne appare uno solo, e ci permette di impostare lo
   sfondo. */
body {
    background-color: red;
}

/* La sintassi con il punto permette di identificare tutti i
 * comandi che hanno una certa classe specificata. In questo
 * caso impostiamo il colore del testo. */
.verde {
    color: green;
}

/* Infine, possiamo selezionare il tag con un certo ID utilizzando
 * il simbolo del cancelletto. Ora impostiamo della spaziatura. */
#principale {
    margin-left: 20px;
    margin-right: 20px;
}

Come caricare il file CSS

Se provate a salvare il file .css, vi accorgerete che la vostra pagina non è cambiata per nulla. Infatti, non abbiamo scritto da nessuna parte nel nostro file .html che vogliamo usare questo stile.

Inseriamo dunque fra i tag <head> e </head> la linea

  <link rel="stylesheet" type="text/css" href="stile.css" />

A questo punto dovremmo vedere lo sfondo diventare rosso. Possiamo provare ad assegnare le classi definite (o l'ID) ad alcuni elementi, e vedere come cambia l'effetto.

Laboratorio di Comunicazione mediante Calcolatore - Leonardo Robol e Sergio Steffè - AA 2019/2020 - PISA