Continua il nostro viaggio verso la realizzazione di una semplice app per Firefox OS.

In questa seconda parte diamo uno sguardo ai CSS. Come la scorsa puntata, anche in questa l'argomento sarà trattato molto velocemente. Consigliamo di seguire i link a fine articolo per approfondire gli argomenti.

Parliamo qundi di Fogli di Stile, o Cascading Style Sheets (CSS).

Il CSS è un particolare linguaggio studiato per istruire il browser su come rappresentare graficamente il contenuto.
Le regole CSS possono essere scritte nel documento HTML stesso, inserendolo nel tag <style><style> (di solito all'interno di <head></head> ) o in un file .css esterno, che viene poi "linkato" dal documento HTML con il tag <link>:

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

Le regole

Un file CSS si compone di diverse regole, che il browser interpreta per sapere a quali elementi applicare quali proprietà.
Ogni regola è composta da uno o più selettori (usati per indicare al browser uno o più elementi nella pagina) e un'elenco di proprietà con i relativi valori da applicare.

selettore { proprietà: valore; }

Le proprietà sono molte, non le elencheremo tutte, e ogni proprietà si aspetta certi valori (uno o più).

Le proprietà che vedremo sono:

  • color e background-color, che definiscono il colore del testo e dello sfondo
  • font-size, che definisce la dimensione del testo
  • border, per definire il bordo di un elemento
  • text-align, per definire l'allineamento del testo

Ogni proprietà viene essere definita all'interno delle parentesi graffe e il relativo valore sarà applicato agli elementi che corrispondono al selettore. In un foglio di stile spazi e a-capo non hanno particolare significato, per cui potete usarli per formattare il codice in modo che sia comodo da leggere. L'esempio sopra può essere scritto anche così

selettore
{
    proprietà: valore;
}

Prima di vedere i valori che possono assumere le proprietà, cerchiamo di capire come funzionano i selettori.
Prima ancora, però, dobbiamo fare un passo indietro e tornare all'HTML.

ID e classi

Abbiamo visto che i tag in HTML posso avere degli attributi (come href="" per i link o src="" per le immagini). Due attributi fondamentali per usare i CSS sono id e class.

L'attributo id assume una qualsiasi valore (basta che inizi con una lettera) ma deve essere univoco in tutto il documento. Non è consentito avere due tag con lo stesso id.

E' utile per dare un nome a un particolare elemento. Per esempio abbiamo un documento con vari <h2> e vogliamo dare un nome ad ognuno:

<body>
  <h2 id="cap1">Titolo del primo capitolo</h2>
  <p>testo del primo capitolo</p>
  <h2 id="cap2">Titolo del secondo capitolo</h2>
  <p>testo del secondo capitolo</p>
</body>

In questa maniera posso dire quale dei due <h2> è il titolo del secondo capitolo

L'altro attributo fondamentale per usare al meglio i CSS è class, e definisce la "classe" (o le classi) a cui appartiene un tag. Una classe può avere qualsiasi nome (sempre che inizi con una lettera), e l'attributo class può contenerne più di uno separati da uno spazio. Diciamo che abbiamo un documento che contiene vari link :

<body>
<p>
  questo è un testo di esempio con alcuni 
  <a href="http://www.linux.it/">link</a> che puntano 
  a file <a href="nonesiste.html">inesistenti</a> e 
  a <a href="https://it.wikipedia.org">siti esterni</a>,
  e anche a una <a href="cerca.html">pagina di ricerca</a> interna 
  che non esiste.
</p>
<p>  
 Alcuni puntano a motori di <a href="https://duckduckgo.com/">ricerca</a>, 
 diversi, che puo' <a href="https://startpage.com/">essere utile</a>.
</p>

Vogliamo indicare i link che puntano su un sito esterno e quelli che puntano a un sito in particolare, per cui decidiamo di creare due classi "esterno" e "ricerca" (non c'è nulla di particolare da fare per "creare" una classe css, semplicemente cominciamo a usarne il nome):

<body>
<p>
  questo è un testo di esempio con alcuni 
  <a href="http://www.linux.it/" class="esterno">link</a> che puntano 
  a file <a href="nonesiste.html">inesistenti</a> e 
  a <a href="https://it.wikipedia.org" class="esterno">siti esterni</a>,
  e anche a una <a href="cerca.html" class="ricerca">pagina di ricerca</a> interna 
  che non esiste.
</p>
<p>  
 Alcuni puntano a motori di <a href="https://duckduckgo.com/"  class="esterno ricerca">ricerca</a>, 
 diversi, che puo' <a href="https://startpage.com/"  class="esterno ricerca">essere utile</a>.
</p>

Siamo così in grado di indicare quale link punta a un sito esterno, quale a una pagina di ricerca e quale a una pagina di ricerca esterna.

Il nome dell'elemento (p, a, h1 etc) , il valore di id e di class sono usati per costruire il selettore nel foglio di stile CSS.

I selettori

Un selettore e' composto così:

nome_elemento#id_elemento.nome_classe

Il nome dell'elemento per primo, l'id dell'elemento per secondo, preceduto da #, e per finire le classi precedute da un punto.

Ognuna delle informazioni è opzionale: più ne inseriamo nel selettore, più preciso sarà il browser a selezionare gli elementi. Vediamo qualche esempio di selettore:

p {}     /* tutti i tag <p> */

a {}    /* tutti i tag <a> */

.esterno {} /* tutti i tag con "esterno" tra le classi assegnate */

a.esterno {} /* tutti i tag <a> con classe esterno */

#titolo {}  /* il tag con id="titolo" */

h1#titolo {} /* il tag h1 con id="titolo" */

a#link.esterno {} /* il tag a con id="link" e classe "esterno" */

a#link.esterno.ricerca {} /* come sopra, ma deve avere anche la classe "ricerca" */

L'esempio qui sopra è un file CSS valido, che non assegna nessun nuovo valore, dato che non definisce nulla tra le parentesi graffe. Notiamo che i commenti in CSS si mettono tra /* e */.

La funzione più utile del CSS è la possibilità di selezionare anche elementi figli di altri elementi, sempre secondo le regole dei selettori. Vediamo un esempio. Questo documento HTML ha due paragrafi, con due classi differenti, che contengono dei link. I link, invece del testo, contengono un'immagine. I due paragrafi sono identici tranne che per la classe assegnata:

<body>
<p class="primo">
Lorem ipsum dolor sit amet <img src="lorem.jpg">. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. <a href=""><img src="ipsum.jpg"></a>
</p>
<p class="secondo">
Lorem ipsum dolor sit amet <img src="lorem.jpg">. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. <a href=""><img src="ipsum.jpg"></a>
</p>
</body>

Ora vediamo qualche selettore:

a {}      
/* qualsiasi tag <a> */

img {}    
/* qualsiasi immagine nel documento, dentro o fuori da <a> */

p.primo img {} 
/* i tag <img> conenuti nel primo paragrafo, dentro o fuori da <a> */

p.secondo a img {} 
/* i tag <img> conenuti nei tag <a> a loro volta contenuti nel secondo paragrafo */

E' quindi sufficiente separare due o più selettori in una stessa regola per definire un rapporto di parentela.

Utilizzando invece del semplice spazio il carattere > per separare i selettori, possiamo definire un rapporto di parentela più stretto, ovvero indicare un elemento che sia direttamente figlio di un altro.Per esempio, nel documento precedente, per selezionare le immagini che sono contenute nel secondo paragrafo ma che non sono contenute in un tag <a> possiamo scrivere:

p.secondo > img {}

Questo perchè in HTML i vari elementi costruiscono un'albero a seconda di quale altro elemento li contiene:

Albero HTML

Le proprietà

Le proprietà che è possibile definire in CSS sono tantissime e spaziano dal colore del testo e dello sfondo, a spessore/tipo/colore del bordo degli elementi alla posizione relativa o assoluta di un elemento nella pagina, dallo spazio tra un'elemento e l'altro o tra il bordo dell'elemento e il contenuto dello stesso fino alla visibilità o meno di un elemento. Studiatevi i link a fondo articolo per maggiori informazioni.

Le proprietà sono definite tra le parentesi graffe e si compongono di un elenco di coppie nome:valore  separate da punto e virgola ;. Le proprietà possono avere più di un valore, in questo caso si separano tra loro con uno spazio.

Ogni proprietà si aspetta i suoi valori. Questi posso essere di diverso tipo:

  • dimensioni: un numero seguito dall'unità di misura, tra cui:
    • px : misura in pixel
    • %  : percentuale rispetto al valore dell'elemento genitore
    • em : un valore relativo alla dimensione del carattere dell'elemento genitore
  • colore : un colore può essere definito in tre modi
    • per nome: es: white o red
    • per valori RGB: con la sintassi rgb(123,32,234) , dove i tre numeri (rispettivamente rosso, verde e blu) hanno valore 0\~255
    • per codice esadecimale: simile all'RGB, ma i tre valori sono dati in esadecimale: #DDEEF8 (il # è obbligatorio, tre gruppi di due cifre esadecimali rappresentano rispettivamente rosso, verde e blu)
  • url : per indicare risorse esterne, p.e. immagini da usare come sfondo, nella forma url(url/del/file.png), dove il percorso puo' essere assoluto o relativo rispetto all'url del file CSS che lo definisce

Vediamo qualche proprietà:

color: colore;

definisce il colore del testo.

background-color: colore;

definisce il colore di sfondo di un elemento.

background-image: url();

definisce l'immagine da usare come sfondo di un elemento

border: spessore stile colore;

definisce il bordo di un elemento, dove spessore è una dimensione e stile è un nome che definisce lo stile del bordo. Puo' essere, tra gli altri: none, solid, dotted, dashed. Date un'occhio alla documentazione per sapere quali valori puo' avere.

font-size: dimensione;

Dimensione del carattere nell'elemento

font-family: nome;

Font da utilizzare per visualizzare il carattere. "nome" è il nome del carattere (es. "Verdana"), e possono essere definiti più nomi come fallback. Il browser cerca i font da sinistra a destra: il primo che trova nel sistema lo utilizza. es:

font-family: "Verdana" "Helvetica" sans-serif;

Il browser proverà a usare "Verdana", se non è installato proverà "Helvetica", se anche questo non c'è, allora utilizzerà un generico font senza fronzoli.

font-weight: peso;

Definisce il "peso" del font. Solitamente si usano valori predefiniti come bold per impostare il grassetto

text-align: posizione;

Imposta l'allineamento del testo all'interno dell'elelemto. Puo' essere, tra gli altri: left, right, center.

Vediamo come esempio, un CSS che applicato al documento HTML dove abbiamo definito i link con le classi esterno e ricerca, imposta il colore di sfondo del link a seconda del caso:

/* tutti i link avranno colore di sfondo nero e testo bianco*/
a { background-color: black; color: white; }

/* i link che puntano a una pagina di ricerca avranno lo sfondo verde */
a.ricerca { background-color: green; }

/* i link che puntano a una pagina esterna avranno lo sfondo rosso */
a.esterno { background-color: red; }

/* i link che puntano a una pagina di ricerca esterna avranno lo sfondo viola */
a.esterno.ricerca { background-color: purple; }

Il risultato è visibile qui, giocateci un po' per provare cosa succede!

La cascata e l'eredità

Sembra un titolo di un romanzo, ma in realtà riassume come il browser applica gli stili agli elementi.

A cascata, nel senso che i file CSS vengono caricati nella sequenza con cui appaiono nel documento HTML. Una regola che appare dopo ridefinisce una proprietà di una regola che appare prima. Se per esempio abbiamo un documento HTML  che linka due file CSS, chiamiamoli base.css e dettagli.css, scritti così:

/* base.css */
body { background-color: #999999; }
p { background-color: #FFFFFF; color: #000000; }

/* dettagli.css */
p { color: blue; }

Come si vede entrambi i file definiscono il colore per gli elementi <p>, siccome dettagli.css viene caricato per secondo,  come risultato nella pagina i paragrafi avranno sfondo bianco (background-color: #FFFFFF; in base.css) e testo blu (color: blue; in dettagli.css)

Utilizzando gli strumenti per sviluppatori di Firefox (tasto destro sull'elemento e "Analizza elemento"), possiamo vedere quali regole CSS sono state applicate all'elemento, da quale file e quali sono state sovrascritte dalla "cascata":

Strumenti di sviluppo e CSS

Qui vediamo bene come all'elemento <p> sono state assegnate le regole da entrambi i file e come il colore definito in base.css è stato sovrascritto da quello definito in dettagli.css

L'ereditarietà è invece quella caratteristica per cui gli elementi possono acquisire certe proprietà dagli elementi che li contengono. Se per esempio definiamo un font da utilizzare nel tag <body>, tutti i tag contenuti in body saranno visualizzati con quel font, a meno che una regola non definisca un font particolare per un particolare elemento:

body { font-size: 16pt; }
/* tutti i tag contenuti in body saranno mostrati con il font alto 16 punti */

a.importante { font-size: 22pt; }
/* tranne i link con la classe "importante" che saranno alti 22 punti */

Con questo concludiamo questo non tanto breve viaggio nel CSS.

Vi lasciamo con un esempio più complesso che useremo come punto di partenza per la nostra applicazione per Firefox OS.

Come sempre, provate a modificare il sorgente per vedere cosa succede!

Alcuni link per approfondire (in inglese)