Foglio collegato
Lo stile è scritto in un file di testo con estensione .css 
|
1 |
p {color:blue} |
collegato al documento con il tag LINK
|
1 |
<link rel="stylesheet" type="text/css" href="..."> |
all’interno della sezione HEAD
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> <title>Stile collegato</title> <link rel="stylesheet" type="text/css" href="collegato1.css"> </head> <body> <p>Il testo di questo paragrafo è di colore blu</p> <p>Anche questo...</p> </body> </html> |
Un gruppo di pagine (tutte?) di un ipertesto utilizzeranno lo stesso foglio di stile per avere un aspetto uniforme.
L’elemento LINK ha i seguenti attributi
- rel type href, obbligatori
- media, facoltativo
Foglio incorporato
Lo stile può essere inserito all’interno della coppia di tag
|
1 |
<style type="text/css">...</style> |
in modo che influenzi tutte le occorrenze all’interno del singolo documento
|
1 |
<style type="text/css">p {color:blue}</style> |
In un documento ben strutturato le direttive per lo stile saranno incluse nella sezione HEAD
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> <title>Stile incorporato</title> <style type="text/css">p {color:blue}</style> </head> <body> <p>Il testo di questo paragrafo è di colore blu</p> <p>Anche questo...</p> </body> </html> |
Foglio in linea
Lo stile può essere inserito all’interno del tag che si vuole influenzare
|
1 |
<p style="color:blue">Il testo di questo paragrafo è di colore blu</p> |
|
1 |
<p style="color:blue;text-align:center">Il testo di questo paragrafo è blu e centrato</p> |
Riepilogo
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<html> <head> <title>Associare lo stile</title> <link rel="stylesheet" type="text/css" href="..."> <style type="text/css">...</style> </head> <body> <style type="text/css">...</style> ... <p style="color:green">Paragrafo di colore verde</p> </body> </html> |