Css è l’acronimo di Cascading style sheet(Fogli di stile a cascata).
Il Css è un linguaggio standard del W3C.
Evoluzioni dei CSS:
- CSS 1: il primo rilascio ufficiale risale al dicembre 1996.
- CSS2: nel maggio 1998 viene rilasciata la seconda versione che si arricchisce di molte proprietà in più rispetto alla prima versione. L’ultima versione è la level 2 revision 1 (CSS 2.1).
- CSS3: Futura versione ancora in fase di studio (Working Draft).
A cosa servono i css?
- A separare Presentazione e Contenuto.
- Modularizzare aspetti legati alla presentazione, per esempio visualizzazioni per stampa, pc, palmari.
- Modificare l’aspetto di più pagine con il minimo sforzo
Sintassi dei css
Selettore {Proprietà: Valore;} Esempio: Banner {text-align=center;}
Come assegno un foglio di stile ad una pagina html?
Ci sono 3 modi per associare i fogli di stile:
- CSS interni
- CSS in linea
- CSS esterni
CSS interni
<style type=”text/css”>
h1 {
font-size: 18pt;
text-align: center;
}
</style>
I selettori vanno inseriti all’interno dei tag <style>
e il tag <style> va inseriti all’interno del tag <head>
CSS in linea
<p style=”font-size: 12pt; color:red;”>Prova mondoinformatico</p>
CSS esterni
Tutti i selettori vengono salvati in file di testo a parte con estensione .css, il file css va poi incluso nel file html.
Si presentano due modi di agire:
- Usare l’elemento <link> all’interno della sezione <head>:
<link rel=”stylesheet“ href=”nomefile.css” type=”text/css”>
rel: indica il tipo di relazione (stylesheet o alternate stylesheet per i fogli di stile alternativi).
href: url del foglio.
type: il tipo MIME (tipo di dati) del foglio.
- Usare la direttiva @import (a volte risolve problemi di compatibilità tra browser) :
<style>@import url(nomefile.css);</style>
L’attributo media per la visualizzazione su diversi dispositivi
Il diffondersi delle tecnologie, ha permesso di poter visitare siti con differenti dispositivi: computer, palmari, smartphone, telefonini, ecc.
Il problema è che la corretta visualizzazione di ogni pagina richiede un foglio di stile personalizzato per ogni dispositivo.
L’attributo media dei tag <link> e <style>, permette di poter impostare un foglio di stile diverso per ogni supporto.
Il seguente esempio imposta, nelle due diverse sintassi, un foglio di stile specifico per i palmari:
<link rel=”stylesheet” type=”text/css” media=“handheld” href=“stile.css” />
<style type=”text/css” media=” handheld “>…</style>
Un elenco dei possibili valori dell’attributo media:
- all: CSS applicato a tutti i dispositivi di visualizzazione.
- Screen: normali browser web.
- Print: stile usato solo in fase di stampa.
- Aural: usato per i browser a sintesi vocale.
- Braille: Il CSS viene usato per supporti basati sull’uso del braille.
- Embossed: stampanti braille.
- Handheld: Palmari e simili.
- Projection: Usato per presentazioni e proiezioni a tutto schermo.
- Tty: Dispositivi a carattere fisso.
- Tv: Web-tv.
commenti all'articolo (0)
