Pagina 1 di 4 1 2 3 ... ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 39
  1. #1
    Utente di HTML.it L'avatar di Robycz
    Registrato dal
    Jul 2002
    Messaggi
    245

    pillola: CSS 1 - principali compatibilità, note ed esempi.

    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!

  2. #2
    Utente di HTML.it L'avatar di Robycz
    Registrato dal
    Jul 2002
    Messaggi
    245

    PARTE 1

    '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 }

  3. #3
    Utente di HTML.it L'avatar di Robycz
    Registrato dal
    Jul 2002
    Messaggi
    245

    PARTE 2

    '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 }

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

  5. #5
    Utente di HTML.it L'avatar di jackweb
    Registrato dal
    Nov 2002
    Messaggi
    455
    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!

  6. #6
    Utente di HTML.it L'avatar di Robycz
    Registrato dal
    Jul 2002
    Messaggi
    245
    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

  7. #7
    Utente di HTML.it L'avatar di jackweb
    Registrato dal
    Nov 2002
    Messaggi
    455
    :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 !!!

  8. #8
    Utente di HTML.it
    Registrato dal
    Jan 2002
    Messaggi
    633
    alla faccia!!
    bella pillolozza da salvare subito!!!

    complimenti!!!

    ciauz
    Alcuni miei articoli in PRO.HTML.IT: JavaScript | DHTML | DOM
    Sviluppo : wedev | forum

  9. #9
    Utente di HTML.it L'avatar di Robycz
    Registrato dal
    Jul 2002
    Messaggi
    245
    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

  10. #10
    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
    Hey Barney, fantastico, hai portato un barile di birra!! Già, dove posso riempirlo?
    http://www.ibolli.it

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.