Articles
Introductie tot CSS
Overerving in CSS

Overerving in CSS

Dit artikel legt de overerving in CSS uit.

U kunt representatieve geërfde en niet-geërfde eigenschappen bekijken.

YouTube Video

HTML voor Voorbeeldweergave

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>

Overerving in CSS

In CSS worden sommige eigenschappen automatisch van ouders naar kindelementen overgeërfd. Dit is een handig mechanisme omdat, zodra u een specifieke eigenschap instelt, kindelementen dezelfde stijl hebben, waardoor het niet nodig is deze steeds opnieuw in te stellen. Echter, niet alle eigenschappen worden geërfd; sommige worden geërfd terwijl andere dat niet doen. Bijvoorbeeld, color en font-family worden geërfd, maar boxmoduleigenschappen zoals margin en padding niet.

Geërfde Eigenschappen

Overerfbare eigenschappen zijn voornamelijk gerelateerd aan tekst en lettertypen.

Algemeen geërfde eigenschappen

  1. color: Tekstkleur
1body {
2    color: black;
3}
  • In dit geval hebben alle kindelementen binnen body een zwarte tekstkleur.
  1. font-family: Lettertype Familie
1body {
2    font-family: "Times New Roman", cursive;
3}
  • Alle kindelementen gebruiken het lettertype Arial.
  1. font-size: Tekstgrootte
1body {
2    font-size: 16px;
3}
  • Alle tekst binnen body heeft standaard een grootte van 16px.
  1. line-height: Regelafstand
1p {
2    line-height: 1.5;
3}
  • Tekst binnen een <p>-element wordt weergegeven met een regelhoogte van 1,5 keer, wat ook van invloed is op de kindelementen.
  1. text-align: Tekstuitlijning
1div {
2    text-align: center;
3}
  • Tekst en inline-elementen binnen een div-element worden gecentreerd weergegeven.
  1. visibility: Element zichtbaarheid
1div {
2    visibility: hidden;
3}
  • visibility is een eigenschap die de zichtbaarheid van een element regelt. Wanneer ingesteld op verborgen, wordt het element onzichtbaar.
  • In dit geval zullen kindelementen binnen de div ook verborgen worden.
  1. list-style: Lijststijl (lijstmarkeringen voor <ul> en <ol>)
1ul {
2    list-style: square;
3}
  • In dit geval worden lijstitems binnen de ul-tag weergegeven met vierkante markeringen.

Voorbeeld:

Niet-erfbare eigenschappen

Eigenschappen met betrekking tot layout en het boxmodel worden meestal niet geërfd. Deze eigenschappen moeten individueel voor elk element worden ingesteld.

Veelvoorkomende niet-erfbare eigenschappen

  1. margin, padding: Buiten- en binnenmarges van een element
1div {
2    margin: 10px;
3    padding: 20px;
4}
  • Zelfs als u buiten- of binnenmarges instelt voor een div-element, heeft dit geen invloed op de kindelementen.
  1. border: Elementrand
1div {
2    border: 1px solid black;
3}
  • Zelfs als een rand is ingesteld op een ouder element, heeft dit geen invloed op de kindelementen.
  1. width, height: Elementbreedte en -hoogte
1div {
2    width: 100px;
3    height: 50px;
4}
  • De breedte en hoogte van een ouder element hebben niet automatisch invloed op de kindelementen.
  1. background: Achtergrondstijl
1body {
2    background-color: lightblue;
3}
  • De achtergrondkleur ingesteld op de body heeft geen directe invloed op de kindelementen. Als een kindelement echter een transparante achtergrond heeft, kan de achtergrondkleur van het ouder element hier doorheen zichtbaar zijn.

Voorbeeld:

Overervingscontrole

Overerving kan worden beheerst met behulp van de sleutelwoorden inherit, initial of unset.

  • Als je overerving wilt inschakelen: Je kunt overerving expliciet afdwingen met behulp van het sleutelwoord inherit.
1div {
2    color: inherit;  /* Inherit the color from its parent element */
3}
  • Als je geen overerving wilt: Je kunt de eigenschap resetten naar de beginwaarde met behulp van de sleutelwoorden initial of unset.
1p {
2    color: initial;  /* Reset the color to its initial/default value */
3}

Voorbeeld:

De eigenschap all

De eigenschap all is een eigenschap die bijna alle CSS-eigenschappen kan resetten, inclusief die welke kunnen worden geërfd, voor een specifiek element in één keer. Specifiek kun je de volgende drie sleutelwoorden gebruiken om de eigenschappen van een element in te stellen:.

  • initial: Reset alle eigenschappen naar hun beginwaarden.
  • inherit: Neemt alle eigenschappen van het bovenliggende element over.
  • unset: Neemt de eigenschap over als het overdraagbaar is, anders wordt het gereset naar de beginwaarde.

