Lezione 8 e 9 – css, div, box model, padding, margin, border

Intro CSS e tag DIV
INFORMAZIONE E PRESENTAZIONE
• Lo scopo di una pagina web è, essenzialmente la trasmissione di una
informazione.
• L’informazione è costituita da due aspetti essenziali:
• I contenuti
• La formattazione dei contenuti
• I contenuti sono forniti attraverso linguaggi di marcatura che
caratterizzano i vari oggetti del documento
• La formattazione è determinata dall’interpretazione del programma
utente.
BROWSER E STILI: old school
• Ogni browser ha una rappresentazione predefinita degli oggetti della
pagina: generalmente i collegamenti sono blu, i titoli sono rappresentati
con caratteri grandi. In pratica, ogni browser ha uno stile predefinito su cui
l’utente (ma non l’autore) può intervenire in minima parte.
• Per permettere agli autori di avere un maggiore controllo sulla
rappresentazione dei contenuti, sono nati marcatori (come ad esempio
font) il cui scopo non era più caratterizzare gli oggetti del documento, ma
fornire una formattazione degli stessi.
•
Come conseguenza i contenuti risultavano indissolubilmente legati alla
loro rappresentazione grafica.
I FOGLI DI STILE A CASCATA (CSS): new school
• Compito dei CSS (Cascading Style Sheets: Fogli di Stile a Cascata) è
ripristinare la separazione dei contenuti e dalla formattazione.
• I CSS non definiscono direttamente l’aspetto del documento ma
stabiliscono il modo in cui il browser rappresenta i vari oggetti
definiti dal linguaggio di marcatura utilizzato.
• I css sono un set di istruzioni che
definiscono la presentazione di un
docmento
Cosa sono i CSS
• In altre parole definiscono come apparirà
una pagina HTML
• CSS esterni possono essere applicati a
molteplici pagine web che ne fanno
riferimento
• Permettono di cambiare l’aspetto e il layout
di un intero sito , editando un solo file!
Perché utilizzare i CSS?
• Permettono di migliorare l’accessibilità
• Possono definire come verrà processata la
pagina su differenti media (screen, print)
La definizione più conosciuta dei css e diffusa dei fogli di stile è
“sono la separazione tra contenuto (HTML) e presentazione
(CSS)”.
Una buona conoscenza dell’ html e la comprensione approfondita dei selettori css e il
loro uso proprio permettono di strutturare bene pagine web, sia dal punto di vista del
contenuto che della presentazione.
• Page layout e object Positioning
• Font e proprietà di testo
A cosa sono utili?
• Color and background properties
• Proprietà di blocchi logici : Margini,
borders, dimensioni
Benefits in Using CSS for Layout
• Reduces file sizes, page load times & bandwidth
• Easier to keep layout and look consistent across site
• Easier & faster to redesign
• Reduces code, increases prominence of content — good
for search engines
• Aids in accessibility
CSS Zen Garden
Stessa struttura HTML (stessi
contenuti)
Cambiano solo i css
….
• Page layout e object Positioning
• Font e proprietà di testo
A cosa sono utili?
• Color and background properties
• Proprietà di blocchi logici : Margini,
borders, dimensioni
UN DIVERSO APPROCCIO
• Nella realizzazione di pagine web tramite XHTML+CSS è richiesto un
diverso approccio rispetto a quanto si farebbe impaginando per mezzo di
tabelle con i programmi del tipo WYSIWYG
• Anziché lanciare l’editor WYSIWYG e cominciare a disegnare la struttura
della pagina, è necessario organizzare i contenuti in modo logico,
raggrupparli e, se necessario, identificarli in modo univoco o associarli a
classi specifiche
• Per rendere i contenuti meglio fruibili con qualsiasi dispositivo, è bene
organizzarli in modo che siano letti nell’ordine ideale
COLLEGARE I CSS A UN DOCUMENTO
XHTML
• Esistono diversi modi di collegare un foglio di stile ad un
documento XHTML
• Fogli di stile incorporati
• Fogli di stile esterni
• Fogli di stile importati
• Attributo style:
<p style="font-weight:bold">
• La priorità della regola è massima, indipendentemente dal peso dei selettori
• Questo metodo è sconsigliabile
PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML
FOGLI DI STILE INCORPORATI
• Si specificano gli stili direttamente nel codice XHTML attraverso il tag
<style> da inserire nel tag <head>:
<head>
<style type="text/css">
/*<![CDATA[*/
…
/*]]>*/
</style>
</head>
• Le stringhe /*<![CDATA[*/ e /*]]>*/ servono a rispettare le regole
dell’XML
• Questo metodo è adatto per pagine singole in cui è necessario specificare
stili particolari
PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML
FOGLI DI STILE IMPORTATI
• Attraverso la regola @import è possibile includere un foglio di stile
esterno all’interno di un insieme di regole
• Se presenti, le regole @import devono essere inserite prima delle
normali regole per gli stili:
@import "file1.css";
@import "file2.css";
body {…}
• Il percorso si riferisce alla medesima cartella in cui è contenuto il foglio di
stile contenente le regole @import
• Le regole @import possono comparire anche negli stili incorporati
PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML
FOGLI DI STILE ESTERNI
• I fogli di stile esterni sono richiamati attraverso il tag <link> da
inserire nel tag <head>:
<head>
<link rel="stylesheet"
href="file.css" type="text/css" />
</head>
• Attraverso il tag <link> è possibile associare diversi fogli di
stile contemporaneamente
STRUTTURA DI UN FOGLIO DI STILE
• Un foglio di stile è un documento che raccoglie un insieme
di regole di rappresentazione dei contenuti della pagina
a cui il foglio è associato
• Di seguito è rappresentata la struttura di una regola:
REGOLA
SELETTORE
PROPRIETÀ
h1 {
VALORE
font-size : 2em;
font-weight : bold;
}
DICHIARAZIONE
La sintassi di base dei CSS
selettore{
proprietà: valore;
proprietà: valore;
proprietà: valore;
}
Diciamo che vogliamo ad esempio un colore
rosso come sfondo della pagina web:
con i CSS si ottiene così:
body {
background-color: #FF0000;
}
• Attraverso i selettori vengono associate le
regole agli elementi del documento HTML (o
XML).
• Selettore fa match con gli elementi E
BODY { font-family: Arial; fontsize: 12 pt; }
H1 { font-size: 18 pt; }
P { font-size: 10 pt; }
PRIMA PARTE: STRUTTURA DI UN FOGLIO DI STILE
LE REGOLE
•
Una regola è costituita da:
1. uno o più selettori (separati da una virgola ‘,’) a cui associare un
insieme di dichiarazioni racchiuse fra parentesi graffe ‘{ }’
2. le varie di dichiarazioni sono separate da un punto e virgola ‘;’
3. ogni dichiarazione è costituita da due elementi separati dai due
punti ‘:’:
1.
2.
la proprietà
il valore (o l’insieme di valori) assegnato alla proprietà
PRIMA PARTE: I SELETTORI
I SELETTORI
•
•
I selettori indicano al browser quali elementi
della pagina si dovranno applicare le
dichiarazioni della regola
I selettori possono essere essenzialmente di tre
tipi:
1: TAG XHTML
3: IDENTIFICATORI
h1, h2, p { ... }
2: CLASSI
#identificatore { ... }
.classe { ... }
PRIMA PARTE: I SELETTORI
TIPI DI SELETTORI
• I selettori più generici sono i selettori di
tipo i quali specificano che la regola deve
essere applicata a tutti gli elementi del tipo
indicato. Ad esempio, sono selettori di tipo:
p {…}
a {…}
div {…}
strong {…}
* {…}
LE CLASSI
• Le ‘classi’ servono a caratterizzare un insieme di oggetti omogenei.
Per associare un oggetto ad una classe è sufficiente specificarne il
nome attraverso l’attributo class:
<div class="notizia"><h1>Titolo</h1><p>Testo
…</p></div>
<div class="notizia
altraClasse"><h1>Titolo</h1><p>Testo …</p></div>
• Il selettore si indica riportando il valore assegnato all’attributo
class, preceduto da un punto ‘.’
.notizia {…}
• È possibile combinare fra loro più classi:
<div class="classe1 classe2">…</div>
.classe1.classe2 {…}
• Il selettore può anche specificare a quale elemento la classe deve
essere associata:
p.classe {…}
h1.classe {…}
IDENTIFICATORI
• Gli ‘identificatori’ selezionano invece un oggetto unico all’interno della
pagina. L’associazione avviene tramite l’attributo id:
<div id="testata"><h1>Titolo</h1><p>Testo ...</p></div>
ATTENZIONE: è errato associare lo stesso identificatore a due o più
oggetti nella stessa pagina.
• Il selettore si indica riportando il valore assegnato all’attributo id,
preceduto dal simbolo cancelletto ‘#’
#testata {…}
• Il selettore può anche specificare a quale elemento l’identificatore deve
essere associato:
p#testata {…}
h1#testata {…}
• Classi e identificatori possono essere usati contemporaneamente:
<div id="idval" class="classval">
#idval.classval {…}
Quindi…class VS id
CLASSI
• In html si attribuiscono con l’attributo
class=“nome_classe”
• In css si dichiarano con il selettore .nome_classe
• Una classe puo essere applicata a piu oggetti
della pagina.
• Ad esempio:
• .red { color:red;}
• Se applicata agli h1, h2, h3, p fara diventare i testi
di questi tag rossi.
ID
• In html si attribuiscono con l’attributo
id=“nome_id”
• In css si dichiarano con il selettore #nome_id
• Un ID puo essere richiamato da uno e un solo
elemento nella pagina HTML
• Ad esempio:
• #header { color:red;}
• Solo il testo del div “header” in html avra il testo
rosso
Il tag <div>
• il tag Div rappresenta un contenitore. Tutto quello che è incluso fra il
tag iniziale e quello di chiusura reagisce secondo gli stili o comandi
che gli sono stati associati.
• il tag DIV è utilizzato per racchiudere blocchi di tag, che possono
essere elenchi, il testo stesso, o perfino parti strutturali intere della
pagina come i menù, l'intestazione ed il contenuto.
• Proprio per questo motivo i tag DIV sono utilizzati con i CSS per la
costruzione del box model, ossia un sito strutturato utilizzando
soltanto i tag DIV ed escludendo le tabelle.
Quindi…
• Quindi il nostro ipotetico minisito sarà in genere composto da:
• 1 DIV per la pagina, che conterrà:
• 1 DIV per il menu
• 1 DIV per l’header
• 1 o piu DIV per i contenuti
• 1 DIV per il footer
Ognuno di questi blocchi, avra determinate caratteristiche descritte da
appositi selettori CSS. Ad esempio , potremo stabilire che il menu sia
scritto con Font 12 px e colore blu, mentre il testo del div per i contenuti
sia scritto in 11 px colore nero.
Tuttavia abbiamo 4 div differenti, ed un solo tag con rispettivo selettore
div. Come fare???
Selettore basato su ID
• Il selettore ID o identificatore, svolge praticamente la funzione di
etichetta di un contenitore;
• Assegnando un ID ad un DIV, basterà richiamare il nome del selettore
(ID) e con lui saranno richiamate, all'interno del contenitore, tutte le
proprietà/selettori associati a quell’ID nel css
#menu {
color: black;
padding:10px;
font-weight: bold;
width:900px;
Height:150px;
backgroundimage:url”image.jpg”;
}
<body>
<div id=“menu”>
contenuto del menu…
</div>
</body>
Vediamo un esempio pratico con i DIV
Box model CSS
Diamo delle dimensioni ai DIV
PRIMA PARTE: IL BOX MODEL
UNITa di misura in CSS
PX: dimensione fissa
EM: unita di misura relative
%:: unita di misura relativa
em
• L’em è un’unità di misura relativa molto comoda da usare. Il suo
nome proviene dalla tipografia, in cui, viene utilizzata per identificare
la dimensione della lettera maiuscola M di un carattere.
• Tale unità di misura calcola la dimensione del testo in base ad una
misura fissa (e quindi non relativa) di base. 1em, quindi, corrisponde
alla dimensione di base assegnata al documento o all’elemento.
• E’ molto utilizzata nei layout responsive.
body {
font-size: 10px;
}
h1 { font-size: 1.4em; }
h2 { font-size: 1.2em; }
p { font-size: 1em; }
h1 = 10 x 1.4 = 14px
h2 = 10 x 1.2 = 12px
p = 10 x 1 = 10
%
• Anche questa unità è relativa e, proprio come succede per gli em,
calcola la dimensione finale del testo in base alla dimensione base
assegnata.
body {
font-size: 10px;
}
h1 { font-size: 1.4em; }
h2 { font-size: 140%; }
h3 { font-size: 1.2em; }
h4 { font-size: 120%; }
PRIMA PARTE: IL BOX MODEL
UNITa di misura in CSS
PRIMA PARTE: IL BOX MODEL
IL BOX MODEL
Ogni box è caratterizzato da
1. Larghezza dello spazio per i
contenuti (width)
2. Altezza dello spazio per i contenuti
(height)
3. Spazio fra contenuti e bordi
(padding)
4. Bordo (border)
5. Spazio fra il bordo e gli altri oggetti
della pagina (margin)
PRIMA PARTE: IL BOX MODEL
LARGHEZZA E ALTEZZA
• Se non si specifica la larghezza (width) dei contenuti del box, questo si
allargherà (margini compresi) per riempire tutto lo spazio a sua
disposizione
• Se non si specifica l’ altezza (height) dei contenuti del box, questo si
espanderà in verticale il minimo possibile per ospitare gli oggetti al suo
interno
• La larghezza e la altezza del box possono essere espresse:
• In percentuali rispetto alle dimensioni del box contenitore
• Tramite le unità di miusra em, px, (ex, pt, mm)
• Tramite il valore auto
• NOI USEREMO I PX
PRIMA PARTE: IL BOX MODEL
LARGHEZZA E ALTEZZA
• Quando si specifica la larghezza di un box, questa diviene
indipendente dalla dimensione effettiva dei suoi contenuti
• È possibile anche indicare una larghezza minima e una
larghezza massima tramite le proprietà min-width e maxwidth, ma Internet Explorer (Win/Mac) non supporta tali
proprietà
PRIMA PARTE: IL BOX MODEL
LARGHEZZA E ALTEZZA
• Quando si specifica l’altezza di un box ( ad es. height: 300px;) questo non
si espanderà per ospitare eventuali contenuti che richiedono maggiore
spazio (ad esempio 450 px)
• Per ottenere un simile comportamento esiste infatti la proprietà minheight,. Esiste anche la proprietà max-height
• Quando espressa in ‘%’, l’altezza di un box si riferisce all’altezza
esplicitamente del box genitore, quando definita tramite la proprietà
height
PRIMA PARTE: IL BOX MODEL
I MARGINI
• I margini possono essere specificati:
• Individualmente
• A coppie (top/bottom, right/left)
• Globalmente
• Le unità di misura sono le stesse utilizzate per width e height ed hanno
il medesimo comportamento, tranne auto
• Per specificare i singoli margini è possibile utilizzare le proprietà margintop, margin-right, margin-bottom, margin-left
Esempio:
div { margin-left:1em; margin-top:2em }
I MARGINI
• I quattro margini possono essere specificati anche attraverso la sintassi abbreviata:
#header { margin : 10px 5px 10px 5px } corrisponde a
margin-top:10px;
margin-right:5px;
margin-bottom:10px;
margin-left:5px;
I margini risultano specificati in senso orario: top, right, bottom, left.
• Attraverso la sintassi abbreviata, possiamo specificare anche le coppie di margin top/bottom
e right/left:
#header { margin : 10px 5px }
• Infine è possibile specificare un solo valore per tutti e quattro i lati contemporaneamente:
#header{ margin: 10px }
PRIMA PARTE: IL BOX MODEL
I MARGINI
• Quando impostati sul valore auto, i margini laterali determinano la
centratura orizzontale del box a cui i margini sono applicati
• Quando impostati sul valore auto, i margini superiore e inferiore
assumono il valore che il browser assegna loro normalmente
• Nelle specifiche CSS non è prevista la centratura verticale dei
blocchi
• Useremo questa tecnica per centrare il nostro div page rispetto allo
schermo
PRIMA PARTE: IL BOX MODEL
I MARGINI
Quando due o più margini sono adiacenti, ovverosia sono non separati da bordi o
padding, questi collassano in un unico margine:
<div id="box-1">…</div>
<div id="box-2">…</div>
#box-1 { margin: 10px; }
#box-2 { margin: 20px; }
PRIMA PARTE: IL BOX MODEL
I MARGINI
I margini non collassano quando sono separati da un bordo o dal padding:
<p>Lorem ipsum dolor …</p>
<div><p>Quisque imperdiet …</p></div>
div{border:solid;margin:0;}
p{margin:1em 0;background:#CCC;color:#000;}
div p{margin:1em;}
I margini di blocchi flottanti o dei blocchi posizionati in
modo assoluto, non collassano in nessun caso.
IL PADDING
• Il padding è una sorta di imbottitura fra i contenuti e i bordi di un box
• Per specificare il padding si utilizza la stessa sintassi usata per i margini
p {
padding-left:0.5em;
padding-right:0.5em
}
#header{ padding: 10px 20px 10px 20px }
#header { padding: 10px;}
• A differenza di margin, padding non ammette il valore auto e non ammette
valori negativi
• Il padding di box adiacenti non collassa in nessun caso
PRIMA PARTE: IL BOX MODEL
I BORDI
•
•
•
•
I bordi sono caratterizzati da tre aspetti:
1. stile
2. spessore
3. colore
Questi aspetti possono essere definiti separatamente con:
•
border-style (border-top-style, …)
•
border-width (border-top-width, …)
•
border-color (border-top-color, …)
Per definire contemporaneamente i tre aspetti si usa la seguente sintassi:
border-top: <spessore> <stile> <colore>
border: <spessore> <stile> <colore>
Ex: border-top: 1px solid red;
PRIMA PARTE: IL BOX MODEL
I BORDI
Gli stili a disposizione sono :
• solid (linea continua singola);
• dotted (punteggiato);
• dashed (tratteggiato);
• double (doppia linea continua – è necessario uno spessore di almeno
3px per ottenere l’effetto desiderato);
• groove (scavato);
• ridge (effetto opposto a groove, il bordo appare sbalzato);
• inset (incastonato, l’effetto grafico equivale a un pulsante premuto);
• outset (effetto opposto a inset, l’effetto grafico equivale a un pulsante
non ancora premuto).
• none (nessun bordo, valore predefinito);
PRIMA PARTE: IL BOX MODEL
I BORDI
• Lo stile predefinito è none, dunque se non si specifica lo stile
del bordo questo non sarà comunque mostrato
• Lo spessore del bordo può essere espresso attraverso le varie
unità di lunghezza (ad es i px) o attraverso i tre valori thin,
medium, thick, le unità percentuali non sono ammesse
• Il colore, se non specificato, corrisponde a quello del testo
usato nel box
PRIMA PARTE: COLORI E SFONDI
SFONDI
• Lo sfondo può essere
• Trasparente
• Caratterizzato da una tinta piatta
• Riempito del tutto o in parte da una immagine
• Lo sfondo può essere gestito attraverso le seguenti proprietà:
• background-color -> assegna un colore di sfondo
• background-image -> assegna una immagine di sfondo
• background-repeat -> ripete lo sfondo su asse x e y
• background-attachment -> determina se lo sfondo scorre
fisso
o e
• background-size -> appiccica lo sfondo in maniera responsive
• background-position -> permette di specificare la posizione
dello sfondo rispetto al contenitore
PRIMA PARTE: COLORI E SFONDI
COLORE DELLO SFONDO
• La proprietà background-color può assumere i seguenti valori:
• transparent
• <colore>
• Il valore predefinito è transparent
PRIMA PARTE: COLORI E SFONDI
BACKGROUND-IMAGE
• Per inserire un’immagine di sfondo è sufficiente specificarne l’url
tramite la proprietà background-image:
background-image:url(/im/sfondo.png);
• L’immagine sarà posizionata in alto a destra e sarà ripetuta
verticalmente e orizzontalmente
• L’immagine scorrerà assieme al testo
• Per specificare che non dovrà essere usata nessuna immagine si
utilizza il valore none (che è il valore predefinito):
background-image:none; (valore di default)
PRIMA PARTE: COLORI E SFONDI
BACKGROUND-REPEAT
• Tramite background-repeat è possibile stabilire se e come
l’immagine sarà ripetuta
• background-repeat:repeat indica che l’immagine sarà
ripetuta orizzontalmente e verticalmente (valore predefinito)
• background-repeat:repeat-x indica che l’immagine sarà
ripetuta solo orizzontalmente
• background-repeat:repeat-y indica che l’immagine sarà
ripetuta solo verticalmente
• background-repeat:no-repeat indica che comparirà una
sola occorrenza dell’immagine
PRIMA PARTE: COLORI E SFONDI
BACKGROUND-ATTACHEMENT
• Tramite background-attachment è possibile stabilire se
l’immagine di sfondo sarà fissa ovvero scorrerà con la pagina
• background-attachment:scroll indica che l’immagine
scorrerà assieme alla pagina (valore predefinito)
• background-attachment:fixed indica che l’immagine
sarà fissata nella sua posizione iniziale indipendentemente
dallo scorrimento della pagina (il funzionamento è garantito solo
con <body>)
PRIMA PARTE: COLORI E SFONDI
BACKGROUND-POSITION
• Tramite background-position è possibile stabilire la posizione iniziale
dell’immagine.
• I valori ammessi sono:
• Unità di lunghezza
• Unità percentuali
• Parole chiave:
• left | center | right
per il posizionamento orizzontale
• top | center | bottom
per il posizionamento verticale
• I valori vanno espressi in coppia e indicano rispettivamente il
posizionamento orizzontale e verticale
PRIMA PARTE: COLORI E SFONDI
BACKGROUND-POSITION
PRIMA PARTE: COLORI E SFONDI
BACKGROUND
• La proprietà background permette di definire con
un’unica dichiarazione tutte le varie proprietà
contemporaneamente
• Se non sono specificati alcuni valori, allora vengono
implicitamente assegnati quelli predefiniti:
body {
background: #fff url(img.jpg) 100% 0
no-repeat fixed;
}
PRIMA PARTE: IL BOX MODEL
OVERFLOW
• Come detto, è possibile specificare la larghezza e l’altezza di un box
• Quando i contenuti eccedono le dimensioni del blocco è possibile definire
il comportamento del blocco stesso attraverso la proprietà overflow.
• La proprietà overflow può assumere i seguenti valori:
• visible (valore predefinito)
• hidden
• scroll
• auto
PRIMA PARTE: IL BOX MODEL
OVERFLOW: VISIBLE
• Il valore visible indica che i contenuti vanno
mostrati normalmente.
• I contenuti dovrebbero essere mostrati senza
alterare la dimensione del contenitore
• Internet Explorer per Windows espande il
contenitore fino alla dimensione richiesta dai
contenuti
div {
width:200px;height:200px;
overflow:visible;
}
PRIMA PARTE: IL BOX MODEL
OVERFLOW: HIDDEN
• Il valore hidden indica che i contenuti
vanno tagliati e non devono apparire barre
di scorrimento
div {
width:200px;height:200px;
overflow:hidden;
}
PRIMA PARTE: IL BOX MODEL
OVERFLOW: SCROLL E AUTO
• Il valore scroll indica che i contenuti vanno tagliati, se necessario. Le barre di
scorrimento devono comunque apparire.
• Il valore auto indica che i contenuti vanno tagliati, se necessario. Le barre di scorrimento
devono apparire dove necessario.
• La dimensione del contenitore non è alterata
Css Box model element
• Margini: la regione che separa una scatola dall'altra, necessariamente
trasparente.
• margin-top, margin-bottom, margin-left, margin-right: dimensioni del
margine della scatola.
• Border: la regione ove visualizzare un bordo per la scatola.
• border-top, border-bottom, border-left, border-right, border-width, bordercolor: dimensioni ed aspetto del bordo.
• border-style: può assumere come valori none, dotted, dashed, solid,
double, groove, ridge, inset, outset.
• Padding: la regione di respiro tra il bordo della scatola ed il contenuto.
Ha il colore dello sfondo.
• padding-top, padding-bottom, padding-left, padding-right: dimensioni del
padding della scatola.
• Content: la regione dove sta il contenuto dell'elemento.
• background-color, background-image, background-repeat, backgroundattachment, background-position: colore, immagine e meccanismo di
ripetizione dell'immagine di sfondo della scatola.
A seguire: Il testo
24/35
Forme abbreviate
• In molti casi è possibile riassumere in un'unica proprietà i valori di molte
proprietà logicamente connesse.
• Si usa una sequenza separata da spazi di valori, secondo un ordine
prestabilito. Se si mette un valore solo esso viene assunto da tutte le
proprietà individuali. Ad esempio:
•
•
•
•
margin per margin-top, margin-left, margin-bottom, margin-right
border per border-top, border-left, border-bottom, border-right
padding per padding-top, padding-left, padding-bottom, padding-right
font per font-style, font-variant, font-weight, font-size, line-height, font-family
P { font: bold italic large Palatino, serif }
BODY { margin: 10 0 0 10; }
BODY {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
BODY { padding: 5px; }
BODY {
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
Tutti i selettori e proprietà
http://www.w3schools.com/css/css_examples.asp