REFERENCE CSS 1 - con indicazione delle principali compatibilità, note ed esempi.

[Robycz]

Ecco qui il risultato delle mie fatiche...
dopo quasi due mesi di lavoro di testing vi propongo questa mia PILLOLONA.
Ho riportato TUTTE le proprietà di CSS 1 e, per ciascuna, troverete:
la compatibilità con i principali browser
il valore di default
note
esempi
ed altro...
Per indicare la compatibilità con i browser ho adottato come stratagemma il solito semaforo:
la versione del browser in giallo significa "attenzione": verificate eventuali casi particolari (talvolta solo alcuni valori sono supportati).
la versione del browser in rosso significa "non supportato": scordatevelo...
se il testo è normale non ci sono problemi.
Il tutto è stato testato SOLAMENTE SU PC. Mi dispiace ma non ho alcun Mac a mia disposizione...
Divido il reference in due parti: i due messaggi che troverete a seguire.
Ciao e... spero vi possa essere utile!

P.S: segnalatemi (ovviamente) eventuali discordanze!
Ci tengo ad aggiornare questa mia fatica affinchè possa essere un valido aiuto per tutti quanti!

[Robycz]

'font-family'
Valore: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Default: Definito dal browser
Si applica a: tutti gli elementi
Ereditato: si
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN4.x, 6.0, Opera 5.0
Note: definisce quale font utilizzare. I nomi di font contenenti spazi devono essere inseriti tra apici o virgolette
Esempio:
BODY { font-family: verdana, helvetica, sans-serif }

'font-style'
Valore: normal | italic | oblique
Default: normal
Si applica a: tutti gli elementi
Ereditato: si
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Esempio:
.stile { font-style: italic }

'font-variant'
Valore: normal | small-caps
Default: normal
Si applica a: tutti gli elementi
Ereditato: si
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: attenzione alle accentate con il maiuscoletto…
Esempio:
.maiuscoletto { font-variant: small-caps }

'font-weight'
Valore: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Default: normal
Si applica a: tutti gli elementi
Ereditato: si
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: normal=400, bold=700; bolder e lighter aumentano o diminuiscono di 100 il peso.
Esempio:
P { font-weight: normal }
.ciccio { font-weight: 700 }

'font-size'
Valore: <absolute-size> | <relative-size> | <length> | <percentage>
Default: medium
Si applica a: tutti gli elementi
Ereditato: si
Valori percentuali riferiti a: dimensione del font dell’elemento parent
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note:
<absolute-size>:[ xx-small | x-small | small | medium | large | x-large | xx-large ]
<relative-size>:[ larger | smaller ]
Esempio :
.p12 { font-size: 12; }
.ingrandisce { font-size: larger }
.unavoltaemezza { font-size: 150% }

'font'
Valore: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Default: non definito per le scorciatoie
Si applica a: tutti gli elementi
Ereditato: si
Valori percentuali riferiti a: allowed on <font-size> and <line-height>
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Nota: scorciatoia…
Esempio:
.p12 { font: 12 sans-serif bold }

