Aggiungere i CSS ad una pagina html
I fogli di stile possono essere caricati esternamente (file salvato con estensione .css) o inclusi dentro l'HTML.
Per caricare un foglio di stile esternamente, inserire uno dei seguenti codici tra i tag con relativa url al file .css.
HTML Code:
<head>
<title>Titolo pagina</title>
<link rel="stylesheet" type="text/css" href="stile.css" />
</head>
o
HTML Code:
<head>
<title>Titolo pagina</title>
<style>
@import url(stile.css);
</style>
</head>
Per inserire lo stile direttamente nell' HTML, aggiungere le regole CSS sempre tra i tag di questa maniera:
HTML Code:
<head>
<title>Titolo pagina</title>
<style type="text/css">
selettore {
proprietà: valore;
}
</style>
</head>
Esempio:
HTML Code:
<head>
<title>Titolo pagina</title>
<style type="text/css">
body {
background: #FFFFCC;
}
</style>
</head>
Si può anche dare lo stile inlinea ad un unico elemento con il seguente format:
HTML Code:
<elemento style="regole css">
Esempio:
HTML Code:
<p style="background-color:#000000;">Sono un paragrafo a sfondo nero</p>
Attributo Media
Con l'attributo media possiamo speficificare il supporto a quale applicare il stile css come per un browser web,
la stampa o anche un browser di tipo vocale.
I suoi valori possono essere:- all: per tutti i dispositivi
- screen: per i browser comuni
- print: per la stampa della pagina
- projection: per proiezioni
- aural: per browser a sintesi vocale
- braille: per supporti di tipo braille
- embossed: per la stampa in braille
- handheld: per cellulari. palmari...
- tty: per dispositivi a carattere fisso
- tv: per la Web-tv
Questo attributo media può essere applicato sia agli elementi 'link' che 'style'.
Esempio:
HTML Code:
<link rel="stylesheet" type="text/css" href="stile.css" media="screen" />
o
HTML Code:
<style type="text/css" media="screen">...</style>
Gli fogli di stile possono essere combinati tra di loro per specificarne uno per ogni media:
HTML Code:
<link rel="stylesheet" type="text/css" href="stile.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Fogli di stile alternativi
Possiamo dare la scelta a l'utente di cambiare il foglio di stile, specificando un foglio di stile alternativo (con layout, colori, font-size...diversi) cambiando il valore del attributo 'rel' da 'stylesheet' ad 'alternate stylesheet'.
Esempio:
HTML Code:
<link rel="stylesheet" type="text/css" href="stile.css" />
<link rel="alternate stylesheet" type="text/css" href="alternate.css" />
NB: per permettere il cambio dinamico del foglio di stile da uno di default a uno di tipo alternativo,
servirà implementare un script spesso creato in Javascript.
Bookmarks