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.

Definire la larghezza di un elemento

Le dimensioni orizzontali, cioè la larghezza di un elemento sono stabilite dalla proprietà width. Questa proprietà può essere applicata a tutti gli elementi blocco e non è ereditata.


     div.box {
                width: 200px;
                border: 1px solid black;
                background-color: orange;
                }

Guardiamo questo esempio

Però un grave errore è quello di ritenere che queste dimensioni siano definite semplicemente dalla proprietÓ width, ma non è così, in pratica bisogna distinguere tra la larghezza effettiva dell'elemento (cioè i px che occupano nella pagina), e la larghezza che occupano i contenuti.

La prima è data dalla somma di questi valori: margin-left + border-left + padding-left + width + padding-right + border-right + margin-right.

La seconda invece è data appunto dalla proprietà width. Visualizziamo l'esempio:

Può capitare che i due valori, (cioè larghezza effettiva dell'elemento e larghezza dei contenuti) coincidano, e questo succede quando di un particolare elemento non si impostino margini, paddding e bordi, o quando il valore di tali proprietà sia uguale a 0. L' esempio mostra chiaramente questa situazione. I due box dovrebbero avere la stessa larghezza. Ma se usate Explorer 5 o 5.5 su Windows noterete che non è così in quanto quest'ultimo interpreta la proprietà width in maniera diversa, cioè come la somma totale di bordi, margini, padding e contenuto.

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

Per capire meglio il codice, guardiamo questa pagina


2- min-width: Imposta la larghezza minima di un elemento. Si applica a tutti gli elementi tranne che a quelli in linea non rimpiazzati e agli elementi di tabelle. Proprietà non supportata da Internet Explorer e non ereditata.

     div 10 { min-width: 300 px;}

Visualizziamo l'esempio:

I valori che si possono quindi applicare a questa proprietà sono:


3- max-width: Serve a impostare la larghezza massima di un elemento. Non è ereditata.

     #div 11 { max-width: 180 px;}

I valori che si possono quindi applicare a 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