HTML - Fogli di Stile

Advertisements

Previous Page
Next Page  

I fogli di stile CSS indicano come mostrare i documenti negli schermi, stampanti, o a volte quanto devono essere accurati. Il Consorzio W3C ha promosso fortemente l' uso dei fogli di stile fin dalla sua fondazione nel 1994.

Il Cascading Style Sheets (CSS) è un meccanismo per stilizzare i documenti creato con lo scopo di far fronte alle esigenze di utenti e Web Designers. Grazie al CSS, si possono definire una serie di proprietà per ogni elemento HTML. Ogni proprietà ha un nome ed un valore, separati da due punti (:). Mentre le proprietà vengono separate da un punto e virgola (;).

Esempio

Vediamo un esempio di un documento HTML in cui associamo ad un tag <font> degli attributi per indicarne un colore ed una dimensione del testo:

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color="green" size="5">Hello, World!</font></p>
</body>
</html>

Possiamo riscrivere il codice dell' esempio precedente utilizzando i fogli di stile:

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style="color:green;font-size:24px;">Hello, World!</p>
</body>
</html>

Produrrà il seguente risultato:

Hello, World!

Ci sono 3 modi per utilizzare i fogli di stile in un documento:

  • Foglio di Stile Esterno - Definisce le regole di stile in un file .css separato che verrà incluso nel documento HTML tramite il tag HTML <link>.

  • Foglio di Stile Interno - Definisce le regole di stile nella sezione header del documento HTML utilizzando il tag <style>.

  • Foglio di Stile Inline - Definisce le regole di stile all' interno dell' elemento HTML utilizzando l' attributo style.

Analizzeremo adesso uno per uno i tre possibili casi.

Foglio di Stile Esterno:

Se si vogliono applicare gli stessi stili in più pagine, è buona norma inserire tutte le proprietà dei vari elementi in un singolo file e includerlo nelle diverse pagine HTML. Si può includere un foglio di stile all' interno di un documento HTML tramite l' elemento <link>. A seguire vi è un esempio:

Esempio

Consideriamo di avere un foglio di stile style.css con le seguenti regole:

.red{
   color: red;
}
.thick{
   font-size:20px;
}
.green{
   color:green;
}

Adesso definiremo tre regole CSS che verranno applicati a tre diverse classi. Consiglio di non perdere molto tempo riguardo come vengono definite le regole CSS poichè saranno spiegate durante la guida al CSS. A seguire un esempio utilizzando un file CSS esterno:

<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel="stylesheet" type="text/css" href="/html/style.css">
</head>
<body>
<p class="red">This is red</p>

<p class="thick">This is thick</p>

<p class="green">This is green</p>

<p class="thick green">This is thick and green</p>
</body>
</html>

Produrrà il seguente risultato:

This is red

This is thick

This is green

This is thick and green

Foglio di Stile Interno:

Se vuoi applicare determinate regole di stile ad un singolo documento, queste possono essere incluse direttamente nell' header del documento utilizzando il tag <style>.

Le regole definite in questo modo sovrascrivono le eventuali regole definite in fogli di stile CSS esterni.

Esempio

Adesso riscriveremo l' esempio precedente, ma in questo caso definiremo delle regole CSS utilizzando il tag <style> nell' header:

<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type="text/css">
.red{
   color: red;
}
.thick{
   font-size:20px;
}
.green{
   color:green;
}
</style>
</head>
<body>
<p class="red">This is red</p>

<p class="thick">This is thick</p>

<p class="green">This is green</p>

<p class="thick green">This is thick and green</p>
</body>
</html>

Produrrà il seguente risultato:

This is red

This is thick

This is green

This is thick and green

Fogli di Stile Inline:

Si possono applicare degli stili direttamente all' interno dell' elemento utilizzando l' attributo style. Questo tipo dovrebbe essere utilizzato quando si ha la necessità di cambiare lo stile di un singolo elemento HTML.

Rules defined inline with the element overrides the rules defined in an external CSS file as well as the rules defined in <style> element.

Le regole definite con il metodo inline sovrascrivono sia le regole definite in CSS esterni, sia quelle definite nell' elemento <style> dell' header.

Esempio

Adesso riscriveremo l' esempio precedente, ma in questo caso utilizzeremo regole CSS definite all' interno dell'elemento HTML tramite l' attributo style.

<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style="color:red;">This is red</p>

<p style="font-size:20px;">This is thick</p>

<p style="color:green;">This is green</p>

<p style="color:green;font-size:20px;">This is thick and green</p>
</body>
</html>

Produrrà il seguente risultato:

This is red

This is thick

This is green

This is thick and green

Advertisements