Questa è la traduzione in italiano dell'unica versione ufficiale del documento che è la versione originale in inglese "Cascading Style Sheets, level 1" su http://www.w3.org/TR/1999/REC-CSS1-19990111. I possibili errori dovuti alla traduzione, sono di esclusiva responsabilità del traduttore Pasquale Popolizio e non sono in alcun modo imputabili al W3C. Questa traduzione è stata realizzata nell'agosto del 2004. Per qualsiasi commento su questa traduzione rivolgersi a Pasquale Popolizio.
REC-CSS1-19990111
| Questa versione: | http://www.w3.org/TR/1999/REC-CSS1-19990111 |
| Ultima versione: | http://www.w3.org/TR/REC-CSS1 |
| Precedente versione: | http://www.w3.org/TR/REC-CSS1-961217 |
| Autori: |
Håkon Wium Lie (howcome@w3.org) Bert Bos (bert@w3.org) |
Questo documento è una Raccomandazione del W3C. E' stato analizzato dai Membri del W3C (http://www.w3.org/) ed ha ottenuto un generale consenso che la specifica è appropriata per l'uso. E' un documento stabile e può essere usato come materiale di riferimento o citato come riferimento normativo da altri documenti. Il W3C promuove un'ampia diffusione di questa Raccomandazione.
Un elenco delle attuali Raccomandazioni del W3C e di altri documenti tecnici si trova su http://www.w3.org/TR/.
Questo documento è una versione corretta del documento dapprima rilasciato il 17 Dicembre 1996. Le modifiche rispetto alla versione originale sono illustrate nell'Appendice F. La lista di errori conosciuti in questa specifica è disponibile su http://www.w3.org/Style/CSS/Errata/REC-CSS1-19990111-errata
Questo documento specifica il livello 1 della tecnica dei Fogli di Stile a Cascata (Cascading Style Sheet - CSS1). CSS1 è una semplice tecnica di foglio stile che permette ad autori e utenti di applicare stili (per es. font, colori e spaziature) ai documenti HTML. Il linguaggio CSS1 è leggibile e scrivibile dall'uomo, ed esprime lo stile nella comune terminologia del desktop publishing.
Una delle fondamentali caratteristiche dei CSS è che i foglio di stile scendono, cadono a cascata; gli autori possono applicare un foglio stile preferito, mentre l'utente può avere un foglio stile personale da modificare per handicap personali o tecnologici. Le regole per risolvere conflitti fra differenti fogli di stile sono definiti in questa specifica.
Questa Raccomandazione è un'attività del W3C nell'area dei Fogli di Stile. Per maggiori informazioni sui fogli di stile, vedere [1].
Riassunto
Terminologia
1
Concetti base
1.1
Immissione in HTML
1.2
Raggruppamento
1.3
Ereditarietà
1.4
Selettore class
1.5
Selettore ID
1.6
Selettori di contesto
1.7
Commenti
2
Pseudo-classi e pseudo-elementi
2.1
Pseudo-classi collegamenti
2.2
Pseudo-elementi tipografici
2.3
Lo pseudo-elemento 'first-line'
2.4
Lo pseudo elemento 'first-letter'
2.5
Gli pseudo-elementi nei selettori
2.6
Pseudo-elementi multipli
3
Caduta a cascata
3.1
'important'
3.2
L'ordine di cascata
4
Il modello di formattazione
4.1
Gli elementi block-level
4.1.1
La formattazione verticale
4.1.2
La formattazione orizzontale
4.1.3
Gli elementi di lista
4.1.4
Elementi flottanti
4.2
Elementi inline
4.3
Elementi sostituiti
4.4
L'altezza delle linee
4.5
Il fondo
4.6
Gli elementi 'BR'
5
Le proprietà dei CSS1
5.1
Le notazioni per valori di proprietà
5.2
Le proprietà dei font
5.2.1
Associazione dei font
5.2.2
'font-family'
5.2.3
'font-style'
5.2.4
'font-variant'
5.2.5
'font-weight'
5.2.6
'font-size'
5.2.7
'font'
5.3
Proprietà di colore e sfondo
5.3.1
'color'
5.3.2
'background-color'
5.3.3
'background-image'
5.3.4
'background-repeat'
5.3.5
'background-attachment'
5.3.6
'background-position'
5.3.7
'background'
5.4
Proprietà di testo
5.4.1
'word-spacing'
5.4.2
'letter-spacing'
5.4.3
'text-decoration'
5.4.4
'vertical-align'
5.4.5
'text-transform'
5.4.6
'text-align'
5.4.7
'text-indent'
5.4.8
'line-height'
5.5
Proprietà del box
5.5.1
'margin-top'
5.5.2
'margin-right'
5.5.3
'margin-bottom'
5.5.4
'margin-left'
5.5.5
'margin'
5.5.6
'padding-top'
5.5.7
'padding-right'
5.5.8
'padding-bottom'
5.5.9
'padding-left'
5.5.10
'padding'
5.5.11
'border-top-width'
5.5.12
'border-right-width'
5.5.13
'border-bottom-width'
5.5.14
'border-left-width'
5.5.15
'border-width'
5.5.16
'border-color'
5.5.17
'border-style'
5.5.18
'border-top'
5.5.19
'border-right'
5.5.20
'border-bottom'
5.5.21
'border-left'
5.5.22
'border'
5.5.23
'width'
5.5.24
'height'
5.5.25
'float'
5.5.26
'clear'
5.6
Proprietà di classificazione
5.6.1
'display'
5.6.2
'white-space'
5.6.3
'list-style-type'
5.6.4
'list-style-image'
5.6.5
'list-style-position'
5.6.6
'list-style'
6
Unità
6.1
Unità di grandezza
6.2
Unità percentuali
6.3
Unità di colore
6.4
URL
7
La Conformità dei CSS1
7.1
Compatibilità futura
8
Riferimenti
9
Ringraziamenti
Appendice A: Un tipico foglio di stile per HTML 2.0
Appendice B: Grammatica dei CSS1
Appendice C: Codifica
Appendice D: Correzione di gamma
Appendice E: L'applicabilità e l'estendibilità dei CSS1
Appendice F: Modifiche dalla versione del 17 dicembre 1996
Nota del traduttore: per permettere una più agevole lettura e corrispondenza con i termini tecnici inglesi, si riporta tra doppia parentesi quadra [[ ]], l'equivalente inglese del termine.
Nel testo di questa specifica, gli apostrofi('...') caratterizzano una citazione HTML o CSS.
Disegnare semplici fogli di stile è facile. E' necessario solo conoscere un po' di HTML e alcuni termini base da desktop publishing. Per es., per assegnare al colore del testo di elementi 'H1' il blu, si può dire:
H1 { color: blue }
L'esempio precedente è una semplice regola CSS. Una regola consiste di due parti principali: il selettore ('H1') e la dichiarazione ('color:blue'). La dichiarazione ha due parti: la proprietà ('color') ed il valore ('blue'). Mentre l'esempio precedente prova ad influenzare solo una delle proprietà necessarie per mostrare un documento HTML, esso si qualifica come foglio di stile. Insieme ad altri fogli di stile (una fondamentale caratteristica dei CSS è che i fogli di stile vanno insieme), esso determinerà la presentazione finale del documento.
Il selettore è il collegamento fra il documento HTML ed il foglio di stile, e tutti i tipi di elementi HTML sono possbili selettori. I tipi di elementi HTML sono definiti nella specifica HTML [2].
La proprità 'color' è una fra le circa 50 proprietà che determinano la presentazione di un documento HTML. L'elenco delle proprietà e dei loro possibili valori è definito in questa specifica.
Gli autori HTML devono scrivere fogli di stile solo se essi vogliono suggerire uno specifico stile per i loro documenti. Ogni User Agent (UA, spesso un browser web o client web) avrà uno foglio stile di default che presenta i documenti in un ragionevole - ma forse banale - modo. L'Appendice A contiene un esempio di foglio di stile per presentare un documento HTML così come suggerito dalla specifica HTML 2.0 [3].
La grammatica formale per il linguaggio CSS1 viene definita nell'Appendice B.
Affinché i fogli di stile possano influenzare la presentazione l'User Agent deve essere a conoscenza della loro esistenza. La specifica HTML [2] definisce come collegare l'HTML agli style sheets. Questa sezione è quindi informativa, ma non normativa:
<HTML>
<HEAD>
<TITLE>title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/cool" TITLE="Cool">
<STYLE TYPE="text/css">
@import url(http://style.com/basic);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Headline is blue</H1>
<P STYLE="color: green">While the paragraph is green.
</BODY>
</HTML>
L'esempio mostra quattro modi di combinare fogli di stile e HTML: usando l'elemento 'LINK' per collegare un foglio di stile esterno, un elemento 'STYLE' all'interno dell'elemento 'HEAD', un foglio di stile importato usando la notazione CSS '@import', e un attributo 'STYLE' su un elemento all'interno del 'BODY'. L'ultima opzione unisce lo stile con il contenuto e vanifica i vantaggi dei tradizionali fogli di stile.
L'elemento 'LINK' si riferisce a fogli di stile alternativi che l'utente può selezionare, mentre i fogli di stile importati sono automaticamente fusi insieme al resto del foglio di stile.
Di norma, gli User Agent ignorano tags non conosciuti. Ne risulta che i vecchi User Agent ignoreranno l'elemento 'STYLE', ma il suo contenuto sara trattato come parte del corpo del documento, e mostrato come tale. Durante una fase di transizione, il contenuto dell'elemento 'STYLE' può essere nascosto usando i commenti SGML:
<STYLE TYPE="text/css"><!--
H1 { color: green }
--></STYLE>
Allorquando l'elemento 'STYLE' viene diachiarato come "CDATA" in DTD (come definito in [2]), conformemente i parser SGML non considereranno il su citato foglio di stile come un commento che deve essere rimosso.
Per ridurre la dimensione del foglio di stile, si possono raggruppare i selettori in liste separate da virgola:
H1, H2, H3 { font-family: helvetica }
Ugualmente, possono essere raggruppate le dichiarazioni:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
In più, alcune proprietà possiedono la loro propria sintassi di raggruppamento:
H1 { font: bold 12pt/14pt helvetica }
che è equivalente agli esempi precedenti.
Nel primo esempio, all'elemento 'H1' è stato applicato il colore blu. Supponiamo che ci sia un elemento 'H1' con all'interno un elemento 'EM':
<H1>The headline <EM>is</EM> important!</H1>
Se nessun colore è stato assegnato all'elemento 'EM', questo erediterà il colore dell'elemento genitore, per es. apparirà anch'esso in blu. Altre proprietà di stile sono ereditarie, per esempio, 'font-family' e 'font-size'.
Per applicare ad un documento una proprità di stile di default, si può applicare la proprietà ad un elemento dal quale discendono tutti gli elementi visibili. Nei documenti HTML l'elemento 'BODY' può servire a questo scopo:
BODY {
color: black;
background: url(texture.gif) white;
}
Questo funzionerà anche se l'autore ha omesso il tag 'BODY' (che è legale), poiché il parser HTML dedurrà il tag mancante. L'esempio precedente applica il colore nero al testo ed un'immagine come sfondo. Lo sfondo sarà bianco se l'immagine non è disponibile.(Vedi il paragrafo 5.3 per maggiori informazioni).
Alcune proprietà di stile non sono ereditate dall'elemento genitore. Molto spesso è intuitivo il perché. Per es. la proprietà 'background' non è ereditaria, ma lo sfondo dell'elemento genitore si mostrerà di default attraverso.
Spesso, il valore di una proprietà è una percentuale riferita ad un'altra proprietà.
P { font-size: 10pt }
P { line-height: 120% } /* relativo al 'font-size', per esempio 12pt */
Per ogni proprietà che permette valori percentuali, è definita a quale proprietà essa si riferisce. Gli elementi figli di 'P' erediteranno il valore calcolato di 'line-height' (per esempio 12pt), non la percentuale.
Per aumentare la possibilità di controllo sugli elementi, è stato aggiunto all'HTML [2]: un nuovo attributo: 'CLASS'. Tutti gli elementi all'interno dell'elemento 'BODY' possono essere classificati, e la classe può essere indicata nei fogli di stile:
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
H1.pastoral { color: #00FF00 }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=pastoral>Way too green</H1>
</BODY>
</HTML>
Le regole normali dell'ereditarietà si applicano agli elementi classificati; essi ereditano i valori dai loro genitori nella struttura del documento.
Si possono indicare tutti gli elementi con la stessa classe omettendo il nome del tag nel selettore:
.pastoral { color: green } /* tutti gli elementi con CLASS pastoral */
Può essere specificata solo una classe per selettore; 'P.pastoral.marine' è comunque un selettore non valido nei CSS1. (Selettori di contesto, descritti in seguito, possono avere una classe per selettore semplice).
I CSS danno tanto potere all'attributo CLASS, che in molti casi non importa a quale elemento HTML la classe è attribuita - tu puoi emulare ogni elemento con ogni altro. Non è raccomandato fare affidamento su questo potere, poiché esso rimuove il livello di struttura che ha un significato universale (gli elementi HTML). Una struttura basata su CLASS è usata solo all'interno di un dominio ristretto, dove il significato di una classe è stato reciprocamente concordato.
L'HTML [2] introduce anche l'attributo 'ID' al quale si deve garantire un unico valore in tutto il documento. Esso può essere di importanza speciale come selettore di foglio di stile, e può essere indicato con il prefisso '#':
#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }
<P ID=z98y>Wide text</P>
Nell'esempio precedente, il primo selettore si accompagna all'elemento 'P' a causa del valore dell'attributo 'ID'. Il secondo selettore specifica sia un tipo di elemento ('H1') che un valore ID, e non si accompagna all'elemento 'P'.
Utilizzando l'attributo ID come selettore, si possono attribuire proprietà di stile su una base per-elemento. mentre i fogli di stile sono stati disegnati per aumentare la struttura del documento; questa caratteristica permette agli autori di creare documenti che si presentano bene senza avvantaggiarsi degli elementi di struttura dell'HTML. Si sconsiglia questo uso dei fogli di stile.
L'ereditarietà evita agli autori di CSS di scrivere molto. Invece di applicare tutte le proprietà di stile, si possono creare proprietà di default e poi indicare le eccezioni. Per dare ad un elemento 'EM' all'interno di un 'H1' un colore differente, si può specificare:
H1 { color: blue }
EM { color: red }
Applicando questo stile, tutte le parti enfatizzate dentro o fuori 'H1' saranno rosse. Probabilmente si voleva che solo l'elemento 'EM' all'interno 'H1' fosse rosso e ciò può essere specificato con:
H1 EM { color: red }
Il selettore è ora un modello di ricerca sul gruppo di elementi aperti, e questo tipo di selettore viene indicato come selettore di contesto. I selettori di contesto consistono di vari e semplici selettori separati da uno spazio vuoto (tutti i selettori descritti fino ad ora sono selettori semplici). Solo gli elementi che incontrano l'ultimo selettore semplice (in questo caso l'elemento 'EM') sono indicat. I selettori di contesto nei CSS1 cercano relazioni con progenitore, ma altre relazioni (per es. genitore-figlio) potranno essere introdotte in future revisioni. Nell'esempio precedente, il modello di ricerca è valido se 'EM' è un discendente di 'H1', per es. se 'EM' è dentro un elemento 'H1'.
UL LI { font-size: small }
UL UL LI { font-size: x-small }
Qui, il primo selettore è valido per gli elementi 'LI' con almeno un 'UL' progenitore. Il secondo selettore incontra una sottospecie del primo, per es. gli elementi 'LI' con almeno due progenitori 'UL'. Il conflitto è risolto dal secondo selettore che è più specifico a causa del più lungo modello di ricerca. Per maggiori informazioni, vedi ordine di cascata (paragrafo 3.2).
I selettori di contesto possono riferirsi a tipi di elementi, attributi CLASS, attributi ID o combinazioni di questi.
DIV P { font: small sans-serif }
.reddish H1 { color: red }
#x78y CODE { background: blue }
DIV.sidenote H1 { font-size: large }
Il primo selettore è valido per tutti gli elementi 'P' che hanno un 'DIV' fra i progenitori. Il secondo selettore è valido per tutti gli elementi 'H1' che hanno un progenitore della classe 'reddish'. Il terso selettore è valido per tutti gli elementi 'CODE' che sono discendenti di un elemento con 'ID=x78y'. Il quarto selettore è valido per tutti gli elementi 'H1' che hanno un progenitore 'DIV' con classe 'sidenote'.
E' possibile raggrupare più selettori di contesto:
H1 B, H2 B, H1 EM, H2 EM { color: red }
Che è equivalente a:
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
I commenti di testo nei fogli di stile CSS sono similia quelli del linguaggio di programmazione C [7]:
EM { color: red } /* rosso */
I commenti non possono essere nidificati. Per un parser CSS, un commento è equivalente ad uno spazio vuoto.
Nei CSS, lo stile è di norma applicato ad un elemento basato sulla sua posizione nella struttura del documento. Questo semplice modello è sufficiente per una larga varietà di stili, ma non copre alcuni effetti comuni. Il concetto di pseudo-classi e pseudo-elementi estende la capacità dei CSS di permettere ad informazioni esterne di influenzare il processo di formattazione.
Pseudo-classi e pseudo-elementi possono essere utilizzati nei selettori CSS, ma non esistono nel codice HTML. Piuttosto, essi sono "inseriti" dagli User Agent in certe condizioni per essere usati insieme ai fogli di stile. Si chiamano "classi" e "elementi" poiché questo è un modo conveniente di descrivere il loro comportamento. In particolare, il loro comportamento è definito come una sequenza di tag immaginaria.
Gli pseudo-elementi sono usati per indicare sottoparti di elementi, mentre le pseudo-classi permettono ai fogli di stili di differenziare fra differenti tipi di elementi.
Gli User Agent di norma mostrano i collegamenti visitati di recente in maniera differente da qualli più remoti. Nei CSS1, ciò è trattato attreverso le pseudo-classi sull'elemento 'A'.
A:link { color: red } /* collegamento non visitato */
A:visited { color: blue } /* collegamento già visitato */
A:active { color: lime } /* collegamento attivo */
Tutti gli elementi 'A' con un attributo 'HREF' saranno messi in uno e solo uno di questi gruppi; (per es. i collegamenti target non sono interessati). Gli User Agent possono scegliere di muovere un elemento da 'visited' a 'link' dopo un certo periodo. Un link 'active' è quello che attualmente selezionato (per es. da una pressione del bottone del mouse) dall'utente.
La formattazione di una pseudo-classe collegamento è come se la classe fosse inserita manualmente. Un User Agent non necessariamente deve riformattare un documento mostrato alla transizione del collegamento della pseudo-classe. Per es. un foglio di stile può specificare che il 'font-size' di un collegamento 'active' dovrebbe essere più grande di un collegamento 'visited', ma l'User Agent non necessariamente deve dinamicamente riformattare il documento quando l'utente seleziona il collegamento 'visited'.
Il selettori di pseudo-classe non si associano alle classi normali, e viceversa. La regola di stile nell'esempio successivo quindi non avrà alcuna influenza:
A:link { color: red }
<A CLASS=link NAME=target5> ... </A>
Nei CSS1, le pseudo-classi collegamento non hanno effetto su altri elementi diversi da 'A'. Quindi, il tipo di elemento può essere omesso dal selettore:
A:link { color: red }
:link { color: red }
I due selettori precedenti selezioneranno gli stessi elementi in CSS1.
I nome delle pseudo-classi non sono sensibili alla maiuscole.
Le pseudo-classi possono essere usate nei selettori di contesto:
A:link IMG { border: solid blue }
Inoltre le pseudo-classi possono essere combinate con le classi narmali:
A.external:visited { color: blue }
<A CLASS=external HREF="http://out.side/">external link</A>
Se il collegamento nell'esempio precedente è stato visitato, esso sarà reso in blu. Notare che i nomi della classi normali precedono le pseudo-classi nel selettore.
Alcuni comuni effetti tipografici non sono associati con gli elementi strutturali, ma con gli elementi tipografici così come formattati sul fondo. Nei CSS1, due elementi tipografici possono essere applicati con gli pseudo-elementi: la prima linea di un elemento e la prima lettera.
Caratteristiche essenziali dei CSS1: Gli User Agent possono ignorare tutte le regole con ':first-line' o ':first-letter' nel selettore, o, in alternativa, supportare solo una sottospescie delle proprietà su questi pseudo-elementi (vedi capitolo 7)
Lo pseudo-elemento 'first-line' viene utilizzato per applicare stili speciali alla prima linea così come formattato sul fondo.
<STYLE TYPE="text/css">
P:first-line { font-variant: small-caps }
</STYLE>
<P>The first line of an article in Newsweek.
Su un User Agent testuale, ciò potrebbe essere formattato come:
THE FIRST LINE OF AN article in Newsweek.
La sequenza immaginaria dei tag nell'esempio precedente è:
<P> <P:first-line> The first line of an </P:first-line> article in Newsweek. </P>
Il tag di chiusura di 'first-line' è inserito alla fine della prima linea così come formattato sul fondo.
Lo pseudo-elemento 'first-line' può essere applicato solo ad elementi block-level.
Lo pseudo elemento 'first-line' è similead un elemento inline, ma con alcune limitazioni. Solo le seguenti proprietà si applicano all'elemento 'first-line' : proprietà dei font (5.2), proprietà di colore e di background (5.3), 'word-spacing' (5.4.1), 'letter-spacing' (5.4.2), 'text-decoration' (5.4.3), 'vertical-align' (5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8), 'clear' (5.5.26).
Lo pseudo-elemento 'first-letter' viene utilizzato per effetti di 'initial caps' e 'drop caps', che sono tipici effetti tipografici. E' simile ad un elemento inline se la sua proprità 'float' è 'none', diversamente è simile ad un elemento flottante. Queste sono le proprietà che si applicano agli pseudo-elementi 'first-letter': proprietà dei font (5.2), proprietà di colore e di background (5.3), 'text-decoration' (5.4.3), 'vertical-align' (only if 'float' is 'none', 5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8), proprietà di margin (5.5.1-5.5.5), proprietà di padding (5.5.6-5.5.10), proprietà di border (5.5.11-5.5.22), 'float' (5.5.25), 'clear' (5.5.26).
Ecco come realizzare un dropcap di lettera iniziale che prende due linee:
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article in The Economist.</P>
</BODY>
</HTML>
Se un User Agent testuale supporta lo pseudo-elemento "first-letter' (e probabilmente non potrà), l'esempio precedente potrebbe essere formattato come:
___ | HE FIRST few | words of an article in the Economist.
La sequenza immaginaria dei tag è:
<P> <SPAN> <P:first-letter> T </P:first-letter>he first </SPAN> few words of an article in the Economist. </P>
Nota che il tag dello pseudo-elemento 'first-letter' è adiacente il contenuto (per esempio il carattere iniziale), mentre il tag iniziale dello pseudo-elemento 'first-line' viene inserito proprio dopo il tag iniziale dell'elemento al quale è applicato.
L'User Agent definisce quali caratteri sono all'interno dell'elemento 'first-letter'. Di norma, i doppi apici che precedono la prima lettera dovrebbero essere inclusi:
|| /\ bird in
/ \ the hand
/----\ is worth
/ \ two in
the bush," says an
old proverb.
Quando il paragrafo comincia con altre punteggiature (per es. parentesi e punti di ellissi) o altri caratteri che di norma non sono considerate lettere (per es. numeri e simboli matematici), gli pseudo-elementi 'first-letter' vengono in genere ignorati.
Alcune lingue possono avere regole specifiche su come trattare certe combinazioni di lettere. Nell'olandese, per esempio, se la combinazione di lettere "ij" è all'inizio di una parola, esse dovrebbero essere entrambe considerate all'interno dello pseudo-elemento 'first-letter'.
Lo pseudo-elemento 'first-letter' può essere applicato solo ad un elemento block-level.
In un selettore di contesto, gli pseudo-elementi sono permessi solo alla fine del selettore:
BODY P:first-letter { color: purple }
Gli pseudo-elementi possono essere combinati con le classi nei selettori:
P.initial:first-letter { color: red }
<P CLASS=initial>First paragraph</A>
L'esempio precedente vedrebbe colorato in rosso la prima lettera di tutti gli elementi 'P' con 'CLASS=initial'. Allorquando vengono combinati con classi o pseudo-classi, gli pseudo-elementi devono essere specificati alla fine del selettore. Può essere specificato un solo pseudo-elemento per selettore.
Possono essere combinati diversi pseudo-elementi:
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
<P>Some text that ends up on two lines</P>
In questo esempio, la prima lettera di ogni elemento 'P' dovrebbe essere verde con una dimensione del font di 24pt. Il resto della prima linea (come formattato sul fondo) dovrebbe essere blu mentre il resto del paragrafo dovrebbe essere rosso. Assumendo che prima della parola "ends" ci sarà un intervallo di linea, la sequenza immaginaria dei tag è:
<P> <P:first-line> <P:first-letter> S </P:first-letter>ome text that </P:first-line> ends up on two lines </P>
Nota che l'elemento 'first-letter' è all'interno dell'elemento 'first-line'. Le proprietà relative a 'first-line' saranno eriditate da 'first-letter', ma saranno sovrascritte dalle stesse proprietà applicate a 'first-letter'.
Se uno pseudo-elemento spezza un elemento reale, i tag extra necessari saranno rigenerati nella sequenza immaginaria dei tag. Per es., se un elemento 'SPAN' è su un tag </P:first-line>, devono essere generati una quantità di SPAN iniziali e finali e la sequenza immaginaria dei tag diventa:
<P> <P:first-line> <SPAN> This text is inside a long </SPAN> </P:first-line> <SPAN> span element </SPAN>
Nei CSS, più di un foglio di stile può influenzare la presentazione simultaneamente. Ci sono due ragioni principali per questa caratteristica: la modularità e l'equilibrio autore/utente.
@import url(http://www.style.org/pastoral);
@import url(http://www.style.org/marine);
H1 { color: red } /* sovrascrive fogli importati */
A volte possono nascere conflitti fra fogli di stile che influenzano la presentazione. La risoluzione del conflitto è basato su ogni regola che ha un peso. Di default, il peso delle regole dell'utente è minore del peso delle regole dell'autore del documento. Per esempio, se nascono conflitti fra i fogli di stile di un documento e lo stile personale dell'utente, verranno utilizzate le regole dell'autore. Sia le regole dell'utente che quelle dell'autore sovrascrivono i valori di default dell'User Agent.
Anche fogli di stile importati cadono a cascata con ogni altro, nell'ordine in cui vengono importati, in accordo con le regole di cascata definite prima. Ogni regola specificata nel foglio di stile sovrascrive le regole nei fogli di stile importati. Cioè, i fogli di stile importati hanno un ordine di cascata più basso rispetto alle regole previste nel foglio di stile stesso. I fogli di stile importati possono a loro volta importare e sovrascrivere altri fogli di stile, e via di seguito.
Nei CSS1, tutte le regole '@import' devono essere presenti all'inizio del foglio di stile, prima di ogni dichiarazione. E' facile notare che le regole nel foglio di stile stesso sovrascrivono le regole nei fogli di stile importati.
Gli autori di fogli di stile possono aumentare i pesi delle loro dichiarazioni:
H1 { color: black ! important; background: white ! important }
P { font-size: 12pt ! important; font-style: italic }
Nell'esempio precedente, le prime tre dichiarazioni possiedono un peso aumentato, mentre l'ultima dichiarazione ha peso normale.
Una regola dell'utente con una dichiarazione importante sovrascriverà una regola dell'autore con una dichiarazione normale. Una regola dell'autore con una dichiarazione importante sovrascriverà una regola dell'utente con una dichiarazione importante.
I conflitti di regole sono intrinsechi alla tecnica dei CSS. Per trovare il valore per una combinazione elemento/proprietà, deve essere utilizzato il seguente algoritmo:
LI {...} /* a=0 b=0 c=1 -> specificità = 1 */
UL LI {...} /* a=0 b=0 c=2 -> specificità = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -> specificità = 3 */
LI.red {...} /* a=0 b=1 c=1 -> specificità = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificità = 13 */
#x34y {...} /* a=1 b=0 c=0 -> specificità = 100 */
Pseudo-elementi e pseudo-classi vengono contati come elementi e classi normali, rispettivamente.
La ricerca del valore della proprietà può essere determinata ogni volta che una regola ha un peso più alto di altre regole che si applicano alla stessa combinazione elemento/proprietà.
Questa strategia dà al foglio di stile dell'autore più peso di quello dell'utente. E' comunque importante che l'utente abbia l'abilità di azzerare l'influenza di un determinato foglio di stile, per es. attraverso un menù a tendina.
Una dichiarazione nell'attributo 'STYLE' di un elemento (vedi paragrafo 1.1 per un esempio) ha lo stesso peso di una dichiarazione con un selettore con ID che è specificato alla fine del foglio di stile:
<STYLE TYPE="text/css">
#x97z { color: blue }
</STYLE>
<P ID=x97z STYLE="color: red">
Nell'esempio precedente, il colore dell'elemento 'P' sarebbe rosso. Sebbene la specificità è la stessa per entrambi le dichiarazioni, la dichiarazione nell'attributo 'STYLE' sovrascriverà quello nell'elemento 'STYLE' come previsto dalla regola di ordine di cascata numero 5.
L'User Agent può sceglieredi onorare altri attributi stilistici dell'HTML, per es. 'ALIGN'. Se è così, questi attributi vengono tradotti nelle corrispondenti regole di CSS con specificità pari a 1. Le regole vengono ritenute all'inizio del foglio di stile dell'autore e possono essere sovrascritte da successive regole di foglio di stile. In una fase di transizione, tale politica determinerà una più semplice coabitazione degli attributi stilistici con i fogli di stile.
I CSS1 prevede un semplice modello di formattazione concepito per il box, dove gli elementi formattati vengono racchiusi in uno o più box rettangolari. (Gli elementi che hanno un valore di visualizzazione di 'none' non sono formattati e così non verranno racchiusi in un box.) Tutti i box hanno un'area centrale di contenuto con un eventuale padding (in italiano: cuscinetto, imbottittura) di contorno, area di border (in italiano: bordo) e di margin (in italiano: margine).
_______________________________________
| |
| margin (trasparente) |
| _________________________________ |
| | | |
| | border | |
| | ___________________________ | |
| | | | | |
| | | padding | | |
| | | _____________________ | | |
| | | | | | | |
| | | | contenuto | | | |
| | | |_____________________| | | |
| | |___________________________| | |
| |_________________________________| |
|_______________________________________|
| larghezza elemento |
| larghezza box |
La dimensione del margin, border e padding vengono stabilite con le rispettive proprietà di margin (5.5.1-5.5.5), proprietà di padding (5.5.6-5.5.10), e proprietà di border (5.5.11-5.5.22). L'area di padding usa lo stesso sfondo dell'elemento stesso (stabilito con le proprietà di background (5.3.2-5.3.7)). Il colore e lo stile per il border è stabilito con le proprietà di border. I margini sono sempre trasparenti, così che l'elemento genitore si vede attraverso.
La dimensione del box è la somma della larghezza (width) dell'elemento (per es. testo formattato o immagine), e le aree di padding, di border e di margin
Dal punto di vista della formattazione ci sono due tipi di elementi: block-level e inline.s
Gli elementi con un valore di 'display' su 'block' o 'list-item' sono elementi block-level. Anche gli elementi floating (gli elementi con un valore di 'folat' diverso da 'none') sono considerati elementi block-level.
Gli esemi seguenti mostrano come margin e padding formattano un elemento 'UL' con due figli. Per semplificare il diagramma non ci sono bordi. Da fare attenzione che in questo esempio le singole lettere costanti (A, B, C, etc.), non fanno parte della sintassi esatta dei CSS1, ma rappresentano un modo conveniente di far vedere i fogli di stile nella figura.
<STYLE TYPE="text/css">
UL {
background: red;
margin: A B C D;
padding: E F G H;
}
LI {
color: white;
background: blue; /* testo bianco su blu */
margin: a b c d;
padding: e f g h;
}
</STYLE>
..
<UL>
<LI>1st element of list
<LI>2nd element of list
</UL>
_______________________________________________________ | | | A UL margin (trasparente) | | _______________________________________________ | | D | | B | | | E UL padding (rosso) | | | | _______________________________________ | | | | H | | F | | | | | a LI margin (trasparente, | | | | | | così si vede il rosso) | | | | | | _______________________________ | | | | | | d | | b | | | | | | | e LI padding (blu) | | | | | | | | | | | | | | | | h peimo elemento di lista f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________| | | | | | | | | | | | | max(a, c) | | | <- nota il max | | | _______________________________ | | | | | | | | | | | | | | d | e LI padding (blu) | | | | | | | | | | | | | | | | h secondo elemento di lista f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________| | | | | | | | | | | | | c LI margin (trasparente, | | | | | | così si vede il rosso) | | | | | |_______________________________________| | | | | | | | | G | | | |_______________________________________________| | | | | C | |_______________________________________________________|
Tecnicamente, le proprietà di padding e di margin non sono ereditate. Ma, come mostra l'esempio, il posizionamento di un elemento è ralativo agli antenati e ai fratelli, così che le proprietà di padding e di margin degli elementi hanno effetto sui loro elementi figli.
Se ci fossero stati bordi nell'esempio precedente essi sarebbero apparsi tra il padding ed i margini.
Il diagramma seguente introduce un'utile terminologia:
--------------- <-- top
top margin
---------------
top border
---------------
top padding
+-------------+ <-- inner top
| | | | | | | |
|--left--|--left--|--left--|-- content --|--right--|--right--|--right--|
| margin | border | padding| | padding | border | margin |
| | | | | | | |
+-------------+ <-- inner bottom
^ ^ ^ ^
left left inner edge right inner edge right
outer outer
edge bottom padding edge
---------------
bottom border
---------------
bottom margin
--------------- <-- bottom
Il left outer edge (limite esterno sinistro) è il limite di un elemento considerando anche il suo padding, border e margin. Il left inner edge (limite interno sinistro) è il limite del solo contenuto, all'interno di ogni eventuale padding, border o margin. Il top è l'apice dell'elemento considerando anche il padding, border e margin; esso è definito solo per elementi inline e floating, non per quelli block-level non-floating. Il inner top (top interno) è il limite superiore del contentuo, all'interno di ogni padding, border o margin. The bottom è l'apice del contenuto, all'interno di ogni eventuale p padding, border e margin; esso è definito solo per elementi inline e floating, non per quelli block-level non-floating. The inner bottom è la parte inferiore dell'elemento, all'interno di ogni eventuale padding, border o margin.
Il width width di un elemento è la larghezza del contenuto, per esempio la distanza fra il limite interno sinistro ed il limite interno destro. Il height è l'altezza del contenuto, per es. la distanza fra il top interno ed la parte inferiore dell'elemento.
La larghezza del margine in elementi block-level non-floating specifica la distanza minima ai limiti dei box vicini. Due o più margini verticali adiacenti (per es. senza border, padding o contenuto fra loro) sono collassati per usare il massimo dei valori di margin. In molti casi, dopo il collassamento dei margini verticali, il risultato è più soddisfacente e vicino alle aspettative dell'autore. Nell'esempio precedente, i margini fra i due elementi 'LI' sono collassati utilizzando il massimo del 'margin-bottom' del primo elemento 'LI' ed il 'margin-top' del secondo elemento 'LI'. Ugualmente, se il padding fra l'elemento 'UL' ed il primo elemento 'LI' (la E nell'esempio) fosse stato zero, i margini di UL e del primo elemento LI sarebbero collassati.
In caso di margini negativi, il massimo assoluto dei margini adiacenti negativi si deduce dal massimo dei margini adiacenti positivi. Se non ci sono margini positivi, il massimo assoluto dei margini adiacenti negativi si deduce da zero.
La posizione e dimensione orizzontale di un elemento block-level non floating è determinata dalle sette proprietà 'margin-left', border-left', padding-left', 'width', 'padding-right', 'border-right' e 'margin-right'. La somma di queste sette proprietà è sempre uguale al 'width' dell'elemento genitore.
Di default, il 'width' di un elemento è 'auto'. Se un elemento non è un elemento sostituito, significa che il 'width' è calcolato dall'User Agent così che la somma delle sette proprietà è uguale al 'width' del genitore. Se l'elemento è un elemento sostituito, un valore di 'auto' per 'width' viene automaticamente sostituito dal 'width' intrinseco dell'elemento.
Tre delle sette proprietà possono essere stabilite con 'auto': 'margin-left', 'width' e 'margin-right'. Per gli elementi sostituito, un valore di 'auto' per 'width' viene sostituito dall'intrinseco 'width', così che per loro ci possono essere solo due valori 'auto'.
Il 'width' ha un valore minimo non negativo definito dall'User Agent (che può variare da elemento a elemento e che dipende ancheda altre proprietà). Se il 'width' va sotto questo limite, sia perché stabilito esplicitamente, sia perché esso era 'auto' e le regole successive lo farebbero diventare troppo piccolo, il valore sarà sostituito dal valore minimo.
Se solo uno, fra i 'margin-left', 'width' e 'margin-right' è 'auto', l'User Agent assegnerà a quella proprietà un valore che sarà la somma delle sette, uguale al 'width' genitore.
Se nessuna delle proprietà è 'auto', al valore di'margin-right' sarà assegnato 'auto'.
Se più di una delle tre è 'auto', e una di queste è 'width', le altre ('margin-left' e/o 'margin-right') saranno stabilite a zero e 'width' avrà il valore necessario per fare la somma delle sette uguale al 'width' genitore.
Invece, se entrambi i 'margin-left' e 'margin-right' sono 'auto', essi saranno stabiliti a valori uguali. Ciò centrerà l'elemento all'interno dell'elemento genitore.
Se 'auto' è stabilito quale valore per una delle sette proprietà di un elemento che è inline o floating, esso sarà trattato come se fosse stato stabilito a zero.
Diversamente dai margini verticali, i margini orizzontali non sono collassati.
Gli elementi con un valore della proprietà 'display' su 'list'-item' sono formattati come gli elementi block-level, ma preceduti da un marcatore list-item. Il tipo del marcatore è determinato dalla proprietà 'list-style'. Il marcatore è determinato secondo il valore della proprietà 'list-style'.
<STYLE TYPE="text/css">
UL { list-style: outside }
UL.compact { list-style: inside }
</STYLE>
<UL>
<LI>first list item comes first
<LI>second list item comes second
</UL>
<UL CLASS=COMPACT>
<LI>first list item comes first
<LI>second list item comes second
</UL>
L'esempio precedente può essere formattato come:
* first list item
comes first
* second list item
comes second
* first list
item comes first
* second list
item comes second
Nel testo da destra a sinistra, i marcatori sarebbero stati sul lato destro del box.
Usando la proprietà 'float', un documento può essere dichiarato esterno al normale flusso degli elementi venendo così formattato come un elemento block-level. Per esempio, dando il valore 'left' alla proprietà 'float' di un'immagine, l'immagine viene spostata a sinistra fino a che non viene raggiunto il margine, il padding o border di un altro elemento block-level. Il flusso normale continuerà intorno sul lato destro. I margini, i border e i padding dello stesso elemento saranno mantenuti, ed i margini non si uniranno mai con i margini di elementi adiacenti.
Un elemento floating è sottoposto alle seguenti restrizioni: (vedi il paragfafo 4.1 per una spiegazione dei termini):
<STYLE TYPE="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG SRC=img.gif>
Some sample text that has no other...
</BODY>
L'esempio precedente potrebbe essere formattato come:
________________________________________ | | max(BODY margin, P margin) | ______________________________ | | | un pò di testo d'esempio | B | P | IMG margins che ha l'unico scopo | O | | _____ di mostrare come | D | m | | | gli elementi flottanti | Y | a | | IMG | sono mossi al lato | | r | | | dell'elemento genitore | m | g | |_____| mentre mantiene | a | i | i margini, borders | r | n | margins, borders | g | | e padding. | i | |Notare come i margini verticali | n | |adiacenti sono uniti fra elementi | | |block-level non flottanti
Notare che il margine dell'elemento 'P' racchiude l'elemento flottante 'IMG'.
Sono due le situazioni quando gli elementi flottanti possono sovrapporsi con le aree di margin, border e padding di altri elementi:
Gli elementi che non sono formattati come elementi block-level sono elementi inline. Un elemento inline può condividere spazio di linea con altri elementi. Considera questo esempio.
<P>Several <EM>emphasized</EM> words <STRONG>appear</STRONG>.</P>
L'elemento 'P' è di solito block-level, mentre 'EM' e 'STRONG' sono elementi inline. Se l'elemento 'P' è ampio abbastanza da formattare l'intero elemento su una linea, ci saranno due elementi inline sulla linea:
Several emphasized words appear.
Se non c'è abbastanza spazio su una linea un elemento inline verrà diviso in vari riquadri:
<P>Several <EM>emphasized words</EM> appear here.</P>
L'esempio precedente può essere formattato come:
Several emphasized words appear here.
Se l'elemento inline ha margin, border, padding o decorazioni del testo, questi non avranno effetto dove l'elemento si spezza.
----------
Several |emphasized
----------
-----
words| appear here.
-----
(La "figura" precedente può apparire distorta a causa dell'uso del formato ASCII. Vedi il paragrafo 4.4 per una descrizione su come calcolare l'altezza delle linee.)
Un elemento sostituito è un elemento che è sostituito dal contenuto a cui si punta dall'elemento stesso. Per esempio, nell'HTML, l'elemento 'IMG' è sostituito dall'immagine a cui punta l'attributo 'SRC'. Si può assumere che gli elementi sostituiti hanno le loro proprie dimensioni intrinseche. Se il valore della proprietà 'width' è 'auto' , la larghezza intrinseca viene utilizzata come larghezza dell'elemento. Se un valore diverso viene specificato nei fogli di stile, viene utilizzato questo valore e l'elemento sostituito viene ridimensionato di conseguenza (il metodo di ridimensionamento dipenderà dal tipo di media). La proprietà 'height' viene utilizzata nella stessa maniera.
Gli elementi sostituiti possono essere sia block-level che inline.
Tutti gli elementi hanno una proprietà 'line-height' che, in linea di principio, è uguale all'altezza totale di una linea di testo. Dello spazio viene aggiunto sopra e sotto il testo della linea per arrivare alla altezza della linea. Per esempio, se il testo è di 12pt e la 'line height' ha valore '14pt', viene aggiunto uno spazio extra di 2pt, di norma 1pt sopa e 1pt sotto la linea. Gli elementi vuoti influiscono su questi calcoli proprio come gli elementi con un contenuto.
La differenza fra dimensione del font e la 'line'height' viene chiamata leading. Metà della leading viene chiamata half-leading. Dopo la formattazione, ogni linea formerà line-box rettangolare.
Se una linea di testo contiene sezioni con differenti valori di 'line-height' (poiché sono elementi inline della linea), succede che ognuna di queste sezioni posside la sua propria half-leading sopra e sotto. L'altezza del line-box viene calcolata dal top della sezione più alta al fondo di quella più bassa. Nota che il top ed il fondo non necessariamente corrispondono all'elemnto più alto, poiché gli elementi possono essere posizionati verticalmente con la proprietà 'vertical-align'. Per formare un paragrafo, ogni line-box viene posizionato immediatamente sotto la linea precedente.
Nota che ogni padding, border o margin sopra e sotto elementi inline non sostituiti non influenzano l'altezza della linea. In altre parole: se la 'line-height' è troppo piccola per il padding o il border scelti, essa si sovrapporrà con il testo delle altre linee.
Gli elementi sostituiti (per esempio, le immagini) sulla linea possono far diventare il line-box più grande, se il top dell'elemento sostituito (per es. che include tutti i suoi padding, border e margin) è sopra la più alta sezione di testo, o se il fondo è sotto il più basso.
In casi normali, quando esiste un solo valore di 'line-height' in tutto il paragrafo, e nessuna immagine alta, la definizione precedente assicurerà che le linee di base delle linee successive siano esattamente distanziate dalla 'line-height'. Ciò è importante quando, per esempio in una tabella, devono essere allineate colonne di testo con differenti font.
Nota che questo non preclude che il testo di due linee adiacenti possano sovrapporsi. La 'line-height' può essere più piccola dell'altezza del testo, nel qual caso la leading sarà negativa. Ciò è utile quando si sa che il testo non contiene caratteri con discendenti (per esempio perchè contiene solo maiuscole), così che linee possono essere messe più vicine.
Il fondo è la parte della superficie dell'user agent dentro il quale i documenti vengono mostrati. Nessun elemento strutturale corrisponde al fondo, e questo comporta due questioni:
Una risposta ragionevole alla prima domanda è che la larghezza iniziale del fondo si basa sulla dimensione della finestra, ma i CSS1 lasciano questa risposta alla decisione dell'user agent. E' anche ragionevole aspettarsi che l'user agent cambi la larghezza del fondo quando la finestra viene ridimensionata, ma questo è anche fuori dello scopo dei CSS1.
Le estensioni HTML hanno posto un precedente per la seconda domanda: gli attributi dell'elemento 'BODY' definiscono lo sfondo di tutto il fondo. Per supportare le aspettative dei designers, I CSS1 introducono una regola speciale per trovare lo sfondo del fondo:
'Se il valore del 'background' dell'elemento 'HTML' è differente da 'transparent' allora usalo, o usa anche il vaolore di 'background' dell'elemento 'BODY'. Se il valore risultante è 'transparent', il rendering risulta indefinito.'
Questa regola permette:
<HTML STYLE="background: url(http://style.com/marble.png)"> <BODY STYLE="background: red">
Nell'esempio precedente, il fondo sarà coperto con 'marble'. Il background dell'elemento 'BODY' (chè può coprire o meno il fondo) sarà rosso.
Finchè non si trovino altre indicazioni, è raccomandato definire le proprietà del fondo sull'elemento 'BODY'.
Le attuali proprietà e valori dei CSS1 non possono descrivere il comportamento dell'emento 'BR'. Nell'HTML, l'elemento 'BR' specifica un salto di riga fra parole. In effetti, l'elemento viene sostituito da un salto di riga. Future versioni dei CSS potranno modificare il contenuto aggiunto e sostituito, ma i formattatori basati su CSS1 devo trattare 'BR' specificamente.
I fogli di stile influenzano la presentazione di un documento assegnando valori alle proprietà di stile. Questo capitolo elenca la proprietà di stile definite, e i loro corrispondenti possibili valori, dei CSS1.
Nel testo sottostante, i valori ammessi per ogni proprietà sono mostrati con una sintassi come segue:
Valore: N | NW | NE
Valore: [ <grandezza> | thick | thin ]{1,4}
Valore: [<famiglia> , ]* <famiglia>
Valore: <url>? <colore> [ / <colore> ]?
Valore: <url> || <colore>
Le parole fra "<" e ">" mostrano un tipo di valore. I tipi più comuni sono <grandezza>, <percentuale>, <url>, <numero> e <colore>; questi vengono descritti nel capitolo 6. I tipi più particolari (per es. <font-famil>> e <border-style>) vengono descritti sotto la proprietà corrispondente.
Altre parole sono parole chiave che devono apparire così come sono, senza virgolette. Lo slash (/) e la virgola (,) anche devono apparire così come sono.
Alcune cose comparate stanno a significare che tutte di loro devono presentarsi, in un dato ordine. Un trattino (|) separa le alternative: una di esse deve presentarsi. Un trattino doppio (||) significa che o A o B o entrambi devono presentarsi, in ogni ordine. Le parentesi quadre [] sono per i raggruppamenti. La comparazione è più forte del doppio trattino, ed il doppio trattino è più forte del trattino. Così "a b | c || d e" è equivalente a "[a b] | [c || [d e ]]".
Ogni tipo, parola chiave, o gruppo in parentesi quadre può essere seguito da uno dei seguenti modificatori:
L'assegnazione dei valori delle proprietà dei font sarà uno degli usi più comuni dei fogli di stile. Sfortunatamente, non esiste un ben definito ed accettato standard per la classificazione dei font, e i termini che si applicano ad una famiglia di font può non essere appropraiata per altri. Per esempio, 'italic' è comunemente usato per indicare testo distorto, ma il testo distorto può anche essere denominato come Oblique, Slanted, Incline, Cursive o Kursiv. . Perciò non è semplice identificare specifiche proprietà ad un font.
I CSS1 defiscono le proprietà 'font-family', 'font-style', 'font-variant' e 'font-weight', 'font-size', 'font'.
Poichè non esiste un generale standard di identificazione delle proprietà dei font, l'associazione delle proprietà ai font deve essere fatto con cautela. Le proprietà sono associate in un ordine ben definito per assicurare che i risultati di tale processo siano consistenti nai vari user agent (con l'assunzione che la stessa library di font è presentata ad ognuno di essi).
(Il precedente algoritmo può essere ottimizzato per evitare di dover rivedere le proprietà dei CSS1 per ogni carattere).
Le regole per l'associazione delle proprietà dal passo 2 in giù sono:
Valore: [[<nome della famiglia> | <famiglia generica>],]*
[<nome della famiglia> | <famiglia generica>]
Iniziale: specifico degli UE
Si applica a: tutti gli elementi
Ereditata: si
Valori percentuali: nd
Il valore rappresenta un elenco prioritario dei nomi delle famiglie di font e/o famiglie di font generiche. Diversamente da altre proprietà dei CSS1, i valori sono separati da una virgola per indicare che essi sono alternativi:
BODY { font-family: gill, helvetica, sans-serif }
Ci sono due tipi di elenchi di valori:
I designer dei fogli di stili sono invitati ad offrire, come ultima alternativa, un nome di famiglia generica.
I nome di font che contengono spazi bianchi dovrebbero essere messi tra virgolette:
BODY { font-family: "new century schoolbook", serif }
<BODY STYLE="font-family: 'My own font', fantasy">
Se le virgolette vengono omesse, ogni carattere di spazio bianco prima e dopo il nome del font viene ignorato e ogni sequenza di caratteri di spazi bianchi dentro il nome del font viene convertito in un singolo spazio.
Valore: normal | italic | oblique
Iniziale: normal
Si applica a:
tutti gli elementi
Ereditata: si
Valori percentuali: nd
La proprietà 'font-style' permette di selezionare fra caratteri normali (qualche volta anche detti "roman" o "upright"), italic e oblique dentro una famiglia di font.
Un valore di 'normal' seleziona un font che è classificato 'normal' nel database di font dell'user agent, mentre 'oblique' seleziona un font classificato come 'oblique'. Un valore di 'italic' seleziona un font classificato 'italic', o, se esso non è disponibile, uno classificato 'oblique'.
Il font che è classificato 'oblique' nel database di font dell'user agent può essere stato generato da una alterazione elettronica del font normale.
I font che hanno Oblique, Slanted, o Incline nei loro nomi saranno normalmente classificati come 'oblique' nel database dell'user agent. I font con Italic, Cursive o Kursiv nei loro nomi verranno normalmente classificati come 'italic'.
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
Nell'esempio precedente, testo enfatizzato (con 'EM') dentro un 'H1' apparirà in un carattere normale.
Valore: normal | small-caps
Iniziale: normal
Si applica a: tutti gli elementi
Ereditata: si
Valori percentuali: nd
Un altro tipo di variante entro la famiglia di font è il maiuscoletto. Nel maiuscoletto le lettere minuscole sono simili a quelle maiuscole, ma con una dimensione inferiore e con piccole differenze di proporzione. La proprietà 'font-variant' selezione quel tipo di font.
Il valore 'normal' seleziona un font che non è un font maiuscoletto, invece 'small-caps' seleziona un font maiuscoletto. E' accettabile (ma non richiesto) nei CSS1 che i font maiuscoletti siano creati partendo da un font normale e sostituendo le lettere minuscole con caretteri scalati in maiuscolo. Come ultima risorsa, lettere maiuscole potranno essere usate in sostituzione di font maiuscoletto.
L'esempio seguente da un elemento 'H3' in maiuscoletto, con le parole con 'EM' in oblique.
H3 { font-variant: small-caps }
EM { font-style: oblique }
Ci possono essere altri varianti nella famiglia di font, come font con numeri in stile antico, numeri in maiuscoletto, lettere condensate o espanse, etc. I CSS1 non prevedono proprietà per queste ultime.
Caratteristiche essenziali dei CSS1: le stesse considerazioni, su come questa proprietà causa la trasformazione del testo in maiuscolo, possono essere applicate alla proprietà 'text-transform'.
Valore: normal | bold | bolder | lighter | 100 | 200 | 300 | 400
| 500 | 600 | 700 | 800 | 900
Iniziale: normal
Si applica a: tutti gli elementi
Ereditata: si
Valori percentuali: nd
La proprietà 'font-weight' seleziona lo spessore (peso) del font. I valori da '100' a '900' formano una sequenza ordinata, dove ogni numero indica uno spessore che è maggiore del precedente. La parola chiave 'normal' è sinonimo di '400', e 'bold' è sinonimo di '700'. Altre parole chiave diverse da 'normal' e 'bold' spesso vengono confuse con i nomi dei font e così fu presista una scala numerica di 9 valori.
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
I valori 'bolder' e 'lighter' selezionano spessori dei font che sono relativi allo spessore ereditato dal genitore:
STRONG { font-weight: bolder }
Gli elementi figli ereditano lo spessore risultante, non il valore della parola chiave.
I font normalmente hanno uno o più proprietà i cui valori sono nomi che sono descrittivi dello spessore del font. Non esiste uno standard accettato per questi nomi di font. Il loro scopo principale è distinguere caratteri di differente spessore all'interno di una famiglia di font. L'uso fra le famiglie di font varia; per esempio un font che potresti pensare bold potrebbe essere descritto come Regular, Roman, Book, Medium, Semi- orDemiBold, Bold, o Black, in corrispondenza di come viene disegnato nero il carattere 'normal' del font. Poiché non esistono usi standard dei nomi, i valori della proprietà 'weight' nei CSS1 vengono designati in una scala numerica nella quale il valore '400' (o 'normal') corrisponde al carattere "normale" della famiglia. Il nome di spessore associato al carattere sarà tipicamente Book, Regular, Roman, Normal o a volte Medium.
L'associazione di altri spessori all'interno di una famiglia ai valori degli spessori numerici, è intesa solo per preservare l'ordinamento dello spessore all'interno della famiglia. Comunque, il seguente insieme di regole ci aiuta nel definire come viene realizzata l'associazione in alcuni casi tipici:
I due esempi seguenti illustrano il processo. Assumiano quattro spessori nella famiglia 'Example1", dal più chiaro al più scuro: Regular, Medium, Bold, Heavy. E assumiamo sei spessori nella famiglia 'Example2': Book, Medium, Bold, Heavy, Black, Extrablack. Nota come nel secondo esempio è stato deciso di non assegnare "Example2 ExtraBlack" a niente.
caratteri disponibili | valori | riempimenti ----------------------+---------------+------------------- "Example1 Regular" | 400 | 100, 200, 300 "Example1 Medium" | 500 | "Example1 Bold" | 700 | 600 "Example1 Heavy" | 800 | 900
caratteri disponibili | valori | riempimenti ----------------------+---------------+------------------- "Example2 Book" | 400 | 100, 200, 300 "Example2 Medium" | 500 | "Example2 Bold" | 700 | 600 "Example2 Heavy" | 800 | "Example2 Black" | 900 | "Example2 ExtraBlack" | (none) |
Poiché lo scopo delle parole chiave relative 'bolder' e 'lighter' è di scurire o alleggerire il carattere all'interno della famiglia e poiché una famiglia può non avere caratteri allineati con tutti i valori di spessore simbolici, l'assegnazione di 'bolder' viene fatta con il carattere immediatamente più scuro disponibile al client all'interno della famiglia mentre quella di 'lighter' viene fatta con il carattere immediatamente più chiaro della famiglia. Per essere precisi, il significato delle parole chiave relative 'bolder' e 'lighter' è il seguente:
Non c'è garanzia che esista un carattere più scuro per ognuno dei valori di 'font-weight'; per esempio, alcuni font possono avere solo un carattere normale ed uno bold, altri possono avere otto differenti spessori di carattere. Non esiste garanzia su come l'user agent costruirà i caratteri dei font all'interno di una famiglia per i vari valori di spessore. L'unica garanzia è che un carattere o un dato valore non sarà meno scuro dei caratteri con valori più chiari.
Valore: <dimensione assoluta> | <dimensione relativa> |
<grandezza> | <percentuale>
Iniziale: medium
Si applica a: tutti gli elementi
Ereditata: si
Valori percentuali: relativa alla dimensione del font dell'elemento genitore
I valori di grandezza e percentuale non dovrebbero prendere la tabella della dimensione del font quando viene calcolata la dimensione del font dell'elemento.
Valori negativi non sono ammessi.
Su tutte le altre proprietà, i valori di grandezza 'em' e ex' si riferiscono alla dimensione del font dell'elemento corrente. Sulla proprietà 'font-size', queste unità di grandezza si riferiscono alla dimensione del font dell'elemento genitore.
Nota che un applicazione potrebbe reinterpretare una dimensione esplicita, in funzione del contesto. Per esempio, all'interno di una scena VR un font può avere una differente dimensione a causa della distorsione della prospettiva.
Esempi:
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
Se viene usato il fattore di scala suggerito, le ultime tre dichiarzioni risultano identiche.
Valore: [ <font-style> || <font-variant> ||
<font-weight> ]? <font-size> [ / <line-height> ]?
<font-family>
Iniziale: non definito per le proprietà scorciatoie
Si applica a: tutti gli elementi
Ereditata: si
Valori percentuali: pemessi su <font-size> e
<line-height>
La proprietà 'font' è una proprietà scorciatoia per settare 'font-style' 'font-variant' 'font-weight' 'font-size', 'line-height' e 'font-family' contemporaneamente nel foglio di stile. La sintassi di questa proprietà è basata su una notazione di scorciatoia tradizionale tipografica per settare proprietà multiple relative ai font.
Per una definizione dei valori permessi ed iniziali, vedi le proprietà illustrate in precedenza. Le proprietà per le quali non sono dati valori sono settate al loro valore iniziale.
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
Nella seconda regola, il valore percentuale della dimensione del font (80%) si riferisce alla dimensione del font dell'elemento genitore. Nella terza regola, la percentuale di 'line-height' si riferisce alla dimensione del font dello stesso elemento.
Nelle prime tre regole precedenti, 'font-style', 'font-variant' e 'font-weight' non vengono menzionate in maniera esplicita, il che significa che esse sono settate al loro valore iniziale ('normal'). La quarta regola setta la 'font-weight' a 'bold', il 'font-style' a 'italic' ed implicitamente setta 'font-variant' a 'normal'.
La quinta regola setta il 'font-variant' ('small-caps'), il 'font-size' (120% del font del genitore), la 'line-height' (120% la dimensione del font) e la 'font-family' ('fantasy'). Ne consegue che la parola chiave 'normal' si applica alle due proprietà rimanenti: 'font-style' e 'font-weight'.
Queste proprietà descrivono il colore (spesso chiamato colore di primo piano) e lo sfondo di un elemento (per esempio la superficie nel quale è visualizzato il contenuto). Si può settare un colore di background e/o un immagine di background. La posizione dell'immagine, se e come viene ripetuta, e se essa è fissa o scorre, sono altre proprietà che possono essere defintite.
La proprietà 'color' viene normalmente ereditata. Le proprietà di background non si ereditano, ma lo sfondo dell'elemento genitore si vedrà attraverso, a causa del valore iniziale di 'transparent' dato a 'background-color'.
Valore: <colore>
Iniziale: specifico degli UA
Si applica a: tutti gli elementi
Ereditata: si
Valori percentuali: nd
Questa proprietà descrive il colore del testo di un elemento (spesso chiamato colore di primo piano). Ci sono modi differenti di specificare il rosso:
EM { color: red } /* languaggio naturale */
EM { color: rgb(255,0,0) } /* RGB range da 0 a 255 */
Vedi il paragrafo 6.3 per una decsrizione dei possibili valori di colore.
Valore: <colore> | transparent
Iniziale: transparent
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: nd
Questa proprietà setta il colore di sfondo di un elemento.
H1 { background-color: #F00 }
Valore: <url> | none
Iniziale: none
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: nd
Questa proprietà setta l'immagine di sfondo di un elemento. Quando si setta un'immagine di sfondo, si dovrebbe anche settare un colore di sfondo che potrà essere usato quando l'immagine non è disponibile. Quando l'immagine è disponibile, essa si pone sopra il colore di sfondo.
BODY { background-image: url(marble.gif) }
P { background-image: none }
Valore: repeat | repeat-x | repeat-y | no-repeat
Iniziale: repeat
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: nd
Se il background image viene specificato, il valore di 'background-repeat' determina come/se l'immagine viene ripetuta.
Un valore di 'repeat' significa che l'immagine viene ripetuta sia in orizzontale che in verticale. Il valore 'repeat-x' (o 'repeat-y') significa che l'immagine si ripeta orizzontalmente (o verticalmente), per creare una singola fascia di immagini da un lato all'altro. Con un valore di 'no-repeat', l'immagine non viene ripetuta.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
Nell'esempio precedente, l'immagine viene ripetuta solo verticalmente.
Valore: scroll | fixed
Iniziale: scroll
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: nd
Se viene specificata un'immagine di sfondo, il valore di 'background-attachment' determina se essa è fissa riguardo al fondo o invece scorre insieme al contenuto.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
Caratteristiche essenziali dei CSS1: gli user agent possono trattare 'fixed' come 'scroll'. Comunque, è raccomandato che essi interpretino 'fixed' correttamente, almeno sugli elementi HTML e BODY, poiché non esiste maniera per un autore di fornire un'immagine solo per quei browser che supportano 'fixed' (vedi il capitolo7.)
Valore: [<percentuale> | <grandezza>]{1,2} | [top | center
| bottom] || [left | center | right]
Iniziale: 0% 0%
Si applica a: elementi block-level e sostituiti
Ereditata: no
Valori percentuali: si riferiscono alla dimensione dell'elemento stesso
Se è stata specificata un'immagine di sfondo, il valore di 'background-position' specifica la sua posizione iniziale.
Con un paio di valori come '0% 0%', l'angolo superiore sinistro dell'immagine viene posizionata nell'angolo superiore sinistro del box che racchiude il contenuto dell'elemento (per esempio, non il box che racchiude il padding, il borde o il margin). Un paio di valori come '100% 100%' posiziona l'angolo inferiore destro dell'immagine nell'angolo posteriore destro dell'elemento. Con un paio di valori come '14% 84%', il punto 14% a destra dell'immagine e 84% in basso dell'immagine verrà posizionata al punto 14% a destra e 84% in basso dell'elemento.
Con un paio di valori di '2cm 2cm', il lato superiore sinistro dell'immagine viene posizionato 2cm a destra e 2cm in basso dell'angolo superiore sinistro dell'elemento.
Se viene prevista solo una percentuale o una grandezza, essa setta solo la posizione orizzontale, mentre la posizione verticale sarà 50%. Se vengono previsti due valori, viene prima la posizione orizzontale. Le combinazioni di valori di grandezza e di percentuale sono permessi, per es. '50% 2cm'. Sono permesse anche posizioni negative.
Per indicare la posizione dell'immagine di sfondo si possono anche usare i valori in parole chiave. Le parole chiave non possono essere combinate con valori percentuali, o di grandezza. Di seguito vengono illustrate le possibili combinazioni di parole chiave e le loro interpretazioni:
Esempi::
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
Se l'immagine di sfondo è fissa riguardo il fondo (vedi la proprietà 'background-attachment', in precedenza), l'immagine viene posizionata in relazione al fondo e non all'elemento. Per esempio:
BODY {
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}
Nell'esempio precedente, l'immagine viene posizionata nell'angolo in basso a destra del fondo.
Valore: <background-color> || <background-image> ||
<background-repeat> || <background-attachment> ||
<background-position>
Iniziale: non definito per le proprietà scorciatoie
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: permesse su <background-position>
La proprietà 'background' è una proprietà scorciatoia per settare le proprietà di background individuali (per es. 'background-color', 'background-image', background-repeat', 'bcakground-attachment' e 'background-position') contemporaneamente nel foglio di stile.
I valori possibili per la proprietà 'background' sono gli stessi di tutti i possibili valori delle proprietà individuali.
BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }
La proprietà 'background' setta sempre tutte le proprietà di background individuali. Nella prima regola dell'esempio successivo, è stato settato solo un valore per 'background-color' mentre le altre proprietà sono lasciate al loro valore iniziale. Nella seconda regola, sono state specificate tutte le proprietà individuali.
Valore: normal | <grandezza>
Iniziale: normal
Si applica a: tutti gli elementi
Ereditata: si
Valori percentuali: nd
L'unità di grandezza indica un'aggiunta allo spazio di default fra le parole. I valori possono essere negativi, ma ci possono essere limiti dovuti a specifiche implementazioni. L'user agent è libero di selezionare l'esatto algoritmo di spazio. Lo spazio fra le parole può anche essere influenzato dalla giustificazione (che è un valore della proprietà 'text-align').
H1 { word-spacing: 1em }
Qui, la spazio fra le parole fra ogni parola nell'elemento 'H1' sarà incrementato di '1em'.
Caratteristiche essenziali dei CSS1: gli user agent possono interpretare ogni valore di 'word-spacing' come 'normal'. (Vedi capitolo 7.)
Valore: normal | <grandezza>
Iniziale: normal
Si applica a: tutti gli elementi
Ereditata: si
Valori percentuali: nd
L'unità di grandezza indica un'aggiunta allo spazio di default fra i caratteri. I valori possono essere negativi, ma ci possono essere limiti dovuti a specifiche implementazioni. L'user agent è libero di selezionare l'esatto algoritmo di spazio. Lo spazio fra le parole può anche essere influenzato dalla giustificazione (che è un valore della proprietà 'align').
BLOCKQUOTE { letter-spacing: 0.1em }
Qui, lo spazio fra le lettere fra ogni carattere in un elemento 'BLOCKQUOTE' sarà incrementato di '0.1em'.
Con un valore di 'normal', gli user agent possono modificare lo spazio fra le letter per giustificare il testo. Ciò non accadrà se 'letter-spacing' è esplicitamente settato con un valore di <grandezza>:
BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }
Quando lo spazio risultante fra due lettere non è lo stesso dello spazio di default, gli user agent non dovrebbero usare le legature.
Caratteristiche essenziali dei CSS1: gli user agent possono interpretare ogni valor di 'letter-spacing' come 'normal'. (Vedi capitolo 7.)
Valore: none | [ underline || overline || line-through || blink ]
Iniziale: none
Si applica a: tutti gli elementi
Ereditata: no, ma vedi la successiva spiegazione
Valori percentuali: nd
Questa proprietà descrive le decorazioni che vengono aggiunte al testo di un elemento. Se l'elemento non ha testo (per esempio l'elemento 'IMG' in HTML) o è un elemento vuoto (per esempio ' '<EM></EM>'), questa propriata non ha effetto. Un valore 'blink' porta il testo ad essere intermittente.
Il colore, o colori, richiesto per la decorazione del testo dovrebbe essere derivato dal valore della proprietà 'color'.
Questa propriatà non è ereditata, ma gli elementi dovrebbero accoppiarsi con i loro genitori. Per esempio, se un elemento è sottolineato, la linea dovrebbe comprendere anche gli elementi figli. Il colore dell'elemento sottolineato rimarrà lo stesso anche se i discendenti avranno differenti valore di 'color'.
A:link, A:visited, A:active { text-decoration: underline }
L'esempio precedente prevede la sottolineatura dei testi di tutti i link (per esempio, tutti gli elementi 'A' con l'attributo 'HREF').
Gli user agent devono riconoscere la parola chiave 'blink', ma non necessariamente devono supportare l'effetto 'blink'.
Valore: baseline | sub | super | top | text-top | middle | bottom
| text-bottom | <percentuale>
Iniziale: baseline
Si applica a: elementi inline
Ereditata: no
Valori percentuali: si riferisce alla 'line-height' dell'elemento stesso
La proprietà riguarda il posizionamento verticale dell'elemento. Un gruppo di parole chiave è relativo all'elemento genitore:
Un altro gruppo di proprietà è relativo alla linea formattata di cui l'elemento è parte:
Usando l'allineamento con 'top' e 'bottom', possono accaddere strane situazioni laddove le dipendenze degli elementi formano un loop.
I valori di percentuale si riferiscono al valore della proprietà 'line-height' dello stesso elemento. Essi alzano la linea di base dell'elemento (o il fondo, se non esiste linea di base) di un particolare ammontare sulla linea di base del genitore. Sono possibili valori negativi. Per esempio, un valore di '-100%' abbasserà l'elemento così che la linea di base dell'elemento finisce dove dovrebbe essere la linea di base delle linea successiva. Questo permette un controllo preciso sulla posizione verticale degli elementi (come le immagini che sono utilizzate al posto delle lellere) che non hanno una linea di base.
Ci si aspetta che una futura versione dei CSS permetta a questa proprietà di avere un valore di tipo <grandezza>.
Valore: capitalize | uppercase | lowercase | none
Iniziale: none
Si applica a: tutti gli elementi
Ereditata: si
Valori percentuali: nd
L'attuale trasformazione in ogni caso è dipendente dalla lingua. Vedi [4] per i modi per ritrovare la lingua dell'elemento.
H1 { text-transform: uppercase }
L'esempio precedente setta in maiuscolo tutto il testo presente in 'H1'.
Caratteristiche essenziali dei CSS1: Gli user agent possono ignorare 'text-transform' (per esempio lo trattano come 'none') per i caratteri che non provengono dalla codifica Latin-1 e per gli elementi nelle lingue per le quali la trasformazione è differente da quelle specificate dalle tabelle di conversione Unicode [8].
Valore: left | right | center | justify
Iniziale: specifico per UA
Si applica a: elementi block-level
Ereditata: si
Valori percentuali: nd
Questa proprietà descrive come viene allineato il testo all'interno dell'elemento. L'attuale algoritmo di giustificazione usato è dipendente dall'user agent e dalla lingua.
Esempio:
DIV.center { text-align: center }
Poichè 'text-align' è ereditario, tuttu gli elementi block-level all'interno dell'elemento 'DIV' con 'CLASS=center' saranno centrati. Nota che gli allineamenti sono relativi alla larghezza dell'elemento, non del fondo. Se 'justify' non è supportato, l'user agent utilizzerà un sostituto. Normalmente, questo sarà 'left' per le lingue occidentali.
Caratteristiche essenziali dei CSS1: Gli user agent possono trattare 'justify' come 'left' o 'right', a seconda se la direzione di scrittura di default dell'elemento è da sinistra a destra o destra verso sinistra, rispettivamante.
Valore: <grandezza> | <percentuale>
Iniziale: 0
Si applica a: elementi block-level
Ereditata: si
Valori percentuali: riferiti alla larghezza dell'elemento genitore
La proprietà specifica il rientro che appare prima della prima linea formattata. Il valore di 'text-indent' può essere negativo, ma possono sorgere limiti dovuti all'implementazione specifica. Un rientro non è inserito nel mezzo di un elemento che è stato spezzato da un altro (come 'BR' in HTML).
Esempio:
P { text-indent: 3em }
Valore: normal | <numero> | <grandezza> |
<percentuale>
Iniziale: normal
Si applica a: tutti gli elementi
Ereditata: si
Valori percentuali: relativi alla dimensione del font dell'elemento stesso
La proprietà setta la distanza fra due linee di base di linee adiacenti.
Quando viene specificato un valore numerico, l'altezza della linea è data dalla dimensione del font dell'elemento corrente moltiplicato con il valore numerico. Questo differisce dal valore percentuale nel modo in cui esso eredita: quando è specificato un valore numerico, gli elementi figli erediteranno lo stesso fattore, non il valore risultante (come nel caso della percentuale e altre unità).
Non sono ammessi valori negativi.
Le tre regole nel seguente esempio hanno la stessa risultante altezza di linea:
DIV { line-height: 1.2; font-size: 10pt } /* numero */
DIV { line-height: 1.2em; font-size: 10pt } /* grandezza */
DIV { line-height: 120%; font-size: 10pt } /* percentuale */
Un valore di 'normal' setta la 'line-height' ad un ragionevole valore per il font dell'elemento. E' consigliabile che gli user agent settino il valore 'normal' in un numero compreso fra 1.0 e 1.2.
Vedi il paragrafo 4.4 per una descrizione su come la 'line-height' influenza la formattazione di un elemento block-level.
Le proprietà del box setta la dimensione, la circonferenza e la posizione dei box che rappresentano gli elementi. Vedi il modello di formattazione (capitolo 4) per esempi su come usare le proprietà del box.
Le proprietà del margine setta il margine di un elemento. La proprietà 'margin' setta il margine per tutti e quattro i lati mentre le altre proprietà di margine settano solo i rispettivi lati.
La proprietà di padding indicano quanto spazio inserire fra il border ed il contenuto (per esempio, testo o immagine). La proprietà 'padding' setta il padding per tuttie e quattro i lati mentre le altre proprietà di padding settano solo i rispettivi lati.
Le proprietà di border settano il border di un elemento. Ogni elemento ha quattro border, uno per ogni lato, che sono definiti con i loro spessori, colori e stile.
Le proprietà 'width' e 'height' settano le dimensione del box, e le proprietà 'float' e 'clear' possono modificare la posizione dell'elemento.
Valore: <grandezza> | <percentuale> | auto
Iniziale: 0
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: relativi alla larghezza del più vicino block-level progenitore
Questa proprietà setta il margine superiore di un elemento:
H1 { margin-top: 2em }
E' permesso un valore negativo, ma possono esserci limiti dovuti ad implementazioni particolari.
Valore: <grandezza> | <percentuale> | auto
Iniziale: 0
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: relativi alla larghezza del più vicino block-level progenitore
Questa proprietà setta il margine destro di un elemento:
H1 { margin-right: 12.3% }
E' permesso un valore negativo, ma possono esserci limiti dovuti ad implementazioni particolari.
Valore: <grandezza> | <percentuale> | auto
Iniziale: 0
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: relativi alla larghezza del più vicino block-level progenitore
Questa proprietà setta il margine inferiore di un elemento:
H1 { margin-bottom: 3px }
E' permesso un valore negativo, ma possono esserci limiti dovuti ad implementazioni particolari.
Valore: <grandezza> | <percentuale> | auto
Iniziale: 0
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: relativi alla larghezza del più vicino block-level progenitore
Questa proprietà setta il margine sinistro di un elemento:
H1 { margin-left: 2em }
E' permesso un valore negativo, ma possono esserci limiti dovuti ad implementazioni particolari.
Valore: [ <grandezza> | <percentuale> | auto ]{1,4}
Iniziale: non definito per le proprietà scorciatoie
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: relativi alla larghezza del più vicino block-level progenitore
La proprietà 'margin' è una proprietà scorciatoia per settare 'margin-top'. 'margin-right', margin-bottom' e 'margin-left' contemporaneamente nel foglio di stile.
Se vengono specificati quattro valori di grandezza, essi si applicano ai lati rispettivamente top, destro, inferiore e sinistro. Se esiste un solo valore, esso si applica a tutti i lati, se ve ne sono due o tre, i valori mancanti sono presi dal lato opposto.
BODY { margin: 2em } /* tutti i margini settati a 2em */
BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
L'ultima regola dell'esempio precedente è equivalente al seguente esempio:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* copiata dal lato opposto (right) */
}
Sono permessi valori negativi, ma possono esserci limiti dovuti ad implementazioni particolari.
Valore: <grandezza> | <percentuale>
Iniziale: 0
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: relativi alla larghezza del più vicino block-level progenitore
Questa proprietà setta il padding superiore di un elemento:
BLOCKQUOTE { padding-top: 0.3em }
I valori di padding non possono essere negativi.
Valore: <grandezza> | <percentuale>
Iniziale: 0
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: relativi alla larghezza del più vicino block-level progenitore
Questa proprietà setta il padding destro di un elemento:
BLOCKQUOTE { padding-right: 10px }
I valori di padding non possono essere negativi.
Valore: <grandezza> | <percentuale>
Iniziale: 0
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: relativi alla larghezza del più vicino block-level progenitore
Questa proprietà setta il padding inferiore di un elemento:
BLOCKQUOTE { padding-bottom: 2em }
I valori di padding non possono essere negativi.
Valore: <grandezza> | <percentuale>
Iniziale: 0
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: relativi alla larghezza del più vicino block-level progenitore
Questa proprietà setta il padding sinistro di un elemento:
BLOCKQUOTE { padding-left: 20% }
I valori di padding non possono essere negativi.
Valore: [ <grandezza> | <percentuale> ]{1,4}
Iniziale: non definito per le propriet