CSS - Introduzione

Requisiti

Potrebbe essere utile la lettura di:

• Introduzione ai documenti web

Introduzione

CSS è il linguaggio utilizzato per descrivere la presentazione dei documenti web (ad es. layout, colori, font, etc.).

È indipendente da HTML/XHTML e può essere utilizzato con qualsiasi altro linguaggio basato su XML.

Come associare CSS al contenuto (HTML/XHTML)

Esistono 3 modi per utilizzare CSS con HTML/XHTML:

• l'uso dell'elemento HTML/XHTML link all'interno dell'head per richiamare un file CSS esterno
• l'uso dell'elemento style o dell'attibuto style presente per ogni elemento del body su HTML/XHTML

Poichè l'elemento style o l'attributo style permettono di includere codice CSS all'interno dello strato contenuto questa pratica è fortemente sconsigliata.

Ciò che invece deve essere utilizzato è l'elemento link, in questa forma:

<link rel="stylesheet" href="uri_css" type="text/css"/>

dove uri_css è l'URI assoluto o relativo alla risorsa che contiene il codice CSS da utilizzare nel contenuto.

In uno stesso documento/contenuto è possibile includere un numero a piacere di elementi link per includere tutti i CSS necessari (ad es. quando le regole CSS richieste per il documento sono su file separati).

Sintassi e componenti fondamentali

In un documento CSS possiamo trovare:

• commenti
• rule set
• at rule

solo per chiarezza nella lettura che segue se ne riporta un esempio:

/* CSS di esempio */

@import url(altro_css.css);

h1 {
   font-size: 24px;
   color: #ddd;
}

Di seguito analizzeremo un po' più in dettaglio i 3 componenti.

Commenti

/* CSS di esempio */

I commenti sono utilizzati dall'autore del CSS per annotarsi qualsiasi tipo di informazione (es. annotazioni per comprendere meglio il codice etc.) e sono ignorati dagli interpreti del linguaggio.

Iniziano sempre con un /* e terminano con un */ .

At-rule

Sono istruzioni/direttive per il parser CSS, usate per vari scopi.

In genere sono scritte prima dei rule set.

@import url(altro_css.css);

Da quì è possibile proseguire con l'approfondimento degli at-rule.

Rule set

Hanno la forma seguente:

rule-set := selettori blocco-dichiarazioni
blocco-dichiarazioni := '{' dichiarazioni '}'

Il rule set comprende selettori e blocco di dichiarazioni che inizia con { e finisce con }.

Abbiamo sempre almeno 1 selettore che individua gli elementi di un documento HTML/XHTML per i quali se ne definisce la presentazione attraverso le dichiarzioni scritte all'interno del blocco dichiarazioni.

Ad es. un rule set CSS può essere:

h2 {
   font-size: 15px;
   color: red;
}

dove h2 è il selettore che individua l'elemento h2 HTML/XHTML,

{
   font-size: 15px;
   color: red;
}

è il blocco dichiarazioni, e font-size: 15px;, color: red; sono le dichiarazioni le quali sono composte da un nome di proprietà e un valore.

Da quì è possibile proseguire un approfondimento sui selettori oppure con un approfondimento su dichiarazioni, proprietà e valori.