Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » I fogli di stile css

I fogli di stile css

di GDesign, 29 Maggio 2002

Versione StampabileDownload in pdf


Un foglio di stile è un insieme di modelli, o stili, che si applicano a varie parti del documento e descrivono il modo in cui viene reso. Agli inizi dello sviluppo del linguaggio Html e del web, i progettisti ed i programmatori sentirono l'esigenza di avere un tipo di fogli di stile che potesse essere applicato ai documenti Html per poterne avere un maggiore controllo. Furono vagliate diverse proposte e una di queste, i Cascading Style Sheet (CSS, fogli di stile sovrapposti), è stata realizzata.

La specifica CSS è la forma di fogli di stile consigliata dal World Wide Web Consortium come forma appropriata per l'uso con l'Html ed è quindi anche quella che è stata adottata dai due principali produttori di browser, Microsoft e Netscape. Purtroppo però, anche i CSS non sono supportati allo stesso modo da tutti i browser; quindi, se si decide di usare i fogli di stile, il consiglio sempre valido è quello di collaudare il proprio lavoro con il maggior numero possibile di browser e loro versioni per far sì che le pagine web progettate vengano visualizzate correttamente nella maggior parte dei casi.

I fogli di stile CSS si basano su regole che selezionano un elemento Html e ne dichiarano la caratteristiche stilistiche. Queste regole possono essere incluse nella sezione <HEAD> di un documento Html, ed in questo caso si tratta di foglio di stile interno, oppure in documento distinto chiamato foglio di stile esterno.

I fogli di stile esterni consentono di definire regole che devono essere applicate a più documenti Html; ad esempio si può creare un foglio di stile esterno che definisca i caratteri e le dimensioni del testo di un intero sito web. Così facendo, se decidiamo di cambiare le dimensioni del testo, non avremo bisogno di modificare tutte le pagine del sito, ma sarà sufficiente aggiornare il foglio di stile esterno e tutte le pagine verranno aggiornate.

Vediamo adesso come aggiungere un foglio di stile interno ad un documento Html; le regole di stile devono essere contenute nell'elemento <STYLE> della sezione <HEAD> secondo la sintassi:

<HEAD>
<TITLE>Esempio CSS interno</TITLE>
<STYLE TYPE="text/css">
P {FONT-SIZE: 16 px}
</STYLE>
</HEAD>

In questo modo tutti gli elementi <P> del documento avranno il testo di dimensioni pari a 16 pixel. L'elemento <STYLE> può contenere un qualsiasi numero di stili diversi e l'attributo TYPE dell'elemento <STYLE> serve a definire l'impiego del linguaggio CSS.

Se vogliamo nel nostro documento un paragrafo con una dimensione del testo diversa da quella indicata nel foglio di stile possiamo usare l'attributo STYLE:

<P STYLE="FONT-SIZE: 14px">Testo con dimensioni pari a 14 pixel</P>

Le parti delle regole di stileLe regole di stile sono costituite da due parti:un selettore che determina l'elemento a cui deve essere applicata la regola ed una dichiarazione che descrive il valore della proprietà specificata.

Passiamo adesso ai fogli di stile esterni; un foglio di stile esterno è un documento con estensione .css che contiene le regole di stile. Un esempio di foglio di stile esterno chiamato style.css può essere:
P {COLOR: #000033}
H1 {COLOR: #000033}

Il file style.css non contiene codice Html, ma solo le regole di stile CSS che nello specifico sono: utilizzare il colore #000033 (blu scuro) per il testo dei paragrafi e per i titoli H1.

Per aggiungere questo foglio di stile esterno ad un file Html, si deve aggiungere l'elemento <LINK> nella sezione <HEAD> del file stesso secondo la sintassi:

<HEAD>
<TITLE>Esempio CSS esterno</TITLE>
<LINK HREF="style.css" REL="stylesheet">
</HEAD>

L'attributo HREF specifica l'indirizzo URL del foglio di stile che contiene tutte le regole che devono essere applicate e l'attributo REL specifica le relazioni esistenti fra il documento collegato e il documento corrente. Tutte le pagine che impiegheranno questo foglio di stile esterno utilizzeranno le regole in esso contenute.

^Top

Dai un voto a questo articolo:   HITS: 193 | VOTI: | MEDIA VOTI:     

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 3