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 i bordi di un elemento

Riuscire a definire l'aspetto dei bordi, nella creazione di una pagina Web, è un'altra delle cose per cui vale la pena imparare ad usare i CSS. La proprietà border, può essere usata per molte cose, per esempio come elemento decoratico, oppure per delimitare un'immagine o i contorni di una tabella o per sottolineare una separazione fra due oggetti.

A questo proposito, i CSS ci forniscono diverse possibilità nell'utilizzo dei bordi per le nostre pagine web. Ricapitolando, con la proprietà border, definiamo con una sola regola lo stile dei quattro bordi che conseguentemente avranno lo stesso colore, lo stesso stile e lo stesso spessore, come da sintassi quà sotto, cioè un div che avrà un bordo normale, di 2px di colore rosso.

Con la proprietà border, abbiamo la possibilità di definire lo stile di ogni singolo bordo, dandogli a ognuno un colore, uno stile e uno spessore diverso, e infatti dalle proprietà di ciascun lato si possono definire per il bordo tre aspetti importanti:


h2 {
       border-top: color: red;
       border-right: style: dotted;
       border-bottom: width: thin;
     }


1- border-color: Con la proprietà border-color definiamo il colore del bordo, e (come abbiamo visto nella lezione sul colore) possiamo usare a nostro piacimento i valori esadecimali come per esempio #123456, oppure valori in percentuale rgb (123,123,123) o infine le sedici parole chiave dei colori, quali black, red, yellow ecc.

   h1 { border-color: #FF0000;}

I valori che possiamo inserire per il colore (color) sono:


2- border-style: Con la proprietà border-style invece cerchiamo di inserire uno stile che più si abbina a quel titolo, oppure a una immagine ecc.

   p { border-style: 1px solid red;}

E' possibile scegliere fra diversi tipi di bordi. Sotto sono mostrati 8 diversi tipi di bordi cosė come vengono interpretati da Internet Explorer 5.5. Tutti gli esempi sono mostrati con un colore giallo e spessore thick, ma possono essere chiaramente mostrati con altri colori e altri spessori.

Lo stile di un bordo può essere espresso con una delle seguenti parole chiave

Ognuno di questi termini, definisce un particolare aspetto del bordo, come potete vedere dallo schema sottostante.

i_bordi

Per verificare il codice, con i vari esempi, potete osservare questa pagina.


3- border-width: Lo spessore dei bordi viene definito con la proprietà border-width, che può avere un valore sottile, medio, spesso, o un valore numerico indicato in pixel.

   h1 { border-width: thick;}

Quindi lo spessore di un bordo può essere cambiato, inserendo uno di questi valori

lo_spessore

^ 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