Implementare una semplice versione del gioco del tris.
Realizzare quindi una matrice (3×3) come struttura dati di base e fornire i seguenti metodi:

• set(riga, colonna, simbolo) [inserisce una giocata]
• toString() [stampa lo stato della matrice]
• getWinner() [stampa l'eventuale vincitore]

Lanciare un’eccezione di tipo IllegalArgument qualora la posizione scelta per l’inserimento di una giocata sia già occupata.
Realizzare una classe di test denominata Gioca.java.

[In un prossimo esercizio riprenderemo il Tris fornendo un'interfaccia grafica  e ulteriori metodi]

La classe Tris.java:

public class Tris
{

  // Metodo Costruttore
  // Creo una matrice 3*3 vuota
  public Tris()
  {
    board = new String[rows][columns];
    for(int i=0; i<rows; i++)
      for(int j =0; j<columns; j++)
      {
          board[i][j] = " ";
      }
  }

  // Metodo che restituisce lo stato della matrice
  public String tostring()
  {
    String r = "";
    for(int i=0; i<rows; i++)
    {
        r = r + "|";
        for (int j=0; j<columns ; j++)
          r=r + board[i][j];
        r = r + "|\n";
    }
    return r;
  }

  // Metodo che permette di inserire una giocata
  public void set(int i, int j, String player)
  {
      if(board[i][j] != " ")
      {
        throw new IllegalArgumentException("Posizione occupata");
      }
      board[i][j] = player;
  }

  // Metodo che restituisce il nome del giocatore vincitore
  public String getWinner()
  {
    int k = 0;
    int h = 0;
    // Verifico se il tris è presente in una riga
    for(int i=0; i<rows; i++)
    {
        for (int j=0; j<columns ; j++)
        {
          if(board[i][j]== "x")
          {
            k++;
            if(k==3){ return " VINCE IL GIOCATORE X "; }
          }
          else
          {
             if(board[i][j] == "o")
             {
                h++;
                if(h==3){ return " VINCE IL GIOCATORE O "; }
             }
          }
        }
        k=0;
        h=0;
    }
    // Verifico se il tris è presente in una colonna
    for(int i=0; i<columns; i++)
    {
        for (int j=0; j<rows ; j++)
        {
          if(board[j][i]== "x")
          {
            k++;
            if(k==3){ return " VINCE IL GIOCATORE X "; }
          }
          else
          {
             if(board[j][i] == "o")
             {
                h++;
                if(h==3){ return " VINCE IL GIOCATORE O "; }
             }
          }
        }
        k=0;
        h=0;
    }

    // Verifico se il tris è presente in una diagonale
    for(int i=0; i<rows; i++)
    {
        int j = i;
        if(board[i][j]== "x")
        {
            k++;
            if(k==3){ return " VINCE IL GIOCATORE X "; }
        }
        else
        {
           if(board[i][j] == "o")
           {
              h++;
              if(h==3){ return " VINCE IL GIOCATORE O "; }
           }
        }
    }
    k=0;
    h=0;
    int j = 2;
    for(int i=0; i<rows; i++)
    {
        if(board[i][j] == "x")
        {
            k++;
            if(k==3){ return " VINCE IL GIOCATORE X "; }
        }
        else
        {
           if(board[i][j] == "o")
           {
              h++;
              if(h==3){ return " VINCE IL GIOCATORE O "; }
           }
        }
        j--;
    }
    return "" ;
  }

  private String[][] board;
  private static final int rows = 3;
  private static final int columns = 3;
}

La classe di test, Gioca.java:

import java.util.Scanner;
public class Gioca
{

  public static void main(String[] args)
  {
      int numGiocate = 0;
      String player = "x";

      // Costruisco un nuovo oggetto Tris
      Tris game = new Tris();
      Scanner in = new Scanner(System.in);

      // Procedo con il gioco
      while(true)
      {
          // Giocata del giocatore
          System.out.println(game.toString());
          System.out.print("inserisci riga per " + player);
          System.out.println(" (-1 per uscire): ");

          int riga = in.nextInt();

          if (riga < 0) return;

          System.out.print("Inserisci colonna per " +player);
          System.out.println(" : ");

          int colonna = in.nextInt();

          // Inserimento giocata
          game.set(riga,colonna,player);

          // Visualizzo lo stato del tris
          System.out.println(game.tostring());

          // Verifico se è presente un vincitore
          String verifica = game.getWinner();
          if(verifica.equalsIgnoreCase(" VINCE IL GIOCATORE X ") || verifica.equalsIgnoreCase(" VINCE IL GIOCATORE O "))
          {
              // Il gioco termina se un giocatore vince la partita
              System.out.println(verifica);
              return;
          }

          numGiocate++;
          if(numGiocate==9)
          {
            // Se il tris è pieno e non c'è vincitore, la partita termina
            System.out.println("NESSUN VINCITORE");
            return;
          }

          // Se ha giocato X allora dopo gioca O, altrimenti viceversa
          if(player=="x") player = "o";
          else player = "x";
      }

  }
}

Cliccando qui è possibile scaricare il codice completo.

Pseudo-classi

Una pseudo-classe non definisce un elemento ma un particolare stato di quest’ultimo.
In buona sostanza imposta uno stile per un elemento al verificarsi di certe condizioni.

A livello sintattico, una pseudo-classe non può essere mai dichiarata da sola, bensì deve appoggiarsi ad un elemento. La sintassi è la seguente:

elemento:pseudo_classe { … }

Il segno di due punti (:) divide, senza ulteriori spazi, l’elemento dal nome della pseudo-classe ad esso associato.

a:link {
	color : green;
}
a:visited {
	color : yellow;
}

Traduciamo così le regole appena definite:
i collegamenti ipertestuali (<a>) che non siano stati ancora visitati (:link) avranno il colore verde; i collegamenti che invece risultato già visitati (:visited) avranno il colore giallo.
Da qui risulta più chiaro il concetto espresso in precedenza: la pseudo-classe link definisce lo stile (colore verde) solo in una determinata situazione, ovvero quando il link non è stato attivato (cliccato). Appena ciò dovesse avvenire, il testo non sarà più verde, perchè la condizione originaria è venuta meno e di conseguenza diventerà valida la condizione visited e le regole della relativa pseudo-classe (colore giallo).

Una pseudo-classe può anche essere associata a selettori di tipo classe.
In questo caso la pseudo-classe deve seguire la dichiarazione della classe e le regole di stile definite saranno applicate esclusivamente all’elemento con attributo class dichiarato.

a.collegamento:link {
	color : green;
}
a.collegamento:visited {
	color : yellow;
}

La regola verrà così letta:
Avranno il testo verde solo i link non ancora visitati che abbiano come attributo class=‘collegamento’, di conseguenza il testo sarà giallo se il link è visitato e il class è uguale a ‘collegamento’.

First-Child

La pseudo classe first-child permette di selezionare e formattare un elemento che si trovi ad essere il primo elemento figlio di un altro elemento.

elemento:first-child { … }

Vediamo un esempio concreto a chiarimento:

p:first-child {
	color : green;
}

A tutti i paragrafi viene assegnato il colore verde solo se il singolo paragrafo è il primo elemento figlio di qualsiasi altro elemento.
Esaminiamo questa porzione di codice html:

<div>
	<p>Questo paragrafo è il primo figlio</p>
	<p>Questo paragrafo è il secondo figlio</p>
</div>
<div>
	<p>Questo paragrafo è il primo figlio</p>
	<p>Questo paragrafo è il secondo figlio</p>
	<p>Questo paragrafo è il terzo figlio</p>
</div>

Solo i primi paragrafi dei due div presenti saranno di colore verde:

Pseudo-elementi

Vi sono parti in un documento HTML che non sono rappresentate da nessun tag in particolare, ma che è possibile comunque modificare e formattare secondo i propri desideri con i CSS grazie ai cosiddetti pseudo-elementi.

Nel momento in cui in un foglio di stile si costruisce una regola che ad essi fa riferimento è come se nel documento venissero inseriti nuovi elementi che hanno la caratteristica di essere appunto fittizi, presenti nel CSS ma non nel codice che definisce la struttura della pagina.

Il supporto di questo tipo speciale di selettore è garantito solo dai browser più recenti.

Ad esempio con il selettore :first-letter è possibile formattare la prima lettera di qualunque elemento contenente testo. Le proprietà modificabili sono ovviamente tutte quelle relative al carattere e al testo, ma anche quelle legate al colore, allo sfondo, ai margini e al padding.

La sintassi è la seguente:

elemento:first-letter { … }

In pratica scrivendo la seguente regola CSS:

p:first-letter {
	color : red;
	font-size : 20px;
}

definiamo che la prima lettera di ogni paragrafo sarà di colore rosso e con un font di 20px.

Un altro pseudo-elemento di uso comune è :first-line la cui sintassi è uguale a first-letter con l’unica differenza che le regole CSS verranno applicate alla prima riga di un elemento contenente testo.

Ad esempio, riprendendo il codice precedente:

p:first-line {
	color : red;
	font-size : 20px;
}

otterremo il seguente risultato:

Gli attributi CLASS e ID

Dall’HTML 4 sono stati introdotti due importanti attributi applicabili a qualsivoglia elemento html. Gli attributi sono: class e id.
ID assume un valore arbitrario, scelto dallo sviluppatore, purché esso sia univoco in tutto il documento. In altre parole l’id è un valore, alfanumerico, che permette di identificare un elemento all’interno del codice html. Un esempio è:

<p id='paragrafo'>
...
</p>

CLASS può assumere un valore stringa qualunque e differisce dall’id perché più elementi possono condividere lo stesso valore.
E’ quindi permesso definire:

<p class='blocco'> ... </p>
<div class='blocco'> ... </div>

Applicare questi attributi ai tag di una pagina html non muta il loro aspetto, ma ci permette innanzitutto di identificare gli elementi, classificarli e distinguerli tra loro.
In questo modo class e id diventano una delle chiavi principali per sfruttare al meglio le potenzialità dei fogli di stile.
Sarà possibile applicare una definizione di stile ad un singolo elemento grazie all’id, oppure a più elementi di tipo diverso grazie all’attributo class.
Negli esempi visti nella lezione precedente, non eravamo sufficientemente in grado di applicare uno stile solo ad un determinato elemento, bensì eravamo in grado di applicare un regola CSS a tutti gli elementi di uno stesso tipo o al massimo in relazione alla loro gerarchia (elemento discendente o figlio).

Selettore classe

Per identificare una classe si usa far precedere il nome da un semplice punto (.):

. nome_della_classe

Questa è la sintassi base.
Un selettore classe così definito può essere applicato a tutti gli elementi di un documento HTML. Vediamo quindi un esempio concreto del selettore classe:

.testo_rosso {
	color : red;
}
.testo_verde {
	color : green;
}

Analizziamo ora la seguente porzione di codice html, nel quale verranno definiti alcuni elementi che utilizzano le classi definite sopra:

<div>Questo è un div che non appartiene ad alcuna classe.</div>
<div class='testo_rosso'>Questo div appartiene alla classe testo_rosso.</div>
<div class='testo_verde'>Questo div appartiene alla classe testo_verde.</div>
<span class='testo_verde'>Anche questo span appartiene alla classe testo_verde!</span>

Il risultato finale è il seguente:

Nell’esempio, la classe testo_verde è stata applicata ad elementi di natura diversa come un div e uno span. Questo modo di operare ci fornisce un grado di personalizzazione e flessibilità molto alto al cospetto dei semplici selettori di elementi.

Esiste un secondo tipo di sintassi per il selettore di classe:

elemento.nome_della_classe

E’ una regola più restrittiva rispetto alla sintassi generica. Se infatti definiamo le seguenti regole CSS:

p.testo_rosso {
	color : red;
}
div.testo_verde {
	color : green;
}

Lo stile verrà applicato esclusivamente ai paragrafi che presentino attributo class=‘testo_rosso’ e ai div con class=‘testo_verde’.
In pratica se definiamo all’interno del codice html un paragrafo con classe ‘testo_verde’ questo non acquisirà lo stile definito nel CSS perché ‘testo_verde’ è riferito esclusivamente ad elementi div.

Questo secondo tipo di sintassi va usata solo se si pensa di applicare una classe ad uno specifico tipo di elemento (solo paragrafi o solo div, e così via). Se invece si ritiene di doverla applicare a tipi diversi è necessaria la sintassi generica.

Selettore ID

La sintassi di un selettore ID risulta essere ancor più semplice di quella del selettore classe.

#nome_id

In questo caso è necessaria esclusivamente questa sintassi essendo per natura l’ID univoco all’interno del codice html,  specificare l’elemento al quale è associato l’id sarebbe superfluo.

Vediamo un esempio pratico, riprendendo il codice descritto per il selettore classe:

#testo_rosso {
	color : red;
}
#testo_verde {
	color : green;
}

