CSS è l'acronimo di Cascading Style Sheets. Il suo ideatore è stato lo svedese Hakon Wium Lie che nel 1990 lavorava ad un progetto di giornale elettronico personalizzato dove ognuno poteva comporsi le pagine scegliendo le notizie che più lo interessavano.
Nonostante la facilità dei CSS e il loro enorme potenziale ci vollero ben 5 anni prima che i browser li supportassero ampiamente.
I browser di ultima generazione hanno un buon supporto per i CSS, al contrario dei precedenti.
I CSS, ormai standard web del W3C, permettono di separare il contenuto della pagina dalle indicazioni di layout da utilizzare . In particolare è possibile definire stili da apllicare a più pagine , in modo che la modifica di uno stile si ripercuota immediatamente su tutte le pagine che lo utilizzano.
Capirete immediatamente con quanta facilità si potrà allora modificare a piacimento un layout di un sito web.
Ma in definitiva come funzionano i CSS e come si scrivono?
Vediamo assieme qualche esempio.
I CSS si basano su regole e ogni regola ha tre elementi: selettori, proprietà e valori.
Ecco come si presenta:
selettore {proprietà: valore;}
I selettori si riferiscono all'elemento HTML di cui si vuole definire lo stile della regola.
Ad esempio se voglio modificare l'aspetto dei paragrafi il selettore sarà p.
Le proprietà dicono cosa di quell'elemento HTML si vuole definire, come il colore, la dimensione, il font, la posizione, ecc.
Ad esempio se volgio modificare il colore del paragrafo utilizzerò la proprietà color.
Il valore specifica come debba essere modificata la proprietà.
Ad esempio se il colore del contenuto del paragrafo vogliamo che sia rosso scriveremo p {color: red}
Ogni regola contiene dunque una o più proprietà e i relativi valori all'interno di parentesi graffe. Ogni proprietà è separata dalle altre tramite il punto e virgola. Nell'ultima proprietà il punto e virgola è superfluo.
Il contentuto delle parentesi graffe si chiama dichiarazione.
Oltre ai normali identificatori HTML è possibilile utilizzare due altri tipi di selettori. Precisamente si tratta di classi e id.
Esempio di classi (class):
1) Codice HTML
<html>
...
<p class="testocolorato">Testo da colorare</p>
...
</html>
2) CSS
.testocolorato {color: #0000FF}
Esempio di id:
1) Codice HTML
<html>
...
<h1 id="nomesito">Acme</p>
...
</html>
2) CSS
#nomesito {backgound-color: #CC0000; font-family: Verdana; color: #FFFFFF}
Spiegheremo ora brevemente quali relazioni intercorrono tra i selettori.
Selettore discendente
h1 a {color: #000000}
Ogni elemento a contenuto in un elemnto h1 sarà nero.
Selettore figlio
div > a {color: #000000}
Si applica a tutti gli elementi a discendenti di div, ma non agli elementi a che sono contenuti in altri selettori figli di div.
Discendente consecutivo
div + a {color: #000000}
Si applica solo al primo elemento a discendente di div.
Vediamo ora come i CSS vengono associati ad un documento HTML.
Vi sono per questo scopo quattro sistemi tutti entrambi validi.
Stili inline
Ad ogni marcatore HTML viene associato uno stile. Ad esempio:
<p style="font-size: 11pt">
Stili embedded
Gli stili vengono inseriti negli head della pagina HTML attraverso il marcatore style. Ad esempio:
<style type="text/css">
h1 {color: #330000}
</style>
Stili linkati
Gli stili sono inseriti in un file con estensione .css esterno dunque al codice HTML.
Questa ovviamente è una soluzione migliore rispetto alle due precedenti in quanto permette di di dividere davvero il layout dai contenuti del documento.
Vediamo un esempio:
<head>
<link rel="stylesheet" type="text/css" href="fogliodistile.css" media="screen" />
</head>
Stili importati
Funzionano come il metodo precedente, ma utilizzano il marcatore style. Ad esempio:
<style type="text/css" media="screen">
@import "fogliodistile.css";
</style>
Per concludere vediamo i valori dell'attributo media da associare ai fogli di stile per definirli.
All
Aural
Braille
Embossed
Handheld
Print
Projection
Screen
Tty
Tv
Nessun commento:
Posta un commento