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.

Il padding

Il meccanismo usato nei CSS per creare spazio intorno ad un elemento, viene chiamato padding. Quando si usa il padding, lo spazio di distanza viene inserito al di quà dei bordi dell'elemento e non all'esterno, come abbiamo visto per la proprietà margin, quindi in poche parole definiamo soltanto la distanza interna tra il bordo e il contenuto dell'elemento. La cosa risulta più evidente se usiamo un colore di sfondo per l'elemento, diverso da quello della pagina.

L'uso di padding può essere illustrato guardando un semplice esempio dove tutti i titoli hanno un colore di sfondo:

 h1 { background: yellow; }
 h2 {background: orange; }

Guardiamo questo esempio

Definendo il padding per i titoli possiamo stabilire quanto riempimento ci deve essere intorno al testo per ogni titolo:

h1 { background: yellow;
       padding: 20px 20px 20px 80px;
     }

h2 { background: orange;
       padding-left: 120px;
     }

Guardiamo questo esempio

I valori che possiamo inserire per la proprietà, padding sono:


1- padding-top: Definisce l'ampiezza del padding sul lato superiore di un elemento. Si applica a tutti gli elementi e non è ereditata.

  h1 { padding-top: 20px;}

I valori che possiamo inserire per questa proprietà, sono:


2- padding-right: Definisce l'ampiezza del padding sul lato destro di un elemento. Si applica a tutti gli elementi e non è ereditata.

  p { padding-right: 15px;}

I valori che possiamo inserire per questa proprietà, sono:


3- padding-bottom: Definisce l'ampiezza del padding sul lato inferiore di un elemento. Si applica a tutti gli elementi e non è ereditata.

  p.div { padding-bottom: 25px;}

I valori che possiamo inserire per questa proprietà, sono:


4- padding-left: Definisce l'ampiezza del padding sul lato sinistro di un elemento. Si applica a tutti gli elementi e non è ereditata.

  p { padding-left: 10px;}

I valori che possiamo inserire per questa proprietà, sono:

^ 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