Riscriviamo la porzione di codice html, utilizzando al posto dell’attributo class l’attributo id:

<div>Questo è un div che non appartiene ad alcuna classe.</div>
<div id='testo_rosso'>Questo div ha come ID testo_rosso.</div>
<div id='testo_verde'>Questo div ha come ID testo_verde.</div>

Il primo div non ha un id settato, mentre il secondo e il terzo hanno come id rispettivamente ‘testo_rosso’ e ‘testo_verde’. Il risultato nella finestra del browser è il seguente:

[... se non hai letto ancora la prima parte ...]

Raggruppamento di selettori

È possibile nei CSS raggruppare diversi elementi al fine di semplificare il codice. Gli elementi raggruppati vanno separati da una virgola.

Il raggruppamento è un’operazione molto conveniente. Pensiamo a questo scenario:

h1 { color : red; }
h2 { color : red; }
h3 { color : red; }
h4 { color : red; }

Con un raggruppamento di selettori potremo riscrivere le dichiarazioni precedenti così:

h1, h2, h3, h4 {
	color : red;
}

Questa tecnica ci permette di evitare inutili ripetizioni di regole all’interno del foglio di stile ed inoltre mantenere ordine e leggibilità. E’ inoltre possibile raggruppare anche elementi diversi tra loro, ad esempio titoli con paragrafi oppure div con link etc.

