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

- CSS Inline: le regole CSS sono definite direttamente all'interno degli attributi style degli elementi HTML. Ogni regola si riferisce unicamente all'elemento che ospita la regola per cui non prevede un selettore.

Esempio:

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

CSS Interno (Embedded): le regole sono definite nella sezione STYLE, delimitata dai tag <style> e </style>, all'interno dell'HEAD. Ogni regola richiede che sia specificato un selettore valido in corrispondenza di un blocco delimitato da parentesi graffe.

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

Esempio:

<!DOCTYPE html>

<head>

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

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

e in grassetto.

</p>

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:

- Il primo elemento è un paragrafo al quale si applica la regola che usa il selettore di tipo.
- Il secondo elemento è anch'esso un paragrafo ma utilizza l'attributo class per specificare la classe di appartenenza, per questo si applica la seconda regola che utilizza il selettore di classe.
- Il terzo elemento è un DIV che specifica tramite l'attributo id l'identificativo di appartenenza, per questo si applica la terza regola che utilizza il selettore di ID.

CSS Esterno: le regole sono definite in un file separato, richiamato tramite il tag <link> all'interno dell'HEAD. Ogni regola richiede che sia specificato un selettore valido in corrispondenza di un blocco delimitato da parentesi graffe.

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

Esempio:

File stile.css (contiene le regole CSS)

/* 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;

}

File documento.html (contiene il documento HTML)

<!DOCTYPE html>

<head>

<title>Esempio CSS Interno</title>

</head>

<body>

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

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

e in grassetto.

</p>

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:

color: specifica il colore del testo (es. "red").
font-family: specifica il tipo di carattere (es. "Arial", "Helvetica", "sans-serif").
font-size: specifica la dimensione del carattere (es. "16px", "1.2em").
font-style: specifica il tipo di inclinazione del font (es. "normal", "italic").
font-weight: determina il grado di spessore o grassetto del testo (es. "normal", "bold", "100", "200", ... "900").
text-align: specifica l'allineamento del testo (es. "center", "right").
margin, padding: specifica margini e spaziatura interna (es. "10px", "2em").
background-color: specifica il colore di sfondo (es. "lightblue", "#F0F0F0").
border: specifica uno stile di bordo completo (es. "1px solid #000").
border-top, border-bottom, border-left, border-right: specifica stili di bordo per lati specifici.
width, height: specifica la larghezza e l'altezza dell'elemento (es. "100px", "50%").
text-decoration: specifica la decorazione del testo (es. "underline", "none").
text-transform: specifica la trasformazione del testo (es. "uppercase", "lowercase").
line-height: specifica l'altezza della linea (es. "1.5", "150%").
visibility: specifica la visibilità dell'elemento (es. "visible", "hidden").
opacity: specifica l'opacità dell'elemento (es. "0.7" per il 70% di opacità).
position: specifica il tipo di posizionamento (es. "relative", "absolute").
top, bottom, left, right: specifica la posizione di un elemento posizionato.
table-layout: determina come vengono calcolate le dimensioni delle celle (es. "auto", "fixed" e "inherit").
border-collapse: determina se i bordi delle celle si uniscono o meno (es. "collapse" e "separate").
border-spacing: determina lo spazio tra i bordi delle celle (es. "10px", "20px").
width, height: impostano la larghezza e l'altezza delle celle (es. "100px", "70px").
border-style: determina lo stile dei bordi di un elemento HTML (es. "solid" - continuo, "dotted" - a punti, "double" - doppio).
border-color: determina il colore dei bordi di un elemento HTML (es. "#ff0000", "red").
border-width: determina la larghezza dei bordi di un elemento HTML (es. "2px", "1mm", "thin" - sottile, "medium" - medio, "thick" - spesso).
list-style-type: determina il tipo di indicatore di elenco in un elenco (es. "disc" - punto, "circle" - cerchio, "square" - quadrato, "decimal" - numeri arabi, "lower-alpha" - da a a z, "upper-alpha" - da A a Z).

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>

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.

Sito: 7ecnologie

Sezione: 18. HTML & CSS

Capitolo: 07. Regole CSS

Indice dei capitoli: 00. Risorse - 01. Ambiente di sviluppo - 02. HTML: introduzione - 03. Struttura di un documento HTML - 04. Tag HTML - 05. CSS: introduzione - 06. Selettori CSS - 07. Regole CSS - 08. Regole CSS speciali - 09. Esempi - 10. Tutorial - 98. Esercizi