JOOMLA!
Css in sintesi
Gli elementi blocco sono box che possono contenere altri elementi, sia di tipo blocco che di tipo inline. Quando un elemento blocco è inserito nel documento viene automaticamente creata una nuova riga nel flusso del documento
<h1> e <p> sono elementi blocco
Gli elementi inline non possono contenere elementi blocco, ma solo altri elementi inline
Una terza categoria è quella degli elementi lista. Comprende in pratica solo l'elemento li (list item).
Elementi rimpiazzati (replaced elements)
elementi rimpiazzati:uno user agent (il "motore" e la mente di un browser) conosce solo le dimensioni intrinseche. Ovvero, quelli in cui altezza e larghezza sono definite dall'elemento stesso e non da ciò che lo circonda.
<img>, <input>, <textarea>, <select> e <object>
elementi non rimpiazzati
<html>
<head>
<title>Inserire i fogli di stile in un documento</title>
<linkrel="stylesheet" type="text/css" href="stile.css">
</head>
<body>...
CSS esterni
Per caricare un foglio esterno in un documento esistono due possibilità. La prima e più compatibile è quella che fa uso dell'elemento <LINK>. La dichiarazione va sempre collocata all'interno della sezione <HEAD> del documento (X)HTML
L'elemento <LINK> presenta una serie di attributi di cui è importante spiegare significato e funzione:
1. rel: descrive il tipo di relazione tra il documento e il file collegato. E' obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet. Approfondimenti nella lezione 5, "Fogli di stile alternativi".
2. href: serve a definire l'URL assoluto o relativo del foglio di stile. E' obbligatorio.
3. type: identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css. L'attributo è obbligatorio.
4. media: con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Attributo opzionale. L'argomento sarà approfondito nella prossima lezione.
<style>
@import url(stile.css);
</style>
@importall'interno dell'elemento <STYLE>:
Questo sistema è uno dei modi più sicuri
CSS interni Fogli incorporati
<head>
<title>Inserire i fogli di stile in un documento</title>
<style type="text/css">
{
background: #FFFFCC;
}
</style>
</head>
<body>...
I fogli incorporati sono quelli inseriti direttamente nel documento (X)HTML tramite l'elemento <STYLE>. Anche in questo caso la dichiarazione va posta all'interno della sezione <HEAD>
il codice inizia con l'apertura del tag <STYLE>. Esso può avere due attributi:
1. type (obbligatorio)
2. media (opzionale)
Fogli in linea
<link rel="stylesheet" type="text/css" href="/stile.css">
<style type="text/css">
@import url(nuovo_stile.css);
</style>
le regole dello stile colleagto con @import vanno a sovrascrivere quelle ereditate dall'elemento <LINK>
uso dell'attributo styleapplicabilE a tutti gli elementiLa dichiarazione avviene a livello dei singoli tag
<elemento style="regole_di_stile"> <h1 style="color: red; background: black;">...</h1>
4 L'attributo media
L'attributo media può accompagnare sia l'elemento <LINK> che l'elemento <STYLE>.
<link rel="stylesheet" type="text/css" media="print" href="/print.css" />
<style type="text/css" media="screen">...</style>
valori possibili per l'attributo:
· all. Il CSS si applica a tutti i dispositivi di visualizzazione.
· screen. Valore usato per la resa sui normali browser web.
· print. Il CSS viene applicato in fase di stampa del documento.
· projection. Usato per presentazioni e proiezioni a tutto schermo.
· aural. Da usare per dispositivi come browser a sintesi vocale.
· braille. Il CSS viene usato per supporti basati sull'uso del braille.
· embossed. Per stampanti braille.
· handheld. Palmari e simili.
· tty. Dispositivi a carattere fisso.
· tv.Web-tv.
Il valore di default è all
Stylesheet: identifica il CSS di default
alternate stylesheet: identifica un CSS come alternativo rispetto a quello standard
Sta all'autore implementare un sistema che consenta all'utente di scegliere dinamicamente lo stile alternativo sostituendolo al primo
7 Struttura di una regola
· il selettoreserve a definire la parte del documento cui verrà applicata la regola
· il blocco delle dichiarazioniAl suo interno possono trovare posto più dichiarazioni. Esse sono sempre composte da una coppia
· proprietà
· valore
Proprietà e valore devono essere separati dai due punti.
per ogni dichiarazione non è possibile indicare più di una proprietà, mentre è spesso possibile specificare più valori
Per inserire parti di commento
· /* come segno di apertura
· */ come segno di chiusura
Sintassi abbreviata
background | border | border-top | border-right | border-bottom
border-left | cue | font | list-style | margin
outline | padding | pause
Es.:
|
· margin-top · margin-right · margin-bottom · margin-left |
div { margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-left: 5px; } |
Ogni elemento presenta sui suoi quattro lati un certo margine rispetto a quelli adiacenti
Sintassi abbreviata:
div {margin: 10px 5px 10px 5px;}
8 I selettori
una regola CSS viene applicata ad un selettore
|
Selettore di elementi (type selector) È costituito da uno qualunque degli elementi di (X)HTML |
h1 {color: #000000;} |
||
|
Raggruppare È possibile nei CSS raggruppare diversi elementi al fine di semplificare il codice. Gli elementi raggruppati vanno separati da una virgola |
h1, h2, h3 {background: white;} |
||
|
Selettore universale (universal selector) serve a selezionare tutti gli elementi di un documento. Si esprime con il carattere * (asterisco). |
* { color: black; } |
||
|
Selettore del discendente (descendant selector) Serve a selezionare tutti gli elementi che nella struttura ad albero di un documento siano discendenti di un altro elemento specificato nella regola Il selettore va letto per chiarezza da destra a sinistra |
div p {color: black;} |
verranno selezionati tutti i paragrafi (<p>) discendenti di elementi <div> |
|
|
p strong {color: red;} |
tutti gli elementi <strong> che si trovino all'interno di un paragrafo |
||
|
Selettore del figlio (child selector) ) (no explorer) Seleziona un elemento che sia figlio diretto di un altro |
body > p {color: black;} |
Per il child selector i due elementi devono essere separati dall'operatore "maggiore di" > |
|
|
Selettore dell'elemento adiacente (adjacent-sibling selector) (no explorer) Seleziona gli elementi che nel codice del documento siano immediatamente vicini (adiacenti) ad un altro. Il segno di assegnazione della relazione è per questo selettore+ |
<h1>Titolo</h1> h1 + p {color: red;} solo il primo dei due paragrafi avrà il testo rosso |
||
|
Selettore dell'attributo (attribute selector) Seleziona gli elementi in base ai loro attributi e/o al valore di tali attributi |
Attributo semplice elemento [ attributo ] |
input [ id ] {background: red;} applicherà uno sfondo rosso a tutti gli elementi input per cui sia stato impostato un attributo id, a prescindere dal valore ad esso assegnato |
|
|
Attributo con valore elemento [ attributo = "valore" ] Seleziona gli elementi che abbiano come valore dell'attributo la stringa definita nella regola |
input [ id = "text" ] { backgorund: red; } applicherà un sfondo rosso a tutti gli elementi input che abbiano come valore dell'attributo id "text". Come si vede una sintassi più restrittiva rispetto alla prima |
||
|
Attributo il cui valore contiene una stringa elemento [ attributo t= "valore" ] |
In questo caso vengono selezionati tutti gli elementi in cui il valore dell'attributo dichiarato contenga la stringa definita nella regola img [ alt t= "foto" ] {margin: 10px;} La regola applicherà un margine di 10px a tutte le immagini in cui l'attributo alt contiene "foto" |
||
|
Attributo il cui valore inizia con una stringa elemento [ attributo |= "valore" ] |
Seleziona gli elementi in cui il valore dell'attributo dichiarato inizia con la stringa definita nella regola |
9 Id e classi: due selettori speciali
esistono due attributi fondamentali applicabili a tutti gli elementi: sono class e id
il valore dell'attributo classo iddeve trovare una corrispondenza in un foglio di stile
In un documento (X)HTML l'attributo id è usato per identificare in modo univoco un elemento (se assegno ad un paragrafo l'id "testorosso", non potrò più usare questo valore nel resto della pagina - l'ID #testorosso dichiarato nel CSS trasformerà solo quel paragrafo specifico)
Una singola classe, al contrario, può essere assegnata a più elementi, anche dello stesso tipo
una classe consente di superare le limitazioni intrinseche nell'uso di un selettore di elementi
Se uno stile va applicato ad un solo specifico elemento usate un ID.
Se invece prevedete di usarlo più volte ovvero su più elementi definite nel CSS una classe.
Classe
.nome_della_classe Per definire una classe si usa far precedere il nome da un semplice punto
<elemento>.nome_della_classe Esso è più restrittivo rispetto alla sintassi generica
Es.: p.testorosso {color: red;} lo stile verrà applicato solo ai paragrafi che presentino l'attributo class="testorosso"
classi multiple
p.testorosso.grassetto {color:red; font-weight:bold;} applicherà gli stili impostati a tutti gli elementi in cui siano presenti (in qualunque ordine) i nomi delle classi definiti nel selettore
ID
Basta far precedere il nome dal simbolo di cancelletto # #nome_id p#nome_id
#titolo {color: blue;}
<h1 id="titolo">...</h1>
10 Le pseudo-classi
Una pseudo-classe non definisce un elemento ma un particolare stato di quest'ultimo
le pseuso-classi non possono essere mai dichiarate da sole, ma per la loro stessa natura devono sempre appoggiarsi ad un selettore
a:link {color: blue;} i collegamenti ipertestuali (<a>) che non siano stati visitati (:link) avranno il colore blue
La pseudo-classe (tutte iniziano con i due punti) segue senza spazi l'elemento. Subito dopo si crea nel modo consueto il blocco delle dichiarazioni
Una pseudo-classe può anche essere associata a selettori di tipo classe
a.collegamento:link {color: green;} La pseudo-classe doveva seguire la dichiarazione della classe
a:link.collegamento la classe segue la pseudo-classe
:first-child
Seleziona e formatta un elemento che si trovi ad essere il primo elemento figlio di un altro elemento
<elemento>:first-child {<dichiarazioni>;}
p:first-child {color:red;} assegna il colore rosso solo ai paragrafi che siano il primo elemento figlio di qualsiasi altro elemento
:link
Si applica solo all'elemento (X)HTML <a> che abbia anche l'attributo href
11 Pseudo-elementi
:first-letter
:first-line
:before
:after
12 Le @-rules
A livello sintattico le @-rules posono essere definite o nel corpo del documento, per l'esattezza all'interno dell'elemento <STYLE>:
<style type="text/css">
@rule
</style>
@import serve per collegare un foglio di stile esterno al documento
<style type="text/css">
@import url(foglio_di_stile.css);
@import url(foglio_di_stile2.css);
</style>
Altre sintassi:
@import url("stile.css");
@import "stile.css";
<style type="text/css">
@import url(foglio_di_stile.css);
</style>
all'interno del tag <STYLE> @import deve essere la prima regola definita
È possibile invece importare all'interno di un singolo tag <STYLE> più fogli di stile:
<style type="text/css">
@import url(foglio_stampa.css) print;
@import url(foglio_schermo.css) screen, handheld;
</style>
@import è che può essere usata anche all'interno di un foglio di stile per incorporare un altro CSS esterno
È possibile definire all'interno della direttiva @import anche il supporto cui applicare il CSS. Per fare ciò basta far seguire all'url del CSS l'indicazione di uno dei media previsti nella specifica:
|
@import serve per collegare un foglio di stile esterno al documento |
|
|
@media <valore> {regole CSS} @media va quindi seguito dal nome di uno dei supporti scelti come target specifico e dalle regole di stile racchiuse tra parentesi graffe |
<style type="text/css"> |
|
@media |
|
|
@charset @charset "iso-8859-1" serve a specificare l'impostazione relativa alla codifica dei caratteri di un documento |
@charset "iso-8859-1" |
|
@font-face descrivere un font usato nel documento usata per specificare l'url di un carattere particolare da scaricare su una macchina che non lo veda presente tra i suoi font Il supporto non è garantito |
@font-face { |
13 Valori e unità di misura
1. I valori di una proprietà non vanno mai messi tra virgolette
2. non bisogna lasciare spazio tra numero e sigla dell'unità
|
in (inches - pollici): |
classica misura del sistema metrico americano. Praticamente nullo il suo valore su un supporto come un browser webviste le variabili relative a risoluzione e ampiezza dei monitor |
|
cm (centimetri) |
stesso discorso visto per i pollici, la difficoltà maggiore sta nella resa su monitor, che è altra cosa rispetto alla carta stampata |
|
mm (millimetri) |
vedi centimetri |
|
pt (points - punti) |
unità di misura tipografica destinata essenzialmente a definire la dimensione dei font |
|
pc (picas) |
unità poco usata. 1 pica equivale a 12 punti |
|
em (em-height) |
unità di misura spesso usata dagli autori CSS. 1 em equivale all'altezza media di un carattere per un dato font. E' un unità di misura relativa |
|
ex (ex-height) |
poco usata. 1 ex equivale all'altezza del carattere x minuscolo del font scelto |
|
px (pixels) |
unità di misura ideale su monitor. E' quella più usata e facile da comprendere |
Percentuale considerare sempre relativo rispetto ad un altro valore, in genere quello espresso per l'elemento parente
Colori Stringhe Valori URI Unità per gli angoli Unità di tempo Unità di frequenza
14 Ereditarietà
possono entrare in gioco nel modificare lo stile degli elementi tre diversi fogli di stile
· foglio dell'autore
· foglio dell'utente
· foglio predefinito del browser
|
#titolo {color: black;} .classe1 {background: #C00;} h1 {color: red;} #paragrafo {color: green;} div p {color: red;} |
1-0-0 0-1-0 0-0-1 1-0-0 0-0-2 |
Specificità descrive il peso relativo delle varie regole all'interno di un foglio di stile
Per prima cosa si conta il numero di selettori ID classi e pseudo-classi numero di elementidefiniti nella regola
Il concetto di cascade
stili in linea prevalgono su quelli incorporati che a loro voltaprevalgono su quelli collegati
Importanza
se una dichiarazione viene accompagnata dalla parola chiave !important essa balza al primo posto nell'ordine di applicazione a prescindere da peso, origine, specificità e ordine
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: · il colore di primo piano, ovvero quello del testo · il colore del bordo di un elemento quando non si imposti esplicitamente quest'ultimo con le proprietà border o border-color La proprietà color si applica a tutti gli elementi ed è ereditata |
I valori possibili sono: · qualunque valore di un colore definito con i metodi visti sopra · la parola chiave inherit. Con essa si dice esplicitamente al browser di ereditare le impostazioni definite per l'elemento parente. 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 · un qualunque colore · la parola chiave transparent |
|
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 · un URL assoluto o relativo che punti ad un'immagine · la parola chiave none. Valore di default. |
|
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 · repeat. L'immagine viene ripetuta in orizzontale e verticale. E' il comportamento standard. · repeat-x. L'immagine viene ripetuta solo in orizzontale. · repeat-y. L'immagine viene ripetuta solo in verticale. · no-repeat. L'immagine non viene ripetuta. |
|
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 · scroll. L'immagine scorre con il resto del documento quando si fa lo scrolling della pagina) · fixed. L'immagine rimane fissa mentre il documento scorre
|
|
background-positionDefinisce 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: · con valori in percentuale · con valori espressi con unità di misura · con le parole chiave top, left, bottom, right |
|
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 { |
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) |
· serif (Times New Roman) · sans-serif (arial) · cursive (Comic Sans) · fantasy (Allegro BT) · monospace (Courier) 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-sizedefinisce 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: · le sette parole chiave xx-small, x-small, small, medium, large, x-large, xx-large · quelli espressi con le seguenti unità di misura: pixel (px), centimetri (cm), millimetri (mm), punti (pt), picas (pc), pollici (in), x-height(ex). Di tutte queste unità le uniche proponibili per il testo sono punti e pixel. Si consiglia di usare la prima solo per CSS destinati alla stampa. Sono valori relativi: · le parole chiave smaller e larger · quelli espressi in em (em-height) · quelli espressi in percentuale |
|
font-weightServe 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;} |
· valori numerici100 - 200 - 300 - 400 - 500 - 600 - 700 - 800 - 900 ordinati in senso crescente (dal leggero al pesante) · normal. Valore di default. E' l'aspetto normale del font ed equivale al valore 400 · bold. Il carattere acquista l'aspetto che definiamo in genere grassetto. Equivale a 700 · bolder.Misura relativa. Serve a specificare che una determinata porzione di testo dovrà apparire più pesante rispetto al testo dell'elemento parente · lighter. Misura relativa. Il testo sarà più leggero di quello dell'elemento parente |
|
font-style Imposta le caratteristiche del testo in base ad uno di questi tre valori: selettore {font-style: <valore>;} p {font-style: italic;} |
· normal: il testo mantiene il suo aspetto normale · italic: formatta il testo in corsivo · oblique: praticamente simile a italic La proprietà si applica a tutti gli elementi ed è ereditata |
|
Line-heightsistema 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;} |
· normal. Il browser separerà le righe con uno spazio ritenuto "ragionevole". Dovrebbe corrispondere a un valore numerico compreso tra 1 e 1.2 · valore numerico. Usando valori numerici tipo 1.2, 1.3, 1.5 si ottiene questo risultato: l'altezza della riga sarà uguale alla dimensione del font moltiplicata per questo valore. · un valore numerico con unità di misura. L'altezza della riga sarà uguale alla dimensione specificata. · percentuale. L'altezza della riga viene calcolata come una percentuale della dimensione del font. |
|
fontproprietà 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 |
· font-family · font-size · line-height · font-weight · font.-style · font-variant · font di sistema |
|
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;} |
1. caption: carattere usato per pulsanti e menu a tendina 2. icon: carattere usato per la descrizione delle icone 3. menu: carattere usato nei menu delle varie finestre 4. message-box: usato per i gli alert e gli altri box con messaggi di sistema 5. small-caption: carattere per i controlli più piccoli 6. status-bar: il font usato per la barra di stato |
|
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>; } |
· left. Allinea il testo a sinistra · right. Allinea il testo a destra · center. Centra il testo · justify. Giustifica il testo |
|
Text-decorationImposta particolari decorazioni e stili per il testo. Ereditabile e applicabile a tutti gli elementi p {text-decoration: <valore> o <valori>;} p {text-decoration: none;} |
· none. Il testo non avrà alcuna decorazione particolare · underline. Il testo sarà sottolineato · overline Il testo avrà una linea superiore · line-through. Il testo sarà attraversato da una linea orizzontale al centro |
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;} |
· none. Non avviene nessun aggiustamento. Valore di default. · valore numerico. Indica il fattore di aggiustamento del font. 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;} |
· normal. Valore di default. · parole chiaveche indicano diversi gradi di espansione del testo. 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>;} |
· normal. Il testo ha il suo aspetto normale. Valore di default. · small-caps. trasforma il testo in maiuscoletto. 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>;} |
· un valore numerico con unità di misura · un valore in percentuale 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>;} |
· none. Valore di default. Nessuna trasformazine viene applicata. · capitalize. La prima lettera di ogni parola viene trasformata in maiuscolo. · uppercase. Tutto il testo è maiuscolo. · lowercase. Tutto il testo è minuscolo. |
|
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;} |
· none. Valore di default. Gli spazi bianchi sono ridotti a uno. · pre. Gli spazi bianchi e l'inizio di nuove righe sono mantenuti così come sono nel codice · nowrap. Gli spazi bianchi sono ridotti a uno e l'andata a capo è disabilitata |
|
letter-spacing Aumenta lo spazio tra le lettere di una parola. Proprietà ben supportata ed ereditata selettore { letter-spacing: <valore>; } h1 { letter-spacing: 5px; } |
· normal. Valore di default. Le lettere mantengono il loro spazio normale. · un valore numerico con unità di misura. Le lettere saranno spaziate secondo la distanza impostata. |
|
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; } |
· normal. Valore di default. Le parole mantengono il loro spazio normale. · un valore numerico con unità di misura. Le parole saranno spaziate secondo la distanza impostata. |
Il Box Model: come disegnare la struttura della pagina
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 · colonne di tabelle · elementi inline non rimpiazzati · un valore numerico con unità di misura. · un valore in percentuale. Il valore in percentuale si riferisce sempre all'altezza del blocco contenitore, purché esso abbia un'altezza esplicitamente dichiarata. Diversamente, la percentuale viene interpretata come auto. · auto. L'altezza sarà quella determinata dal contenuto. |
|
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 |
· visible. Valore iniziale. Il contenuto eccedente rimane visibile (con i problemi visti sopra). · hidden. Il contenuto eccedente non viene mostrato. · scroll. Il browser crea barre di scorrimento che consentono di fruire del contenuto eccedente. · auto. Il browser tratta il contenuto eccedente secondo le sue impostazioni predefinite. Di norma dovrebbe mostrare una barra di scorrimento laterale. |
|
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;} |
· un valore numerico con unità di misura. · un valore in percentuale |
|
max-heightLa proprietà max-height serve a impostare l'altezza massima di un elemento selettore {max-height: valore;} div {max-height: 400px;} |
· none. Valore iniziale. L'altezza dell'elemento non è limitata. · un valore numerico con unità di misura. · un valore in percentuale |
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 · auto. Valore di default. Se non si impostano margini, bordi e padding la larghezza dell'elemento sarà uguale all'area del contenuto dell'elemento contenitore. · un valore numerico con unità di misura. · un valore in percentuale. La larghezza sarà calcolata rispetto a quella dell'elemento contenitore. |
|
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; } |
· un valore numerico con unità di misura. · un valore in percentuale. La larghezza sarà come minimo quella espressa dalla percentuale riferita alla larghezza dell'elemento contenitore. |
|
max-width Imposta la larghezza massima di un elemento. Non è ereditata selettore { max-width: valore; } |
· none. Valore di default. Non c'è un limite per larghezza dell'elemento. · un valore numerico con unità di misura. · un valore in percentuale |
22 I Marginila 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;} |
· un valore numerico con unità di misura. Il valore è espresso in termini assoluti. · un valore in percentuale. Il valore è calcolato come percentuale rispetto alla larghezza (width) del blocco contenitore. · auto. E' quasi sempre corrispondente a 0. |
|
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%;} |
· un valore numerico con unità di misura. Il valore è espresso in termini assoluti. · un valore in percentuale. Il valore è calcolato come percentuale rispetto alla larghezza (width) del blocco contenitore. · auto. E' quasi sempre corrispondente a 0. |
|
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;} |
· un valore numerico con unità di misura. · un valore in percentuale. · auto. |
|
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%;} |
· un valore numerico con unità di misura. · un valore in percentuale. · auto. |
|
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 · un valore numerico con unità di misura. · un valore in percentuale. · auto. Per la proprietà margin il valore auto significa che la distanza sarà automaticamente calcolata rispetto alla larghezza dell'elemento contenitore. · se si usano tre valori, il primo si riferisce al margine superiore, il secondo a quelli sinistro e destro, il terzo a quello inferiore · se si usano due valori, il primo si riferisce ai lati superiore e inferiore, il secondo al sinistro e al destro · se si usa un solo valore, un uguale distanza sarà ai quattro lati |
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;} |
· un valore numerico con unità di misura. Il valore è espresso in termini assoluti. · un valore in percentuale. Il valore è calcolato come percentuale rispetto alla larghezza (width) del blocco contenitore. |
|
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%;} |
· un valore numerico con unità di misura. · un valore in percentuale. |
|
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; |
· un valore numerico con unità di misura. · un valore in percentuale. |
|
padding-rightImposta l'ampiezza del padding sul lato destro di un elemento. Si applica a tutti gli elementi e non è ereditata p.box {padding-right: 10px;} |
· un valore numerico con unità di misura. · un valore in percentuale. |
|
PaddingProprietà a sintassi abbreviata. Serve a impostare i valori del padding per tutti e quattro i lati di un elemento p {padding: 10px 20px;} |
· un elenco di valori numerici con unità di misura. · un elenco di valori in percentuale. |
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;} |
1. il colore (color) |
· un qualsiasi colore · la parola chiave inherit |
||
|
2. lo stile (style) |
· none. L'elemento non presenta alcun bordo e lo spessore equivale a 0. · hidden. Equivalente a none · dotted · dashed · solid · double. · groove · ridge · inset · outset |
|||
|
3. lo spessore (width) |
· un valore numerico con unità di misura · thin. Bordo sottile. · medium. Bordo di medio spessore. · thick. Bordo di largo spessore. |
|||
|
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. |
|||
25 Le Liste
Posizionare gli elementi nella pagina
26 Tre proprietà speciali: display, float clear
|
Displaydefinire il trattamento e la presentazione di un elemento - La proprietà è ereditata <selettore> {display: <valore>;} una pagina alternativa fatta solo di testo img {display: none;} Nella pagina principale mettete un bel link: "Versione solo testo" e ci attaccate uno javascipt per caricare il CSS alternativo |
· inline. Valore di default. L'elemento assume le caratteristiche degli elementi inline. · block. L'elemento viene trattato come un elemento blocco. · list-item. L'elemento si trasforma in un elemento lista. · run-in. L'elemento viene incorporato e inserito all'inizio del blocco seguente. L'effetto dovrebbe essere simile a quello visto per le liste quando si usa il valore inside per il marcatore. Il valore è supportato solo da Opera 5/6 e parzialmente da Explorer 5 Mac. · compact. L'elemento viene piazzato al fianco di un altro. Non supportato da nessun browser. · marker. Questo valore fa sì che il contenuto generato con gli pseudo-elementi :before e :after sia trattato come un marcatore di liste. Non supportato da nessun browser. · none. L'elemento non viene mostrato. O meglio: è come se non fosse nemmeno presente nel documento, in quanto non genera alcun box. Diversa, come vedremo, la proprietà visibility:hidden, che invece si limita a nascondere l'elemento. |
|
FloatCon questa proprietà è possibile rimuovere un elemento dal normale flusso del docuemnto e spostarlo su uno dei lati (destro o sinistro) del suo elemento contenitore. Il contenuto che circonda l'elemento scorrerà intorno ad esso sul lato opposto rispetto a quello indicato come valore di float. La proprietà non è ereditata <selettore> {float: <valore>;} div {width: 200px; float:right;} |
· left. L'elemento viene spostato sul lato sinistro del box contenitore, il contenuto scorre a destra. · right. L'elemento viene spostato sul lato destro, il contenuto scorre a sinistra. · none. Valore iniziale e di default in mancanza di una dichiarazione esplicita. L'elemento mantiene la sua posizione normale. Se usate il float con le immagini non avete problemi perchè esse hanno una dimensione intrinseca che il browser riconosce. Ma se lo applicate ad altri elementi dovete esplicitamente impostare una dimensione orizzontale con la proprietà width. |
|
Clear La proprietà clear serve a impedire che al fianco di un elemento compaiano altri elementi con il float. Si applica solo agli elementi blocco e non è ereditata <selettore> {clear: <valore>;} h1 {clear: both;} |
· none. Gli elementi con float possono stare a destra e sinistra dell'elemento. · left. Si impedisce il posizionamento a sinistra. · right. Si impedisce il posizionamento a destra. · both. Si impedisce il posizionamento su entrambi i lati. |
27 Posizionamento degli elementi
|
Positionè la proprietà fondamentale per la gestione della posizione degli elementi, di cui determina la modalità di presentazione sulla pagina. Si applica a tutti gli elementi e non è ereditata. <selettore> {position: <valore>;} · static. · absolute · fixed · relative |
StaticE' il valore di default, quello predefinitoper tutti gli elementi non posizionati secondo un altro metodo. Rappresenta la posizione normale che ciascuno di essi occupa nel flusso del documento Absoluteil box dell'elemento è posizionato in base alle coordinate fornite con le proprietà top, left, right o bottom. Il posizionamento 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 avviene in base all'elemento radice HTML, fixedcome per absolute maper fixedil box contenitore è sempre il cosiddetto viewport(la finestra principale del borwser). un box posizionato con fixed non scorre con il resto del documento. non è supportato da Explorer relativeL'elemento viene posizionato relativamente al suo box contenitore. il box contenitore è il posto che l'elemento avrebbe occupato nel normale flusso del documento è possibile usare anche valori negativi |
28 Gestione della posizione
|
TopPer gli elementi posizionati con absoluteo fixeddefinisce la distanza verticale rispetto al bordo superiore dell'elemento contenitore. Per gli elementi posizionati con relativestabilisce invece l'ammontare dello spostamento rispetto al lato superiore della posizione originaria. In questo caso, usando valori positivi il box viene spostato sotto, mentre con valori negativi lo spostamento avviene verso l'alto <selettore> {top: <valore>;} |
· un valore numerico con unità di misura · un valore in percentuale La percentuale è relativa all'altezza dell'elemento contenitore. · auto div {top: 10px;} |
|
LeftPer gli elementi con posizione assoluta o fissa definisce la distanza dal bordo sinistro del box contenitore. Per quelli con posizione relativa stabilisce lo spostamento rispetto al lato sinistro della posizione originaria. Valori positivi spostano l'elemento verso destra, valori negativi verso sinistra <selettore> {left: <valore>;} |
· un valore numerico con unità di misura · un valore in percentuale La percentuale è relativa alla larghezza dell'elemento contenitore. · auto div {left: 30px;} |
|
BottomPer i box con posizione assoluta o fissa definisce la distanza dal bordo inferiore dell'elemento contenitore. Per quelli posizionati relativamente lo spostamento rispetto al lato inferiore della posizione originaria <selettore> {bottom: valore>} |
· un valore numerico con unità di misura · un valore in percentuale · auto div {bottom: 50px;} |
|
RightPer i box con posizione assoluta o fissa definisce la distanza dal bordo destro dell'elemento contenitore. Per quelli posizionati relativamente lo spostamento rispetto al lato destro della posizione originaria <selettore> {right: valore;} |
· un valore numerico con unità di misura · un valore in percentuale · auto div {right: 50px;} |
|
VisibilityQuesta proprietà determina se un elemento debba essere visibile o nascosto. Si applica a tutti gli elementi e non è ereditata <selettore> {visibility: <valore>;} |
· visible. L'elemento è visibile. Valore di default. · hidden. L'elemento è nascosto, ma mantiene il suo posto nel layout dove apparirà come una zona vuota. In ciò è diverso dal valore none della proprietà display div.box {visibility: hidden;} |
|
ClipDefinisce la parte di un elemento posizionato che deve essere visibile. Nella definizione che ne è stata data con CSS2 non è supportata da nessun browser. |
|
|
z-indexCon questa proprietà si imposta l'ordine di posizionamento dei vari elementi sulla base di una scala di livelli. <selettore> {z-index: <valore>;} |
· auto. L'ordine dei livelli è uguale per tutti gli elementi. · un valore numerico. Un valore superiore indica un livello superiore div#box1 {z-index: 34;} |
29 Agire sulle tabelle
|
table-layoutimposta il metodo di layout di una tabella. Non è ereditata. Si applica solo alle tabelle <selettore> {table-layout: <valore>;} table { |
· auto. Il layout della tabella viene definito automaticamente dal browser. · fixed. Le regole di presentazione sono quelle impostate dall'autore nel CSS. Usando fixed possiamo innanzitutto definire la larghezza della tabella tramite la proprietà width |
|
border-collapsepossiamo stabilire in che modo trattare i bordi e gli spazi tra le celle di una tabella. Si applica solo alle tabelle ed è ereditata. <selettore> {border-collpse: <valore>;} table { |
· collapse. Se viene impostato un bordo, le celle della tabella lo condividono. · separate. Se viene impostato un bordo, ogni cella ha il suo, separato dalle altre. Lo spazio tra le celle e tra i bordi si imposta con la proprietà border-spacing. |
|
border-spacingImposta lo spazio tra le celle di una tabella. Va usata solo in presenza di un modello di border-collapse settato su separate. Proprietà ereditata e applicabile solo alle tabelle <selettore> {border-spacing: <valore>;} |
· un valore numerico con unità di misura |
|
empty-cellsGestisce il trattamento delle celle di tabella senza contenuto. Agisce solo su quelle che non presentino al loro interno alcun tipo di markup, nemmeno il classico inserito in genere proprio per simulare la presenza di contenuto. Proprietà ereditata <selettore> {empty-cells: <valore>;} |
· show. Mostra i bordi della cella. · hide. I bordi non vengono mostrati e apparirà solo uno spazio vuoto. |
|
caption-side La proprietà caption-side definisce il lato su cui vogliamo far comparire tale titolo. E' ereditata. La supporta solo Mozilla <selettore> {caption-side: <valore>;} table.tabella9 { |
· top. Caption sul lato superiore. · right. Caption sul lato destro. · bottom. Caption sul lato inferiore. · left. Caption sul lato sinistro. <table> |
30 Altre proprietà
Guida Layout dei siti con i CSS
5 Estensione orizzontale di un layout
6 Layout fluido
L'effetto fluido si può ottenere in svariati modi:
· non specificare in nessun modo la larghezza del contenitore principale nè usare margini, bordi o padding, e in tal caso si ha un layout fluido totale;
· attribuire del padding orizzontale al body;
· specificare una larghezza percentuale al contenitore principale;
· attribuire margini, padding o border (fissi o percentuali) al contenitore principale.
7 Layout fisso
|
la soluzione migliore, se proprio si deve pensare ad un layout fisso, è impostare la larghezza del contenitore principale a 760 pixels o meno. Ecco come ottenere un contenitore centrato e largo 760 pixels: |
body{ |
8 Layout elastico
usa il dimensionamento in em non solo per il testo ma anche per la larghezza degli elementi principali della pagina, cosicchè solo ridimensionando il carattere del browser è possibile agire sulla larghezza della pagina, ottenendo una sorta di effetto "zoom"
|
Si dimensiona il font-size del body con una misura relativa di modo che sia possibile ridimensionare il font tramite le opzioni del browser misura percentuale accettabile 76% un carattere medio impostato via browser, il risultato è all' incirca pari a 12 pixels |
css base di un layout elastico e centrato body{ |
|
A questo punto si dimensiona il container principale, e le sue eventuali colonne, solo in em, consentendo così, reimpostando le dimensioni del carattere del browser, di avere un effetto zoom |
1. header
2. navigazione
3. contenuti
4. footer
11 Layout monolitico o a colonna singola
Il laoyout monolitico si compone di quattro sezioni fondamentali:
in un layout monolitico si dovrebbe sempre specificare e dichiarare esplicitamente la larghezza dell'area principale. Non dichiarando la larghezza esplicitamente, il layout si adatta alla larghezza della finestra del browser.
un layout a colonna singola fluido
html,body{margin:0; padding: 0}
body{font-family: arial,sans-serif; font-size: 76%}
div#container{ /*nessuna regola necessaria*/ }
div#header{background: url(/sfondo.gif)}
h1{margin: 0;padding:0}
h2{color:#4078B8; font-size:1.5em; text-align:center}
div#navigation{background-color:#000; color: #fff}
div#content{padding:0 1.5em}
div#content p{line-height:1.3em}
div#footer{padding:0.5em; background-color:#B0D0E8; color:#000; text-align:center}
<body>
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
12 Layout monolitico
13 Layout monolitico fisso
<style type="text/css" media="print">
div#container{
width: auto;
}
</style>
trasformare un layout fluido in uno a larghezza fissa è molto semplice a questo punto: basterà aggiungere qualche regola CSS al body e al div con id container. Per delimitare spazialmente il contenitore è bene usare in questo caso dei bordi.
è importante controllare che la stampa di una pagina che lo utilizza venga bene
/*stili per il layout elastico*/
html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 76%;text-align: center}
div#container{width: 60em;margin: 0 auto;text-align: left;
border-left: 2px solid #36c;border-right: 2px solid #36c}
/*stili generici, su header e footer*/
div#header{background-color:#36C;color: #ff0}
h1,h2{margin: 0;padding:0}
h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}
h2{color: #999;font-size: 1.5em}
div#footer{text-align:center;padding: 0.5em;
background-color: #69c; color: #000}
div#footer a{color: #fff;font-weight: bold;text-decoration: underline}
/*stili specifici per il layout*/
div#navigation{background-color:#9cf}
div#content{padding: 1em}
14 Layout monolitico elastico
che tutte le sezioni di testo di un sito con layout elastico devono essere dimensionate relativamente, così come le eventuali largezze degli elementi. Per un layout monolitico, il contenitore principale viene dimensionato in em
15 Il problema del footer
16 Layout a due e tre colonne: introduzione
· header
· navigazione
· contenuti
· footer
18 Layout a due colonne: elementi di base
Le sezioni fondamentali di un layout a due colonne sono:
19 Layout a due colonne con il float
|
nel codice HTML la navigazione deve precedere i contenuti Due sono i passi preliminari da compiere: · rendere la sezione di navigazione float; · separare verticalmente i contenuti da essa, attraverso l'uso dei margini dichiarati sul div principale.
|
<body> |
|
volendo una colonna secondaria a larghezza fissa basterà dichiarare le dimensioni in pixel anzichè in em |
div#navigation{ |
|
si fa in modo che il footer non abbia elementi float alla sua destra attraverso la proprietà clear: |
div#footer{ |
20 Layout a due colonne con il float
Il layout che abbiamo visto non dà vincoli sulla lunghezza relativa delle due colonne
|
Se sappiamo a priori che in tutte le pagine in cui useremo un layout a due colonne con i float la colonna dei contenuti sarà più lunga della colonna di navigazione |
· separare le due colonne con un bordo fine; · separare le due colonne con l'uso del colore.
|
|
Layout a due colonne cromatiche Se la colonna dei contenuti è più lunga della colonna di navigazione |
assegniamo un colore di sfondo al container e al div principale. In questo caso la navigazione erediterà il colore del container e darà l'impressione di estendersi fino al footer |
|
altrimenti |
usare un piccola immagine alta pochi pixel da ripetere verticalmente su tutto il container. Questa immagine deve essere larga quanto la navigazione, e implicitamente introduce una condizione: la colonna di navigazione dovrà per forza essere dimensionata in pixel |
|
come ottenere un background che si ripete verticalmente lungo tutto il container |
div#container{ |
21 Layout a due colonne con posizionamento assoluto
non consente di avere la colonna di navigazione più lunga della colonna dei contenuti se vogliamo avere un footer a larghezza piena
|
HTML |
CSS |
|
|
la navigazione deve essere preceduta dai contenuti il container viene dichiarato position:relativeper consentire il posizionamento al suo interno Il div dei contenuti lascia spazio sulla destra per la navigazione permette al footer di disporsi a fondo pagina riprendendosiil flusso degli elementi la navigazione è posizionata assolutamente |
<body> |
div#container{ |
22 Layout a due colonne fluidi
Le versioni fluide presentano un indubbio vantaggio: sono già pronte per la stampa. Hanno uno svantaggio rispetto alle versioni fisse: stringendo al limite la finestra del browser il testo delle due colonne si sovrappone, fino a far scivolare la navigazione parzialmente sotto i contenuti nel caso della versione con la proprietà float.
|
proprietà min-width non è supportata da Internet Explorer, nè nella versione 5.x nè nella 6. Ha effetto invece sui browser Gecko e Opera |
div#container{ |
|
Per Internet Explorer è una soluzione propretaria e non standard è un espressione condizionale ternaria che dice ad Internet Explorer: se la larghezza della finestra del browser è maggiore di 600 pixels, dai al container tutta la larghezza possibile, altrimenti assegna al container una larghezza di 600 pixels |
div#container{ |
· header
· navigazione
· contenuti
· sezione extra
· footer
23 Layout a tre colonne: introduzione
la sezione dei contenuti dovrebbe essere la più corposa, e quindi la colonna centrale la più lunga.
la versione a tre colonne con i float rispetto all'analogo con posizionamenti ha il pregio di non imporre vincoli sulla lunghezza relativa delle colonne in presenza del footer. D'altra parte, vincola l'ordine di codifica dell'HTML.
la tendenza è avere le due colonne laterali a larghezza fissa e la colonna centrale fluida. Le due colonne generalmente si aggirano attorno ai 150-200 pixels di larghezza ciascuna
Per ottenere colonne laterali elastiche, basterà dimensionare il font-size del body in percentuale e dimensionare le colonne laterali e i margini della colonna centrale in em: questa tecnica non può andar bene, però, con layout che usano immagini di background.
Per la scelta della larghezza totale, c'è da dire che un layout a tre colonne si presenta generalmente fluido, a larghezza totale, occupa cioè in ampiezza tutta la larghezza della finestra del browser
25 Dettagli da non trascurare
Internet Explorer non lo consente per caratteri dimensionati in pixels. Usare quindi una misura relativa è una scelta più attenta verso l'utente
dimensionamento in em accordato con il dimensionamento relativo dei font
margini e padding orizzontali di un elemento, questi dovrebbero essere concordi con l'unità di misura della sua dimensione orizzontale: se per esempio abbiamo dimensionato le colonne laterali in pixel, margini e padding dovrebbero essere espressi in pixel
<body>
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="extra"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
26 Layout a tre colonne con float
Le due colonnedevonoprecedere il contenuto nel codice HTML