Selettore del discendente

Questi tipo di selettore serve a selezionare tutti gli elementi che nella struttura ad albero di un documento siano discendenti di un altro elemento specificato nella regola.
Ricordiamo che un elemento è discendente di un altro se è contenuto al suo interno, a qualsiasi livello.
Un selettore discendente nella forma “A B” è applicato quando un elemento B è un arbitrario discendente di un elemento antenato A. Inoltre l’elemento B non deve necessariamente essere figlio di A.
Di seguito un esempio:

div p {
	color : yellow;
	background-color : gray;
}

Innanzitutto il selettore, per correttezza, va letto da destra verso sinistra. Nell’esempio verranno selezionati tutti i paragrafi discendenti di elementi ed applicate le regole definite.

</pre>
<div>Questo div contiene al suo interno un paragrafo.

 Al paragrafo è associato uno stile in relazione alla discendenza.</div>
<pre>
	Questo paragrafo invece non è discendente del div, quindi ha stile diverso.

produce il seguente risultato all’interno della finestra del browser:

Da notare infine come il paragrafo che non è discendente del div, non rientrando nella regola CSS, avrà come stile quello di default.

Selettore del figlio

Con questo selettore è possibile selezionare un elemento che è figlio diretto di un altro.
Il selettore figlio è all’apparenza simile al selettore del discendente visto in precedenza.
La differenza sta nella relazione di discendenza degli elementi, che in questo caso deve essere di primo livello.

