CSS
home esempi

1. introduzione
cos'è lo stile e perché è importante

2. dove si mette lo stile
in linea, incorporato, esterno
sintassi e classi

3. attributi del testo
font-family, -size, -style, -variant, -weight, -decoration

4. attributi dei margini, bordi e riempimento
margin, padding, border, width, float, clear

5. attributi di sfondo e posizionamento
position, background, visibility, overflow, z-index

6. effetti per MSIE
cursore, immagini, transizione,
scroll bar

7. effetti sui forms
position, background, visibility, overflow, z-index

 Attributi del testo

attributo font-family

BODY { font-family: arial, "courier new", impact }

  • più nomi di font sono separati da virgole
  • usare i doppi apici se il nome contiene spazi bianchi
  • si possono usare i nomi generici: serif, "sans serif", cursive, fanct, monospace

    attributo font-size

    BODY { font-size: 12pt }

    la dimensione si può esprimere:

  • specificando l'unità di misura (pt: punti tipografici=1/72 di pollice, px: pixel, cm, in)
  • specificando una percentuale (rispetto al default del browser)
  • specificando un fattore di ingrandimento (rispetto al default del browser): xem
  • con le parole chiave smaller e largerer

    attributo font-style

    BODY { font-style: italic }

    lo stile può esere: normal, italic, oblique (simile a italic, ma utilizza il font normale e lo inclina a destra)

    attributo font-variant

    BODY { font-variant: small-caps }

    la variante può esere: normal, small-caps (maiuscoletto)

    attributo font-weight

    BODY { font-weight: bold }

    lo spessore può esere: extra-light, demi-light, light, medium, bold, demi-bold, extra-bold

    attributo letter-spacing

    <DIV STYLE="font-family:arial; letter-spacing:...">

    attributo text-transform

    <DIV STYLE="font-family:arial; text-transform: uppercase">

    la trasformazione può esere: uppercase, lowercase, capitalize

    attributo text-align

    <DIV STYLE="font-family:arial; text-align: justify">

    l'allineamento può esere: left, right, justify, center

    attributo text-indent

    <DIV STYLE="font-family:arial; text-indent: ...">

    l'allineamento può esere: left, right, justify, center

    attributo line-height

    <DIV STYLE="font-family:arial; line-height: ...">

    definisce l'altezza delle righe

    attributo list-style

    <style type="text/css">
    UL { list-style-image:URL(punto.gif) }
    </style>

    inserisce un'immagine nelle liste puntate

    <style type="text/css">
    UL { list-style-type: disc}
    </style>

    definisce il simbolo usato nella lista: disc (punto pieno), circle (cerchio), square (quadrato), decimal (numero), lower-roman (numero romano minuscolo), upper-roman (numero romano maiuscolo), lower-alpha (lettera alfabetica minuscola), upper-alpha (lettera alfabetica maiuscola), none (nessuno)