CSS: Fogli di stile
Applicazione dei fogli di stile
I fogli di stile hanno senso di esistere se applicati ad un documento HTML, e per fare ciò ci sono vari modi.
CSS esterni
Sono esterni i fogli di stile definiti in un file separato rispetto al documento HTML. Hanno estensione .css e sono dei semplici file di testo editabili con un qualsiasi editor. Un editor dedicato, in più, offre facilitazioni nella stesura del codice (colorazione differenziata delle varie parti, funzionalità di autocompletamento), anteprima visuale, help, wizard e templates.I CSS esterni possono essere collegati ad un file HTML tramite l'elemento <LINK>, all'interno della sezione <HEAD>.
Es.
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
Attributi dell'elemento <LINK>:
- rel: relazione tra il documento e il file esterno. Valori possibili: stylesheet e alternate stylesheet. Obbligatorio.
- type: tipo di dati. Unico valore possibile: text/css. Obbligatorio.
- href: URL assoluto o relativo del foglio di stile. Obbligatorio.
- media: identificazione del supporto (stampante, schermo, ecc...) a cui il CSS viene applicato. Opzionale.
Es.
<style type="text/css" media="screen">
@import url(style.css);
</style>
@import url(style.css);
</style>
CSS interni
Quando il codice dei fogli di stile è inserito nello stesso documento HTML si parla di CSS interni.I CSS esterni possono essere incorporati ad un documento HTML con l'elemento <STYLE>, all'interno della sezione <HEAD>.
Es.
<style type="text/css">
body {background: #FFFFFF;}
</style>
body {background: #FFFFFF;}
</style>
Attributi dell'elemento :
- type: tipo di dati. Unico valore possibile: text/css. Obbligatorio.
- media: identificazione del supporto (stampante, schermo, ecc...) a cui il CSS viene applicato. Opzionale.
Def.
<[elemento] style="[definizione dello stile]">
Ogni attributo style può contenere più definizioni di stile, separate da punto e virgola.
Ogni definizione ècomposta da una proprietà seguita da due punti e relativo valore.
Es.
<p style="color: green; background: white;">...</p>
L'attributo media: dispositivi diversi
Usato con l'elemento <LINK> o <STYLE> serve a definire il tipo di dispositivo cui il foglio di stile verrà applicato.I valori di questo attributo:
- all (tutti i dispositivi, valore di default in assenza di dichiarazione)
- screen (schermo)
- print (stampante)
- projection (proiezione a tutto schermo)
- aural (browser a sintesi vocale)
- braille (supporti braille)
- embossed (stampanti braille)
- handheld (palmari)
- tty (dispositivi a carattere fisso, tipo terminale)
- tv (web tv)
<link rel="stylesheet" type="text/css" media="print, braille" href="print.css">
Ma normalmente vengono usati valori diversi, associati a diversi fogli stile, per ogni dispositivo previsto.
<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
L'attributo rel: CSS alternativi
L'attributo rel ha due possibili valori, stylesheet e alternate stylesheet. Serve a poter disporre all'interno dello stesso documento di due fogli stile, quello di default e un secondo, il cui utilizzo dovrà essere previsto e gestito da apposito codice, per esempio in javascript.<link rel="stylesheet" type="text/css" title="default" href="default.css">
<link rel="alternate stylesheet" type="text/css" title="accessibile" href="accessibile.css">
Vedi anche
Tutti i loghi e i marchi registrati presenti in questo sito sono dei rispettivi proprietari. La responsabilità sui contenuti è dei rispettivi autori.
Tutto il resto è Copyleft Zingarelli.biz - la comunicazione con ogni mezzo necessario.