Chiariamo con un esempio html utile anche per comprendere meglio il significato di selettore del discendente:

<body>
	<p>
		Questo è il primo paragrafo.
	</p>
	<div>
		<p>
			Questo è il secondo paragrafo.
		</p>
	</div>
	<p>
		Questo è il terzo paragrafo.
	</p>
</body>

Dei tre paragrafi solo il primo e il terzo sono figli diretti di body.
Il secondo è invece figlio diretto di un elemento div. Tutti e tre, però, sono discendenti di body.
L’immagine chiarisce ulteriormente il concetto:

La sintassi per definire un selettore figlio è la seguente:

body > p {
	color : green;
}

Come si vede, un’ulteriore differenza risiede nella sintassi.
Per il selettore figlio i due elementi devono essere separati dall’operatore “maggiore” >. Anche in questo caso la lettura logica va fatta da destra a sinistra. Nell’esempio si selezionano tutti i paragrafi figli diretti dell’elemento body.

E’ importante aggiungere che il selettore figlio al momento non è supportato dal browser Explorer fino alla versione 7.

Un concetto importante da tenere in considerazione prima di analizzare i vari tipi di selettori css è l’ereditarietà delle regole di stile.

Se difatti si applica uno stile ad un elemento questo sarà ereditato anche dagli elementi contenuti al suo interno, a condizione che l’elemento interno non abbia anch’esso una dichiarazione di stile.
Definire ad esempio un paragrafo con un particolare stile ed annidare al suo interno uno span senza regole, fa si che lo span acquisisca le regole di stile del suo padre.

p {
	font-size : 20px;
	color : red;
}

Scrivere poi nel codice html:

<p>
	Questo paragrafo ha uno stile ad esso applicato. Gli elementi interni ereditano 	lo stesso stile.
	<span>Come questo span!</span>
</p>

Produrrà il seguente risultato:

Quindi in definitiva è importante sapere che le proprietà di uno stile di un livello figlio sono ereditate dallo stile del livello genitore.

Il selettore

Fondamentalmente una regola CSS viene applicata ad un selettore.
La parola parla da sé: si tratta di una semplice dichiarazione che serve a selezionare la parte o le parti di un documento soggette ad una specifica regola.

Vedremo come sarà possibile identificare un selettore, raggrupparli e gestire la loro nidificazione. Inoltre applicare stili differenti ai selettori in base alla loro parentela nell’albero strutturale di un documento html.

Il selettore generale

Il selettore generale, indicato con asterisco (*), corrisponde a qualsiasi elemento nella pagina html.

Scrivere ad esempio:

* {
	font-size : 20px;
	color : red;
}

Tutti gli elementi della pagina, sia che si tratti di titoli, paragrafi, div o altri contenitori, avranno come colore del testo rosso e grandezza di 20px.

Il selettore di elementi

E’ il tipo di selettore più utilizzato, ed è quello già visto più volte all’inizio di questa lezione.
E’ anche il più semplice dei selettori, infatti è costituito da uno qualsiasi degli elementi HTML.

Un esempio di foglio di stile che utilizzi i selettori di elementi è il seguente:

body {
	font-size : 12px;
	background-color : grey;
}

h1 {
	color: red;
}

p {
	border : 1px solid white;
	padding : 5px;
}

Lo sviluppatore di CSS utilizzando questi tipi di selettori può definire regole di stile per ciascun tag html che compone le proprie pagine.
Nell’esempio, vengono definite le dichiarazioni per il body, i titoli h1 e i paragrafi. Il vantaggio nell’uso di questi selettori è la velocità con la quale è possibile definire lo stile di di intere pagine html con poche linee di codice.
Uno degli svantaggi però nasce con la nidificazione degli elementi. Infatti maggiore sarà il livello di nidificazione e maggiore sarà la probabilità che le diverse regole si sovrascrivano tra loro.

[... vai alla seconda parte ...]

Scrivere una regola CSS vuol dire applicare un particolare stile grafico ad un elemento che compone la pagina html.
Una regola si può comporre di una o più dichiarazioni, dove ciascuna dichiarazione influisce su una specifica proprietà dell’elemento.

Una regola è composta da:

• un selettore;
• il blocco delle dichiarazioni.

Il selettore serve a definire la parte del documento a cui verrà applicata la regola, il blocco delle dichiarazioni invece sarà un elenco di proprietà.

Vediamo in pratica, la nostra prima regola CSS:

h1 {
	color : red;
	background-color : black;
}

Traduciamo così la regola appena vista:

