Please Wait
Cosa Cerchi?  

Lezione 05 - Bordi, Margini, Dimensioni e Classi

 

Bordi

Con le proprietà dei bordi posso attribuire ad alcuni elementi una cornice.
Nella tabella che segue sono riassunte le proprietà dei bordi.

Proprietà Descrizione Valori ammessi IE F NN W3C
border Proprietà di impostazione veloce del bordo su ogni lato. border-width
border-style
border-color
4 1 4 1
border-bottom Proprietà di impostazione veloce del bordo inferiore. border-bottom-width
border-style
border-color
4 1 6 1
border-bottom-color Imposta il colore del bordo inferiore. border-color 4 1 6 2
border-bottom-style Imposta lo stile del bordo inferiore. border-style 4 1 6 2
border-bottom-width Imposta la larghezza (spessore) del bordo inferiore. thin
medium
thick
length
4 1 4 1
border-color Imposta il colore per tutti i lati del bordo. color 4 1 6 1
border-left Proprietà di impostazione veloce del bordo sinistro border-left-width
border-style
border-color
4 1 6 1
border-left-color Imposta il colore del bordo sinistro border-color 4 1 6 2
border-left-style Imposta lo stile del bordo sinistro border-style 4 1 6 2
border-left-width Imposta la larghezza (spessore) del bordo sinistro. thin
medium
thick
length
4 1 4 1
border-right Proprietà di impostazione veloce del bordo destro border-right-width
border-style
border-color
4 1 6 1
border-right-color Imposta il colore dle bordo destro border-color 4 1 6 2
border-right-style Imposta lo stile del bordo destro border-style 4 1 6 2
border-right-width Imposta la larghezza (spessore) del bordo destro thin
medium
thick
length
4 1 4 1
border-style Imposta lo stile di tutti i bordi none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
4 1 6 1
border-top Proprietà di impostazione veloce del bordo superiore border-top-width
border-style
border-color
4 1 6 1
border-top-color Imposta il colore dle bordo superiore border-color 4 1 6 2
border-top-style Imposta lo stile del bordo superiore border-style 4 1 6 2
border-top-width Imposta la larghezza (spessore) del bordo superiore thin
medium
thick
length
4 1 4 1
border-width Imposta la larghezza (spessore) di tutti i bordi. thin
medium
thick
length
4 1 4 1

Margini

Con le proprietà dei margini posso modificare la dimensione dei margini di un elemento.
Nella tabella che segue sono riassunte le proprietà dei margini.

Proprietà Descrizione Valori ammessi IE F NN W3C
margin Proprietà di impostazione veloce di tutti e quattro i margini margin-top
margin-right
margin-bottom
margin-left
4 1 4 1

margin-bottom

Imposta il margine inferiore auto
length
%
4 1 4 1

margin-left

Imposta il margine sinistro auto
length
%
3 1 4 1

margin-right

Imposta il margine destro auto
length
%
3 1 4 1
margin-top Imposta il margine superiore auto
length
%
3 1 4 1

Spaziatura (Padding)

Con la spaziatura definisco lo spazio tra il bordo dell'elemento e il suo contenuto.
Nella tabella che segue sono riassunte le proprietà del "padding".

Proprietà Descrizione Valori ammessi IE F NN W3C
padding Imposta tutte e quattro le distanze padding-top
padding-right
padding-bottom
padding-left
4 1 4 1

padding-bottom

Imposta la distanza dal bordo inferiore length
%
4 1 4 1

padding-left

Imposta la distanza dal bordo sinistro length
%
4 1 4 1

padding-right

imposta la distanza dal bordo destro length
%
4 1 4 1
padding-top Imposta la distanza dal bordo superiore length
%
4 1 4 1

Stili applicabili a liste e tabelle

Vediamo ora di riasumere alcuni stili applicabili in modo particolare alle liste e alle tabelle.
Nella tabella che segue sono riassunte le proprietà delle liste.

