I fogli di stile a cascata (CSS), introdotti con HTML 4.0, costituiscono uno strumento potente e flessibile per controllare la presentazione dei documenti.
I CSS semplificano notevolmente il lavoro di editing ed eliminano la ripetizione dei comandi. E' infatti possibile definire il layout delle pagine e l'aspetto di elementi ricorrenti all'interno del documento (ad esempio, dimensione, font e colori di testo e titoli).
L'introduzione dei CSS ha reso obsoleti molti attributi degli elementi HTML.
Uno stile è un insieme di regole che possono essere applicate ai vari elementi di un documento. Esistono tre modi per applicare gli stili:
Non tutti i browser riconoscono i CSS, che se non sono supportati vengono semplicemente ignorati. E' bene considerare questa eventualità ed evitare di scrivere pagine illeggibili in assenza di stili.
Gli stili sono applicati in cascata. Ciò significa che, se sono specificati più stili per lo stesso elemento HTML, il formato usato dipende dalla sorgente del foglio di stile, nell'ordine definito dalla seguente scala di priorità crescente:
- Browser default
- Style Sheet esterno
- Style Sheet interno (definito nell'elemento <head>)
- Inline Style (definito nel tag tramite l'attributo style)
Gli stili sono definiti da semplici regole. Una regola è composta da un selettore e da un insieme di dichiarazioni fra parentesi graffe. Ciascuna dichiarazione è composta da coppie proprietà:valore separate da punto e virgola.
selector {property: value; property: value; ....
Esempio:
h2 { font-family: sans-serif; text-align: justify; margin-left: 10%; margin-right: 10%; }
<html> <head> <title>Stile 1</title> <style> <!-- h2 { font-family: sans-serif; color: red; font-style: oblique; text-align: center; border: thin groove; } --> </style> <body> <h2>Stile 1</h2> </body> </html>
E' consigliabile commentare l'elemento, così che possa essere ignorato dai browser che non supportano gli stili.
<html> <head> <title>Stile 1</title> <style> <!-- h2 { font-family: sans-serif; color: red; font-style: oblique; text-align: center; border: thin groove; } --> </style> <body> <h2>Stile 1</h2> <h2 style="border: ridge; background: yellow; text-align:right" > Stile 2</h2> </body> </html>
Lo stile è stato definito in cascata tramite l'attributo style dell'elemento H2. Anche se utile, questo modo di procedere è generalmente sconsigliato.
Le classi servono per applicare uno stile non a tutti gli elementi di un determinato selettore, ma soltanto ad alcuni di essi (quelli appartenenti alla cleasse):
selector.classname {property: value; property: value; .... }
per applicare la classe:
<selector class=classname>
Esempio:
h2.uno { font-family: sans-serif; text-align: justify; margin-left: 10%; margin-right: 10%; }
<h2 class="uno">Ora ha lo stile</h2> <h2>Ora non ha lo stile</h2>
Con le classi anonime è possibile definire uno stile generale (cioè non legato ad un selettore specifico) e applicarlo a qualunque elemento:
.uno { font-family: sans-serif; text-align: justify; margin-left: 10%; margin-right: 10%; }
<h2 class="uno">Ora applico lo stile nel titolo</h2> <p class="uno">Ora applico lo stile nel paragrafo</h2>
Il metodo migliore, per chiarezza e per uniformità, per applicare un foglio di stile è quello di importarne la definizione da un file esterno.
Per collegare (importare) un file .css ad una pagina HTML si usa il seguente elemento nella sezione <head>:
<link rel="StyleSheet" href="url" type="text/css" media="screen">
rel indica il tipo di collegamento, href la locazione del foglio di stile, type il tipo MIME del file, media il modo in cui viene usato il documento (altre modalità sono screen, printing e presentation).
E' possibile importare più fogli di stile, ricordando che i fogli sono applicati in cascata, ovvero che l'ultimo foglio incluso sovrascriverà quelli precedenti (limitatamente agli stili già definiti).
Non tutte le piattaforme e, conseguentemente, non tutti i browser riescono a visualizzare tutti i tipi di font. E' quindi opportuno specificare font alternativi, oppure font generici come: SERIF (times), SAN-SERIF (arial), CURSIVE, FANTASY, MONOSPACED (courier), che tutti i sistemi riescono a visualizzare.
p { font-family: "Times New Roman", Times, serif; }
font-size specifica le dimensioni dei caratteri in valori assoluti, relativi o in percentuale; i valori assoluti sono x-small, small, medium, large, xlarge; i valori relativi sono larger, smaller (riferiti alle dimensioni del font della pagina in cui vengono incorporati).
font-size: [small | medium | large] | [smaller | larger] | <length> | <percentage> font-style: normal | italic | oblique
font-weight specifica se il carattere deve essere normale, grassetto, grassetto più marcato o più sottile; può essere specificato anche numericamente:
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 |
400 | 500 | 600 | 700 | 800 | 900
Con i fogli di stile è possibile ottenere un maggiore controllo sui colori, assegnando diversi colori ai singoli elementi che compongono la pagina.
background-color: <value> | transparent
assegna un colore allo sfondo di un elemento.
background-image: URL | none
inserisce un'immagine come sfondo di un elemento.
Il colore di ogni attributo può essere cambiato:
color: <value>
text-align: left | right | center | justify
text-indent crea un rientro nella prima riga di un paragrafo; usando un valore percentuale, lo spazio scala se la dimensione della finestra del browser viene modificata.
text-indent: length | percentage
text-decoration: none | underline | overline | line-through
se si vogliono i link senza sottolineature si può usare:
a:link, a:visited, a:active {text-decoration: none }
Nel seguente esempio si mostra l'uso dei CSS per la presentazione di questo documento:
p { font-family: sans-serif; text-align: justify; margin-left: 10%; margin-right: 10%; text-indent : 0%; } h2 { font-family: sans-serif; color: navy; font-style: oblique; } h3 { font-family: sans-serif; color: blue; font-style: oblique; margin-left: 5%; } pre { font-family: "Courier New", monospaced; FONT-WEIGHT: bold; color: navy; text-align: justify; margin-left: 8%; margin-right: 10%; } ul { font-family: sans-serif; text-align: justify; margin-left: 10%; margin-right: 10%; } dl { font-family: sans-serif; text-align: justify; margin-left: 10%; margin-right: 10%; } dt { FONT-WEIGHT: bold; color: navy; }
Questa è la pagina di esempio:
<html> <head> <title>css</title> <link rel="StyleSheet" href="./uno.css" type="text/css" media="screen"> </head> <body > <h2>Primo titolo</h2> <h3>Secondo titolo</h3> <p>Questo è il paragrafo utilizzato</p> <pre> Questo è utilizzato per le parti di codice che non voglio siano formattate </pre> <ul> <li>le liste 1</li> <li>le liste 2</li> <li>le liste 3</li> </ul> <dl> <dt>uno</dt> <dd>definizione1</dd> <dt>due</dt> <dd>definizione2</dd> <dt>tre</dt> <dd>definizione3</dd> </dl> </body> </html>
E' possibile considerare un blocco di elementi HTML come un singolo elemento, usando il tag <div>. E' poi possibile applicare una classe di stile a tutti gli elementi del blocco:
<div class="uno"> <p>...</p> <h1>...</h1> <pre>...</pre> </div>
Così si ha la possibilità di trattare le divisioni come singole entità, permettendo una migliore organizzazione della pagina. Sarà utile in DHTML.
Un modo per creare effetti dinamici consiste nell'usare i layer, i quali permettono di definire strati indipendenti e sovrapposti di testo o immagini. Per creare layer si può far ricorso alla proprietà z-index definita per lo stile di un div. Ad esempio:
z-index: n
permette di assegnare un ordine di sovrapposizione ai layer. Il layer più basso appare sopra lo sfondo e ha z-index: 1; non c'è limite al numero di layer sovrapposti, anche se è consigliabile non superare 20. Le proprietà:
position: absolute | relative left: n top: n
permettono di indicare la posizione del layer usando parametri espressi in pixel (default 0,0)
mentre per indicare la dimensione del layer si usano le proprietà:
width: n height: n
<html> <head> <title>Layers</title> </head> <body> <h1>Layer applicati al testo.</h1> <div style="z-index: 4; left: 50px; top: 50px; position : absolute; background-color:blue; color: white; font-size: 24pt"> <p>Questo <br>è<br>il<br>primo.</p> </div> <div style="z-index: 3; left: 100px; top: 100px; position : absolute; background-color: green; color: red;font-size: 24pt"> <p>Questo<br>è<br>il<br>secondo.</p> </div> <div style="z-index:2; left: 200px; top: 200px; position : absolute; background-color:red; color: green; font-size: 24pt"> <p>Questo<br>è<br>il<br>terzo.</p> </div> </body> </html>
![]() |
![]() |