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à scorciatoie
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: relativi alla larghezza del più vicino block-level progenitore
La proprietà 'padding' è una proprietà scorciatoia per settare 'padding-top', 'padding-right', 'padding-bottom' e 'padding-left' contemporaneamente nel foglio di stile.
Se vengono specificati quattro valori, questi si applicano rispettivamente al top, alla destra, in basso e a sinistra. Se vengono specificati solo due valori, essi si applicano a tutti i lati, se ne vengono specificati due o tre, i valori mancanti vengono presi dal lato opposto.
La superficie dell'area di padding è settata con la proprietà 'background'.
H1 {
background: white;
padding: 1em 2em;
}
L'esempio precedente setta un padding verticale di '1em' ('padding-top' e 'padding-bottom') ed un padding orizzontale di '2em' ('padding-right' e 'padding-left'). L'unità 'em' è relativa alla dimensione del font dell'elemento: '1em' è equivalente alla dimensione del font in uso.
I valori di padding non possono essere negativi.
Valore: thin | medium | thick | <grandezza>
Iniziale: 'medium'
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: nd
Questa proprietà setta la larghezza del border-top dell'elemento. La larghezza dei valori parole chiave sono dipendenti dall'user agent, ma i seguenti valori vengono conservati: 'thin' <= 'medium' <= 'thick'.
Le larghezze definite con parole chiave sono costanti per tutto il documento.
H1 { border: solid thick red }
P { border: solid thick blue }
Nell'esempio precedente, gli elementi 'H1' e 'P' avranno la stessa larghezza di border senza riguardo alla dimensione del font. Per definire largezze relative, può essere usata l'unità 'em':
H1 { border: solid 0.5em }
La larghezze di border non possono essere negative.
Valore: thin | medium | thick | <grandezza>
Iniziale: 'medium'
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: nd
Questa proprietà setta la larghezza del border destro di un elemento. Per il resto è equivalente a 'border-top-width'.
Valore: thin | medium | thick | <grandezza>
Iniziale: 'medium'
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: nd
Questa proprietà setta la larghezza del border inferiore di un elemento. Per il resto è equivalente a 'border-top-width'.
Valore: thin | medium | thick | <grandezza>
Iniziale: 'medium'
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: nd
Questa proprietà setta la larghezza del border sinistro di un elemento. Per il resto è equivalente a 'border-top-width'.
Valore: [thin | medium | thick | <grandezza>]{1,4}
Iniziale: non definito per le proprietà scorciatoie
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: nd
Questa proprietà è una proprità scorciatoia per settare 'border-top-width', 'border-right-width', 'border-bottom-width' e 'border-left-width' contemporaneamente nel foglio di stile.
Ci possono essere da uno a quattro valori, con le seguenti interpretazioni:
Nel seguente esempio, i commenti indicano le larghezze risultanti dei border top, destro, bottom e sinistro.
H1 { border-width: thin } /* thin thin thin thin */
H1 { border-width: thin thick } /* thin thick thin thick */
H1 { border-width: thin thick medium } /* thin thick medium thin */
H1 { border-width: thin thick medium thin } /* thin thick medium thin */
Le larghezze dei border non possono essere negative.
Valore: <colore>{1,4}
Iniziale: il valore della proprietà 'color'
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: nd
La proprietà 'border-color' setta il colore dei quattro border. 'border-color' può avere da uno a quattro valori, ed i valori sono settati per i lati differenti come in precedenza per 'border-width'.
Se non viene specificato alcun valore, il valore della proprietà 'color' dello stesso elemento prenderà il suo posto:
P {
color: black;
background: white;
border: solid;
}
Nell'esempio precedente, il border avrà una linea nera continua.
Valore: none | dotted | dashed | solid | double | groove | ridge
| inset | outset
Iniziale: none
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: nd
La proprietà 'border-style' setta lo stile dei quattro border. Può avere da uno a quattro valori, e i valori sono settati per i differenti lati come in precedenza per 'border-width'.
#xy34 { border-style: solid dotted }
Nell'esempio precedente, i border orizzontali saranno 'solid' e quelli verticali 'dotted'.
Poiché il valore iniziale dello stile del border è 'none', nessun border sarà visibile fin quando non viene settato lo stile del border.
I significati degli stili dei border:
Caratteristiche essenziali dei CSS1: Gli user agent possono interpretare i valori di 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' e 'outset' come 'se fossero 'solid'
Valore: <larghezza del border-top> || <stile del border> ||
<colore>
Iniziale: non definito per le proprietà scorciatoie
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: nd
Questa è una proprietà scorciatoia per settare la larghezza, lo stile ed il colore del border top di un elemento.
H1 { border-bottom: thick solid red }
La regola precedente setterà la larghezza, lo stile ed il colore degli elementi H1. I valori omessi saranno settati ai loro valori iniziali:
H1 { border-bottom: thick solid }
Poiché il valore del colore, nell'esempio precedente, è omesso, il colore del border avrà lo stesso valore del valore 'color' dell'elemento stesso.
Nota che mentre la proprietà 'border-style' accetta fino a quattro valori, questa proprietà accetta un solo valore di stile.
Valore: <larghezza del border-right> || <stile del border> ||
<colore>
Iniziale: non definito per le proprietà scorciatoie
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: nd
Questa è una proprietà scorciatoia per settare la larghezza, lo stile ed il colore del border destro di un elemento. Per il resto è equivalente a 'border-top'.
Valore: <larghezza del border-bottom> || <stile del border> ||
<colore>
Iniziale: non definito per le proprietà scorciatoie
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: nd
Questa è una proprietà scorciatoia per settare la larghezza, lo stile ed il colore del border bottom di un elemento. Per il resto è equivalente a 'border-top'.
Valore: <larghezza del border-left> || <stile del border> ||
<colore>
Iniziale: non definito per le proprietà scorciatoie
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: nd
Questa è una proprietà scorciatoia per settare la larghezza, lo stile ed il colore del border sinistro di un elemento. Per il resto è equivalente a 'border-top'.
Valore: <larghezza del border> || <stile del border> ||
<colore>
Iniziale: non definito per le proprietà scorciatoie
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: nd
La proprietà 'border' è una proprietà scorciatoia per settare gli stessi valori di larghezza, colore e stile in tutti e quattri i border dell'elemento. La prima regola nell'esempio successivo è equivalente al settaggio delle quattro regole mostrte dopo di essa:
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
Diversamente dalle proprietà scorciatoie 'margin' e 'padding', la proprietà 'border' non può settare differenti valori sui quattro border. Per far ciò devono essere usate una o più delle altre proprietà di border.
Poiché le proprietà possono avare una sovropposizione funzionale, diventa importante l'ordine con il quale vengono specificate le regole. Considera l'esempio:
BLOCKQUOTE {
border-color: red;
border-left: double
color: black;
}
Nell'esempio precedente, il colore del border sinistro sarà nero, mentre gli altri border saranno rossi. Questo è dovuto al 'border-left' che setta la larghezza, lo stile ed il colore. Poiché il valore del colore non è specificato nella proprietà 'border-left', esso sarà preso dalla proprietà 'color'. Il fatto che la proprietà 'color' viene settata dopo la proprietà 'border-left' non è rilevante.
Nota che mentre la proprietà 'border-width' accetta fino a quattro valori di grandezza, questa proprietà ne accetta uno solo.
Valore: <grandezza> | <percentuale> | auto
Iniziale: auto
Si applica a: elementi block-level e sostituiti
Ereditata: no
Valori percentuali: riferiti alla larghezza dell'elemento genitore
Questa proprietà può essere applicata agli elementi testuali, ma è molto più utile con gli elementi sostituiti come le immagini. La larghezza può essere applicata per ridimensionare l'immagine, se necessario. Quando si ridimensiona, la forma dell'immagine viene preservata se la proprietà 'height' ha valore 'auto'.
Esempio:
IMG.icon { width: 100px }
Se la 'width' o la 'height' di un elemento sostituito sono entrambe 'auto', queste proprietà sarranno settate alla dimensione intrinseca dell'elemento.
Non sono ammessi valori negativi.
Vedi il modello di formattazione (capitolo 4) per una descrizione della relazione fra questa proprietà e il margin ed il padding.
Valore: <grandezza> | auto
Iniziale: auto
Si applica a: elementi block-level e sostituiti
Ereditata: no
Valori percentuali: nd
Questa proprietà può essere applicata agli elementi testuali, ma è molto più utile con gli elementi sostituiti come le immagini. L'altezza può essere applicata per ridimensionare l'immagine, se necessario. Quando si ridimensiona, la forma dell'immagine viene preservata se la proprietà 'height' ha valore 'auto'.
Esempio:
IMG.icon { height: 100px }
Se la 'width' o la 'height' di un elemento sostituito sono entrambe 'auto', queste proprietà sarranno settate alla dimensione intrinseca dell'elemento.
Se applicato ad un elemento testuale, l'altezza può essere applicata, per esempio con un scrollbar.
Non sono ammessi valori negativi.
Caratteristiche essenziali dei CSS1: gli user agent possono ignorare la proprietà 'height' (per esempio, trattandola come 'auto') se l'elemento non è un elemento sostituito.
Valore: left | right | none
Iniziale: none
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: nd
Con il valore 'none', l'elemento sarà mostrato laddove appare nel testo. Con un valore di 'left' (o 'right') l'elemento sarà mosso a sinistra (o destra) e il testo scorrerà sul lato destro (o sinistro) dell'elemento. Con un valore di 'left' o 'right', l'elemento viene trattato da 'block-level' (per esempio, la proprietà 'display' viene ignorata). Vedi il paragrafo 4.1.4 per una specifica completa.
IMG.icon {
float: left;
margin-left: 0;
}
L'esempio precedente piazzerà tutti gli elementi IMG con 'CLASS=icon' sul lato sinistro dell'elemento genitore.
Questa proprietà viene spesso usata con immagini inline, ma si applica anche agli elementi testuali.
Valore: none | left | right | both
Iniziale: none
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: nd
Questa proprietà specifica se un elemento permette elementi floating sui suoi lati. In particolare, il valore di questa proprietà determina i lati dove gli elementi floating non sono accettati. Con 'clear' settata a 'left', un elemento verrà mosso più in basso di ogni altro elemento floating sul suo lato sinistro. Con 'clear' settata a 'none', gli elementi floating possono trovarsi su tutti i lati. Esempio:
H1 { clear: left }
Queste proprietà classificano gli elementi in categorie più dei parametri specifici.
La proprietà list-style descrive come gli elementi di lista (per esempio gli elementi con un valore di 'display' settato a 'list-item') vengono formattati. Le proprietà di list-style possono riguardare ogni elemento, e di regola verranno ereditate. Comunque, esse avranno effetto solo su elementi con un valore di 'display' di 'list-item'. In HTML questo è il tipico csao dell'elemento 'LI'.
Valore: block | inline | list-item | none
Iniziale: block
Si applica a: tutti gli elementi
Ereditata: no
Valori percentuali: nd
Questa proprietà descrive come e se un elemento viene mostrato sul fondo (che può essere una pagina stampata, uno schermo di computer, etc.).
Un elemento con un valore di 'display' su 'block' apre un nuovo box. Il box viene posizionato rispetto ai box adiacenti, in rispetto del 'modello di formattazione' dei CSS. Generalmente, gli elementi come 'H1' e 'P' sono di tipo 'block'. Un valore di 'list-item' è simile a 'block', ad eccezione del fatto che viene aggiunto un marcatore di lista. In HTML, generalmente, 'LI' ha questo valore.
Un elemento con un valore di 'display' su 'inline' risulta in un nuovo box inline sulla stessa linea come il contenuto principale. Il box viene dimensionato in relazione alla dimensione formattata del contenuto. Se il contenuto è testo, esso può prendere diverse linee, e ci sarà un box su ogni linea. Le proprietà di margin, border e padding si applicano agli elementi 'inline', ma non avranno effetto ai salti di linea.
Un valore di 'none' evita la visibilità dell'elemento, includendo gli elementi figli e il box circostante.
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }
L'ultima regola disabilità la visibilità dell'immagine.
Il valore iniziale di 'display' è 'block', ma un user agent avrà i suoi valori di default per tutti gli elementi HTML in relazione alle specifiche HTML riguardo il renedering suggerito degli elementi [2].
Caratteristiche essenziali dei CSS1: Gli user agent possono ignorare 'dispaly' e usare i loro valori di default. (Vedi capitolo 7.)
Valore: normal | pre | nowrap
Iniziale: normal
Si applica a: elementi block-level
Ereditata: si
Valori percentuali: nd
Questa proprietà specifica come viene gestito lo spazio bianco dentro un elemento: in modo 'normal' (dove lo spazio bianco vienne collassato), in modo 'pre' (che agisce come l'elemento 'PRE' dell'HTML) o in modo 'nowrap' (dove il wrapping viene effettuato solo attraverso elementi BR):
PRE { white-space: pre }
P { white-space: normal }
Il valore iniziale di 'white-space' è 'normal', ma un user agent avrà i suoi valori di default per tutti gli elementi HTML in relazione alle specifiche HTML riguardo il rendering suggerito degli elementi [2].
Caratteristiche essenziali dei CSS1: Gli user agent possono ignorare la proprietà 'white-space' nei fogli stile dell'autore e dell'utente, e usare invece i loro valori di default. (Vedi capitolo 7.)
Valore: disc | circle | square | decimal | lower-roman | upper-roman
| lower-alpha | upper-alpha | none
Iniziale: disc
Si applica a: elementi con valori di 'display' su 'list-item'
Ereditata: si
Valori percentuali: nd
Questa proprietà viene usata per determinare la visualizzazione del marcatore di lista, se 'list-style-image' è 'none' oppure se l'immagine a cui punta l'URL non può essere mostrata.
OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */
OL { list-style-type: lower-alpha } /* a b c d e etc. */
OL { list-style-type: lower-roman } /* i ii iii iv v etc. */
Valore: <url> | none
Iniziale: none
Si applica a: elementi con valori di 'display' su 'list-item'
Ereditata: si
Valori percentuali: nd
Questa proprietà setta l'immagine che verrà usata come marcatore di lista. Quando è disponibile l'immagine essa rimpiazzerà il marcatore settato con il marcatore 'list-style-type'.
UL { list-style-image: url(http://png.com/ellipse.png) }
Valore: inside | outside
Iniziale: outside
Si applica a: elementi con valori di 'display' su 'list-item'
Ereditata: si
Valori percentuali: nd
Il valore di 'list-style-position' determina come viene disegnato il marcatore di lista in relazione al contenuto. Per un esempio di formattazione vedi il paragrafo 4.1.3.
Valore: [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none]
Iniziale: non definito per le proprietà scorciatoie
Si applica a: elementi con valori di 'display' su 'list-item'
Ereditata: si
Valori percentuali: nd
La proprietà 'list-style' è una notazione scorciatoia per settare le tre proprietà 'list-style-type', list-style-image' e 'list-style-position' contemporaneamente nel foglio di stile.
UL { list-style: upper-roman inside }
UL UL { list-style: circle outside }
LI.square { list-style: square }
Settando 'list-style' direttamente sull'elemento 'LI' possono aversi risultati inaspettati. Considera:
<STYLE TYPE="text/css">
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
<BODY>
<OL CLASS=alpha>
<LI>level 1
<UL>
<LI>level 2
</UL>
</OL>
</BODY>
Poichè la specificità (come definita nell'ordine di cascata) è più alto per la prima regola, nel foglio di stile precedente, essa sovrascriverà la seconda regola su tutti gli elementi 'LI', e verrà utilizzato solo lo stile 'lower-alpha'. E' in ogni caso raccomandato settare 'list-style' solo sugli elementi di tipo lista.
OL.alpha { list-style: lower-alpha }
UL { list-style: disc }
Nell'esempio precedente, l'ereditarietà trasferirà i valori di 'list-style' dagli elementi 'OL' e 'UL' a quelli 'LI'.
Un valore di URL può essere combinato con ogni altro valore.
UL { list-style: url(http://png.com/ellipse.png) disc }
Nell'esempio precedente, il 'disc' verrà utilizzato quando l'immagine è indisponibile.
Il formato di un valore di grandezza è un segno opzionale ('+' o '-', con '+' di default) immediatamente seguito da un numero (con o senza un punto decimale) immediatamente seguito da un identificatore di unità (un'abbreviazione di due lettere). Dopo il numero '0', l'identificatore di unità diventa opzionale.
Alcune proprietà permettono unità di grandezza negative, ma questo può complicare il modello di formattazione e possono nascere limiti dovuti alla specifica implementazione. Se un valore di grandezza negativa non può essere supportato, esso dovrebbe essere portato al più vicino valore che può essere supportato.
Esistono due tipi di unità di grandezza: relative e assolute. Le unità relative indicano una grandezza in relazione ad un'altra proprietà di grandezza. I fogli di stile che usano le unità relative potranno scalare più facilmente da un medium all'altro (per esempio da uno schermo di computer ad una stampante laser). 'Le unità di precentuale (descritte in seguito) e i valori in parole chiave (per esempio 'x-large') offrono simili vantaggi.
Vengono supportate queste unità relative:
H1 { margin: 0.5em } /* ems, l'altezza del font dell'elemento */
H1 { margin: 1ex } /* x-height, ~ l'altezza della lettera 'x' */
P { font-size: 12px } /* pixels, relativa al fondo */
Le unità relative 'em' e 'ex' sono relative alla dimensione del font dell'elemento stesso. L'unica eccezione a questa regola nei CSS1 è data dalla proprietà 'font-size' dove i valori 'em' e 'ex' si riferiscono alla dimensione del font dell'elemento genitore.
L'unità in pixel, come quelle usate nell'ultima regola, sono relative alla risoluzione del fondo, per esempio molto spesso uno schermo di computer. Se la densità del pixel del dispositivo di output è molto differente da quello di un tipico schermo di computer, l'user agent dovrebbe ridimensionare i valori di pixel. Il pixel reference suggerito è l'angolo visuale di un pixel su un dispositivo con una densità di pixel di 90dpi e una distanza dal lettore di una distanza di un braccio. Per una lunghezza di braccio di circa 28 pollici (71 centimetri), l'angolo visuale è di circa 0.0227 gradi.
Gli elementi figli ereditano il valore calcolato, non quello relativo.
BODY {
font-size: 12pt;
text-indent: 3em; /* per esempio 36pt */
}
H1 { font-size: 15pt }
Nell'esempio precedente, il valore di 'text-indent' degli elementi 'H1' sarà di 36pt e non 45pt.
Le unità di grandezza assolute sono utili solo quando le proprietà fisiche del dispositivo di output sono conosciute, Sono supportate le seguenti unità assolute:
H1 { margin: 0.5in } /* pollci, 1in = 2.54cm */
H2 { line-height: 3cm } /* centimetri */
H3 { word-spacing: 4mm } /* millimetri */
H4 { font-size: 12pt } /* punti, 1pt = 1/72 in */
H4 { font-size: 1pc } /* picas, 1pc = 12pt */
In casi dove la grandezza specificata non può essere supportata, gli user agent dovrebbero provare ad approssimare. Per tutte le proprietà dei CSS1, gli ulteriori calcoli e l'ereditarietà dovrebbero essere basati sul valore approssimato.
Il farmato di un valore percentuale è rappresentato da un segno ('+' o '-', con '+' di default) immediatamente seguito da un numero (con o senza punto decimale) immediatamente seguito da '%'.
I valori percentuali sono sempre relativi ad un altro valore, per esempio un'unità di grandezza. Ogni proprietà che permette unità percentuali definisce anche a quale valore si riferisce il valore percentuale. Molto spesso questo è rappresentato dalla dimensione del font dell'elemento stesso.
P { line-height: 120% } /* 120% del 'font-size' dell'elemento */
In tutte le proprietà dei CSS1 ereditate, se il valore è specificato come una percentuale, gli elementi figli ereditano il valore risultante, e non il valore percentuale.
Un colore può essere sia una parola chiave che un numero di specifica RGB.
L'elenco dei nomi dei colori in parore chiave che viene suggerito è: aqua, black, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow. Questi 16 colori sono ripresi dalla palette di colore VGA di Windows, ed il loro valori RGB non sono definiti in questa specifica.
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
Il modello di colore RGB viene usato nelle specifiche di colore numeriche. Questi esempi specificano tutti lo stesso colore:
EM { color: #f00 } /* #rgb */
EM { color: #ff0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* range 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* range 0.0% - 100.0% */
Il formato di un valore RGB in notazione esadecimale è dato da un '#' immediatamente seguito dai tre o sei caratteri esadecimali. La notazione RGB a tre caratteri (#rgb) viene convertita nella forma a sei caratteri (#rrggbb) raddoppiando i caratteri, non aggiungendo gli zeri. Per esempio, #fb0 viene espanso in #ffbb00. Questo permette che il bianco (#ffffff) possa essere specificato con la notazione corta (#fff) rimuovendo ogni dipendenza dalla profondità del colore del display.
Il formato di un valore RGB nella sua notazione funzionale è 'rgb'(' seguita da un elenco di tre valori numerici separati da una virgola (sia i tre valori dal range fra 0 e 255, o i tre valori percentuali con range fra 0.0% e 100.0%) seguiti da ')'. Sono ammessi gli spazi bianchi fra i valori numerici.
I valori al di fuori dei range dovrebbero essere arrotondati. Le tre regole in basso sono in ogni caso equivalenti.
EM { color: rgb(255,0,0) } /* range 0 - 255 */
EM { color: rgb(300,0,0) } /* portato a 255 */
EM { color: rgb(110%, 0%, 0%) } /* portato a 100% */
I colori RGB vengono specificati nello spazio colore sRGB [9]. Gli user agent possono variare nella fedeltà con la quale essi rappresentano questi colori, ma l'uso di sRGB da una definizione non ambigua e misurabile in modo oggettivo di quello che dovrebbe essere il colore, che può essere correlata a standard internazionali [10].
Gli user agent possono limitare i loro sforzi nel mostrare i colori per effettuare una correzione di gamma su di loro. sRGB specifica una gamma di visualizzazione di 2.2 sotto specifiche condizioni di visione. Gli user agent aggiustano i colori dati nei CSS così che, in combinazione con una gamma di visualizzazione 'naturale' di un dispositivo di output, viene prodotta una gamma di visualizzazione di 2.2 effettiva. L' Appendice D da ulteriori dettagli su questo. Nota che solo i colori specificati nei CSS sono coinvolti; per esempio, ci si aspetta che le immagini portino le loro proprie informazioni di colore.
Un Uniform Resource Locator (URL) viene identificato con una notazione funzionale:
BODY { background: url(http://www.bg.com/pinkish.gif) }
Il formato di un valore di URL è 'url(' seguito da uno spazio bianco opzionale seguito da un apostrofo (') oppure da virgolette (") opzionale, seguito dall'URL (come definito in [11]) seguito da un apostrofo (') oppure da virgolette (") opzionale, seguito da spazio bianco opzionale, seguito da ')'.
Le parentesi, le virgole, gli spazi bianchi, gli apostrofi ('), le virgolette (") che sono in un URL devono essere preceduti da un backslash: '\(', '\)', '\,'.
Gli URL parziali sono interpretati relativi all'origine del foglio di stile e non relativi al documento.
BODY { background: url(yellow) }
Un user agent che usa i CSS1 per mostrare i documenti, è conforme alle specifiche CSS1 se:
Un user agent che ha come output i fogli stile CSS1, è conforme alle specifiche CSS1 se:
Un user agent che usa i CSS1 per mostrare i documenti e che ha come output i fogli di stile CSS1 è conforme alle specifiche CSS1 se soddisfa entrambi i gruppi dei requisiti di conformità.
Un user agent non deve implementare tutte le funzionalità dei CSS1: esso è conforme alle regole dei CSS1 implementandone la funzionalità di base. La funzionalità di base consiste nell'intera specifica CSS1 con l'eccezione di quelle parti esplicitamente escluse. Nel testo, quelle parti che sono evidenziate con "Caratteristiche essenziali dei CSS1:" seguite con una spiegazione riguardo quale funzionalità è al di fuori della funzionalità di base. Il gruppo di caratteristiche escluse dalla funzionalità di base è chiamato 'funzioni avanzate dei CSS1'.
Questo capitolo definisce solo la conformità ai CSS1. Ci saranno altri livelli di CSS in futuro che possono richiedere ad un user agent di implementare un differente gruppo di caratteristiche per arrivare alla conformità.
Esempi di restrizioni del medium di presentazione sono: risorse limitate (caratteri, colore) e risoluzione limitata (così i margini possono non essere accurati). In questi casi, l'user agent dovrebbe approssimare i valori del foglio di stile. In più, possono avere le loro restrizioni, differenti paradigmi di interfacce di uso: un browser VR può ridimensionare il documento in base alla sua "distanza" dall'utente.
Gli user agent possono offrire scelte addizionali sulla presentazione. Per esempio, l'user agent può offrire opzioni per l'utente con disabilità visive o può offrire la scelta di disabilitare l'intermittenza (blinking).
Nota che i CSS1 non definiscono tutti gli aspetti della formattazione. Per esempio, l'user agent è libero di selezionare un algoritmo per lo spazio fra le lettere.
Questa specifica raccomada pure, ma non richiede, che un user agent debba:
Le precedenti regole di conformità descrivono solo la funzionalità, non l'interfaccia all'utente.
Questa specifica definisce il Livello 1 dei CSS. Ci si aspetta che più alti livelli di CSS, con caratteristiche addizionali, saranno definiti in futuro. Per assicurare che gli user agent che già supportano CSS1 saranno in grado di leggere i fogli di stile contenenti carattistiche di pù alto livello, questo paragrafo definisce cosa l'user agent fa quando incontra certe costruzioni che non sono valide nel livello 1 dei CSS.
H1 { color: red; rotation: 70deg }
l'user agent lo tratterà com se invece fosse
H1 { color: red; }
IMG { float: left } /* CSS1 */
IMG { float: left top } /* "top" non è un valore di 'float' */
IMG { background: "red" } /* la parole chiave non possono andare in virgolette in CSS1 */
IMG { border-width: 3 } /* deve essere specificata un'unità per i valori di grandezza */
Nell'esempio precedente, un parser CSS1 onorerebbe la prima regola e ignorerebbe il resto, come se il foglio stile fosse
IMG { float: left }
IMG { }
IMG { }
IMG { }
Un user agent che è conforme alle specifiche future dei CSS può accettare una o più delle altre regole come buone.
@three-dee {
@background-lighting {
azimuth: 30deg;
elevation: 190deg;
}
H1 { color: red }
}
H1 {color: blue}
La '@three-dee' è illegale secondo i CSS1. In questo caso, la totalità della regola con @parolachiave (fino a, ed includendo, la terza parentesi graffa di chiusura) viene ignorata. L'user agent conforme ai CSS1 la salta, riducendo il foglio di stile a:
H1 {color: blue}
Più in dettaglio:
Un foglio di stile, per ogni versione di CSS, comprende un elenco di dichiarazioni, Ci sono due tipi di dichiarazioni: regole con @ (at-rules) e gruppi di regole (rulesets). Possono esserci spazi bianchi (spazi, tabulati, nuove linee) fra le dichiarazioni.
I fogli di stile CSS sono spesso inglobati nei documenti HTML, e per permettere di rendere invisibili i fogli di stile agli user agent più vecchi, diventa conveniente inserire i fogli di stile all'interno di commenti HTML. I segni di commento HTML "<!--" e "-->" possono essere inseriti prima, dopo e all'interno della dichiarazione. Possono esserci spazio bianchi fra di loro.
Una regola con @ inizia con una parola chiave con @, che è un identificatore con la "@" all'inizio (per esempio: '@import', '@page'). Un identificatore è fatto di lettere, numeri, trattivi e caratteri 'escaped' (come definiti precedentemente).
Una regola con @ consiste di ogni cosa fino ed includendo il successivo punto e virgola (;) o il successivo blocco (definito fra poco), qualsiasi cosa la preceda. Un user agent che incontra una regola con @ che comincia con una parola chiave con @ diversa da '@import', ignora tutto della regola con @ e continua subito dopo. Esso ignora anche ogni regola con @ che comincia com '@import' se essa non si trova all'inizio del foglio di stile, per esempio, se essa si trova dopo qualsiasi altra regola (anche se questa è una regola che viene ignorata). Ecco un esempio.
Immaginiamo che un user agent incontri questo goglio di stile:
@import "subs.css";
H1 { color: blue }
@import "list.css";
Il secondo '@import' non è valido secondo i CSS1. Un eser agent conforme ai CSS1 salta l'intera regola, riducendo il foglio di stile a:
@import "subs.css";
H1 {color: blue}
Un blocco (block) comincia con una parentesi graffa sinistra ({) e finisce con la rispettiva destra (}). Fra le due può esserci qualunque carattere, ad eccezione di parentesi (()), parentesi quadre ([]) e le parentesi graffe ({}) che vanno sempre in paio e sono annidate. Apostrofi (') o virgolette (") vanno sempre appaiate, ed i caratteri fra loro vengono letti come stringhe (vedi l'appendice B per una definizione di stringa). Ecco un esempio di blocco; nota che la parentesi graffa destra fra gli apostrofi non si appaia con le parentesi graffe di apertura del blocco, e che il secondo apostrofo è un carattere 'escaped', e così non si appaia con il primo apostrofo:
{ causta: "}" + ({7} * '\'') }
Un gruppo di regole consiste di una stringa-selettore (selector-string) seguita da un blocco-dichiarazione (declaratio-block). La stringa selettore consiste di ogni cosa che viene fino (ma che non include) la prima parentesi graffa sinistra. Un gruppo di regole che inizia con una stringa-selettore che non è valida per i CSS1 viene saltato.
Per esempio, immaginiamo che un user agent conforme ai CSS1 incontri questo foglio di stile:
H1 { color: blue }
P[align], UL { color: red; font-size: large }
P EM { font-weight: bold }
La seconda linea contiene una stringa-selettore non valida nei CSS1. L'user agent conforme ai CSS1 salterà la regola riducendo il foglio di stile a:
H1 { color: blue }
P EM { font-weight: bold }
Un blocco-dichiarazione inizia con una parentesi graffa sinistra ({) e finisce con la sua equivalente destra (}). Fra di loro c'è un elenco di zero o più dichiarazioni, separate da punti e virgole (;).
Una dichiarazione è fatta da una proprietà, due punti (:) e un valore. Intorno ad ognuno di questi possono esserci spazi bianchi. Una proprietà è un identificatore, così come definito precedentemente. Nei valori può esserci qualunque carattere, ad eccezione di parentesi (()), parentesi quadre ([], le parentesi graffe ({}), apostrofi (') e virgolette (') che vanno sempre in paio. Le parentesi, la parentesi quadre e parentesi graffe devono essere annidate. Dentro le virgolette, i caratteri vengono letti come una stringa.
Per assicurare che nuove proprietà e nuovi valori per proprietà esistenti possano essere aggiunte in futuro, un user agent deve saltare una dichiarazione con un nome di proprietà o valore non valido. Ogni proprietà dei CSS1 ha le sue proprie restrizioni sintattiche e semantiche sui valori che accetta.
Per esempio, immaginiamo che un user agent conforme ai CSS1 incontri questo foglio di stile:
H1 { color: red; font-style: 12pt }
P { color: blue; font-vendor: any; font-variant: small-caps }
EM EM { font-style: normal }
La seconda dichiarazione sulla prima linea ha un valore non valido '12pt'. La seconda dichiarazione della seconda linea contiene una non meglio precisata proprietà 'font-vendor' . L'user agent conforme ai CSS1 salterà la regola riducendo il foglio di stile a:
H1 { color: red; }
P { color: blue; font-variant: small-caps }
EM EM { font-style: normal }
Possono esserci commenti (vedi paragrafo 1.7) dovunque possono esserci spazi bianchi e sono considerati come se fossero spazi bianchi. I CSS1 definiscono altri posti dove possono esserci spazi bianchi (come un valore interno) e commenti.
Le seguenti regole stabiliscono sempre che:
Nota: L'attributo CLASS dell'HTML permette più caratteri in un nome di classe del gruppo permesso per i selettori. Nei CSS1, questi caratteri devono essere resi 'escaped' o scritti come numeri Unicode: "B&W?" può essere scritto come"B\&W\?" o "B\26W\3F", "κουρος" (dal Greco: "kouros") deve essere scritto come "\3BA\3BF\3C5\3C1\3BF\3C2". Ci si aspetta che in future versioni dei CSS possanno essere immessi direttamente molti più caratteri.
L'appendice B riguarda una grammatica per i CSS1.
[1] W3C resource page on web style sheets (http://www.w3.org/Style)
[2] "HTML 4.0 Specification", D. Raggett, A. Le Hors, I. Jacobs, December 1997. Available at http://www.w3.org/TR/REC-html40/.
[3] T Berners-Lee, D Connolly: "Hypertext Markup Language - 2.0", RFC 1866, MIT/W3C, November 1995. The specification is also available in hypertext form (http://www.w3.org/MarkUp/html-spec/html-spec_toc.html)
[4] F Yergeau, G Nicol, G Adams, M Dürst: "Internationalization of the Hypertext Markup Language" (ftp://ds.internic.net/rfc/rfc2070.txt).
[5] ISO 8879:1986. Information Processing - Text and Office Systems - Standard Generalized Markup Language (SGML)
[6] ISO/IEC 10179:1996 Information technology -- Processing languages -- Document Style Semantics and Specification Language (DSSSL).
[7] ISO/IEC 9899:1990 Programming languages -- C.
[8] The Unicode Consortium, "The Unicode Standard -- Worldwide Character Encoding -- Version 1.0", Addison-Wesley, Volume 1, 1991, Volume 2, 1992.
[9] "A Standard Default color Space for the Internet", version 1.10, M. Stokes, M. Anderson, S. Chandrasekar, and R. Motta, 5 November 1996.
[10] CIE Publication 15.2-1986, "Colorimetry, Second Edition", ISBN 3-900-734-00-3 (http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html)
[11] T Berners-Lee, L Masinter, M McCahill: "Uniform Resource Locators (URL)", RFC 1738, CERN, Xerox Corporation, University of Minnesota, December 1994
[12] "PNG (Portable Network Graphics) Specification, Version 1.0 specification" (http://www.w3.org/TR/REC-png-multi.html)
[13] Charles A. Poynton: "Gamma correction on the Macintosh Platform" (ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf)
[14] International Color Consortium: "ICC Profile Format Specification, version 3.2", 1995 (ftp://sgigate.sgi.com/pub/icc/ICC32.pdf)
[15] S C Johnson: "YACC - Yet another compiler compiler", Technical Report, Murray Hill, 1975
[16] "Flex: The Lexical Scanner Generator", Version 2.3.7, ISBN 1882114213
Durante la breve vita dell'HTML, ci sono state varie 'proposte per i fogli di stile' verso le quali questa proposta è in debito. Specialmente quelle di Robert Raisch, Joe English e Pei Wei hanno molto influenzato questa proposta.
Un grosso numero di persone hanno contribuito allo sviluppo dei CSS1. Un ringraziamento particolare a: Terry Allen, Murray Altheim, Glenn Adams, Walter Bender, Tim Berners-Lee, Yves Bertot, Scott Bigham, Steve Byrne, Robert Cailliau, James Clark, Daniel Connolly, Donna Converse, Adam Costello, Todd Fahrner, Todd Freter, Roy Fielding, Neil Galarneau, Wayne Gramlich, Phill Hallam-Baker, Philipp Hoschka, Kevin Hughes, Scott Isaacs, Tony Jebson, William Johnston, Gilles Kahn, Philippe Kaplan, Phil Karlton, Evan Kirshenbaum, Yves Lafon, Murray Maloney, Lou Montulli, Colas Nahaboo, Henrik Frystyk Nielsen, David Perrell, William Perry, Scott Preece, Paul Prescod, Liam Quin, Vincent Quint, Jenny Raggett, Thomas Reardon, Cécile Roisin, Michael Seaton, David Seibert, David Siegel, David Singer, Benjamin Sittler, Jon Smirl, Charles Peyton Taylor, Irène Vatton, Daniel Veillard, Mandira Virmani, Greg Watkins, Mike Wexler, Lydja Williams, Brian Wilson, Chris Wilson, Lauren Wood and Stephen Zilles.
Tre persone meritano una menzione speciale: Dave Raggett (per il suo incoraggiamento e lavoro sull'HTML3), Chris Lilley (per il suo contributo continuo, specialmente nel settore dei colori e dei font) e Steven Pemberton (per le sua qualità organizzative e creative).
(Questa appendice è informativa, non normativa)
Il seguente foglio di stile è scritto tenendo conto del rendering consigliato dalle spefiche dell'HTML 2.0 [3]. Alcuni stili, per esempio i colori, sono stati aggiunti per completezza. E' consigliato che venga usato un foglio di stile simile a questo come stile di default negli user agent.
BODY {
margin: 1em;
font-family: serif;
line-height: 1.1;
background: white;
color: black;
}
H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV,
DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR, FORM, DL {
display: block }
B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP,
IMG, SPAN { display: inline }
LI { display: list-item }
H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }
H1 { font-size: xx-large }
H2 { font-size: x-large }
H3 { font-size: large }
B, STRONG { font-weight: bolder } /* relativo al genitore */
I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
PRE { white-space: pre }
ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em }
UL, DIR { list-style: disc }
OL { list-style: decimal }
MENU { margin: 0 } /* formattazione stretta */
LI { margin-left: 3em }
DT { margin-bottom: 0 }
DD { margin-top: 0; margin-left: 3em }
HR { border-top: solid } /* potrebbe anche essere usata 'border-bottom' */
A:link { color: blue } /* link non visitati */
A:visited { color: red } /* links visitati */
A:active { color: lime } /* links attivi */
/* il settaggio dei border dei collegamenti sugli elementi IMG richiede selettori di contesto */
A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }
(Questa appendice è normativa)
La grammatica minima dei CSS (per esempio, ogni versione dei CSS) che tutte le implementazioni necessitano di supportare viene definita nel Capitolo 7. La seguente grammatica definisce un linguaggio molto più piccolo, un linguaggio che definisce la sintassi dei CSS1.
Essa è in qualche modo, comunque, ancora un gruppo superiore di CSS1: ci sono costrizioni semantiche addizionali che non vengono espresse in questa grammatica. Un user agent conforme deve anche aderire alle regole di parsing di campatibilità futura (capitolo 6). Inoltre, l'HTML impone restrizioni, per esempio sui possibili valori dell'attributo CLASS.
La successiva grammatica è LL (1) (nota però che la maggiorparte degli user agent non dovrebbe usarla direttamente, poiché essa non esprime le convenzioni di parsing, ma solo la sintassi CSS1). Il formato delle produzioni è ottimizzato per un uso umano e vengono utilizzate alcune notazioni scorciatoie oltre a yacc (yet another compiler compiler) [15].
* : 0 or more + : 1 or more ? : 0 or 1 | : separates alternatives [] : grouping
Le produzioni sono:
stylesheet
: [CDO|CDC]* [ import [CDO|CDC]* ]* [ ruleset [CDO|CDC]* ]*
;
import
: IMPORT_SYM [STRING|URL] ';' /* per esempio, @import url(fun.css); */
;
unary_operator
: '-' | '+'
;
operator
: '/' | ',' | /* empty */
;
property
: IDENT
;
ruleset
: selector [ ',' selector ]*
'{' declaration [ ';' declaration ]* '}'
;
selector
: simple_selector+ [ pseudo_element | solitary_pseudo_element ]?
| solitary_pseudo_element
;
/* An "id" is an ID that is attached to an element type
** on its left, as in: P#p007
** A "solitary_id" is an ID that is not so attached,
** as in: #p007
** Analogously for classes and pseudo-classes.
*/
simple_selector
: element_name id? class? pseudo_class? /* per esempio: H1.subject */
| solitary_id class? pseudo_class? /* per esempio: #xyz33 */
| solitary_class pseudo_class? /* per esempio: .author */
| solitary_pseudo_class /* per esempio: :link */
;
element_name
: IDENT
;
pseudo_class /* come in: A:link */
: LINK_PSCLASS_AFTER_IDENT
| VISITED_PSCLASS_AFTER_IDENT
| ACTIVE_PSCLASS_AFTER_IDENT
;
solitary_pseudo_class /* come in: :link */
: LINK_PSCLASS
| VISITED_PSCLASS
| ACTIVE_PSCLASS
;
class /* come in: P.note */
: CLASS_AFTER_IDENT
;
solitary_class /* come in: .note */
: CLASS
;
pseudo_element /* come in: P:first-line */
: FIRST_LETTER_AFTER_IDENT
| FIRST_LINE_AFTER_IDENT
;
solitary_pseudo_element /* come in: :first-line */
: FIRST_LETTER
| FIRST_LINE
;
/* There is a constraint on the id and solitary_id that the
** part after the "#" must be a valid HTML ID value;
** e.g., "#x77" is OK, but "#77" is not.
*/
id
: HASH_AFTER_IDENT
;
solitary_id
: HASH
;
declaration
: property ':' expr prio?
| /* empty */ /* Previene syntax errors... */
;
prio
: IMPORTANT_SYM /* !important */
;
expr
: term [ operator term ]*
;
term
: unary_operator?
[ NUMBER | STRING | PERCENTAGE | LENGTH | EMS | EXS
| IDENT | hexcolor | URL | RGB ]
;
/* There is a constraint on the color that it must
** have either 3 or 6 hex-digits (i.e., [0-9a-fA-F])
** after the "#"; e.g., "#000" is OK, but "#abcd" is not.
*/
hexcolor
: HASH | HASH_AFTER_IDENT
;
Il seguente è l'elenco dei segni (tokenizer), scritto in notazione flex [16]. Nota che questo prevede un'implementazione a 8-bit di flex. L'elenco non è sensibile alle maiuscole (comando di linea flex option-i).
unicode \\[0-9a-f]{1,4}
latin1 [¡-ÿ]
escape {unicode}|\\[ -~¡-ÿ]
stringchar {escape}|{latin1}|[ !#$%&(-~]
nmstrt [a-z]|{latin1}|{escape}
nmchar [-a-z0-9]|{latin1}|{escape}
ident {nmstrt}{nmchar}*
name {nmchar}+
d [0-9]
notnm [^-a-z0-9\\]|{latin1}
w [ \t\n]*
num {d}+|{d}*\.{d}+
string \"({stringchar}|\')*\"|\'({stringchar}|\")*\'
%x COMMENT
%s AFTER_IDENT
%%
"/*" {BEGIN(COMMENT);}
<COMMENT>"*/" {BEGIN(0);}
<COMMENT>\n {/* ignore */}
<COMMENT>. {/* ignore */}
@import {BEGIN(0); return IMPORT_SYM;}
"!"{w}important {BEGIN(0); return IMPORTANT_SYM;}
{ident} {BEGIN(AFTER_IDENT); return IDENT;}
{string} {BEGIN(0); return STRING;}
{num} {BEGIN(0); return NUMBER;}
{num}"%" {BEGIN(0); return PERCENTAGE;}
{num}pt/{notnm} {BEGIN(0); return LENGTH;}
{num}mm/{notnm} {BEGIN(0); return LENGTH;}
{num}cm/{notnm} {BEGIN(0); return LENGTH;}
{num}pc/{notnm} {BEGIN(0); return LENGTH;}
{num}in/{notnm} {BEGIN(0); return LENGTH;}
{num}px/{notnm} {BEGIN(0); return LENGTH;}
{num}em/{notnm} {BEGIN(0); return EMS;}
{num}ex/{notnm} {BEGIN(0); return EXS;}
<AFTER_IDENT>":"link {return LINK_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"visited {return VISITED_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"active {return ACTIVE_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"first-line {return FIRST_LINE_AFTER_IDENT;}
<AFTER_IDENT>":"first-letter {return FIRST_LETTER_AFTER_IDENT;}
<AFTER_IDENT>"#"{name} {return HASH_AFTER_IDENT;}
<AFTER_IDENT>"."{name} {return CLASS_AFTER_IDENT;}
":"link {BEGIN(AFTER_IDENT); return LINK_PSCLASS;}
":"visited {BEGIN(AFTER_IDENT); return VISITED_PSCLASS;}
":"active {BEGIN(AFTER_IDENT); return ACTIVE_PSCLASS;}
":"first-line {BEGIN(AFTER_IDENT); return FIRST_LINE;}
":"first-letter {BEGIN(AFTER_IDENT); return FIRST_LETTER;}
"#"{name} {BEGIN(AFTER_IDENT); return HASH;}
"."{name} {BEGIN(AFTER_IDENT); return CLASS;}
url\({w}{string}{w}\) |
url\({w}([^ \n\'\")]|\\\ |\\\'|\\\"|\\\))+{w}\) {BEGIN(0); return URL;}
rgb\({w}{num}%?{w}\,{w}{num}%?{w}\,{w}{num}%?{w}\) {BEGIN(0); return RGB;}
[-/+{};,#:] {BEGIN(0); return *yytext;}
[ \t]+ {BEGIN(0); /* ignore whitespace */}
\n {BEGIN(0); /* ignore whitespace */}
\<\!\-\- {BEGIN(0); return CDO;}
\-\-\> {BEGIN(0); return CDC;}
. {fprintf(stderr, "%d: Illegal character (%d)\n",
lineno, *yytext);}
(Questa appendice è informativa, non normativa)
I documenti HTML possono contenere qualunque dei circa 30.000 differenti caratteri definiti da Unicode. Molti documenti hanno bisogno solo di poche centinaia. Anche molti font contengono solo poche centinaia di glifi. In combinazione con il paragrafo 5.2, questa appendice spiega come vengono appaiati i caratteri nel documento ed i glifi nei font.
Il contenuto di un documento HTML è una sequenza di caratteri e markup. Per inviarlo "per il cavo", esso viene codificato come una sequanza di bytes, utilizzando uno dei vari metodi di codifica. Il documento HTML deve essere decodificato per trovare il carattere. Per esempio, in Europa Occidentale è normale utilizzare il byte 224 per una 'a' con accento grave (à), ma in Ebraico, è più comune utilizzare il byte 224 per un Aleph. In Giapponese, il significato di un byte di solito dipende dal byte che lo precede. In alcune codifiche, un carattere viere codificato come due (o più) bytes.
L'user agent sa come decodificare i bytes dando un'occhiata al parametro "charset" nella head dell'HTML. Valori tipici (valori di charset) sono "ASCII" (per Inglese), "ISO-8859-1" (per l'Europa Occidentale), "ISO-8859-8" (per l'Ebraico), "Shift-JIS" (per il Giapponese).
L'HTML [2][4], ammette circa 30.000 caratteri differenti, quelli definiti da Unicode. Non molti documenti useranno tanti caratteri, e la scelta della giusta codifica assicurerà che al documento basterà un byte per carattere. Caratteri al di fuori del range di codifica potranno sempre essere immessi con riferimenti numerici: 'Π significherà sempre la lettera maiuscola Greca Pi, non importa quale codifica venga usata. Nota che che questo comporta che gli user agent devono essere preparati per ogni carattere Unicode, anche se essi ne trattano pochi codificati.
Un font non contiene caratteri, ma contiene immagini di caratteri, conosciuti come glifi. I glifi, nella forma di contorni o immagini, costituiscono una rappresentazione particolare di un carattere. Sia in maniera esplicita che implicita, ogni font ha una tavola associata con esso, la tabella della codifica del font, che dice qual'e la rappresentazione del carattere per ogni glifo. Nei font Type 1, la tabella è come un vettore di codifica.
Infatti, molti font contengono vari glifi per lo stesso carattere. La scelta del glifo usato dipende sia dalle regole della Lingua che dalle preferenze dell'autore.
Per esempio, in Arabico, tutte le lettere hanno quattro forme, a seconda se la lettera viene utilizzata all'inizio, in mezzo o alla fine di una parola oppure da sola. Esso è lo stesso carattere in tutti i casi, e così esiste un solo carattere nel documento HTML, ma quando viene stampato, si mostra in maniera differente ogni volta.
Esistono anche font che lasciano al designer grafico la scelta fra varie forme alternative. Sfortunatamente, i CSS1 al momento non prevedono la possibilità di scegliere fra queste alternative. Al momento, viene scelto sempre la forma di default.
Per ovviare al problema che un singolo font non possa bastare per mostrare tutti i caratteri in documento, o anche un singolo elemento, I CSS1 permettono l'uso dei gruppi di font.
Un gruppo di font nei CSS1 è un elenco di font, tutti dello stesso stile e dimensione, che vengono provati in sequenza per vedere se contengono un glifo per un determinato carattere. Un elemento che contiene testo Inglese con simboli matematici può aver bisogno di un gruppo di due font, uno contenente lettere e numeri, l'altro contenente simboli matematici. Vedi il paragrafo 5.2 per una descrizione dettagliata del meccanismo di selezione per i gruppi di font.
Ecco un esempio di un gruppo di font adatto per un testo che contiene caratteri Latini, caratteri Giapponesi e simboli matematici:
BODY { font-family: Baskerville, Mincho, Symbol, serif }
Il latino verrà preso dal font Baskerville (un font con soli caratteri Latini), il Giapponese verrà preso dal Mincho, ed i simboli matematici verranno presi dal Symbol. Ogni altro carattere verranno presi (si spera) dalla famiglia di font generica 'serif'. La famiglia di font 'serif' verrà utilizzata anche allorquando uno o più degli altri font non siano disponibili.
(Questa appendice è informativa, non normativa)
Vedi il Tutorial sulla Gamma nelle specifiche PNG [12] se non hai familiarità con le questioni riguardanti la gamma.
Nel calcolo, la visualizzazione dell'user agent su un monitor CRT può presupporre un CRT ideale ed ignorare ogni effetto sulla gamma apperente causata dal dithering. Questo comporta che il minimo necessario di cui hanno bisogno sulle attuali piattaforme è rappresentato da:
"Applicare la gamma" significa che ognuna delle tre R, G e B deve essere convertita in R'=Rgamma, G'=Ggamma, B'=Bgamma, prima di essere inviate al sistema operativo.
Questo può essere rapidamente realizzato costruendo una tabella di lookup di 256 elementi, per ogni invocazione del browser:
for i := 0 to 255 do raw := i / 255; corr := pow (raw, gamma); table[i] := trunc (0.5 + corr * 255.0) end
che poi evita ogni bisogno di fare matematica trascendentale per attributo di colore, non di meno per pixel.
(Questa appendice è informativa, non normativa)
L'obiettivo del lavoro sui CSS1 è stato quello di creare una semplice tecnica di fogli di stile per i documenti HTML. L'attuale specifica è un equilibrio fra la semplicità necessaria per realizzare fogli di stile sul web, e le pressioni provenienti dagli autori per un controllo visuale più ricco. I CSS1 offrono:
<H1>H<FONT SIZE=-1>EADLINE</FONT></H1>
con il foglio di stile:
H1 { font-style: small-caps }
<H1>Headline</H1>
I CSS1 non offrono:
Ci aspettiamo di vedere estensioni dei CSS in varie direzioni:
Non ci aspettiamo che i CSS evolvano in:
(Questa appendice è informativa, non normativa)
Questo documento è una versione rivista della Raccomandazione CSS1 che è stata pubblicata il 17 Dicembre 1996 e di seguito sono indicate le modifiche.
Ci piace ringraziare Komachi Yushi, Steve Byrne, Liam Quin, Kazuteru Okahashi, Susan Lesch e Tantek Çelik per il loro aiuto nel preparare questa versione corretta.
(nota del traduttore: è stato lasciato il testo originale inglese in modo da verificare in maniera immediata le modifiche effettuate sulla versione originale; i collegamenti sono validi solo per la versione originale inglese e non per questa traduzione italiana)
As as result, old UAs will ignore the 'STYLE' element, but its content will be treated as part of the document body, and rendered as such.
has been changed to:
As a result, old UAs will ignore the 'STYLE' element, but its content will be treated as part of the document body, and rendered as such.
The second selector matches matches all 'H1' elements that have an ancestor of class 'reddish'.
has been changed to:
The second selector matches all 'H1' elements that have an ancestor of class 'reddish'.
E.g., a style sheet can legally specify that the 'font-size' of an 'active' link should be larger that a 'visited' link, but the UA is not required to dynamically reformat the document when the reader selects the 'visited' link.
has been changed to:
E.g., a style sheet can legally specify that the 'font-size' of an 'active' link should be larger than a 'visited' link, but the UA is not required to dynamically reformat the document when the reader selects the 'visited' link.
"If more than one of the three is 'auto', and one of them is 'width', than the others..."
has been changed to:
"If more than one of the three is 'auto', and one of them is 'width', then the others..."
The margin properties properties set the margin of an element.
has been changed to:
The margin properties set the margin of an element.
(nota del traduttore: è stato lasciato il testo originale inglese in modo da verificare in maniera immediata le modifiche effettuate sulla versione originale; i collegamenti sono validi solo per la versione originale inglese e non per questa traduzione italiana)
font-style: small-caps)
has been replaced by a valid one.
CSS1 assumes a simple box-oriented formatting model where each element results in one or more rectangular boxes.
has been replaced with:
CSS1 assumes a simple box-oriented formatting model where each formatted element results in one or more rectangular boxes.
The top is the top of the object including any padding, border and margin; it is only defined for inline and floating elements, not for non-floating block-level elements.
the word "object" has been replaced with "element" to use consistent terminology.
Note that the margin of the 'P' elements enclose the floating 'IMG' element.
has therefore been corrected to:
Note that the margin of the 'P' element enclose the floating 'IMG' element.
The 'margin' property sets the border for all four sides while the other margin properties only set their respective side.
has been corrected to:
The 'margin' property sets the margin for all four sides while the other margin properties only set their respective side.
"Applying gamma" means that each of the three R, G and B must be converted to R'=Rgamma, G'=Ggamma, G'=Bgamma, before handing to the OS.
has been changed to:
"Applying gamma" means that each of the three R, G and B must be converted to R'=Rgamma, G'=Ggamma, B'=Bgamma, before handing to the OS.