'color'
Valore: <color>
Default: Definito dal browser
Si applica a: tutti gli elementi
Ereditato: si
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: i valori possono essere specificati in diversi modi, vedi esempio
Esempio:
.blu { color: blue }
.blu1 { color: rgb(0,0,255) }
.blu2 { color: #0000FF }
.blu3 { color: #00F }

'background-color'
Valore: <color> | transparent
Default: transparent
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Esempio:
.sfondobianco { background-color: #FFFFFF }

'background-image'
Valore: <url> | none
Default: none
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Esempio:
BODY { background-image: url(robycz.gif) }
.nosfondo { background-image: none }

'background-repeat'
Valore: repeat | repeat-x | repeat-y | no-repeat
Default: repeat
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: se viene specificata un’immagine di sfondo, si definisce la sua eventuale ripetizione
Esempio:
BODY { background: url(robycz.gif); background-repeat: repeat-x; }

'background-attachment'
Valore: scroll | fixed
Default: scroll
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: l’immagine “scrolla” con la pagina o resta fissa…
Esempio:
BODY { background: url(robycz.gif); background-repeat: repeat-x; background-attachment: fixed; }

'background-position'
Valore: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Default: 0% 0%
Si applica a: block-level
Ereditato: no
Valori percentuali riferiti a: dimensione dell’elemento stesso
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: indica la posizione dell’immagine di sfondo rispetto all’elemento. Se l’immagine è fissa la posizione si riferisce alla pagina e non più all’elemento.
Esempio:
BODY { background: url(robycz.gif) center top }
BODY { background: url(robycz.gif) 50% 0% }
BODY { background-image: url(robycz.gif); background-attachment: fixed; background-position: 50% 100%; }

'background'
Valore: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Default: non definito per le scorciatoie
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: supportati solo per <background-position>
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Esempio:
P { background: url(robycz.gif) gray 35% fixed }

'word-spacing'
Valore: normal | <length>
Default: normal
Si applica a: tutti gli elementi
Ereditato: si
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: length indica quanto dovrà essere aggiunto alla spaziatura di default (i valori possono essere negativi).
Esempio:
P { word-spacing: 2em }

'letter-spacing'
Valore: normal | <length>
Default: normal
Si applica a: tutti gli elementi
Ereditato: si
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: la spaziatura può essere modificata dal tipo di allineamento (giustificato).
Esempio:
P { letter-spacing: 0 }

'text-decoration'
Valore: none | [ underline || overline || line-through || blink ]
Default: none
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
A:link, A:visited { text-decoration: overline }

'vertical-align'
Valore: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Default: baseline
Si applica a: elementi inline
Ereditato: no
Valori percentuali riferiti: alla 'line-height' dell’elemento stesso
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: alcune proprietà fanno riferimento a “parent” (es: text-bottom allinea l’elemento con la base del font dell’elemento parent): baseline, middle, sub, super, text-top, text-bottom; altre proprietà fanno riferimento alla “linea” formattata di cui l’elemento è parte (top allinea verticalmente in alto l’elemento rispetto al più alto elemento nella linea): top, bottom.
Valori in percentuale si riferiscono al valore della proprietà line-height dell’elemento stesso.

'text-transform'
Valore: capitalize | uppercase | lowercase | none
Default: none
Si applica a: tutti gli elementi
Ereditato: si
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: 'capitalize': ogni parola ha la prima lettera maiuscola, 'uppercase' tutto maiuscolo, 'lowercase' tutto minuscolo, 'none' annulla il vaolre ereditato.
P { text-transform: capitalize }
TD { text-transform: uppercase }

'text-align'
Valore: left | right | center | justify
Default: Definito dal browser
Si applica a: elementi block-level (

)
Ereditato: si
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: L’allineamento fa riferimento all’elemento contenitore (es: la cella della tabella)
Esempio:
TD { text-align: center }

'text-indent'
Valore: <length> | <percentage>
Default: 0
Si applica a: elementi block-level (

)
Ereditato: si
Valori percentuali riferiti a: larghezza dell’elemento parent
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: il valore può essere negativo.
Esempio:
P { text-indent: 3cm }

'line-height'
Valore: normal | <number> | <length> | <percentage>
Default: normal
Si applica a: tutti gli elementi
Ereditato: si
Valori percentuali riferiti a: dimensione del font dell’elemento stesso
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: se viene specificato un numero, questo verrà moltiplicato per la dimensione del font.
Esempio: questi esempi danno lo stesso risultato
P { line-height: 140%; font-size: 10pt }
P { line-height: 1.4; font-size: 10pt }
P { line-height: 1.4em; font-size: 10pt }

'margin-top'
Valore: <length> | <percentage> | auto
Default: 0
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: larghezza dell’elemento contenitore
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: valore del margine alto dell’elemento
Esempio:
P { margin-top: 2 }

'margin-right'
Valore: <length> | <percentage> | auto
Default: 0
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: larghezza dell’elemento contenitore
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: valore del margine destro dell’elemento
Esempio:
P { margin-right: 2 }

'margin-bottom'
Valore: <length> | <percentage> | auto
Default: 0
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: larghezza dell’elemento contenitore
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: valore del margine basso dell’elemento
Esempio:
P { margin-bottom: 2 }

'margin-left'
Valore: <length> | <percentage> | auto
Default: 0
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: larghezza dell’elemento contenitore
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: valore del margine sinistro dell’elemento
Esempio:
P { margin-right: 2 }

'margin'
Valore: [ <length> | <percentage> | auto ]{1,4}
Default: non definito per le scorciatoie
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: larghezza dell’elemento contenitore
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: scorciatoia…
P { margin: 2px } /* tutti i margini hanno 2px */
P { margin: 2px 3px } /* sopra e sotto 2px, destra e sinistra 3px */
Queste due si equivalgono:
P { margin: 3px 1px 2px } /* sopra 3px, destra 1px, sotto 2px, sinistra 1px */
P {
margin-top: 3px;
margin-right: 1px;
margin-bottom: 2px;
margin-left: 1px;
}

'padding-top'
Valore: <length> | <percentage>
Default: 0
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: larghezza dell’elemento contenitore
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: dimensione del padding sul bordo superiore dell’elemento
Esempio:
TD { padding-top: 3px }

'padding-right'
Valore: <length> | <percentage>
Default: 0
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: larghezza dell’elemento contenitore
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: dimensione del padding sul bordo destra dell’elemento
Esempio:
TD { padding-right: 3px }

'padding-bottom'
Valore: <length> | <percentage>
Default: 0
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: larghezza dell’elemento contenitore
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: dimensione del padding sul bordo inferiore dell’elemento
Esempio:
TD { padding-bottom: 3px }

'padding-left'
Valore: <length> | <percentage>
Default: 0
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: larghezza dell’elemento contenitore
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: dimensione del padding sul bordo sinistro dell’elemento
Esempio:
TD { padding-left: 3px }

[Robycz]

'padding'
Valore: [ <length> | <percentage> ]{1,4}
Default: non definito per le scorciatoie
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: larghezza dell’elemento contenitore
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: scorciatoia…
Esempio:
P { padding: 2px 4px; }

'border-top-width'
Valore: thin | medium | thick | <length>
Default: 'medium'
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: Definisce la dimensione del bordo superiore
Esempio:
P { border-top-width: 3px }

'border-right-width'
Valore: thin | medium | thick | <length>
Default: 'medium'
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: Definisce la dimensione del bordo destro
Esempio:
P { border-right-width: 3px }

'border-bottom-width'
Valore: thin | medium | thick | <length>
Default: 'medium'
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: Definisce la dimensione del bordo inferiore
Esempio:
P { border-bottom-width: 3px }

'border-left-width'
Valore: thin | medium | thick | <length>
Default: 'medium'
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: Definisce la dimensione del bordo sinistro
Esempio:
P { border-left-width: 3px }

'border-width'
Valore: [thin | medium | thick | <length>]{1,4}
Default: non definito per le scorciatoie
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: Scorciatoia... Come negli altri casi in cui ci possono essere 4 valori (per i 4 bordi), l’interpretazione da dare è la seguente:
· 1 valore: i 4 bordi avranno quel valore;
· 2 valori: sopra e sotto come il primo valore, destra e sinistra come il secondo;
· 3 valori: sopra come il primo, destra come il secondo, sotto come il terzo; il valore non definito (sinitra) sarà identico al suo dirimpettaio: destra=sinistra;
· 4 valori: rispettivamente sopra, destra, sotto, sinitra.
Esempio:
P { border-width: 1px }
P { border-width: 1px 2px }
P { border-width: 1px 2px 3px }

'border-color'
Valore: <color>{1,4}
Default: quello della proprietà 'color'
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: definisce il colore dei 4 bordi con la stessa logica con cui border-width definisce il loro spessore: accetta, infatti, da 1 a 4 valori.
Esempio:
P { color: red; background: white; border: solid }

'border-style'
Valore: none | dotted | dashed | solid | double | groove | ridge | inset | outset
Default: none
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: definisce lo stile dei 4 bordi, può avere da 1 a 4 valori. Il valore di default è none. Lo stile double definisce una linea doppia il cui spessore totale (linea+spazio+linea) è, se possibile, quello definito in border-width.
Esempio:
P { border-style: solid double }
In the above example, the horizontal borders will be 'solid' and the vertical borders will be 'dotted'.
Since the Default Valore of the border styles is 'none', no borders will be visible unless the border style is set.

'border-top'
Valore: <border-top-width> || <border-style> || <color>
Default: non definito per le scorciatoie
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: una scorciatoia per definire spessore stile e colore del bordo superiore di un elemento. Se, ad esempio, il colore non viene definito, il colore del bordo sarà lo stesso assegnato all’elemento.
Esempio:
H1 { border-top: 3px solid red }

'border-right'
Valore: <border-right-width> || <border-style> || <color>
Default: non definito per le scorciatoie
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: come border-top

'border-bottom'
Valore: <border-bottom-width> || <border-style> || <color>
Default: non definito per le scorciatoie
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: come border-top

'border-left'
Valore: <border-left-width> || <border-style> || <color>
Default: non definito per le scorciatoie
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: come border-top

'border'
Valore: <border-width> || <border-style> || <color>
Default: non definito per le scorciatoie
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: è una scorciatoia per assegnare il medesimo spessore, colore e stile a tutti e quattro i bordi.
Esempio:
P { border: 2px solid black }

'width'
Valore: <length> | <percentage> | auto
Default: auto
Si applica a: elementi block-level (

)
Ereditato: no
Valori percentuali riferiti a: refer to parent element's width
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: Se applicato alle immagini ed height=’auto’, l’immagine ridimensionata manterrà le proporzioni originali.
Esempio:
IMG.preview { width: 25% }

'height'
Valore: <length> | auto
Default: auto
Si applica a: elementi block-level (

)
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: come ‘width’

'float'
Valore: left | right | none
Default: none
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: il valore di default è none. Se il valore è left l’elemento viene spostato a sinistra e, di conseguenza, il testo viene spostato alla sua destra.
Esempio:
IMG.preview { float: left }

'clear'
Valore: none | left | right | both
Default: none
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: specifica su quali lati vengono accettati elementi ‘float’.
Esempio:
H1 { clear: right }

'display'
Valore: block | inline | list-item | none
Default: block
Si applica a: tutti gli elementi
Ereditato: no
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: questa proprietà definisce se e come un elemento viene visualizzato (sul monitor, sulla stampante…).
‘block’: l’elemento verrà gestito come un nuovo box (un riquadro, con tutte le proprietà che ne derivano), come avviene per il tag

.
‘inline’: l’elemento verrà gestito in un box inline allo stesso livello del precedente, sarà quindi dimensionato di conseguenza.
‘none’: l’elemento non verrà visualizzato, e nemmeno quelli in esso contenuti.
Esempio che rende invisibili tutte le immagini contenute:
IMG { display: none }

'white-space'
Valore: normal | pre | nowrap
Default: normal
Si applica a: elementi block-level (

)
Ereditato: si
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: definisce la modalità di gestione degli spazi (da barra-spaziatrice).
‘normal’: quella di default;
‘pre’: per il testo preformattato, vengono inseriti tanti spazi quanti quelli presenti nel codice;
‘nowrap’: si va’ a capo solo dove c’è il

Esempio:
PRE { white-space: pre }
P { white-space: nowrap }

'list-style-type'
Valore: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Default: disc
Si applica a: liste e elementi che hanno la proprietà 'display'='list-item'
Ereditato: si
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: definisce lo stile del marcatore di nuova linea nelle liste ([*] …) se non è definita come marcatore un’immagine (list-style-image) o se questa immagine non può essere visualizzata.
Esempio:
OL { list-style-type: lower-alpha } risultato: a b c d ecc.
OL { list-style-type: upper-roman } risultato: I II III IV ecc.

'list-style-image'
Valore: <url> | none
Default: none
Si applica a: liste e elementi che hanno la proprietà 'display'='list-item'
Ereditato: si
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: definisce l’immagine da utilizzare come marcatore di nuova linea in una lista
UL { list-style-image: url(robycz.gif) }

'list-style-position'
Valore: inside | outside
Default: outside
Si applica a: liste e elementi che hanno la proprietà 'display'='list-item'
Ereditato: si
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: si utilizza per determinare in che modo i marcatori di inizio linea vengono allineati relativamente alla linee a livello superiore o inferiore (elenchi e sottoelenchi).

'list-style'
Valore: [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none]
Default: non definito per le scorciatoie
Si applica a: liste e elementi che hanno la proprietà 'display'='list-item'
Ereditato: si
Valori percentuali riferiti a: non supportati
Compatibilità: IE 5.0, 5.5, 6.0, NN 4.x, 6.0, Opera 5.0
Note: scorciatoia per list-style-type, list-style-image e list-style-position. Attenzione che il peso di ciascuna definizione deve essere attentamente valutato: maggior specificità implica maggior peso.
Esempio:
UL { list-style: url(robycz.gif) circle }

[Nightwalker]

grazie mille della tua pillola, a me e' gia stata molto utile dopo soli 5 minuti

[jackweb]

Complimenti!!!:gren: Trovo il tutto molto utile, ancora di + per chi, come me, sta appena mettendo le mani sui css!!! Volevo porti una domanda...
a livello di velocità del caricamento della pagina, è meglio usare css interni o esterni al documento al html? la domanda vale anche per i javascript...
Comlimenti ancora!

[Robycz]

Si tratta di fare una valutazione.

Vediamola così:
1. hai una serie di 10 file html e ciascuno di questi ha, poniamo, 1k di codice riservato agli stili: totale caricamento degli stili = 10k.
2. hai un file esterno .css di 1k e 10 file html che lo richiamano: si suppone che venga scaricato 1 volta e che le altre 9 volte il browser se lo trovi nella cache... totale caricamento degli stili = 1k

idem per i js...

Questo è un caso particolare, può darsi che tu abbia solo 3 diversi js utilizzati in 3 pagine diverse... a questo punto (per i tempi di scaricamento) sarebbe meglio copiare i js nella pagina.
Resta da valutare la leggibilità del codice: 200 righe di codice js nel documento html non lo rendono certo più leggibile.

Ciauz

[jackweb]

:tongue:
Grazie per avermi risposto, questa spiegazione mi è molto utile, visto che da poco mi sono immerso in questo campo e ritengo la velocità delle pagine una cosa fondamentale per evitare la paranoia ai visitatori.......in certi casi c'è da tagliarsi le vene!!!
Alla proxima !!!

[standard]

alla faccia!!
bella pillolozza da salvare subito!!!

complimenti!!!

ciauz

[Robycz]

Grazie a tutti per i complimenti!
Avviso, comunque, che sto lavorando per una
"guida" simile di CSS 2...
Che ne dite?
Una saluto a tutti

[teazzo]

Originariamente inviato da Robycz
Avviso, comunque, che sto lavorando per una
"guida" simile di CSS 2...
Che ne dite?

Dico che non vedo l'ora.

Ciao e grazie