Articles
Introduzione al CSS
Ereditarietà nei CSS

Ereditarietà nei CSS

Questo articolo spiega l'ereditarietà in CSS.

Puoi controllare le proprietà rappresentative ereditate e non ereditate.

YouTube Video

HTML per Anteprima

css-inheritance.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Inheritance</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-inheritance.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Inheritance</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header><h2>CSS Inheritance</h2></header>
19        <article>
20            <h3>Example of Inheritance</h3>
21            <section>
22                <p>
23                    Example of P Element.<br>
24                    <span>Example of Span Element</span>
25                </p>
26            </section>
27            <div>
28                Example of Div Element
29            </div>
30            <ul>
31                <li>List Item 1</li>
32                <li>List Item 2</li>
33                <li>List Item 3</li>
34            </ul>
35        </article>
36        <article>
37            <h3>all</h3>
38            <section>
39                <h4>Initial</h4>
40                <div class="all-initial">This is an initial element</div>
41            </section>
42            <section>
43                <h4>Inherit</h4>
44                <div class="parent-inherit">
45                    <div class="all-inherit">This is an inherited element</div>
46                </div>
47            </section>
48            <section>
49                <h4>Unset All</h4>
50                <div class="parent-unset">
51                    <div class="all-unset">This is an unset element</div>
52                </div>
53            </section>
54            <section>
55                <h4>all and !important</h4>
56                <div class="important-style">
57                    <div class="all-with-important">
58                        This is an initial element with !important
59                    </div>
60                </div>
61            </section>
62        </article>
63    </main>
64</body>
65</html>

Ereditarietà nei CSS

In CSS, alcune proprietà sono automaticamente ereditate dagli elementi genitori agli elementi figli. Questo è un meccanismo utile perché, una volta impostata una specifica proprietà, anche gli elementi figli avranno lo stesso stile, eliminando la necessità di impostarlo ripetutamente. Tuttavia, non tutte le proprietà sono ereditate; alcune proprietà sono ereditate mentre altre no. Ad esempio, color e font-family sono ereditati, ma le proprietà del modello di scatola come margin e padding non lo sono.

Proprietà ereditate

Le proprietà ereditabili sono principalmente quelle relative al testo e ai caratteri.

Proprietà comunemente ereditate

  1. color: Colore del testo
1body {
2    color: black;
3}
  • In questo caso, tutti gli elementi figli all'interno di body avranno il colore del testo nero.
  1. font-family: Famiglia di caratteri
1body {
2    font-family: "Times New Roman", cursive;
3}
  • Tutti gli elementi figlio usano il font Arial.
  1. font-size: Dimensione del testo
1body {
2    font-size: 16px;
3}
  • Tutto il testo all'interno del body sarà di 16px per impostazione predefinita.
  1. line-height: Spaziatura delle righe
1p {
2    line-height: 1.5;
3}
  • Il testo all'interno di un elemento <p> verrà visualizzato con un'interlinea pari a 1,5, influenzando anche i suoi elementi figlio.
  1. text-align: Allineamento del testo
1div {
2    text-align: center;
3}
  • Il testo e gli elementi in linea all'interno di un elemento div sono visualizzati centrati.
  1. visibility: Visibilità degli elementi
1div {
2    visibility: hidden;
3}
  • visibility è una proprietà che controlla la visibilità di un elemento. Quando è impostato su nascosto, l'elemento diventa invisibile.
  • In questo caso, anche gli elementi figlio all'interno del div saranno nascosti.
  1. list-style: Stile elenco (marcatori elenco per <ul> e <ol>)
1ul {
2    list-style: square;
3}
  • In questo caso, gli elementi della lista all'interno del tag ul verranno visualizzati con marcatori quadrati.

Esempio:

Proprietà non ereditate

Le proprietà relative al layout e al modello a blocchi di solito non sono ereditate. Queste proprietà devono essere impostate individualmente per ciascun elemento.

Proprietà comuni non ereditate

  1. margin, padding: Margini esterni e interni di un elemento
1div {
2    margin: 10px;
3    padding: 20px;
4}
  • Anche se imposti margini esterni o interni per un elemento div, questi non influenzano i suoi elementi figli.
  1. border: Bordo dell'elemento
1div {
2    border: 1px solid black;
3}
  • Anche se un bordo è impostato su un elemento genitore, questo non influenza gli elementi figli.
  1. width, height: Larghezza e altezza dell'elemento
1div {
2    width: 100px;
3    height: 50px;
4}
  • La larghezza e l'altezza di un elemento genitore non influenzano automaticamente gli elementi figli.
  1. background: Stile di sfondo
1body {
2    background-color: lightblue;
3}
  • Il colore di sfondo impostato sul body non influenza direttamente gli elementi figli. Tuttavia, se un elemento figlio ha uno sfondo trasparente, il colore di sfondo dell'elemento genitore potrebbe essere visibile attraverso di esso.

Esempio:

Controllo dell'ereditarietà

L'ereditarietà può essere controllata utilizzando le parole chiave inherit, initial o unset.

  • Se vuoi abilitare l'ereditarietà: Puoi forzare esplicitamente l'ereditarietà utilizzando la parola chiave inherit.
1div {
2    color: inherit;  /* Inherit the color from its parent element */
3}
  • Se non vuoi l'ereditarietà: Puoi reimpostare la proprietà al suo valore iniziale utilizzando le parole chiave initial o unset.
1p {
2    color: initial;  /* Reset the color to its initial/default value */
3}

Esempio:

La proprietà all