Proprietà Descrizione Valori ammessi IE F NN W3C
list-style Proprietà di impostazione rapida di tutte le proprietà della lista list-style-type
list-style-position
list-style-image
4 1 6 1
list-style-image Imposta l'immagine da utilizzare come marcatore per la lista none
url
4 1 6 1
list-style-position Imposta la posizione del marcatore della lista inside
outside
4 1 6 1
list-style-type Imposta il tipo di marcatore della lista none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha 
4 1 4 1

Nella tabella che segue sono riassunte le proprietà delle tabelle.

Proprietà Descrizione Valori ammessi IE F NN W3C
border-collapse Imposta il bordo compattato collapse
separate
5 1 7 2
caption-side Imposta la posizione della caption top
bottom
left
right
5M 1 6 2
table-layout Imposta la modalità di visualizzazione delle celle, righe e colonne auto
fixed
5 1 6 2

Dimensioni, classificazione e posizionamento

Esistono stili applicabili a quasi tutti i tag che consentono di impostare le dimensioni dell'elemento, la posizione all'interno della pagina e attributi generali quali il cursore, la visibilità e il tipo di visualizzazione.
Cominciamo a vedere le proprietà relative alle dimensioni.

Proprietà Descrizione Valori ammessi IE F NN W3C
height Imposta l'altezza di un elemento auto
length
%
4 1 6 1
line-height Imposta la distanza tra le linee (interlinea) normal
number
length
%
4 1 4 1
max-height Imposta l'altezza massima dell'elemento none
length
%
- 1 6 2
max-width Imposta la larghezza massima dell'elemento none
length
%
- 1 6 2
min-height Imposta l'altezza minima dell'elemento length
%
- 1 6 2
min-width Imposta la larghezza minima dell'elemento length
%
- 1 6 2
width Imposta la larghezza dell'elemento auto
%
length
  
4 1 4 1

Vediamo ora le proprietà relative al posizionamento.

Proprietà Descrizione Valori ammessi IE F NN W3C
bottom Imposta la distanza del bordo inferiore dell'elemento rispetto al bordo inferiore dell'elemento contenitore auto
%
length
5 1 6 2
clip Imposta una forma per la visualizzazione dell'elemento shape
auto
4 1 6 2
left Imposta la distanza del bordo sinistro dell'elemento rispetto al bordo sinistro dell'elemento contenitore auto
%
length
4 1 4 2
overflow
 
Imposta il comportamento dell'elemento nel caso il contenuto fuoriesca dalle dimensioni visible
hidden
scroll
auto
4 1 6 2
position Imposta il tipo di posizionamento static
relative
absolute
fixed
4 1 4 2
right Imposta la distanza del bordo destro dell'elemento rispetto al bordo destro dell'elemento contenitore auto
%
length
5 1 6 2
top Imposta la distanza del bordo superiore dell'elemento rispetto al bordo superiore dell'elemento contenitore auto
%
length
4 1 4 2
vertical-align Imposta l'allineamento verticale dell'elemento baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
4 1 4 1
z-index Imposta l'ordine dell'elemento sull'asse z (sovrapposizione) auto
number
4 1 6 2

Vediamo ora le proprietà relative alla classificazione.

Proprietà Descrizione Valori ammessi IE F NN W3C
clear Imposta i lati dell'elemento dove altri elementi non possono essere posizionati left
right
both
none
4 1 4 1
cursor Imposta il tipo di cursore da visualizzare su quell'elemento url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
4 1 6 2
display Imposta come e se l'elemento deve essere visualizzato none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
4 1 4 1
float Imposta dove il testo o l'immagine di un elemento devono essere visualizzati left
right
none
4 1 4 1
visibility Imposta la visibilità dell'elemento visible
hidden
collapse
4 1 6 2

Classi