all is zeer nuttig wanneer je meerdere eigenschappen in bulk wilt resetten of instellen, in plaats van slechts specifieke eigenschappen afzonderlijk te koppelen.

Voorbeeld van resetten naar beginwaarden 

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

  • Wanneer je alle eerder ingestelde stijlen voor een specifiek element wilt resetten en terugbrengen naar de beginstaat, gebruik je all: initial zoals hieronder.

  • In dit voorbeeld worden alle eigenschappen van het <div>-element met de .all-initial-klasse gereset naar de standaardbeginwaarden van de browser.

Voorbeeld van overerving 

 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}
  • Door all: inherit te gebruiken, worden alle eigenschappen overgenomen van het bovenliggende element.
  • In dit voorbeeld nemen elementen met de .all-inherit-klasse alle eigenschappen, zoals color en font-size, over van het bovenliggende element.

Voorbeeld van het bepalen van beginwaarde of overerving op basis van voorwaarden 

 1.parent-unset {
 2    color: blue;
 3}
 4
 5.all-unset {
 6    font-weight: bold;
 7}
 8
 9.all-unset {
10    all: unset;
11}
  • Met all: unset worden eigenschappen overgenomen als dat mogelijk is; anders worden ze teruggezet naar hun beginwaarden.
  • In dit geval wordt color overgenomen, terwijl font-weight wordt teruggezet naar de beginwaarde, meestal normal.

Relatie met specificiteit (prioriteit) 

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

  • De eigenschap all is een krachtig resetmechanisme, maar wordt beïnvloed door CSS-specificiteit. Als een specifiek element sterke stijlvoorschriften heeft, kan de eigenschap all deze stijlen mogelijk niet overschrijven. Bijvoorbeeld, eigenschappen die zijn gespecificeerd met !important kunnen niet worden beïnvloed.

  • In dit voorbeeld, zelfs als je de stijl probeert te resetten met all: initial, zal de eigenschap color niet worden gereset vanwege de specificatie color: red !important.

Blokelementen en inline-elementen

Blokelementen

  • Voorbeeld: <div>, <p>, <h1> 〜 <h6>, <ul>, <li>, <section>
  • Kenmerken:
    • Ze verschijnen altijd op een nieuwe regel en vullen de volledige breedte van het bovenliggende element.
    • De breedte (width) en hoogte (height) kunnen vrij worden ingesteld.
    • Marges (margin) en opvullingen (padding) kunnen in alle richtingen worden ingesteld en hebben effect op alle zijden.
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}

Inline-elementen

  • Voorbeeld: <span>, <a>, <strong>, <em>, <img>, <label>
  • Kenmerken:
    • Ze verschijnen naast andere inline-elementen op dezelfde regel.
    • Breedte (width) en hoogte (height) kunnen niet direct worden ingesteld (tenzij display: block wordt toegepast).
    • Het instellen van marges (margin) of opvullingen (padding) verticaal heeft beperkt effect (horizontale marges en opvullingen zijn effectief).
1a {
2    padding: 5px;  /* Padding for inline elements */
3    margin-right: 10px;  /* Set margin to the right */
4    color: blue;
5}

Verschillen tussen block-level elementen en inline elementen

  • Instellingen voor breedte en hoogte:

    • Blokelementen: breedte en hoogte kunnen worden ingesteld.
    • Inline-elementen: Breedte en hoogte kunnen over het algemeen niet worden ingesteld.

  • Margin en Padding:

    • Blokelementen: Margin en padding worden op alle zijden toegepast.
    • Inline-elementen: Margin en padding aan de boven- en onderkant zijn ineffectief of hebben een beperkt effect.

  • Lay-outmethode:

    • Blokelementen: Automatisch op een nieuwe regel geplaatst.
    • Inline-elementen: Uitgelijnd op dezelfde regel met andere inline-elementen.

Zoals je kunt zien, zijn er verschillen in hoe CSS-stijlen worden toegepast op blokelementen en inline-elementen. Bij blokelementen worden lay-outgerelateerde CSS-eigenschappen zoals breedte, hoogte, margin en padding toegepast zoals opgegeven. Aan de andere kant, bij inline-elementen kunnen lay-outgerelateerde CSS-eigenschappen zoals breedte, hoogte, margin of padding niet worden toegepast of slechts beperkt worden toegepast.

CSS-behandeling van blokelementen en inline-elementen 

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

Door de display-eigenschap in te stellen op block of inline-block, kun je stijlen zoals breedte en hoogte aanpassen voor inline-elementen alsof het blokelementen zijn.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

CSS BasisDetails van attribuutselectors in CSS