Articles
Introduksjon til CSS
Arv i CSS

Arv i CSS

Denne artikkelen forklarer arv i CSS.

Du kan sjekke representative arvede og ikke-arvede egenskaper.

YouTube Video

HTML for Forhåndsvisning

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>

Arv i CSS

I CSS blir noen egenskaper automatisk arvet fra overordnede elementer til underordnede elementer. Dette er en nyttig mekanisme fordi når du setter en spesifikk egenskap, vil underordnede elementer også ha samme stil, og du slipper å sette det gjentatte ganger. Imidlertid blir ikke alle egenskaper arvet; noen egenskaper blir arvet, mens andre ikke blir det. For eksempel blir color og font-family arvet, men egenskaper i boksmodellen som margin og padding blir ikke arvet.

Arvede egenskaper

Arvebare egenskaper er hovedsakelig de som er relatert til tekst og skrifttyper.

Vanligvis arvede egenskaper

  1. color: Tekstfarge
1body {
2    color: black;
3}
  • I dette tilfellet vil alle underordnede elementer innenfor body ha svart tekstfarge.
  1. font-family: Skriftfamilie
1body {
2    font-family: "Times New Roman", cursive;
3}
  • Alle underordnede elementer bruker skriften Arial.
  1. font-size: Tekststørrelse
1body {
2    font-size: 16px;
3}
  • All tekst innenfor body vil ha 16px som standard.
  1. line-height: Linjeavstand
1p {
2    line-height: 1.5;
3}
  • Tekst i et <p>-element vil vises med 1,5 ganger linjehøyde, og dette gjelder også for underordnede elementer.
  1. text-align: Tekstjustering
1div {
2    text-align: center;
3}
  • Tekst og inline-elementer i et div-element vises sentrert.
  1. visibility: Elementets synlighet
1div {
2    visibility: hidden;
3}
  • visibility er en egenskap som kontrollerer synligheten til et element. Når den settes til skjult (hidden), blir elementet usynlig.
  • I dette tilfellet vil barneelementer innenfor div også bli skjult.
  1. list-style: Liste-stil (listemarkører for <ul> og <ol>)
1ul {
2    list-style: square;
3}
  • I dette tilfellet vil listeelementer i ul-tagen vises med firkantede markører.

Eksempel:

Ikke-arvelige egenskaper

Egenskaper relatert til layout og boksmodellen arves vanligvis ikke. Disse egenskapene må settes individuelt for hvert element.

Vanlige ikke-arvelige egenskaper

  1. margin, padding: Ytre og indre marger for et element
1div {
2    margin: 10px;
3    padding: 20px;
4}
  • Selv om du setter ytre eller indre marger for et div-element, påvirker det ikke dets barneelementer.
  1. border: Elementkant
1div {
2    border: 1px solid black;
3}
  • Selv om en kantlinje er satt på et overordnet element, påvirker det ikke barneelementene.
  1. width, height: Elementets bredde og høyde
1div {
2    width: 100px;
3    height: 50px;
4}
  • Bredden og høyden på et overordnet element påvirker ikke automatisk barnelementene.
  1. background: Bakgrunnsstil
1body {
2    background-color: lightblue;
3}
  • Bakgrunnsfargen satt på body påvirker ikke barneelementene direkte. Men hvis et barneelement har en gjennomsiktig bakgrunn, kan bakgrunnsfargen til det overordnede elementet være synlig gjennom det.

Eksempel:

Arvkontroll

Arv kan kontrolleres ved å bruke nøkkelordene inherit, initial eller unset.

  • Hvis du vil aktivere arv: Du kan eksplisitt tvinge arv ved å bruke nøkkelordet inherit.
1div {
2    color: inherit;  /* Inherit the color from its parent element */
3}
  • Hvis du ikke vil ha arv: Du kan tilbakestille egenskapen til dens opprinnelige verdi ved hjelp av nøkkelordene initial eller unset.
1p {
2    color: initial;  /* Reset the color to its initial/default value */
3}

Eksempel:

Egenskapen all

all-egenskapen er en egenskap som kan tilbakestille nesten alle CSS-egenskaper, inkludert de som kan arves, for et spesifisert element på én gang. Spesielt kan du bruke følgende tre nøkkelord for å angi egenskapene til et element:.

  • initial: Tilbakestiller alle egenskaper til deres opprinnelige verdier.
  • inherit: Arver alle egenskaper fra overordnedelementet.
  • unset: Arver egenskapen hvis den kan arves, ellers tilbakestiller den til sin opprinnelige verdi.

