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.

Selettori classi e id: cosa sono?

Nel codice Xhtml, esistono due attributi importantissimi applicabili a tutti gli elementi all'interno dei fogli di stile, e sono class e id. I CSS, non sarebbero un linguaggio così potente e versatile, senza questi due selettori speciali. Le classi servono per attribuire una presentazione ad un sottoinsieme di elementi con caratteristiche e funzionalità comuni di una pagina Xhtml, mentre gli id servono per definire un elemento unico in una pagina. Dichiarare questi attributi a prescindere dai CSS non ha alcun senso e non modifica in alcun modo la presentazione della pagina.

Quando si usa una classe, la regola è fare precedere il nome che vogliamo dare alla classe, da un punto (.), per es .testorosso, mentre se si usa l'id, si fà precedere il nome dal simbolo del cancelletto (#), es. #testorosso.

Nell'es. sottostante, abbiamo assegnato al paragrafo un attributo class="testorosso":

  <p class="testorosso">....</p>

Vediamo come appare questa pagina nel browser

Come potete vedere non è successo nulla, perchè il valore dell'attributo class deve trovare una corrispondenza in un foglio di stile. In questa seconda pagina invece, abbiamo definito un CSS incorporato creando un selettore di tipo classe e assegnado ad esso il nome testorosso:

<style type="text/css">
/* Si fà precedere il nome della classe da un punto*/
.testorosso {
               font: 12px arial, Helvetica, sans-serif;
               color: #FF0000;
               }
</style>

Il testo del nostro paragrafo sarà ora formattato come lo vogliamo noi, cioè il testo rosso, il carattere arial, Helvetica, san-serif, con una dimensione di 12px. Lo stesso meccanismo è valido per i selettori di tipo id. ma con una sola fondamentale differenza e cioè che in un documento Xhtml l'attributo id è usato per identificare in modo univoco un solo elemento, nel senso che se assegniamo ad un paragrafo l'id "testorosso", non potremo più usare questo valore nel resto della pagina. Quindi l'id #testorosso dichiarato nel CSS trasformerà solo quel paragrafo specifico. Una singola classe, al contrario, pu essere assegnata a più elementi, anche dello stesso tipo. In un documento potremo avere senza problemi questa situazione:

<style type="text/css">
      <p class="testorosso">....</p>
      <div class="testorosso">....</div>
      <table class="testorosso">...</table>
      <table class2="testorosso">...</table>
      <p class="testorosso">....</p>
</style>

All'interno del foglio di stile quindi la .testorosso formatterà allo stesso modo il testo dei paragrafi (p) del div e della tabella (table).

Invece nell'es. sottostante la cosa è diversa:

      <p id="testorosso">....</p>
      <div id="testorosso">...</div>

Ricapitoliamo. Una classe permette più possibilità inerenti la formattazione di un documento. Per es. abbiamo tutti i paragrafi della nostra pagina con il testo blu. E se volessimo cambiare e aver ad esempio, anche paragrafi con il testo nero? Scriviamo due classi, una per il blu e una per il nero, le applichiamo di volta in volta secondo le nostre necessità e il gioco è fatto. Il trucco dovrà dunque essere questo. Se applichiamo uno stile a un solo specifico elemento usiamo un id, se invece contiamo di usarlo più volte ovvero su più elementi definiamo nel CSS una classe.

Le tante possibilità che abbiamo di scrivere una classe in un foglio di stile le troviamo in questa pagina di esempio:

Vediamo invece in questa pagina l'id.

^ 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