logo del sito

W3C

Al giorno d'oggi è importante che un sito Web, sia compatibile con gli standard del Consorzio Internazionale W3C.

HTML

Tutte le pagine dei siti web sono scritte in HTML, linguaggio che viene letto ed elaborato dal browser, il quale genera la pagina che viene visualizzata sullo schermo del nostro computer.

CSS

Con il termine CSS (dall'inglese Cascading Style Sheets) vengono semplicemente definiti appunto i "fogli di stile a cascata", usati per separare all'interno delle pagine di un sito, i contenuti dalla formattazione, permettendo una programmazione più facile per gli autori delle pagine HTML.

I selettori

In un css, i selettori servono a specificare a quale elemento del documento debba essere applicata una regola. In Xhtml, ci sono tantissimi selettori, ma indubbiamente quelli che svolgono un compito fondamentale all'interno del codice, e del css, sono due: class e id, ma li approfondiremo meglio nella lezione successiva. Di seguito facciamo diversi esempi della sintassi che si usa scrivere all'interno del foglio di stile.

  h1    {color: #000000;}
  p      {background: white; font: 12px Verdana, arial, sans-serif;}
  table  {width: 200px;}

e cliccando su questo esempio, si può vedere il risultato come viene visualizzato nel browser.

È possibile anche all'interno del CSS raggruppare diversi elementi al fine di rendere più semplice il codice. Questa, è un'operazione molto conveniente da affettuare quando si è in presenza di elementi che hanno lo stesso colore: nell'es. quà sotto, i titoli (h1, h2, h3,) hanno tutti uno sfondo bianco.

  h1   {background: #FFFFFF;}
  h2   {background: #FFFFFF;}
  h3   {background: #FFFFFF;}

Però al contempo, invece di scrivere tre regole separate per indicare la stessa cosa, si può scrivere anche come da es. sottostante, separando sempre con una virgola gli elementi raggruppati.

  h1, h2, h3  { background: #FFFFFF;}

In questo esempio si vede bene il risultato. Un'altra opzione molto utile da usare, all'interno dei CSS, è il selettore universale, che serve a selezionare tutti gli elementi di un documento. Si esprime con il carattere * (asterisco): esempio:

*  { color: black; }

Tutti gli elementi, che nella struttura ad albero di un documento siano discendenti di un altro elemento specificato nella regola si chiamano selettori del discendente (discendant selector). Ricordiamo che un elemento è discendente di un altro se è contenuto al suo interno, a qualsiasi livello.

  discendant selector
  div p   {color: #000000;}
  p strong   {color: #FF0000;}

Una cosa molto importante da ricordare è che il selettore va letto per chiarezza da destra a sinistra. Nel primo esempio verranno selezionati tutti i paragrafi <p> discendenti di elementi <div>. Nel secondo tutti gli elementi <strong> che si trovino all'interno di un paragrafo. Ricordiamoci sempre che sia in Xhtml, che nei CSS, esistono regole ben precise sull'annidamento degli elementi che vanno rispettate sia in (X)Html che nei CSS, infatti un paragrafo non può contenere un div, così come un elemento inline non può contenere elementi blocco. Notare l'esempio:

Invece, quando un elemento è figlio diretto di un altro, parliamo di selettore del figlio (child selector) che è solo in apparenza simile al descendant selector però la differenza stà nella relazione di discendenza tra gli elementi, che in questo caso deve essere di primo livello. Con l'esempio sottostante si capisce meglio il significato di descendant selector:

<body>
  <p>Primo paragrafo</p>
    <div>
      <p>Secondo paragrafo</p>
    </div>
  <p>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. Dall'immagine sottostante si capisce ulteriormente il concetto: tra body e il primo e il terzo paragrafo si scende di un livello. Rispetto al secondo di due livelli:

terza_immagine

Come si vede dall' es. sottostante si selezionano tutti i paragrafi, figli diretti dell'elemento <body>. Per il child selector i due elementi devono essere separati dall'operatore "maggiore di" >. Anche in questo caso la lettura corretta và fatta da destra a sinistra. Questo selettore non è supportato da Internet Explorer (almeno fino alla versione 6) su Windows, cosa che ne limita notevolmente l'utilizzo. Potete verificare il supporto negli altri browser in questo documento di esempio.

  body > p {color: black;}

^ Inizio pagina

Ricerca personalizzata


Lezione successiva successiva

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

Indice