Allineamento e margini del testo

In questa lezione vedremo i principali attributi per l'allineamento del testo...

)> margin-left, margin-right, margin-top, margin-bottom:
questi 4 attributi permettono di stabilire la distanza che passera' tra il box contenente i CSS e gli elementi vicini, dai quattro margini:

<STYLE>
BODY { margin-top: 8px; margin-right; 8px; margin-bottom: 8px; margin-left: 8px }
</STYLE>

)> margin:
i 4 valori precedentemente visti possono venire definiti solamente con l'attributo margin. Il browser, in presenza di questo attributo, assume in ordine: margine in alto (margin-top), il destro (margin-right), l'inferiore (margin-bottom) e il sinistro (margin-left). Se per caso, vengono forniti 2 0 3 attributi dei 4, il browser assegna automaticamente a loro un valore!

Esempio

<STYLE>
BODY { margin: 8px 8px 8px 8px }
</STYLE>

Come potete notare, sono presenti tutti e 4 gli elementi ed tutti e 4 hanno una distanza uguale.

<STYLE>
BODY { margin: 8px 8px }
</STYLE>

Come potete notare in questo secondo esempio, sono stati impostati solamente due valori. I valori che mancano vengono sostituiti con il valore frontale (il basso con l'alto, ed il destro con il sinistro).

)> padding-top, padding-bottom, padding-right, padding-left:
questi attributi indicano la distanza tra i lati del box e gli elementi al suo interno. E' possibile inoltre usare le misure standard (pollici, centimentri, punti, pixel ecc.) o valori percentuali:

<STYLE>
BODY { padding-top: 8pt; padding-right; 8px; padding-bottom: 90%; padding-left: 1in }
</STYLE>

)> padding:
questo attributo, permette di impostare i 4 valori precedentemente con un solo attributo, padding appunto! Il browser in presenza di questo attributo assume in ordine il valore di riempimento: alto (padding-top), destro (padding-right), inferiore (padding-bottom) e sinistro (padding-left). Se i valori forniti sono 2 o 3, quelli mancanti vengono automaticamente assengati in base al valore del lato frontale:

<STYLE>
BODY { padding: 8pt 8px 90% 1in }
</STYLE>

)> border-top, border-bottom, border-right, border-left:
questi attributi servono a definire lo stile e il colore di ogni elemento e vengono impostati con alcune parole chiave: none, dotted, dashed, solid, double, groove, ridge, inset e outset:

<STYLE>
BODY { border-top: dotten red; border-left: dashed green; border-right: solid yellow; border-bottom: groove blue }
</STYLE>

)> border-top-width, border-bottom-width, border-right-width, border-left-width:
questo attributi servono a generare un effetto simile ai bordi delle table HTML. Possono essere configurati con misure espresse in percentuali (%)o di riferimento (em), oltre a parole chiave quali thin, medium e thick:

<STYLE>
BODY { border-top-width: 3px; border-left-width: 2pt; border-right-width: thick; border-bottom-width: 1em }
</STYLE>

)> border-width:
anche questo attributo come margin e padding, permette di definire i 4 valori precedenti con un solo attributo:

<STYLE>
BODY { border-width: 2pt 3px 1em 1in }
</STYLE>

)> border-color:
questo attributo serve a definire i colori dei quattro bordi del CSS nella loro globalita', evitando quindi la possibilita' di stabilire colori diversi per ognuno di essi:

<STYLE>
BODY { border-color: red }
</STYLE>

)> border-style:
questo attributo serve a definire lo stile dei quattro bordi del CSS, evitando di stabilire diversi diversi stili. I valori vengono specificati da alcune parole chiave: none, dotted, dashed, solid, double, groove, ridge, inset, outset:

<STYLE>
BODY { border-style: groove }
</STYLE>

)> border:
questo attributo permette di configurare in un "colpo solo" i bordi, gli stili, il colore e la larghezza:

<STYLE>
BODY { border: 12px groove green }
</STYLE>

)> width:
questo attributo permette di impostare la larghezza orizzontale del box. Se viene usato con il valore "auto" si permette al box di adattarsi al contenuto degli elementi:

<STYLE>
BODY { width: 300px }
</STYLE>

)> float:
questo attributo permette di impostare l'allineamento del testo. I valori a disposizione sono 3 e sono left (sinistra), right (destra) e none (nessun allineamento):

<STYLE>
BODY { float: none }
</STYLE>

Lezione successiva ->