5. Quattro tipi di CSS
Esistono quattro modi diversi per innestare un foglio di stile all'interno di una pagina HTML. Il primo, che prende il nome di foglio di stile esterno, è il più diffuso e consiste nell'aggiungere nell'intestazione della pagina (<head>) un link al documento che contiene il foglio di stile (un semplice documento di testo) affinché quest'ultimo venga caricato assieme alla prima pagina del sito. Mediante tale approccio è possibile definire un singolo foglio di stile per l'intero sito e beneficiare della massima flessibilità di modifica dei parametri. Il tag da utilizzare in questo caso è <link> con l'indicazione del tipo di relazione tra i due documenti (attributo rel) la posizione del foglio di stile (attributo href) e la sua natura (type="text/css"). La dicitura completa per inserire il foglio usato nelle pagine del nostro CD è la seguente: <link rel="stylesheet" href="/zzz/stili.css" type="text/css">, il valore di href (hypertext reference) qui è indicato per la home page e cambia al variare della posizione delle varie pagine nella struttura di directory del sito. Il tag <link> va inserito nell'intestazione di ciascuna pagina, al termine della zona compresa dalla coppia di tag <head></head>.
Inserire un foglio di stile esterno
Nella gran parte dei siti che usano CSS il foglio di stile è centralizzato. Lo si collega a ogni singola pagina mediante il tag <link> seguito da un serie di attribiti obbligatori tra cui il riferimento ipertestuale (href) alla posizione dello stile nel sito.

Il secondo modo per inserire un CSS nella pagina prende il nome di foglio di stile incorporato e consiste nel digitare la descrizione del CSS per intero all'interno dell'intestazione della pagina, racchiudendola entro di uno speciale tag concepito allo scopo: <style>. In questo caso, il foglio di stile vale solo per quella pagina particolare e dovremo aprire la pagina ogni volta che bisognerà modificarlo, tuttavia avremo comunque il vantaggio di trovare tutte le informazioni stilistiche racchiuse in un solo punto del documento anziché sparpagliate in mezzo ai tag del contenuto (vedremo più avanti come realizzarlo).
Incorporare un foglio di stile nella pagina
Usando invece il marcatore <style> è possibile definire un foglio di stile che vale solo per quella pagina particolare. Qui notiamo che il nostro foglio ipotetico contiene un elemento definito, table, che indica il tipo, la dimensione e il colore nero del testo da usare nelle tabelle contenute nella pagina. Seguono poi quattro classi generiche (dida, rosso, bianco e blu) corrispondenti ad altrettante varianti del testo da usare mediante il marcatore <span></span> direttamente all'interno del testo della tabella. Ne vediamo un esempio nella Websafe palette integrata nel CD.

Il terzo modo prende il nome di foglio di stile importato e costituisce una via di mezzo tra i due definiti prima, il foglio vien incorporato nell'intestazione della pagina mediante il tag <style>, però proviene da un singolo documento centralizzato, identico per diverse pagine. È un sistema usato di rado anche perché mal supportato da alcuni browser.
Il quarto tipo di CSS prende il nome di foglio di stile in linea (inline) e viene inserito direttamente all'interno di un particolare elemento della pagina, come ad esempio nel tag di paragrafo <p> oppure nel tag divisionale <div> oppure nel tag di tabella <table> utilizzando l'attributo style seguito dalla definizione delle proprietà che vogliamo attribuire a quel particolare elemento rispetto alle specifiche generali del foglio di stile esterno oppure incorporato. Da notare che mediante l'uso del tag <div> oppure <span> è possibile applicare un foglio di stile a una porzione liberamente definita del documento (da una sola lettera a un'intero blocco di paragrafi). Un esempio sarebbe: <p style="font-family: Times; font-size: 18px"> che dice al paragrafo corrente di visualizzare il testo in Times a 18 pixel. Se volessimo realizzare lo stesso effetto non sul paragrafo, bensì su una porzione più piccola di testo useremmo <span style="font-family: Times; font-size: 18px">testo da modificare </span>.
Le regole di costruzione dei CSS
Ogni regola dei CSS si compone di due parti: il selettore e la dichiarazione. Il selettore, posizionato a sinistra, definisce le parti del documento a cui applicare lo stile. La dichiarazione, sulla destra e separata dal selettore mediante due punti, indica le varie proprietà e i valori per tali proprietà. Il selettore può corrispondere a uno degli elementi nativi di HTML, in tal caso parleremo di selettore di tipo. Il selettore h1, ad esempio, indicherebbe che lo stile si applica a tutti i titoli di primo livello. La dichiarazione ospita invece tutti i possibili attributi stilistici previsti per quel particolare oggetto. Ad esempio, h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #003399 } indica che i titoli delle nostre pagine saranno visualizzati con il font Verdana, oppure in alternativa con Arial, Helvetica o con un qualsiasi font di tipo san serif (senza grazie – le grazie sono gli arrotondamenti che si notano alle estremità delle lettere di alcune font aggraziate come il Times Roman e che servono per facilitare la lettura su carta, ma che mancano invece nelle font di tipo "bastone" che sono lisce e senza ghrigori e risultano più facili da leggere a schermo).
La regola indica inoltre che il titolo dovrà avere una dimensione di 16 pixel (il valore è preciso, impossibile a definirsi con il tag <font>) nonché un colore blu. Notate che la regola si apre e si chiude con una parentesi graffa così da essere distinta dalle altre e che ogni proprietà viene separata da un punto e virgola.
Possiamo proseguire nella nostra lista e definire tante regole quanti sono i tag che pensiamo di utilizzare nelle pagine del nostro sito e alla fine otterremo un file di testo che può vivere indipendentemente all'interno del sito medesimo, oppure essere incorporato nelle singole pagine.
Così come ci si possono essere molte proprietà per un singolo selettore, possono altresì esserci numerosi selettori per una singola proprietà. Infatti la regola h1,h2,h3,h4,h5,h6 { color: #003399 } ci dice che tutti i titoli e titolini del nostro sito saranno blu.
Se volessimo invece modificare uno specifico tag all'interno di una pagina la sintassi diventerebbe: <h1 style="font-size: 16px; color: #003399">. Come vedete è abbastanza semplice e si sposa perfettamente con la sintassi originale di HTML. Per i browser che non riconoscono i fogli di stile, il tag <h1> dell'esempio verrà interpretato normalmente, ignorando l'attributo style.
Esiste anche una seconda categoria di selettori basati sui tag nativi HTML, i selettori contestuali: servono per governare la visualizzazione del testo contenuto in un determinato tag al verificarsi di condizioni particolari. Ad esempio la regola li b { color: red } ci dice che ogni volta che in una lista comparirà un testo in grassetto dovrà essere di colore rosso.
|