tutti gli elementi <h1> presenti nella pagina a cui è associata questo foglio di stile, visualizzeranno il contenuto di tale tag con un font di colore rosso e uno sfondo di colore nero.

Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe. Al suo interno possono trovare posto più dichiarazioni.
Esse sono sempre composte da una coppia:

• proprietà;
• valore.

La proprietà definisce un aspetto dell’elemento da modificare (margini, colore di sfondo, etc) secondo il valore espresso. Proprietà e valore devono essere separati dai due punti.

Una limitazione fondamentale da rispettare è che per ogni dichiarazione non è possibile indicare più di una proprietà, mentre è spesso possibile specificare più valori.

Pertanto la seguente regola è errata:

body {color background: black;}

Mentre questa è perfettamente valida:

div {font: 12px Verdana, arial;}

Inoltre se in un blocco si definiscono più dichiarazioni, come nell’esempio del tag <h1>, esse vanno separate dal punto e virgola.
Il linguaggio non impone che si metta il punto e virgola dopo l’ultima dichiarazione, ma alcuni browser più datati lo richiedono, quindi è buona norma aggiungerlo sempre per sicurezza e per una maggiore compatibilità.
Gli spazi bianchi lasciati all’interno di una regola non influiscono sul risultato. Il consiglio, anzi, è di lasciare sempre uno spazio tra le varie parti per una migliore leggibilità.

Applicare un foglio di stile ad una pagina

Riprendiamo la regola CSS vista nel paragrafo precedente:

h1 {
	color : red;
	background-color : black;
}

Per applicare questa dichiarazione ad una pagina html è necessario procedere in uno dei modi analizzati in precedenza. Dobbiamo quindi scegliere in che modo incorporare il CSS in un codice html. Per rientrare negli standard di corretta programmazione, realizziamo un file di stile esterno.

Salviamo quindi la nostra regola in un file di testo con estensione .css, che chiameremo ad esempio stile.css.

Il passo successivo sarà quello di associare ad una pagina html il foglio di stile:

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

Vediamo quindi il codice completo di una pagina html:

<html>
<head>
	<title>STILE CSS</title>
	<link href="stile.css" type="text/css" rel="stylesheet" />
</head>
<body>
	<h1>I Promessi Sposi</h1>
	<p align='justify'>
        Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti...
	</p>
</body>
</html>

Il risultato nella finestra del browser è il seguente:

Inserire commenti

Così come per l’html anche il CSS permette l’inserimento di commenti da parte dello sviluppatore.
Per inserire un commento la sintassi è la seguente:

/*
   questo è un commento per fogli di stile…
*/

I commenti posso essere posizionati sia fuori che dentro le singole regole. E’ buona norma utilizzarli soprattutto per chi leggerà e modificherà successivamente il file css.

/* Regola di stile per i titoli di livello h1 */
h1 {
	/* Imposto colore del testo a rosso e sfondo a nero */
	color : red;
	background-color : black;
}

Dietro il semplice acronimo CSS (Cascading Style Sheets – Fogli di stile a cascata) si nasconde uno dei fondamentali linguaggi standard del W3C.
La sua storia cammina su binari paralleli rispetto a quelli di HTML, di cui vuole essere l’ideale complemento. Da sempre infatti, nelle intenzioni degli uomini del Consortium, HTML, il CSS dovrebbe essere visto semplicemente come un linguaggio strutturale, alieno da qualunque scopo attinente la presentazione di un documento.

L’obiettivo del CSS è quello di arricchire l’aspetto visuale ed estetico di una pagina e l’idea alla base dell’evoluzione di questo linguaggio è essenzialmente quello di separare il contenuto dalla presentazione.

Il W3C ha pubblicato due raccomandazioni (una sorta di standard) principali per il CSS:

• CSS1 (1996)
• CSS2 (1998)

Al momento è in fase di ultimazione la raccomandazione CSS3. Ciascuna di esse definisce le regole e la sintassi a cui deve attenersi uno sviluppatore di fogli di stile.

Perchè utilizzare il CSS

Nelle lezioni precedenti abbiamo appreso le basi per un buon sviluppo di pagine HTML, ed inoltre ci si sarà pienamente resi conto dei limiti di questo linguaggio sul lato della pura presentazione.

Quasi tutto quello che con HTML non è possibile realizzare, riusciremo a farlo con i fogli di stile.
Finalmente, ad esempio, potremo dare al testo delle nostre pagine un aspetto da word-processor: non solo con il colore o i font che si preferisce, ma con un sistema di interlinea pratico e funzionale, con le decorazioni desiderate, riuscendo a spaziare lettere e parole, impostando stili diversi per titoli e paragrafi, sfruttando i benefici dell’indentatura o della giustificazione.
Si potranno distanziare gli elementi che compongono la pagina, incastrarli e sovrapporli tra loro. Giocare con i colori, le sfumature e i bordi ed utilizzare immagini come sfondi.

Un altro vantaggio non di poco conto nell’uso dei fogli di stile è la separazione che esiste tra questi e le pagine html. In altre parole qualora si desideri cambiare un’immagine di sfondo da centinaia di pagine html, sarà necessario modificare esclusivamente poche righe del file CSS legato alle pagine. Il vantaggio inoltre è quello di avere pagine più leggere, facilmente modificabili e mantenibili.

