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

 2. dove si mette lo stile
  • sintassi
  • classi
  • colori

    • stile in linea
    dentro il corpo del documento, come gli altri comandi di formattazione, utilizzando i tag <DIV> e <SPAN> appositamente definiti

    <DIV STYLE="font-size:18px; font-family:arial; color:red">
    testo arial, rosso, 18px </DIV>     produce:

    testo arial, rosso, 18px

    ma anche direttamente dentro i tag HTML:
    <P STYLE="font-size:18px; font-family:arial; color:red">rosso</P> produce:

    rosso

    <A STYLE="text-decoration:none" HREF="">link non sottolineato</a> produce:
    link non sottolineato prova a passarci sopra!

    stile incorporato
    nell'<HEAD> del documento, vale per tutto il documento, ridefinisce sezioni standard e/o definisce nuove classi

    <STYLE type="text/css">
    BODY { font-family:verdana; }
    H1 { font-size:18px; font-family:verdana; color:green }
    H2 { font-size:24px; font-family:arial; color:red;
    border-width: 1; border: solid; border-color: green; text-align:center }
    </STYLE>
    produce:

    linea H1

    linea H2

    stile esterno
    in un file esterno, vale per tutti i documenti che lo richiamano.

    il file di nome stile.css:
    BODY { font-family:verdana; }
    H1 { font-size:17px; font-family:verdana; color:green }
    H2 { font-size:18px; font-family:arial; color:red }

    richiamato nell'<HEAD> del documento:
    <LINK rel=stylesheet href="stile.css" type="text/css">

    produce lo stesso effetto di prima.

    sintassi

    tag_da_modificare {Attributo: Valore; [...]}

  • gli attributi sono inseriti tra parentesi graffe { }
  • al posto del segno = vengono usati i due punti :
  • gli argomenti consecutivi sono separati dal segno ; invece che dalla virgola ,
  • gli attributi composti da piu' termini sono separati da un trattino -

    classi

    gli attributi di stile si assegnano ai tag HTML, ma CSS consente di definire classi, sia dipendenti dai tag che indipendenti.

    Le classi si creano battezzandole con un nome preceduto da .

    <STYLE TYPE="text/css">
    <!--
    H2.top {font-family:verdana; font-size:15px; font-weight:bold; font-style:normal}
    H4.bottom {font-family:arial; font-size:20px; font-weight:bold; font-style: italic; color=orange; }
    .inter { color: black; background: blue; font-size: 16pt; font-weight: bold; }
    .milan {color:black; background=red;}
    -->
    </STYLE>

    All'interno del documento le classi si richiamano con la parola chiave class:

    <H4 class=bottom>titolo di livello 4</H4>
    <P class=inter>W l'INTER!</P>

    titolo di livello 4

      W l'INTER!

    colori

    gli attributi di colore (color, bgcolor, border-color) si qualificano col nome del colore, con i valori esadecimali e anche con i valori decimali (ovviamente da 0 a 255)

    <P STYLE="color:rgb(240,0,0)">rosso</P> produce:

    rosso