HTML » Gli stili
Le generazioni più recenti dell'HTML hanno beneficiato del supporto di un sistema che consente di separare il contenuto dalla sua presentazione assecondandone però la semantica. Sto parlando dei CSS (Cascaded Style Sheets) cioè Fogli di Stile a Cascata.
Un foglio di stile contiene le informazioni che servono a definire l'aspetto grafico e il posizionamento sullo schermo di tutti gli elementi di una pagina (X)HTML. In questo modo si all'HTML il compito di strutturare logicamente il documento, mentre il CSS si occuperà del suo aspetto visuale.
Uso dei CSS
Un foglio di stile può essere utilizzato in tre modi diversi, secondo le necessità del momento:
Collegamento ad un foglio di stile esterno
È il modo migliore per organizzare un sito di una certa complessità. Con i CSS esterni possiamo definire le caratteristiche dei vari elementi e ottenere un doppio risultato: a) minori tempi di sviluppo, ottenuti riutilizzando lo stesso codice per tutte le pagine; b) caricamento più veloce delle pagine, in quanto il CSS esterno sarà ricaricato dalla cache del browser. Vediamo come fare:
<html> <head> <title>Pagina con CSS esterno</title> <link rel="stylesheet" type="text/css" href="style.css" media="screen"> </head> <body> ... </body> </html>
Come vediamo, l'elemento <link> permette di indicare il foglio di stile esterno da usare e il modo in cui va usato. Vediamo il dettaglio dei suoi attributi:
rel: indica la relazione tra documento e file collegato (per i CSS:stylesheet)href: deve contenere l'URI del file esterno da collegare. Può essere assoluto o relativo.type: serve a identificare il contenuto del file (per i CSS:text/css).media: identifica l'hardware che riceverà i formati presenti nel foglio di stile. Questo significa che possiamo collegare vari fogli di stile ognuno per un dispositivo diverso (print=stampante, screen=monitor, handheld=palmare, ... all=tutti i dispositivi).
Foglio di stile incorporato
I fogli di stile si dicono incorporati quando sono inglobati direttamente nella sezione head usando l'elemento <style>. Questo metodo può essere convenientemente usato se: a) usiamo le definizioni solo in questa pagina, b) vogliamo contenere le dimensioni del file collegato e/o c) vogliamo modificare alcune definizioni contenute nel file collegato.
Vediamo un esempio:
<head>
<title>Pagina con CSS incorporato</title>
<style type="text/css" media="all">
body {background: #FFF; color: #000; margin: 0}
</style>
</head>L'elemento style può avere due attributi, type e media, già visti sopra. Al suo interno vanno dichiarate le definizioni con le regole sintattiche che vedremo più avanti.
Stili in linea
Nel caso in cui si renda necessaria l'applicazione di uno stile ad un singolo elemento, o per eseguire un test rapido senza dover scrivere un foglio di stile vero e proprio, abbiamo la possibilità di farlo aggiungendo l'attributo style all'elemento che contiene il testo o le immagini. Vediamo come:
<div style="padding: 1em"> Alcuni elementi, come i DIV, sono detti <span style="color: blue">a livello di blocco</span> mentre altri, come EM o SPAN, sono detti <span style="color: red">'in linea'</span> perché non spezzano il flusso del testo. </div>
Sintassi di base
Selettori
Un selettore è un elemento HTML collegato ad uno stile che definiremo nel CSS. Ogni elemento HTML è quindi un possibile selettore di stile. Per meglio chiarire il concetto, possiamo dire che il selettore che useremo per un link è a perché ogni link usa il tag <a href=...></a>.
Se vogliamo che i link siano colorati di rosso, useremo quel selettore così:
a { color: red }
Classi
Ogni selettore può a sua volta avere diverse classi: possiamo cioè avere più stili per ciascun elemento. Per continuare con l'esempio precedente, potremo fare in modo che l'aspetto di ogni link cambi a seconda del contesto in cui si trovino:
a.menu { text-decoration: none }
a.foot { color: green ; font-weight: bold }
In questo esempio definiamo due classi: una da applicare ai menu, dove i link appariranno senza sottolineature, e una per i link dell'ultima riga della pagina, dove i link appariranno in grassetto e di colore verde.
Per applicare una classe ad un elemento usereno l'attriuto CLASS:
<a href="contacts.html" class="foot">Contatti</a>
Le classi possono essere dichiarate anche senza uno specifico elemento associato. In tal caso possiamo applicarle a qualunque elemento in grado di supportarle.
ID
Un ID è una classe particolare che viene associata ad un elemento della pagina e solo a quello. In effetti solo un elemento può avere uno stesso ID. Una regola di ID può essere definita usando l'indicatore # prima del nome. L'esempio che segue
#menu1 { width: 300px }
fa riferimento all'unico elemento della pagina con quello stesso ID e gli conferirà una larghezza di 300 pixel. Nel nostro esempio potremmo riferirci ad un elemento come questo:
<div id="menu1"> ... ... ... </div>
Commenti
È possibile inserire commenti all'interno di un foglio di stile per migliorarne la leggibilità e facilitarne la manutenzione nel tempo. I commenti ereditano le stesse convenzioni del linguaggio C e non possono essere nidificati:
/* Commento dentro un CSS */
