3 Tipi di stili, cascade

Pubblicato il di

Vediamo come inserire un foglio di stile in linea, ovvero inserito in uno specifico tag html.

Per fare ciò si andrà ad aggiungere all’interno del singolo elemento html una  proprietà style .

<p class="Titolo" style="font-size: 10px">TITOLO</p>

In questo caso questo paragrafo avrà una dimensione di 10 pixel e tale regola prevarrà su quella generica che abbiamo specificato nella prima lezione:

<head>
    <title>Prova css</title>

    <style type="text/css">
        .Titolo
        {
            text-align: center; font-weight: bold;
            font-family: "Arial,Helvetica, sans-serif";
            font-size:20px; color: #000;
        }
        body {
            background-image: url("http://it.seaicons.com/wp-content/uploads/2016/07/cat-icon.png");
            background-attachment: scroll;
            background-repeat: no-repeat;
            background-position: 10em 5em;
            font-size: 20px;
        }
    </style>
</head>
<body>
<p class="Titolo" style="font-size: 10px">TITOLO</p>
</body>

Nonostante la regola generale preveda un font size di 20px la regola inline, sovrascrive quella superiore. Questo è un primo esempio di stile in cascata , dove la località (intesa come vicinanza) del codice, prevale su quella più distante. Tutte le altre proprietà non specificate, vengono comunque ereditate dalle regole più in alto (quelle embedded).

Questa tecnica inline, è da preferirsi ogni volta che un elemento ha delle sue regole specifiche , che valgono solo per quello specifico tag html.

Le regole dei fogli embedded, racchiusi tra i tag <style>…</style>, sono da usarsi quando queste regole devono valere su tutta quella pagina html.

I fogli di stile esterni linked, sono da applicarsi quando le regole devono essere applicate a più o tutte le pagine html.

Il concetto di cascata o cascade, significa che il livello embedded vince su quello linked, in quella certa pagina in cui è inserito, mentre il blocco inline vince su tutte le altre 2 modalità in quello specifico elemento in cui è inserito.

Il metodo inline, sarebbe da usare il meno possibile, risulta però davvero comodo per effettuare delle prove al volo sul singolo elemento, prima di scrivere le regole generali.

La soluzione migliore in termini di flessibilità e manutenzione è quella di usare fogli di stile separati, applicando le regole embedded o inline anch’esse nel foglio di stile linked inserendo tali regole in un file esterno che avrà guarda caso estensione .css . Creo un file che chiamo temp.css e lo metto nella stessa posizione del file html. Nella sezione <head>, dopo aver tolto il blocco embedded, del file html inserisco il link al file css appena creato:

<link rel="stylesheet" href="temp.css" type="text/css"></link>

Il tag per collegare il foglio di stile esterno è <link> , l’attributo rel significa che è relativo a un foglio di stile (stylesheet), href è la posizione, in questo caso, essendo la stessa posizione, basta il suo nome, il type è il tipo css.

Nel file temp.css inserisco le regole embedded di prima

.Titolo
{
    text-align: center; font-weight: bold;
    font-family: "Arial,Helvetica, sans-serif";
    font-size:20px; color: #000;
}
body {
    background-image: url("http://it.seaicons.com/wp-content/uploads/2016/07/cat-icon.png");
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: 10em 5em;
    font-size: 20px;
}

Noteremo che non avremo alcuna differenza avendole spostate sul foglio linked esterno.

Inseriamo una nuova regola per una nuova classe TitoloGigante

.TitoloGigante {font-size: 100px; color: blue;}

Supponendo che alcune pagine vogliano un titolo grande di colore blu, andrò ad inserire la nuova classe creata in cascata per quei titoli a cui le regole devono essere applicate:

<p class="Titolo TitoloGigante">TITOLO</p>

Tutte le regole della classe Titolo saranno applicate e anche quelle della classe TitoloGigante. Tutte le regole presenti nella seconda classe (TitoloGigante) sovrascriveranno quelle della prima se uguali.

La regola è che l’ultimo stile applicato prevale sugli altri, le regole non presenti sull’ultimo saranno ereditate da quelli precedenti, anche da qui deriva il termine in cascata (cascade) .

Tra le molte proprietà che possono avere gli attributo una si applica a quasi tutti, inherit, cioè eredita lo stile dall’elemento che ti contiene.

border :

<style="border-color: red";>

assegno il colore rosso al bordo di un elemento. Il colore può essere specificato con la terna di coppie di numeri esadecimali RGB, ogni coppia va da 00 a FF (255 colori), la prima è per il rosso (R), la seconda per il verde (G), la terza per il blu (B).  Se volessi ottenere un grigio basta che tutte le 3 coppie abbiano lo stesso valore esadecimale (su base 15), quindi

<style="border-color: #AAAAAA";>

spessore del bordo width

<style="border-width: medium";>

gli attributi possono essere medium, thin e thick, oppure specificando il valore (come al solito in pixel o in em o in percentuale).

Le regole sul bordo possono essere applicate solo su uno dei lati specificando sul quale

<style="border-left-color: red";>

Solo il bordo sinistro avrà il colore rosso.

Si può specificare più regole dentro al tag generico border:

.TitoloGigante {
    font-size: 100px; color: blue;
    border: aqua solid 2px; border-bottom: red dotted 1px;
}

I tag che avranno la classe TitoloGigante, oltre alle precedenti regole, avranno i bordi colore aqua, saranno continui e dello spessore di 2 pixel, mentre il bordo inferiore sarà rosso, tratteggiato e di 1 pixel.