CSS: Fogli di stile
Applicazione dei CSS
- Dettagli
- Ultima modifica il Sabato, 15 Ottobre 2011 08:26
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.
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.
I CSS esterni possono anche essere importati con la direttiva @import nell'elemento <STYLE>, all'interno della sezione <HEAD>.
Es.
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.
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.
Inoltre i CSS possono essere utilizzati anche come elementi inline tramite l'attributo style. È un attributo common (applicabile a tuti gli elementi). La dichiarazione avviene per ogni singolo tag.
Def.
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.
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)
È possibile usare più valori separti da virgole.
Ma normalmente vengono usati valori diversi, associati a diversi fogli stile, per ogni dispositivo previsto.
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.
