![INDIETRO](prev1.gif) |
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.
![INDIETRO](prev1.gif) |
Laboratorio di Comunicazione mediante Calcolatore - Leonardo Robol e Sergio Steffè - AA 2019/2020 - PISA |
|