CSS / CASCADING STYLE SHEETS · (Cascading Style Sheets o Fogli di Stile a Cascata) è separare i contenuti dal visual. I CSS stabiliscono il modo in cui il browser rappresenta i

INFORMATICA E GRAFICA PER IL WEB | HTML+CSS | docente: Alessandro Gabbiadini 1

CSS / CASCADING STYLE SHEETS


Lo scopo di una pagina web è la trasmissione di un’informazione.

L’informazione è costituita da due aspetti essenziali: » I contenuti » La loro formattazione

I contenuti sono forniti attraverso linguaggi di marcatura (html).La formattazione/visual è determinata dall’interpretazione da parte del browser degli stili (CSS).

INFORMAZIONE: CONTENUTO + PRESENTAZIONE


INFORMAZIONE: CONTENUTO + PRESENTAZIONE

Triennale di Milano e Triennale Design Museum hanno il piacere di invitarla all’inaugurazione della mostra

Le ceramiche di Andrea Branzi martedì 19 giugno 2012, ore 19.00 Triennale DesignCafé.

Apertura mostra: 19 giugno - 9 settembre 2012martedì-domenica 10.30-20-30giovedì 10.30-23.00

Le mostre del Triennale DesignCafésono un progetto di Silvana Annicchiarico, direttore del Triennale Design Museum

Triennale di Milano e Triennale Design Museum hanno il piacere di invitarla all’inaugurazione della mostra Le ceramiche di Andrea Branzi martedì 19 giugno 2012, ore 19.00 Triennale DesignCafé. Apertura mostra 19 giugno - 9 settembre 2012, martedì-domenica 10.30-20-30, giovedì 10.30-23.00. Le mostre del Triennale DesignCafé sono un progetto di Silvana Annicchiarico, direttore del Triennale Design Museum.


È necessario organizzare i contenuti in modo logico, raggrupparli e, se necessario, identificarli in modo univoco o associarli a classi specifiche (vedi meccanismo dei div con id e classi).

Per rendere i contenuti meglio fruibili con qualsiasi dispositivo, è bene organizzarli in modo che siano letti nell’ordine ideale (solitamente con flusso dall’alto al basso).

ORGANIZZARE L’INFORMAZIONE


Compito dei CSS (Cascading Style Sheets o Fogli di Stile a Cascata)

è separare i contenuti dal visual.

I CSS stabiliscono il modo in cui il browser rappresenta i vari oggetti definiti

dal linguaggio di marcatura utilizzato.

Oggi gli elementi e gli attributi dei tag HTML che definiscono l’aspetto grafico di un elemento sono obsoleti.

I FOGLI DI STILE A CASCATA (CSS)


Esempio di separazione del contenuto dal visual e delle possibilità di formattazione della pagina

legate ai fogli CSS è il sitowww.csszengarden.com

Lo stesso file html viene formattato con diversi fogli stile e il risultato è il seguente...

CSS ZEN GARDEN / SEPARAZIONE CONTENUTO VS VISUAL


CSS ZEN GARDEN / HTML PURO


CSS ZEN GARDEN / HTML + CSS












Un foglio di stile è un documento che raccoglie un insieme di regole di rappresentazione dei contenuti della pagina a cui il foglio è associato.

Una regola css è formata da:

STRUTTURA DI UN FOGLIO DI STILE

selettore { proprietà: valore; proprietà: valore; proprietà: valore; }

dichiarazione


Selettore: elemento HTML al quale vengono associate le caratteristiche dichiarate nella regola css.

Dichiarazione: proprietà: valore;

Proprietà: definisce un aspetto del selettore da modificare (per esempio: colore e dimensione del testo).

Valore: definisce come dovrà essere renderizzata la proprietà (per esempio: blu e 12px)

LE REGOLE CSS


I selettori indicano al browser a quali elementi della pagina si dovranno applicare le dichiarazioni della regola.

Possono essere essenzialmente di tre tipi:

» TAG HTML / p {color: black;} » CLASSI / .nero {color: black;} » IDENTIFICATORI / #footer {color: black;}

I SELETTORI


I selettori più generici sono i selettori di tag (o di tipo) i quali specificano che la regola deve essere applicata a tutti gli elementi del tipo indicato.

