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 è un paragrafo generico senza stile.</p>
<p class="destra">Questo è 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 è un titolo allineato a
destra</h1>
<p class="destra">Questo è 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 è un titolo
allineato a destra e font ARIAL</h1>
<p class="destra roman">Questo è 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 |