Fogli di stile a cascata

Il termine cascading (presente nell’acronimo CSS) si riferisce all’ordine di applicazioni delle definizioni di stile.
In altre parole il browser interpreta le regole di stile dall’alto verso il basso e le compone insieme per realizzare la presentazione della pagina html a cui è associato.

Se ad esempio, una regola css definisce alcune proprietà di un elemento ed una successiva ne definisce di diverse per lo stesso elemento, queste vanno a sommarsi alle regole precedenti. Di conseguenza se una regola css ri-definisce una regola precedentemente definita, quest’ultima (essendo letta in cascata) sovrascrive la prima.

Inoltre è da sottolineare che le definizioni di stile in un file esterno hanno minore priorità di quelle definite all’interno dei tag html (con l’attributo style visto nella lezione precedente).
Di conseguenza una regola definita all’interno del tag sovrascrive quella definita all’interno del foglio di stile esterno.

CSS esterni ed interni

Esistono vari modi per inserire i fogli di stile in un documento html.
Innanzitutto è necessaria una prima distinzione:

• CSS esterni
• CSS interni

È esterno un foglio di stile definito in un file separato dal documento. Si tratta di semplici documenti di testo editabili anche con il Blocco Note ai quali si assegna l’estensione .css.

Un foglio di stile si dice invece interno quando il suo codice è compreso in quello del documento html.

A seconda che si lavori con un CSS esterno o interno variano sintassi e modalità di inserimento. Rispetto a queste diverse modalità si parla di fogli di stile collegati, incorporati o in linea.
Per caricare un foglio di stile esterno è possibile utilizzare due sintassi differenti: link o import. Nel primo caso scriveremo:

<link rel=”stylesheet” type=”text/css” href=”stile.css”>

Con import invece:

@import url(stile.css);

Entrambe le dichiarazioni di inclusione vanno inserite all’interno dell’head delle pagine html. La import inoltre va preceduta dal tag <style> e seguita dal rispettivo tag di chiusura </style>.

Questi tag sono essenziali anche per definire le regole di stile incorporati. In questo caso all’interno del tag <style> verranno elencate in cascata le varie dichiarazioni:

<style type=‘text/css’>
…..
</style>

E’ essenziale specificare il tipo di linguaggio di stile utilizzato con l’attributo type che nel nostro caso varrà sempre text/css.

Infine lo stile in linea prevede l’uso dell’attributo style per ogni elemento che compone la pagina web. Come visto nella lezione precedente, tale attributo è utile per acquisire familiarità con le diverse proprietà degli elementi html, ma da punto di vista stilistico non è un buon modo di implementare il CSS perché non rispetta la regola enunciata all’inizio di questa lezione, che vuole la netta separazione tra struttura e presentazione.

In definitiva possiamo utilizzare una regola generale per scegliere il tipo di inclusione del nostro codice CSS.

Il CSS interno direttamente sul codice in genere viene usato:

1. per casi isolati e che non necessitano di cambiamenti
2. per formattazioni che riguardano tutta la pagina HTML

Il CSS esterno invece:

1. viene usato per formattazioni che riguardano anche più pagine HTML

Spaziatura degli elementi

Esistono, come abbiamo già in parte visto, numerose proprietà legate agli elementi html. Alcune sono ad esempio necessarie per creare una spaziatura tra gli elementi o il loro contenuto (MARGIN e PADDING).

Scrivere:

<div style=‘margin:5px; padding:3px’>… Contenuto del blocco … </div>

ci permette di visualizzare un div che è distanziato di 5px su ogni lato dagli elementi che lo circondano e che inoltre ha una spaziatura interna di 3px rispetto al suo contenuto. E’ possibile in alternativa specificare il margine e il padding per ciascun lato dell’oggetto html, utilizzando le parole chiave top, right, left e bottom:

• margin-top / padding-top
• margin-left / padding-left
• margin-right / padding-right
• margin-bottom / padding-bottom

Vediamo un esempio che possa chiarire il loro utilizzo:

<body>
	<div style='margin:15px; padding:10px; background-color:#FF0000'>
		Questo div ha un margine di 15px e un padding di 10px...
	</div>
	<div style='margin-top:15px; padding:5px; background-color:#CCCCCC'>
		Questo div ha un margine di 15px e un padding di 10px...
	</div>
</body>

Nel codice html abbiamo definito due div:

• il primo ha un margine di 15px e un padding di 10px;
• il secondo ha un margine solo superiore di 15px e un padding di 5px.

Quando non viene specificato un margine, come nel secondo div, o un padding, ogni browser applica di default alcune regole di visualizzazione.
Ad esempio, per un div, Internet Explorer applica un margine di 2px e un padding di 1px su ogni lato.
Vediamo infine come il codice viene visualizzato nella finestra del browser.

Bordi degli elementi

Oltre che impostare colori, dimensioni e margini per gli elementi html, è possibile definire un bordo specificando lo spessore, il colore e il tipo di linea.
La proprietà in questione è BORDER e la sintassi è:

