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.

Come è strutturato un CSS

Un foglio di stile non è altro che un insieme di regole, accompagnate volendo da qualche nota di commento, che danno indicazioni ben precise al documento Xhtml che stiamo creando, riguardanti la formattazione dello stesso. Una regola CSS è formata essenzialmente da due blocchi ben distinti:

selettore

blocco delle dichiarazioni

h1

color: jellow;   background: red;

Il selettore è quella parte del documento a cui verrè applicata la regola. Nell'es. che stiamo vedendo, tutti gli elementi <h1> (titolo) saranno colorati di giallo (jellow) e il colore di sfondo (background) sarà rosso (red). Il blocco delle dichiarazioni è sempre delimitato da due parentesi graffe e al suo interno possono trovare posto più dichiarazioni.

    h1 {color: jellow;  background: red;}

All'interno del blocco la, o le dichiarazioni debbono essere sempre distinte da:

La proprietà è l’aspetto del selettore che si vuole modificare (per esempio il colore) e valore è il valore che questa proprietà deve assumere. Nell'es. sopra, color è la proprietà e jellow è il valore, e i due devono essere separati sempre da due punti (:) Una cosa importantissima da ricordare è questa: che in ogni dichiarazione non è possibile indicare più di una proprietà , mentre si possono specificare più valori. La dichiarazione deve terminare con un punto e virgola (;), che è sempre meglio inserire, perchè alcuni browser più vecchi la richiedono.


       body { color    background:   red;  }    Dichiarazione sbagliata

       p {  font-family:  14px Verdana,  arial,  sans-serif;  }  Dichiaraz. corretta

I commenti

I commenti possono essere utilizzati sia per scrivere un vero e proprio commento al foglio di stile, (es.A) sia per isolare temporaneamente alcune parti di codice per scopi di test (es.B). Per isolare una parte del foglio di stile è sufficiente porre quella parte di codice interessata all'interno di un commento e in tal modo il browser la ignorerà. Occorre prestare molta attenzione al punto di inizio e di fine del commento. Il resto del documento deve continuare ad avere una sintassi corretta. Per inserire parti di commento in un CSS, bisogna rachiuderlo tra questi due segni:

es.A- commento al foglio di stile

/* Lo stile iniziale della .selezione del primo paragrafo */
  .selezione {
                color: #33F;
                text-decoration:   underline;
                font-style: normal;
                }

es.B- codice del CSS isolato momentaneamente

/* isolo solo una porzione di testo
  .selezione {
                color: #33F;
                text-decoration:   underline;
                font-style: normal;
                }
*/

Proprietà singole e abbreviate

Nelle definizione delle regole possiamo fare uso di proprietà singole e proprietà a sintassi abbreviata letteralmente conosciute con il termine scorciatoie. Le proprietà singole sono la maggior parte: impostano per un dato elemento o selettore un singolo aspetto, mentre con le proprietà a sintassi abbreviata è possibile definire con una sola dichiarazione un insieme di proprietà. Chiariamo con un esempio. Consideriamo un box contenitore (div). Sui suoi quattro lati, ha un certo margine rispetto a un altro box adiacente. È possibile definire per ciascuno dei lati, un valore usando quattro proprietà singole separate:

Lo stesso risultato si può ottenere usando la proprietà a sintassi abbreviata, sempre riferita ai margini del nostro div.es:

   div {margin:  10px  5px  10px  5px;}

^ 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