Usare i fogli di stile (CSS)

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

select.mybutton {
    color: red;
    margin: 0px;
    padding: 0px;
}

Il selettore select.mybutton si applica agli elementi <SELECT> con CLASS=“mybutton”.

.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>

Effetto cascata

Per utilizzare l'effetto cascata degli stili si possono applicare più classi allo stesso elemento:

<span class="citation external">Text</span>

Ordine di applicazione delle classi

Gli stili derivati da più classi vengono applicati non secondo l'elenco delle classi, ma secondo l'ordine in cui compaiono nel .css.

Selettore multiplo

article h2 {
    color: red;
}

Il selettore article h2 si applica all'elemento <h2> che sia discendente (di qualunque livello) dell'elemento <article>;

article > h2 {
    color: red;
}

in questo caso invece la discendenza deve essere diretta (figlio diretto).

a:focus > img {
    outline-color: #ffff00;
    outline-style: solid;
    outline-width: 2px;
    outline-offset: -2px;
}

In questo caso il selettore si applica all'oggetto <img> contenuto direttamente dentro l'elemento <a>, ma solo nel momento in cui l'elemento <a> ha il focus.

rigacci.org

Table of Contents