<div style=“border:2px  solid #FF0000”> … Contenuto del blocco … </div>

Il div in questione avrà un bordo si 2px con una linea di tipo solid e di colore rosso. Anche per border è possibile specificare un bordo diverso per ciascun lato utilizzando le parole chiave top, left, right e bottom.
E’ importante prestare attenzione alla sintassi utilizzata, infatti la proprietà border accetta tre parametri (dimensione, tipo linea e colore) separati da uno spazio. In alternativa però è possibile utilizzare la proprietà anche in maniera più semplice, scrivendo:

<div style=“border:2px ”> … Contenuto del blocco … </div>

In questo caso stiamo impostando esclusivamente la dimensione del bordo (2px), lasciando al browser e alle sue regole di defaul, la scelta del colore (solitamente nero) e del tipo di linea (solitamente solida).

Vediamo quindi un esempio che possa chiarire l’uso della proprietà border:

<body>
	<div style='background-color:#FF0000; border 2px solid #000000'>
		 Questo div ha un bordo solido di 2px e di colore nero
	</div>
        <div style='background-color:#CCCCCC; border 5px solid #FF0000'>
		Questo div ha un bordo solido di 5px e di colore rosso
	</div>
</body>

Il risultato è il seguente:

Come annunciato in precedenza, esistono diverse tipologie di linea per i border:

• Solid (linea solida)
• Dotter (linea punteggiata)
• Dashed (linea tratteggiata)
• Double (linea doppia)
• Ridge (linea in rilievo)

La sintassi resta invariata, per una bordo di tipo dotter scriveremo:

<div style=“border:2px  dotter #FF0000”> … Contenuto del blocco … </div>

Larghezza di un elemento

Grazie alla proprietà width (larghezza), è possibile specificare in pixel o in percentuale la larghezza che un elemento dovrà occupare all’interno della finestra del browser.

La sintassi è molto semplice:

<div style=‘width:200px’>…Contenuto…</div>

Questa proprietà è molto utile quando si desidera realizzare menu, finestre o elementi che richiedano dimensioni ben precise.

Vediamo un esempio di codice html:

</pre>
<div style="‘width: 200px;">Questo div è largo 200px</div>
<div style="‘width: 300px;">Questo div è largo 300px</div>
<div style="‘width: 400px;">Questo div è largo 400px</div>
<pre>

In questo esempio abbiamo definito 3 div in sequenza, ognuno con un semplice testo all’interno; abbiamo assegnato larghezze diverse e un colore di sfondo.
Da notare che l’altezza del div, in questo esempio, è dipeso dal contenuto; un div con più righe di testo risulterà più alto di un div con una sola riga.

In alternativa avremmo potuto utilizzare un valore percentuale per la proprietà width.

In questo caso è essenziale conoscere le dimensioni dell’elemento che conterrà l’elemento al quale applicare una dimensione in percentuale.
Difatti con il seguente codice:

<div style=‘width:50%’>…Contenuto…</div>

definiamo un div che occuperà il 50% in larghezza rispetto all’elemento che lo contiene.
Riprendendo il codice html precedente, apportiamo alcune modifiche:

</pre>
<div style="‘width: 20%;">Questo div è largo il 20%</div>
<div style="‘width: 30%;">Questo div è largo il 30%</div>
<div style="‘width: 50%;">Questo div è largo il 50%</div>
<pre>

I tre div definiti si adatteranno alle dimensioni del body e quindi della finestra del browser. In altre parole se rimpiccioliamo la finestra, anche i div assumeranno dimensioni diverse rispettando le percentuali assegnategli.

 

Altezza di un elemento

Grazie alla proprietà height possiamo definire l’altezza massima che un elemento deve assumere.
La sintassi è del tutto simile alla proprietà width:

<div style=‘height:200px’>…Contenuto…</div>

Combinando insieme width e height è possibile realizzare dei box e della finestre a larghezza fissa. Vediamo il seguente esempio:

</pre>
<div style="width: 200px; height: 200px; background-color: red;">DIV</div>
<div style="width: 300px; height: 300px; background-color: red;">DIV</div>
<div style="width: 400px; height: 400px; background-color: red;">DIV</div>
<pre>

I tre box definiti hanno larghezza e altezza fissa e un colore di sfondo per essere evidenziati. Di seguito il risultato nella finestra del browser:

Così come per la proprietà width, anche height permette di utilizzare un valore espresso in percentuale. Inoltre è possibile utilizzare simultaneamente percentuali e pixel, ad esempio definendo un’altezza in pixel e una larghezza in percentuale o viceversa.

Questo modo di operare è utile quando si vuol realizzare una pagina web che si estenda esclusivamente in larghezza o altezza.

Vediamo il seguente codice html:

<div style="width: 300px; height: 100%; background-color: red;">DIV</div>

Il div ha una larghezza fissa di 300px e un’altezza flessibile che si adatta alle dimensioni della finestra.

