07. Regole CSS

Le regole CSS si compongono in modo similare in tutte e tre le modalità applicabili agli stili (CSS Inline, CSS Interno, CSS Esterno), anche se con alcune importanti specificità, e consentono di specificare in ogni regola una o più coppie proprietà valore , con una sintassi del tipo:

property: value; property: value; ...


Esempio:

<p style="color: blue; font-size: 16px;">Questo è un paragrafo che usa CCS inline.</p>


Ogni regola si applicherà ai tag HTML che soddisfano il criterio di selezione specifico del selettore utilizzato.

Esempio:

    <!DOCTYPE html>

<html lang="it">

     <head>

          <meta charset="UTF-8">

          <title>Esempio CSS Interno</title>

          <style>

               /* Stile per il selettore di tipo */

               p {

                    color: blue;

                    font-size: 16px;

               }

               

               /* Stile per il selettore di classe */

               .mia-classe {

                    color: red;

                    font-weight: bold;

               }


               /* Stile per il selettore di ID */

               #mio-id {

                    background-color: yellow;

               }

          </style>

     </head>

     <body>

          <p>A questo paragrafo si applica lo stile del selettore di tipo che prevede il colore blu.</p>     

          <p class="mia-classe">

               Questo paragrafo utilizza la classe "mia-classe" e sarà rosso (red) 

               e in grassetto.

          </p>

          <div id="mio-id">

               Questo div utilizza l'ID "mio-id" e avrà uno sfondo giallo.

          </div>

     </body>

</html>

In questo esempio nella sezione STYLE, delimitata dai tag <stye> e </style>, ritroviamo la definizione di tre regole CSS che utilizzano tipi di selettori differenti che, nell'ordine, sono: selettore di tipo, selettore di classe selettore di ID.

Nel BODY ritroviamo tre elementi ai quali si applicano nell'ordine le tre regole:

Ogni regola si applicherà ai tag HTML che soddisfano il criterio di selezione specifico del selettore utilizzato.


Esempio:

/* Stile per il selettore di tipo */

    p {

         color: blue;

         font-size: 16px;

    }

               

    /* Stile per il selettore di classe */

    .mia-classe {

         color: red;

         font-weight: bold;

    }

    /* Stile per il selettore di ID */

         #mio-id {

         background-color: yellow;

    }


    <!DOCTYPE html>

<html lang="it">

     <head>

          <meta charset="UTF-8">

          <title>Esempio CSS Interno</title>

          

          <!-- Collegamento al file CSS esterno -->

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

     </head>

     <body>

          <p>A questo paragrafo si applica lo stile del selettore di tipo che prevede il colore blu.</p>     

          <p class="mia-classe">

               Questo paragrafo utilizza la classe "mia-classe" e sarà rosso (red) 

               e in grassetto.

          </p>

          <div id="mio-id">

               Questo div utilizza l'ID "mio-id" e avrà uno sfondo giallo.

          </div>

     </body>

</html>

Questo esempio riproduce lo stesso risultato già visto per il CSS interno (l'immagine è la stessa).

Anche l'interpretazione delle regole è la stessa. L'unica differenza risiede nel fatto che le regole sono incluse in un file a parte, richiamato tramite il tag <link>.

Proprietà delle regole CSS

Le regole CSS consentono di specificare un una o più proprietà e, per ciascuna di esse, un valore appropriato.

Un elenco non esaustivo di proprietà è il seguente:

La proprietà z-index

La proprietà z-index è una proprietà CSS che specifica l'ordine di sovrapposizione di elementi HTML. Gli elementi con un z-index maggiore vengono posizionati sopra gli elementi con un z-index minore.

La proprietà z-index assume valori interi, che possono essere positivi o negativi. Un valore z-index di 0 è il valore predefinito e significa che l'elemento è posizionato in modo normale, senza alcuno spostamento sull'asse Z.

Un valore z-index positivo indica che l'elemento è posizionato sopra gli elementi con un z-index minore. Un valore z-index negativo indica che l'elemento è posizionato sotto gli elementi con un z-index maggiore.

Ad esempio, se consideriamo due elementi div, denominati div1 e div2, e div1 ha un z-index di 1 e div2 ha un z-index di 0, allora div1 verrà visualizzato sopra div2.

La proprietà z-index è utile per creare effetti di sovrapposizione, come l'inserimento di testo su un'immagine o il posizionamento di un elemento davanti a un altro.

Esempio:

<div id="immagine">

    <img src="immagine.jpg" alt="Immagine">

</div>


<div id="testo">

    Questo è del testo

</div>


<style>

    #immagine {

        position: relative;

    }


    #testo {

        position: absolute;

        top: 10px;

        left: 10px;

        z-index: 1;

    }

</style>


In questo esempio, il div #immagine contiene un'immagine e il div #testo contiene del testo.

La proprietà z-index del div #testo è impostata su 1 mentre il div #testo non ha la proprietà z-index impostata esplicitamente e quindi il suo valore è quello di default, vale a dire 0. Questo significa che il testo verrà visualizzato sopra l'immagine.