Gli stili applicabili agli elementi (tags) possono anche essere definiti meidante l'uso delle classi. Le classi sono degli stili associati direttamente ad un tag o di tipo generico che possono essere richiamate da tutti gli elementi che devono acquisire quella particolare caratteristica senza modificare il comportamento degli altri tag dello stesso tipo.
Per capire meglio il concetto di classe facciamo un esempio.

<html>
	<head>
		<title>Pagina con Stile</title>
		<style type="text/css">
			p.destra {
				text-align:	right;
			}
		</style>
	</head>
	<body>
		<p>Questo &egrave; un paragrafo generico senza stile.</p>
		<p class="destra">Questo &egrave; un paragrafo con
		l'attribuzione della classe di stile per l'allineamento a
		destra. </p>
	</body>
</html>

Nell'esempio precedente abbiamo definito una classe specifica legata al tag <p> di nome "destra" che allinea il testo del paragrafo di classe "destra" a destra.
Posso anche indicare una classe generica applicabile a più tag indicando solo il nome della classe, vediamo un esempio.
Per capire meglio il concetto di classe facciamo un esempio.

<html>
	<head>
		<title>Pagina con Stile</title>
		<style type="text/css">
			.destra {
				text-align:	right;
			}
		</style>
	</head>
	<body>
		<h1 class="destra">Questo &egrave; un titolo allineato a
		destra</h1>
		<p class="destra">Questo &egrave; un paragrafo con
		l'attribuzione della classe di stile per l'allineamento a
		destra. </p>
	</body>
</html>

Altro aspetto interessante dell'uso delle classi è la possibilità di attribuire più classi contemporaneamente allo stesso elemento.
Ecco un esempio:

<html>
	<head>
		<title>Pagina con Stile</title>
		<style type="text/css">
			.destra {
				text-align:	right;
			}
			.arial {
				font-style:	Arial;
				font-size:	14px
			}
			.roman {
				font-style:	Roman;
				font-size:	14px
			}
		</style>
	</head>
	<body>
		<h1 class="destra arial">Questo &egrave; un titolo
		allineato a	destra e font ARIAL</h1>
		<p class="destra roman">Questo &egrave; un paragrafo con
		l'attribuzione della classe di stile per l'allineamento a
		destra e font ROMAN. </p>
	</body>
</html>

Pseudo Classi

Le pseudo-classi si usano per dare particolari effetti ad alcuni tags.
Vediamo un esempio.

<html>
	<head>
		<title>Pagina con Stile</title>
		<style type="text/css">
			a:link {
				color: #FF0000
			}     /* link */
			a:visited {
				color: #00FF00
			}  /* link visitato */
			a:hover {
				color: #FF00FF
			}   /* link al passaggio del mouse */
			a:active {
				color: #0000FF
			}   /* link selezionato */
		</style>
	</head>
	<body>
		<a href="http://www.w3schools.com">Link a w3schools.com</a>
	</body>
</html>

Pseudo Elementi

Nella tabella che segue sono elencati gli pseudo elementi.
 

Proprietà Descrizione IE F NN W3C
:first-letter Aggiunge uno stile speciale alla proma lettera dell'elemento of a text 5 1 8 1
:first-line Aggiunge uno stile speciale alla prima riga dell'elemento of a text 5 1 8 1
:before Inserisce del contenuto prima dell'elemento   1.5 8 2
:after Inserisge del contenuto dopo l'elemento   1.5 8 2

Freelance Jobs

Credits

x

Layout e Contenuti © Stefano Pozzati (POZZware.com)
Realizzazione Tecnica e Grafica © Stefano Pozzati (POZZware.com)
Hosting - Aruba (www.aruba.it)
Immagini del titolo © Shunya Yamashita (http://shunyama.web.fc2.com/)
 

Realizzato con:  WebSitter By Pozzware.com Browser compatibili:  Explorer Internet Explorer 6
Firefox Mozilla FireFox 2
Chrome Google Chrome
 
Strumenti:  FCK Editor
JQuery
Valid XHTML 1.0 Transitional CSS Valido!