all er svært nyttig når du vil tilbakestille eller angi flere egenskaper samtidig, i stedet for å angi bare spesifikke egenskaper individuelt.

Eksempel på tilbakestilling til opprinnelige verdier 

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

  • Når du vil tilbakestille alle tidligere angitte stiler for et spesifikt element og returnere det til opprinnelig tilstand, bruk all: initial slik som dette.

  • I dette eksemplet tilbakestilles alle egenskapene til <div>-elementet med .all-initial-klassen til nettleserens standard opprinnelige verdier.

Eksempel på arv 

 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}
  • Ved å bruke all: inherit arver alle egenskaper fra overordnedelementet.
  • I dette eksemplet arver elementer med .all-inherit-klassen alle egenskaper, som color og font-size, fra overordnedelementet.

Eksempel på å bestemme opprinnelig verdi eller arv basert på betingelser 

 1.parent-unset {
 2    color: blue;
 3}
 4
 5.all-unset {
 6    font-weight: bold;
 7}
 8
 9.all-unset {
10    all: unset;
11}
  • Ved å bruke all: unset arves egenskaper hvis de kan; ellers tilbakestilles de til sine opprinnelige verdier.
  • I dette tilfellet arves color, mens font-weight tilbakestilles til sin opprinnelige verdi, vanligvis normal.

Forholdet til spesifisitet (prioritet) 

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

  • all-egenskapen er en kraftig tilbakestillingsmekanisme, men den påvirkes av CSS-spesifisitet. Hvis et spesifikt element har sterke stilspesifikasjoner, kan det hende at all-egenskapen ikke klarer å overstyre disse stilene. For eksempel kan egenskaper spesifisert med !important ikke påvirkes.

  • I dette eksempelet, selv om du prøver å tilbakestille stilen med all: initial, vil ikke color-egenskapen tilbakestilles på grunn av color: red !important-spesifikasjonen.

Blokknivå-elementer og inline-elementer

Blokknivå-elementer

  • Eksempel: <div>, <p>, <h1> 〜 <h6>, <ul>, <li>, <section>
  • Kjennetegn:
    • De vises alltid på en ny linje og utvider seg for å fylle hele bredden av sitt overordnede element.
    • Bredden (width) og høyden (height) kan settes fritt.
    • Marginer (margin) og polstring (padding) kan settes i alle retninger og påvirker alle sider.
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-elementer

  • Eksempel: <span>, <a>, <strong>, <em>, <img>, <label>
  • Kjennetegn:
    • De vises sammen med andre inline-elementer på samme linje.
    • Bredden (width) og høyden (height) kan ikke angis direkte (med mindre display: block brukes).
    • Innstilling av marginer (margin) eller polstring (padding) vertikalt har begrenset effekt (horisontale marginer og polstring er effektive).
1a {
2    padding: 5px;  /* Padding for inline elements */
3    margin-right: 10px;  /* Set margin to the right */
4    color: blue;
5}

Forskjeller mellom blokk-nivå elementer og inline-elementer

  • Innstillinger for bredde og høyde:

    • Blokknivå-elementer: Bredde og høyde kan angis.
    • Inline-elementer: Bredde og høyde kan vanligvis ikke angis.

  • Marg og Polstring:

    • Blokk-nivå elementer: Marg og polstring brukes på alle sider.
    • Inline-elementer: Marg og polstring på toppen og bunnen er ineffektive eller har begrenset effekt.

  • Layoutmetode:

    • Blokk-nivå elementer: Plasseres automatisk på en ny linje.
    • Inline-elementer: Justeres på samme linje med andre inline-elementer.

Som du kan se, er det forskjeller i hvordan CSS-stiler brukes på blokk-nivå elementer og inline-elementer. I blokk-nivå elementer brukes layout-relaterte CSS-egenskaper som bredde, høyde, marg og polstring som angitt. For inline-elementer kan imidlertid innstilling av layout-relaterte CSS-egenskaper som bredde, høyde, marg eller polstring ikke brukes eller kun brukes i begrenset grad.

CSS-håndtering av blokk-nivå og inline-elementer 

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

Ved å sette display-egenskapen til block eller inline-block, kan du imidlertid justere stiler som bredde og høyde for inline-elementer som om de var blokk-elementer.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

CSS GrunnleggendeDetaljer om attributtvelgere i CSS