La proprietà all è una proprietà che può reimpostare quasi tutte le proprietà CSS, incluse quelle ereditabili, per un elemento specificato in una sola volta. Specificamente, puoi usare le seguenti tre parole chiave per impostare le proprietà di un elemento:.

  • initial: Reimposta tutte le proprietà ai loro valori iniziali.
  • inherit: Eredita tutte le proprietà dall'elemento genitore.
  • unset: Eredita la proprietà se è ereditabile, altrimenti la reimposta al suo valore iniziale.

all è molto utile quando vuoi reimpostare o impostare più proprietà in blocco, piuttosto che impostare solo proprietà specifiche individualmente.

Esempio di reimpostazione ai valori iniziali 

1.all-initial {
2    all: initial;
3    background-color: lightskyblue;
4}

  • Quando vuoi reimpostare tutti gli stili precedentemente impostati per un elemento specifico e riportarlo al suo stato iniziale, usa all: initial in questo modo.

  • In questo esempio, tutte le proprietà dell'elemento <div> con la classe .all-initial sono reimpostate ai valori iniziali predefiniti del browser.

Esempio di ereditarietà 

 1.parent-inherit {
 2    color: blue;
 3    font-size: 20px;
 4    border: 1px solid blue;
 5}
 6
 7.all-inherit {
 8    all: inherit;
 9    background-color: lightskyblue;
10}
  • Utilizzando all: inherit tutte le proprietà vengono ereditate dall'elemento genitore.
  • In questo esempio, gli elementi con la classe .all-inherit ereditano tutte le proprietà, come color e font-size, dall'elemento genitore.

Esempio di Determinazione del Valore Iniziale o Ereditarietà Basata su Condizioni 

 1.parent-unset {
 2    color: blue;
 3}
 4
 5.all-unset {
 6    font-weight: bold;
 7}
 8
 9.all-unset {
10    all: unset;
11}
  • Utilizzando all: unset, le proprietà vengono ereditate se possibile; altrimenti, vengono reimpostate ai loro valori iniziali.
  • In questo caso, color è ereditato, mentre font-weight è reimpostato al suo valore iniziale, tipicamente normal.

Relazione con la Specificità (Priorità) 

1.all-with-important {
2    color: red !important;
3    background-color: lightskyblue;
4}
5
6.all-with-important {
7    all: initial;
8}

  • La proprietà all è un potente meccanismo di reset, ma è influenzato dalla specificità del CSS. Se un elemento specifico ha specifiche di stile forti, la proprietà all potrebbe non essere in grado di sovrascrivere quegli stili. Ad esempio, le proprietà specificate con !important non possono essere influenzate.

  • In questo esempio, anche se provi a reimpostare lo stile con all: initial, la proprietà color non verrà reimpostata a causa della specifica color: red !important.

Elementi a livello di blocco ed elementi inline

Elementi a livello di blocco

  • Esempio: <div>, <p>, <h1> 〜 <h6>, <ul>, <li>, <section>
  • Caratteristiche:
    • Appaiono sempre su una nuova linea ed espandono per occupare l'intera larghezza del loro elemento genitore.
    • La larghezza (width) e l'altezza (height) possono essere impostate liberamente.
    • I margini (margin) e il padding (padding) possono essere impostati in tutte le direzioni e influiranno su tutti i lati.
1div {
2    width: 80%;  /* Set the width to 80% of its parent element's width */
3    padding: 20px;  /* Add a padding of 20 pixels on all sides */
4    margin: 10px 0; /* Add a margin of 10 pixels top and bottom, 0 pixels left and right */
5}

Elementi inline

  • Esempio: <span>, <a>, <strong>, <em>, <img>, <label>
  • Caratteristiche:
    • Appaiono accanto ad altri elementi inline sulla stessa riga.
    • La larghezza (width) e l'altezza (height) non possono essere impostate direttamente (a meno che non venga applicato display: block).
    • Impostare i margini (margin) o il padding (padding) in verticale ha un effetto limitato (i margini e il padding orizzontali sono efficaci).
1a {
2    padding: 5px;  /* Padding for inline elements */
3    margin-right: 10px;  /* Set margin to the right */
4    color: blue;
5}

Differenze tra elementi a livello di blocco ed elementi in linea

  • Impostazioni di larghezza e altezza:

    • Elementi a livello di blocco: Larghezza e altezza possono essere impostate.
    • Elementi inline: Larghezza e altezza generalmente non possono essere impostate.

  • Margini e Padding:

    • Elementi a livello di blocco: Margini e padding vengono applicati a tutti i lati.
    • Elementi inline: Margini e padding sulla parte superiore e inferiore sono inefficaci o hanno un effetto limitato.

  • Metodo di Layout:

    • Elementi a livello di blocco: Posizionati automaticamente su una nuova riga.
    • Elementi inline: Allineati sulla stessa riga con altri elementi inline.

Come puoi vedere, ci sono differenze nel modo in cui gli stili CSS vengono applicati agli elementi a livello di blocco e agli elementi inline. Negli elementi a livello di blocco, le proprietà CSS relative al layout come larghezza, altezza, margine e padding vengono applicate come specificato. D'altra parte, per gli elementi inline, impostare proprietà CSS relative al layout come larghezza, altezza, margine o padding potrebbe non essere applicato o essere applicato in modo limitato.

Gestione CSS di elementi a livello blocco e in linea 

1span {
2    display: block;  /* Display the span element as a block-level element */
3    width: 100px;
4    height: 50px;
5}

Tuttavia, impostando la proprietà display su block o inline-block, puoi regolare gli stili come larghezza e altezza per gli elementi inline come se fossero elementi a blocco.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Basi di CSSDettagli dei selettori di attributi in CSS