Tutti gli esempi proposti nelle lezioni precedenti, per esigenze puramente didattiche, hanno tenuto poco conto dell’aspetto grafico di una pagina html. Nonostante ciò è impensabile realizzare ipertesti o siti web che non utilizzino colori, immagini o particolari regole di formattazione.

Questa lezione introdurrà le regole di stile che saranno approfondite nelle lezioni successive riguardanti il CSS.

I colori, sul web così come su supporto cartaceo, rivestono un ruolo fondamentale grazie al quale è possibile attirare l’attenzione del lettore e rendere la lettura più confortevole e divertente.

I colori in HTML possono essere specificati o attraverso un nome (red, yellow, green, ecc..), oppure attraverso la notazione esadecimale, 6 cifre precedute dal carattere  cancelletto (#).

Scrivere ad esempio:

<body bgcolor="red">

oppure

<body bgcolor="#FF0000">

fa si che il corpo della pagina html, il body appunto, appaia a video con uno sfondo di colore rosso.
Le sei cifre esadecimali corrispondono alla codifica RGB per i colori. Di seguito è proposta una tabella con alcuni dei colori più utilizzati, tenendo comunque presente le milioni di sfumature possibili:

Computer e monitor differenti possono mostrare lo stesso colore in maniera molto differente in relazione a fattori come scheda video e risoluzione dello schermo. Nonostante ciò esistono 216 codici per i colori che sono ritenuti “safe” (sicuri) nel senso che essi sono mostrati nello stesso modo (o quasi) su tutti i computer.

Inoltre nella scelta dei colori è importante tener conto del fattore accessibilità prestando attenzione  ad usare combinazioni di colori che siano fruibili anche a chi soffre di daltonismo. Secondo le linee guida indicate dal W3C nella raccomandazione Web Content Accessibility Guidelines (WCAG) 2.0 il colore non deve essere usato come unico mezzo visivo per fornire informazioni, altresì bisogna fornire vie alternative utilizzando combinazioni di stili o visualizzazione di testi.

L’attributo STYLE

I colori sono applicabili non solo allo sfondo della pagina bensì anche ai testo, i bordi e tutti gli elementi html visti fino ad ora sono personalizzabili nel colore.

A tal proposito è necessario innanzitutto introdurre un attributo fondamentale nella definizione dello stile in linea di una pagina html, il cui nome è appunto STYLE.

Più che un attributo, STYLE è da considerarsi come una sorta di contenitore di attributi di stile per un singolo elemento; difatti la sintassi è la seguente:

style=“proprietà1=valore; proprietà2=valore; proprietà3=valore; …”

Un esempio di utilizzo dell’attributo style è il seguente:

<p style='font-size:15px; background-color:#0000FF; color:#FF0000'>
	Contenuto del paragrafo…
</p>

Al paragrafo sono associate le seguenti proprietà:

• font-size : grandezza del carattere
• background-color : colore di sfondo
• color : colore del testo

Il risultato è il seguente:

Applicare immagini di sfondo

Il body, così come paragrafi o div, di una pagina html possono eventualmente contenere anche un’immagine come sfondo.
In questo caso è necessario specificare l’url dell’immagine ed una eventuale posizione che questa deve assumere rispetto al suo contenitore.
Supponiamo di inserire un’immagine di sfondo ad un paragrafo:

<p style="background-image: url(img/sfondo.jpg)">
	Contenuto del paragrafo…
</p>

In questo caso, senza specificare ulteriori parametri lo sfondo verrà ripetuto per riempire interamente lo spazio definito dal paragrafo:

Tramite la proprietà background-repeat viene definito il modo in cui l’immagine va ripetuta all’interno del blocco. I valori che questo può assumere sono:

• repeat (valore predefinito): l’immagine viene ripetuta orizzontalmente e verticalmente
• repeat-x (l’immagine viene ripetuta solo orizzontalmente)
• repeat-y (l’immagine viene ripetuta solo verticalmente)
• no-repeat (l’immagine non viene ripetuta e si avrà una sola occorrenza della stessa)

Riscrivendo il codice precedente in questo modo:

<p style="background-image: url(img/sfondo.jpg); background-repeat: no-repeat">
	Contenuto del paragrafo…
</p>

Avremo l’immagine posizionata nell’angolo in alto a sinistra del paragrafo senza che questa venga ripetuta:

Diversamente potremo specificare un repeat-y per ottenere il seguente effetto:

Posizionare le immagini di sfondo

La proprietà background-position permette di specificare in che modo allineare l’immagine di sfondo rispetto al suo contenitore.
La proprietà richiede due valori, il primo per la posizione verticale e la seconda per quella orizzontale.
La sintassi è la seguente:

style=”background-position: verticale orizzontale”

I valori ammissibili per le posizioni verticale/orizzontale sono:

• center/center
• right/bottom
• left/top

Scrivendo ad esempio il seguente codice:

<p style="background-image: url(img/sfondo.jpg);
               background-repeat: no-repeat;
               background-position: center center">
	Contenuto del paragrafo…
</p>

impostiamo uno sfondo che non sia ripetuto ma sia al centro assoluto del paragrafo:

Diversamente avremo potuto allinearlo nel vertice basso del paragrafo: