Articles
Introduktion til CSS
Arv i CSS

Arv i CSS

Denne artikel forklarer arv i CSS.

Du kan se repræsentative arvede og ikke-arvede egenskaber.

YouTube Video

HTML til 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 arves nogle egenskaber automatisk fra overordnede elementer til underordnede elementer. Dette er en nyttig mekanisme, fordi når du har indstillet en bestemt egenskab, vil underordnede elementer også have samme stil, hvilket eliminerer behovet for at indstille det gentagne gange. Dog arves ikke alle egenskaber; nogle egenskaber arves, mens andre ikke gør. For eksempel arves color og font-family, men boksemodel-egenskaber som margin og padding arves ikke.

Arvede egenskaber

Arvelige egenskaber er hovedsageligt dem, der relaterer til tekst og skrifttyper.

Almindeligt arvede egenskaber

  1. color: Tekstfarve
1body {
2    color: black;
3}
  • I dette tilfælde vil alle underordnede elementer inden for body have sort tekstfarve.
  1. font-family: Skrifttype
1body {
2    font-family: "Times New Roman", cursive;
3}
  • Alle underordnede elementer bruger skrifttypen Arial.
  1. font-size: Tekststørrelse
1body {
2    font-size: 16px;
3}
  • Al teksten inden for body vil som standard være 16px.
  1. line-height: Linjeafstand
1p {
2    line-height: 1.5;
3}
  • Teksten inden for et <p>-element vil blive vist med 1,5 gange linjehøjde, hvilket også påvirker dets underordnede elementer.
  1. text-align: Tekstjustering
1div {
2    text-align: center;
3}
  • Tekst og inline-elementer inden for et div-element vises centreret.
  1. visibility: Elementets synlighed
1div {
2    visibility: hidden;
3}
  • visibility er en egenskab, der styrer synligheden af et element. Når den er indstillet til skjult, bliver elementet usynligt.
  • I dette tilfælde vil elementer i div også blive skjult.
  1. list-style: Liste-stil (listemarkører for <ul> og <ol>)
1ul {
2    list-style: square;
3}
  • I dette tilfælde vil listeelementer inden i ul-tagget blive vist med firkantede markører.

Eksempel:

Ikke-arvelige egenskaber

Egenskaber relateret til layout og boksmodellen arves normalt ikke. Disse egenskaber skal indstilles individuelt for hvert element.

Almindelige ikke-arvelige egenskaber

  1. margin, padding: Ydre og indre margener for et element
1div {
2    margin: 10px;
3    padding: 20px;
4}
  • Selvom du indstiller ydre eller indre margener for et div element, påvirker det ikke dets børneelementer.
  1. border: Elementets kantlinje
1div {
2    border: 1px solid black;
3}
  • Selvom en kantlinje er indstillet på et overordnedelement, påvirker det ikke børneelementerne.
  1. width, height: Elementets bredde og højde
1div {
2    width: 100px;
3    height: 50px;
4}
  • Brede og højde på et overordnedelement påvirker ikke automatisk børneelementerne.
  1. background: Baggrundsstil
1body {
2    background-color: lightblue;
3}
  • Baggrundsfarven indstillet på body påvirker ikke direkte børneelementerne. Hvis et børneelement har en gennemsigtig baggrund, kan baggrundsfarven på det overordnede element dog være synlig igennem det.

Eksempel:

Arvkontrol

Arv kan kontrolleres ved hjælp af nøgleordene inherit, initial eller unset.

  • Hvis du vil aktivere arv: Du kan eksplicit tvinge arv ved at bruge nøgleordet inherit.
1div {
2    color: inherit;  /* Inherit the color from its parent element */
3}
  • Hvis du ikke ønsker arv: Du kan nulstille egenskaben til dens oprindelige værdi ved hjælp af nøgleordene initial eller unset.
1p {
2    color: initial;  /* Reset the color to its initial/default value */
3}

Eksempel:

all-egenskaben

all-egenskaben er en egenskab, der kan nulstille næsten alle CSS-egenskaber, inklusive dem der kan arves, for et specificeret element på én gang. Specifikt kan du bruge følgende tre nøgleord til at indstille egenskaberne for et element:.

  • initial: Nulstiller alle egenskaber til deres oprindelige værdier.
  • inherit: Arver alle egenskaber fra det overordnede element.
  • unset: Arver egenskaben, hvis den er arvelig; ellers nulstilles den til dens oprindelige værdi.

all er meget nyttig, når du vil nulstille eller indstille flere egenskaber samlet, i stedet for kun at indstille specifikke egenskaber individuelt.

Eksempel på nulstilling til oprindelige værdier 

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

  • Når du vil nulstille alle tidligere indstillede stilarter for et specifikt element og returnere det til dets oprindelige tilstand, skal du bruge all: initial sådan her.

  • I dette eksempel nulstilles alle egenskaber for <div>-elementet med klassen .all-initial til browserens standard oprindelige værdier.

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 at bruge all: inherit arver alle egenskaber fra det overordnede element.
  • I dette eksempel arver elementer med klassen .all-inherit alle egenskaber, såsom color og font-size, fra det overordnede element.

Eksempel på bestemmelse af oprindelig værdi eller arv baseret 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 brug af all: unset bliver egenskaberne arvet, hvis de kan; ellers nulstilles de til deres oprindelige værdier.
  • I dette tilfælde arves color, mens font-weight nulstilles til dens oprindelige værdi, typisk normal.

Forhold til specificitet (prioritet) 

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

  • all-egenskaben er en kraftfuld nulstillingsmekanisme, men den påvirkes af CSS-specificitet. Hvis et specifikt element har stærke stil-specifikationer, kan all-egenskaben muligvis ikke tilsidesætte disse stilarter. F.eks. kan egenskaber specificeret med !important ikke påvirkes.

  • I dette eksempel vil color-egenskaben ikke blive nulstillet, selvom du forsøger at nulstille stilen med all: initial på grund af specifikationen color: red !important.

Blokelementer og inline-elementer

Blokelementer

  • Eksempel: <div>, <p>, <h1> 〜 <h6>, <ul>, <li>, <section>
  • Karakteristika:
    • De optræder altid på en ny linje og udvider sig til at fylde hele bredden af deres overordnede element.
    • Bredden (width) og højden (height) kan indstilles frit.
    • Margener (margin) og polstring (padding) kan indstilles i alle retninger og vil påvirke 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>
  • Karakteristika:
    • De vises sammen med andre inline-elementer på samme linje.
    • Bredden (width) og højden (height) kan ikke direkte indstilles (medmindre display: block er anvendt).
    • Indstilling af margener (margin) eller polstring (padding) lodret har begrænset effekt (horisontale margener 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}

Forskelle mellem blokniveau-elementer og inline-elementer

  • Indstillinger for bredde og højde:

    • Blokelementer: Brede og højde kan indstilles.
    • Inline-elementer: Bredden og højden kan generelt ikke indstilles.

  • Margin og Polstring:

    • Blokelementer: Marginer og polstring anvendes på alle sider.
    • Inline-elementer: Margin og polstring på toppen og bunden er ineffektive eller har begrænset effekt.

  • Layoutmetode:

    • Blokelementer: Placeres automatisk på en ny linje.
    • Inline-elementer: Justeres på samme linje som andre inline-elementer.

Som du kan se, er der forskelle i, hvordan CSS-stilarter anvendes på blokelementer og inline-elementer. I blokelementer anvendes layout-relaterede CSS-egenskaber såsom bredde, højde, margin og polstring som specificeret. På den anden side kan layout-relaterede CSS-egenskaber såsom bredde, højde, margin eller polstring for inline-elementer enten ikke anvendes eller kun anvendes i begrænset omfang.

CSS-håndtering af blokelementer og inline-elementer 

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

Men ved at indstille display-egenskaben til block eller inline-block kan du justere stilarterne såsom bredde og højde for inline-elementer, som om de var blokelementer.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

CSS GrundlæggendeDetaljer om attributselektorer i CSS