User Tools

Site Tools


doc:appunti:prog:usare_i_fogli_di_stile

This is an old revision of the document!


Usare i fogli di stile (CSS)

CSS2 Specification

Per includere un foglio di stile si aggiunge un tag dentro <head>,

<head>
    <link rel="stylesheet" href="style.css">

La cosa più complicata è scrivere i selettori in modo che siano più generici possibile e sfruttino l'effetto cascata.

Attributo ID

Ciascun attributo ID deve comparire una sola volta all'interno di una pagina, in modo da permetterne l'identificazione univoca. Se più di un elemento deve essere etichettato con lo stesso valore, si deve utilizzare l'attributo CLASS.

#navigation {
    float: left;
    /* border-width: thin; */
    /* border-style: dotted; */
    /* border-color: #993366; */
    margin-top: 0px;
    margin-left: 0px;
    width: 15%;
    height: auto;
    padding: 1ex;
}

Il selettore #navigation si applica a qualunque elemento (in quanto niente precede il segno #) che abbia ID=“navigation”. Lo stile dell'esempio sopra crea un box allineato a sinistra se applicato ad una sezione del tipo:

<div id="navigation">
<ul>
<li><a href="item1">Item1</a>
<li><a href="item1">Item2</a>
<li><a href="item1">Item3</a>
</ul>
</div>

Attributo CLASS

.menu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

Il selettore .menu ul si applica ad ogni elemento ul che sia discendente di un qualunque elemento (in quanto niente precede il punto) cha abbia un attributo CLASS=“menu”.

L'esempio precedente può essere applicato ad una lista con qualcosa del genere:

<div class="menu">
<ul>
<li><a href="item1">Item1</a>
<li><a href="item1">Item2</a>
<li><a href="item1">Item3</a>
</ul>
</div>
doc/appunti/prog/usare_i_fogli_di_stile.1243864836.txt.gz · Last modified: 2009/06/01 16:00 by niccolo