Ad esempio, sono selettori di tag:body { dichiarazione; }h1 { dichiarazione; }p { dichiarazione; }ul { dichiarazione; }li { dichiarazione; }

Esiste un selettore universale che serve a selezionare tutti gli elementi di un documento. Si esprime con il carattere *

* { dichiarazione; }

I SELETTORI / TAG HTML


Le classi servono a caratterizzare un insieme di oggetti omogenei. Per associare un oggetto ad una classe è sufficiente specificarne il nome attraverso l’attributo class:<div class=”notizia”><h1>Titolo</h1><p>Testo …</p></div>È possibile combinare fra loro più classi: <div class=”classe1 classe2”>…</div>

Nei CSS il selettore di classe si indica riportando il valore assegnato all’attributo class, preceduto da un punto “ . ”

.notizia {…} .nomeclasse {…}

Il selettore può anche specificare a quale elemento la classe deve essere associata:

p.classe {…} h1.classe {…}

I SELETTORI / CLASSI

N.B. p .classe {…} ≠ p.classe {…}


Gli identificatori selezionano invece un oggetto unico all’interno della pagina. L’associazione avviene tramite l’attributo id:<div id=”testata”><h1>Titolo</h1><p>Testo ...</p></div>

Nei CSS il selettore di identificatore si indica riportando il valore assegnato all’attributo id, preceduto dal simbolo cancelletto ‘#’

#testata {…} #nomeidentificatore {…}

Il selettore può anche specificare a quale elemento l’identificatore deve essere associato:div#testata {…} p#strillo {…}

Classi e identificatori possono essere usati contemporaneamente:<div id=”idval” class=”classval”> #idval.classval {…}

I SELETTORI / IDENTIFICATORI


ESEMPIO DI UN FOGLIO CSS


Esistono diversi modi di collegare un foglio di stile ad un documento HTML

» Fogli di stile incorporati » Fogli di stile esterni » Fogli di stile importati » Attributo style (CSS in linea)

<p style=”font-weight:bold”> La priorità della regola è massima, indipendentemente dal peso dei selettori QUESTO METODO È SCONSIGLIABILE!!!

COLLEGARE I CSS A UN DOCUMENTO HTML


Si specificano gli stili direttamente nel codice HTML / XHTML attraverso il tag <style> da inserire nel tag <head>:

<head> <style type=”text/css”> /*<![CDATA[*/ … /*]]>*/ </style></head>

Le stringhe /*<![CDATA[*/ e /*]]>*/ servono a rispettare le regole dell’XML

Questo metodo è adatto per pagine singole in cui è necessario specificare stili particolari

FOGLI DI STILE INCORPORATI


I fogli di stile esterni sono dei file di testo con estensione .css richiamati attraverso il tag <link> da inserire nel tag <head>:XHTML <head> <link rel=”stylesheet” href=”file.css” type=”text/css” /></head>

HTML5 <head> <link rel=”stylesheet” href=”file.css” ></head>

Attraverso il tag <link> è possibile associare diversi fogli di stile contemporaneamente. <link rel=”stylesheet” href=”file1.css” > <link rel=”stylesheet” href=”file2.css” >

FOGLI DI STILE ESTERNI


Attraverso la regola @import è possibile includere un foglio di stile esterno all’interno di un insieme di regole (css)

Se presenti, le regole @import devono essere inserite prima delle normali regole per gli stili:

@import “file1.css”; @import “file2.css”; body {…}

Il percorso si riferisce alla medesima cartella in cui è contenuto il foglio di stile contenente le regole @import

Le regole @import possono comparire anche negli stili incorporati.

FOGLI DI STILE IMPORTATI


Salvare le regole di formattazione in un file esterno permette di:

» applicare le stesse regole a più pagine contemporaneamente (risparmiando tempo e larghezza di banda) » modificare una regola velocemente e per l’intero sito

Nel caso di fogli di stile esterni, sarà sempre possibile definire all’occorrenza degli stili incorporati, questi avranno priorità su quanto dichiarato nel foglio di stile esterno.

VANTAGGI DEI FOGLI DI STILE ESTERNI


DOMANDE?

Documents

CSS / CASCADING STYLE SHEETS · (Cascading Style Sheets o Fogli di Stile a Cascata) è separare i contenuti dal visual. I CSS stabiliscono il modo in cui il browser rappresenta i