Vai ai compiti | Torna ai metaname | Indice

Introduzione ai css

I css (Cascading Style Sheets), fogli di stile, sono dei codici, per alcuni versi simili all'html, che permettono di modificare tutti i possibili attributi dei tag html, in modo molto più potente e vario. Essendo un'introduzione non possiamo andare molto in profondità, per cui cercheremo di vedere come funzionzno in generale.

Il concetto di base su cui poggiano è quello di separare la codifica dei contenuti, la semantica dell'html, dalla codifica di presentazione. Questo consente di scrivere pagine facilmente aggiornabili, con una possibilità di controllo della resa grafica decisamente superiore alle possibilità dell'html e, infine, di rendere le pagine maggiormente accessibili per tutt@ gli special needs.

La sintassi dei css è la seguente:
selettore { proprietà1: valore1; proprietà2: valore2; .... proprietàn: valoren; }

per resempio
BODY { background-color: #ffffff; color: #000000; font-size: 100%; font-family: Arial, Helvetica, sans-serif; }


I css possono essere usati in tre modi:

css esterni
sono dei files che vengono associati alle pagine html attraverso un link contenuto nell'head della pagina. Il browser provvede a caricare questa pagina e a modificare la resa a video della codifica html in funzione delle specificazioni contenute nel file css. Una sola pagina css può essere utilizzata per tutto un intero sito.
Vediamo un esempio:
<head>
[.....]
<link rel=stylesheet href="nome_file.css" type="text/css">
[.....]
</head>

il file nome_file.css non deve contenere altro che le specfiche css.

css interni
sono i codici css inseriti direttamente nella pagina html, in un apposito tag, <style>, posto nell'head della pagina. Il browser modifica la resa a video della codifica html in funzione delle specificazioni css. In questo caso ogni pagina html deve avere un codice css.
Vediamo un esempio:
<head>
[.....]
<style type="text/css">
<!-- questo commento serve per nascondere il css ai browser che non li supportano
H1 { background-color: #982306; color: #f9f85b; font-size: 150%; text-align: center; }
-->
</style>
[.....]
</head>

css inlinea
sono codici css inseriti direttamente all'interno di un tag html. Il browser modifica la resa a video della codifica di quel tag in funzione delle specificazioni css. In questo caso ogni tag deve avere il proprio codice css.
Vediamo un esempio:
<head>
[.....]
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
[.....]
</head>
<body>
[.....]
<P STYLE="color: red; font-family: 'New Century Schoolbook', serif">testo</P>
[.....]
</body>



La potenza dei css sta nel poter esere usati per molte pagine, anche un intero sito. L'uso inlinea è invece da riservarsi solo a singoli casi di formattazione particolare, inquanto richiederebbe molto più tempo di una normale codifica in html.
Vai a vedere un esempio di file css
| ^ |


Autore: Arclele
Data ultima modifica: 16 aprile 2003
Email: arclele(at)forteprenestino.net
Copyright: (c) 2003 AvANa.net
GNU Free Documentation License.