JOOMLA!
http://www.html.it/pag/14235/posizionamento-degli-elementi/
La parte dei CSS relativa al posizionamento degli elementi è un argomento complesso, ma estremamente importante per le potenzialità che offre. Suddivideremo la trattazione in tre lezioni. Nella prima esamineremo la proprietà position e le diverse modalità di posizionamento. Nella seconda vedremo con quali proprietà è possibile posizionare con precisione gli elementi. Nella terza valuteremo alcune proprietà utili alla gestione di importanti aspetti visuali degli elementi posizionati.
La proprietà position
position è la proprietà fondamentale per la gestione della posizione degli elementi: determina la modalità di presentazione di un elemento sulla pagina. Si applica a tutti gli elementi e non è ereditata.
Sintassi ed esempi
selettore {position: valore;} |
I valori con cui è possibile definire la modalità di posizionamento sono quattro:
static;relative;absolute;fixed.
Ciascuno di questi valori merita un spiegazione approfondita da cui emergeranno i concetti di base che governano le regole sul posizionamento.
position: static
È il valore di default, quello predefinito per tutti gli elementi non posizionati secondo un altro metodo. Rappresenta la posizione normale che ciascuno di essi occupa nel flusso del documento.
position: relative
L’elemento viene posizionato relativamente al suo box contenitore. In questo caso il box contenitore è rappresentato dal posto che l’elemento avrebbe occupato nel normale flusso del documento. La posizione viene impostata con le proprietà top, left, bottom o right. Nel posizionamento relativo esse non indicano un punto preciso, ma l’ammontare dello spostamento in senso orizzontale e verticale rispetto al box contenitore.
In pratica, con il posizionamento relativo (position: relative;), si va a modificare la posizione naturale di un elemento traslandola attraverso l’uso di top, left, bottom o right. Un elemento posizionato relativamente non è rimosso dal flusso della pagina, ma solo spostato. In sostanza, un elemento posizionato relativamente è come se lasciasse una sorta di segnaposto nella posizione in cui naturalmente dovrebbe essere.
Ora è importante fissare un concetto essenziale, ovvero come il posizionamento relativo venga effettuato tramite le proprietà top, left, bottom o right. Si potrebbe pensare che si riferiscano ad un sistema di coordinate, ma in realtà si tratta di vere e proprie traslazioni. La seguente immagine sarà utile a spiegare le cose:
Figura 1 – Schema di funzionamento del posizionamento relativo
La metafora più semplice per comprendere il funzionamento è immaginare che sui quattro lati di un elemento posizionato relativamente ci siano quattro maniglie che si possono tirare o spingere: un valore positivo equivale a spingere, mentre un valore negativo equivale a tirare l’elemento.
Per esempio, se viene specificato left: 30px significa che l’elemento viene spinto da sinistra di 30 pixel. Dichiarando invece top: -20px è come se tirassimo l’elemento dal suo lato superiore, con il conseguente effetto di traslarlo verso l’alto di 20 pixel.
Con il posizionamento relativo andrebbero specificati al massimo uno o due valori tra top, left, bottom e right.
position: absolute
L’elemento, o meglio, il box dell’elemento, viene rimosso dal flusso del documento ed è posizionato in base ai valori forniti con le proprietà top, left, bottom o right.
Il posizionamento assoluto (position: absolute;) avviene sempre rispetto al box contenitore dell’elemento. Questo è rappresentato dal primo elemento antenato (ancestor) che abbia un posizionamento diverso da static.
Se tale elemento non esiste il posizionamento assoluto avviene in base all’elemento radice html, che in condizioni standard coincide con l’area del browser che contiene il documento e che ha inizio dall’angolo superiore sinistro di tale area. Un elemento posizionato in modo assoluto scorre insieme al resto del documento.
Il modo pi semplice per posizionare assolutamente un elemento rispetto ad un altro, consiste nel dichiarare per quest’ultimo un posizionamento relativo senza coordinate e nel dichiarare position: absolute per il primo con le coordinate:
#box-1 {position: relative;}#box-2 { position: absolute; top: 0; left: 20px} |
Un elemento posizionato assolutamente è di default reso block-level, indipendentemente dalla sua natura iniziale. È come se, insieme a position: absolute dichiarassimo ogni volta implicitamente display: block. Il fatto che tutti gli elementi posizionati assolutamente sono promossi a elementi block-level significa in sostanza che è possibile attribuire loro dimensioni esplicite. Non solo è possibile, ma è consigliabile impostare quantomeno una larghezza.
Per quanto riguarda le proprietà top, left, bottom o right, si potrebbe pensare che questi valori siano da intendersi come delle coordinate. In realtà non è proprio così, ed è più facile pensare i valori che queste proprietà possono assumere come vere distanze. Un’immagine aiuterà a capire il concetto:
Figura 2 – Schema di funzionamento del posizionamento assoluto
Nell’immagine sopra, il riquadro rosa è il blocco contenitore dell’elemento posizionato assolutamente, in azzurro. Vengono evidenziate visivamente le quattro proprietà, che rappresentano ciascuna la distanza tra i due lati concordi dell’elemento posizionato assolutamente e il suo blocco contenitore. Per esempio, top rappresenta la distanza tra il lato superiore dell’elemento posizionato assolutamente e quello del suo blocco contenitore.
Per posizionare assolutamente un elemento, è possibile specificare da una a quattro tra le proprietà top, right, bottom e left. Tipicamente, però, se ne dichiarano due (o una sola): tre o quattro valori hanno l’effetto di dare conflitti o modificare le dimensioni dell’elemento posizionato assolutamente.
position: fixed
Usando questo valore, il box dell’elemento viene, come per absolute, sottratto al normale flusso del documento. La differenza sta nel fatto che per fixed il box contenitore è sempre la cosiddetta viewport. Con questo termine si intende la finestra principale del browser, ovvero l’area del contenuto. Altra differenza fondamentale: un box posizionato con fixed non scorre con il resto del documento. Rimane, appunto, fisso al suo posto.
Approfondimenti
20 Gestione delle dimensioni: altezza
|
Height definisce la distanza tra il bordo superiore e quello inferiore di un elemento. Non è ereditata selettore {height: valore;} Luso va sempre valutato con attenzione, Il comportamento dei vari browser è al riguardo notevolmente diverso molte volte si può ottenere lo stesso risultato visivo desiderato usando proprietà come padding e margin div {height: 250px;} p.blocco {height: 50%;} Usando il valore auto per overflow viene aggiunta una scrollbar per scorrere il contenuto. |
si applica a tutti gli elementi tranne
|
|
Overflow gestire il contenuto che superi i limiti imposti con height. Si applica a tutti gli elementi blocco e non è ereditata. selettore {overflow : valore;} div {overflow: auto;} #div4 { viene aggiunta una scrollbar per scorrere il contenuto |
|
|
min-height Imposta un'altezza minima per un elemento - Non è ereditata e non è supportata da Explorer Win selettore {min-height: valore;} div {min-height: 200px;} |
|
|
max-height La proprietà max-height serve a impostare l'altezza massima di un elemento selettore {max-height: valore;} div {max-height: 400px;} |
|
21 Gestione delle dimensioni: larghezza
|
width Larghezza del box= margine sinistro + bordo sinistro + padding sinistro + area del contenuto + padding destro + bordo destro + margine destro larghezza dell'area del contenuto: width selettore {width: valore;} La proprietà width non è ereditata. p {width: 90px;} div.box {width: 50%;} |
Explorer fino alla versione 5.5 interpreta male il concetto di width
|
|
min-width Imposta la larghezza minima di un elemento. Si applica a tutti gli elementi tranne che a quelli in linea non rimpiazzati e agli elementi di tabelle. Proprietà non supportata da Internet Explorer e non ereditata selettore { min-width: valore; } div { min-width: 400px; } |
|
|
max-width Imposta la larghezza massima di un elemento. Non è ereditata selettore { max-width: valore; } |
|
22 I Margini la distanza tra il bordo di un elemento e gli elementi adiacenti
|
margin-bottom Definisce la distanza tra il lato inferiore di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata. Ricordiamo che se per un elemento si imposta un margine inferiore ed esso si trova sopra ad un altro elemento che abbia impostato un margine superiore, la distanza tra i due sarà quella maggiore e non data dalla somma delle due proprietà (meccanismo del margin collapsing). p {margin-bottom: 10px;} |
|
|
margin-left Definisce la distanza tra il lato sinistro di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata h1 {margin-left: 10%;} |
|
|
margin-top Definisce la distanza tra il lato superiore di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata p.box {margin-top: 10%;} img {margin-top: 20px;} |
|
|
margin-right Definisce la distanza tra il lato destro di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata h1 {margin-right: 10%;} |
|
|
margin E' una proprietà a sintassi abbreviata. Con essa è possibile specificare i valori per tutti e quattro i lati di un elemento. Si applica a tutti gli elementi e non è ereditata div {margin: 10px 15px 10px 20px;} L'ordine di lettura va inteso in senso orario. Per cui: il primo valore si riferisce al lato superiore, il secondo a quello destro, il terzo al lato inferiore, il quarto a quello sinistro valore auto per i lati sinistro e destro è quello che consente di centrare in tal modo un elemento rispetto alla pagina o al box contenitore (no su explorer5) p {margin: 20px 10px;} |
Valori
|
23 Il Padding
|
padding-bottom Imposta l'ampiezza del padding sul lato inferiore di un elemento. Si applica a tutti gli elementi e non è ereditata p.box {padding-bottom: 10px;} |
|
|
padding-left Imposta l'ampiezza del padding sul lato sinistro di un elemento. Si applica a tutti gli elementi e non è ereditata p {padding-left: 10%;} |
|
|
padding-top Imposta l'ampiezza del padding sul lato superiore di un elemento. Si applica a tutti gli elementi e non è ereditata h1 {padding-top: 10px; |
|
|
padding-right Imposta l'ampiezza del padding sul lato destro di un elemento. Si applica a tutti gli elementi e non è ereditata p.box {padding-right: 10px;} |
|
|
Padding Proprietà a sintassi abbreviata. Serve a impostare i valori del padding per tutti e quattro i lati di un elemento p {padding: 10px 20px;} |
|
Eliminare il margine più o meno ampio tra il bordo della finestra e l'area del contenuto.In HTML
body {
margin: 0px;
padding: 0px; }
24 I Bordi
|
Definire lo stile di un singolo bordo |
||
|
Sintassi (con proprietà singole) selettore { Sintassi (abbreviata) selettore { border-<lato>: <valore width> <valore style> <valore color>; } sostituite a <lato> uno degli indicatori dei quattro lati: top, right, bottom o left. div { Molto più comodo scrivere così: div {border-left: 1px solid black;} |
|
|
|
|
|
|
|
|
|
Definire lo stile dei quattro bordi |
||
|
selettore { Per ciascuna di queste proprietà è possibile definire da uno a quattro valori, uno per lato top, right, bottom, left |
div { |
|
|
Usare la proprietà border selettore {border: <valore spessore> <valore stile> <valore colore>;} div {border: 2px solid black;} |
possiamo definire con una sola regola le impostazioni per i quattro bordi perché i quattro bordi abbiano tutti lo stesso colore, lo stesso stile e lo stesso spessore. |
|
18 Gestione del testo: proprietà di base
-
il font da usare
-
la sua dimensione
-
la sua consistenza
-
l'interlinea tra i paragrafi
-
l'allineamento del testo
-
la sua decorazione (sottolineature e simili)
|
font-family La proprietà font-family serve a impostare il tipo di carattere di una qualunque porzione di testo. Si applica a tutti gli elementi ed è ereditata. consente all'autore di impostare nei CSS non un font singolo e unico, ma un elenco di caratteri alternativi p {font-family: arial, Verdana, sans-serif;} inserire alla fine l'indicazione di una famiglia generica. Esse sono cinque: (tra parentesi riportiamo i caratteri predefiniti su ciascuna sui sistemi Windows) |
I nomi dei font della lista vanno separati dalla virgola. I caratteri con nomi composti da più parole vanno inseriti tra virgolette selettore {font-family: <font 1>, <font2>, ....,<famiglia generica>;} div {font-family: Georgia, "Times New Roman", serif;} |
|
font-size definisce le dimensioni. Applicabile a tutti gli elementi ed ereditata selettore { font-size: <valore>; } Valori dimensioni in senso assoluto o relativo . Dimensione relativa significa che essa viene calcolata in base alla dimensione del testo dell'elemento parente p {font-size: 12px;} |
Sono valori assoluti:
Sono valori relativi:
|
|
font-weight Serve a definire la consistenza o "peso" visivo del testo. Si applica a tutti gli elementi ed è ereditata. - è ereditata selettore {font-weight: <valore>;} Valori: p {font-weight: 900;} |
|
|
font-style Imposta le caratteristiche del testo in base ad uno di questi tre valori: selettore {font-style: <valore>;} p {font-style: italic;} |
La proprietà si applica a tutti gli elementi ed è ereditata |
|
Line-height sistema di interlinea - serve a definire l'altezza di una riga di testo all'interno di un elemento blocco - è ereditata selettore {line-height: <valore>;} non usare mai la percentuale p {line-height: 1.5;} |
|
|
font proprietà a sintassi abbreviata che serve a impostare con una sola dichiarazione tutte le principali caratteristiche del testo selettore {font: <valori>;} singole proprietà non vanno separati da virgole, i nomi dei font costituiti da più parole vanno racchiusi tra virgolette la dichiarazione dovrebbe sempre finire con la coppia font-size > font-family proprietà line-height si imposta invece così, facendo seguire il suo valore a quello di font-size e separando i due con una slash font-size/line-height p {font: bold 12px/1.5 Georgia, "Times New Roman", serif;} abbiamo definito: font-weight, dimensione/ interlinea, font-family |
|
|
Usare i font di sistema è possibile impostare, invece della normale lista di caratteri, un valore corrispondente ai cosiddetti font di sistema. Se si intende usare uno dei font di sistema non è necessario specificare altri valori oltre alla keyword p {font: menu;} |
|
|
Allinerare il testo: Text-align La proprietà serve a impostare l'allineamento del testo. E' ereditata e si applica a tutti gli elementi. selettore { text-align: <valore>; } |
|
|
Text-decoration Imposta particolari decorazioni e stili per il testo. Ereditabile e applicabile a tutti gli elementi p {text-decoration: <valore> o <valori>;} p {text-decoration: none;} |
|
19 Gestione del testo: proprietà avanzate
|
font-size-adjust migliorare la leggibilità di un carattere alternativo tra quelli indicati con la proprietà font-family - è ereditata selettore {font-size-adjust: <valore>;} p {font-size-adjust: 0.50;} |
supportata solo dai browser Gecko-based (Mozilla, Netscape 6/7) |
|
font-stretch Consente di rendere il testo più o meno espanso del normale. Proprietà non supportata da nessun browser. Ereditata selettore {font-stretch: <valore>;} p {font-stretch: ultra-expanded;} |
ultra-expanded, extra-expanded, expanded, semi-expanded, normal, semi-condensed, condensed, extra-condensed, ultra-condensed - con funzione relativa: wider e narrower |
|
font-variant Consente di trasformare il testo in maiuscoletto – ereditata selettore {font-variant: <valore>;} |
h2 {font-variant: small-caps;} |
|
text-indent Definisce l'indentazione della prima riga in ogni elemento contenente del testo. Proprietà ben supportata ed ereditata selettore {text-indent: <valore>;} |
il valore con unità di misura è assoluto, quello in percentuale è relativo p {text-indent: 10px;} |
|
text-shadow Crea un'ombreggiatura per il testo specificato. La proprietà non è supportata da nessun browser e non è ereditata selettore {text-shadow: <valore colore> <valore x> <valore y> <valore blur>;} |
h1 {text shadow: blue 2px 2px 3px;} |
|
text-transform La proprietà serve a cambiare gli attributi del testo relativamente a tre aspetti: maiuscolo, minuscolo, prima lettera maiuscola. selettore {text-transform: <valore>;} |
|
|
white-space Questa proprietà serve a gestire il trattamento degli spazi bianchi presenti in un elemento. E' ereditata selettore {white-space: <valore>;} p {white-space: pre;} |
|
|
letter-spacing Aumenta lo spazio tra le lettere di una parola. Proprietà ben supportata ed ereditata selettore { letter-spacing: <valore>; } h1 { letter-spacing: 5px; } |
|
|
word-spacing Serve ad aumentare lo spazio tra le parole comprese in un elemento. Proprietà ben supportata ed ereditata selettore { word-spacing: <valore>; } p { word-spacing: 1.2em; } |
|
15 Il box model
-
l'area del contenuto. È la zona in cui trova spazio il contenuto vero e proprio, testo, immagini, animazioni Flash. Le dimensioni orizzontali dell'area possono essere modificate con la proprietà width. Quelle verticali con height.
-
il padding. È uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo dell'elemento. Come si vede dalla figura, se si imposta un colore di sfondo per un elemento questo si estende dall'area del contenuto alla zona di padding.
-
il bordo. È una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto.
-
il margine. È uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti.
Larghezza del box
larghezza dell'area del contenuto: width
larghezza effettiva di un box:
margine sinistro + bordo sinistro + padding sinistro + area del contenuto + padding destro + bordo destro + margine destro
Larghezza ed elemento contenitore
Se non si imposta alcun valore per la proprietà width o se il valore usato è auto la larghezza di un box è uguale a quella dell'area del contenuto dell'elemento contenitore. Quest'ultimo è l'elemento che racchiude il box
Uso del valore auto
Solo per tre proprietà è possibile impostare il valore auto: margini, altezza e larghezza (width).
Solo i margini possono avere valori negativi
16 Gestione del colore
|
black | navy | blue | maroon | purple | green | red | teal | fuchsia | olive | gray | lime | aqua | silver | yellow | white |
|
|
#RRGGBB #CC0000 Il codice sopra rappresenta una tonalità di rosso. |
codici esadecimali. In essi, le prime due lettere (o numeri) corrispondono ai valori per il colore rosso (RED), la seconda coppia fa riferimento al verde (GREEN), l'ultima al blue (BLUE). |
|
#RGB #C00 Il codice sopra rappresenta una tonalità di rosso |
codici esadecimali i valori per il rosso, il verde e il blue sono definiti solo dalla prima lettera o numero |
|
rgb(rrr%, ggg%, bbb%) rgb(0%, 0%, 0%) nero rgb(100%, 100%, 100%) bianco |
usare per i tre elementi base del sistema RGB una lista di valori in percentuale separati da una virgola |
|
rgb(rrr, ggg, bbb) rgb(0, 0, 0,) nero |
Si definiscono i valori di rosso, verde e blue con tre valori compresi compresi, rispettivamente, tra 0 e 255 |
|
Per ogni elemento si possono definire almeno tre colori: |
|
|
il colore di primo piano |
foreground color |
|
il colore di sfondo |
background color |
|
il colore del bordo |
border color |
|
La proprietà color selettore { color: <valore> } La proprietà color definisce esclusivamente:
La proprietà color si applica a tutti gli elementi ed è ereditata |
I valori possibili sono:
p{color: black; background-color: white; } |
17 Gestione dello sfondo
|
background-color Definisce il colore di sfondo di un elemento. Questa proprietà non è ereditata selettore {background-color: <valore>;} Usando transparent come valore un elemento avrà come colore quello dell'elemento parente |
Valori
|
|
background-image Definisce l'URL di un'immagine da usare come sfondo di un elemento. Questa proprietà non è ereditata selettore { background-image: url(/<valore>); } Usare none equivale a non impostare la proprietà: nessuna immagine verrà applicata come sfondo |
Valori
|
|
background-repeat Essa consente di definire la direzione in cui l'immagine di sfondo viene ripetuta. Proprietà non ereditata selettore {background-repeat: <valore>;} div { background-image: url(/sfondo.gif); background-repeat: repeat-x; } |
Valori
|
|
background-attachment Con questa proprietà si imposta il comportamento dell'immagine di sfondo rispetto all'elemento cui è applicata e all'intera finestra del browser. Si decide, in pratica, se essa deve scorrere insieme al contenuto o se deve invece rimanere fissa. Proprietà non ereditata selettore {background-attachment: <valore>;} background-repeat: repeat-x; |
Valori
|
|
background-position Definisce il punto in cui verrà piazzata un'immagine di sfondo non ripetuta o da dove inizierà la ripetizione di una ripetuta. Si applica solo agli elementi blocco o rimpiazzati. Attenzione alla compatibilità e alla resa, non omogeena, tra i vari browser. Proprietà non ereditata. selettore {background-position: <valore> o <valori>;} body { |
I valori possibili sono diversi. Tutti però definiscono le coordinate di un punto sull'asse verticale e su quello orizzontale. Ciò può avvenire nei seguenti modi:
|
|
background E veniamo alla proprietà background. Con essa, ricordiamolo, possiamo definire in un colpo solo tutti gli aspetti dello sfondo. Per essere valida, la dichiarazione non deve contenere necessariamente riferimenti a tutte le proprietà viste finora, ma deve contenere almeno la definizione del colore di sfondo selettore {background: background-color background-image background-repeat background-attachment background-position;} I valori non vanno separati da virgole. L'ordine non è importante, ma quello dato è il più logico e andrebbe rispettato: si va in ordine di importanza |
body { |
- Sei qui:
-
Home
-
Informatica
-
Web
- CSS
