Articles
Introduktion till CSS
Arv i CSS

Arv i CSS

Den här artikeln förklarar arv i CSS.

Du kan granska exempel på ärvda och icke-ärvda egenskaper.

YouTube Video

HTML för förhandsgranskning

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 ärvs vissa egenskaper automatiskt från föräldraelement till barnelement. Detta är en användbar mekanism eftersom när du har angett en specifik egenskap så kommer barnelementen också att ha samma stil, vilket eliminerar behovet av att ange det upprepade gånger. Men inte alla egenskaper ärvs; vissa egenskaper ärvs medan andra inte är det. Till exempel ärvs color och font-family, men egenskaper i boxmodellen som margin och padding är det inte.

Ärvda egenskaper

Ärvbara egenskaper är främst de som är relaterade till text och typsnitt.

Vanligt ärvda egenskaper

  1. color: Textfärg
1body {
2    color: black;
3}
  • I detta fall kommer alla barnelement inom body att ha svart textfärg.
  1. font-family: Fontfamilj
1body {
2    font-family: "Times New Roman", cursive;
3}
  • Alla barnelement använder typsnittet Arial.
  1. font-size: Textstorlek
1body {
2    font-size: 16px;
3}
  • All text inom body kommer att vara 16px som standard.
  1. line-height: Radavstånd
1p {
2    line-height: 1.5;
3}
  • Text inom ett <p>-element kommer att visas med 1,5 gånger radhöjd, vilket också påverkar dess barnelement.
  1. text-align: Textjustering
1div {
2    text-align: center;
3}
  • Text och inline-element inom ett div-element visas centrerade.
  1. visibility: Elementets synlighet
1div {
2    visibility: hidden;
3}
  • visibility är en egenskap som styr synligheten för ett element. När den är inställd på hidden blir elementet osynligt.
  • I detta fall kommer barnobjekt inom div också att döljas.
  1. list-style: Liststil (listmarkeringar för <ul> och <ol>)
1ul {
2    list-style: square;
3}
  • I detta fall kommer listobjekt inom ul-taggen att visas med fyrkantiga markeringar.

Exempel:

Icke-ärvda egenskaper

Egenskaper relaterade till layout och boxmodellen är vanligtvis inte ärvbara. Dessa egenskaper måste ställas in individuellt för varje element.

Vanliga icke-ärvda egenskaper

  1. margin, padding: Yttre och inre marginaler för ett element
1div {
2    margin: 10px;
3    padding: 20px;
4}
  • Även om du ställer in yttre eller inre marginaler för ett div-element påverkar det inte dess barnobjekt.
  1. border: Elementets kantlinje
1div {
2    border: 1px solid black;
3}
  • Även om du ställer in en kantlinje på ett föräldraelement påverkar det inte barnobjekten.
  1. width, height: Elementets bredd och höjd
1div {
2    width: 100px;
3    height: 50px;
4}
  • Bredden och höjden på ett föräldraelement påverkar inte automatiskt dess barnobjekt.
  1. background: Bakgrundsstil
1body {
2    background-color: lightblue;
3}
  • Bakgrundsfärgen som setts på body påverkar inte direkt barnobjekten. Om ett barnobjekt har en transparent bakgrund kan dock föräldraelementets bakgrundsfärg synas igenom.

Exempel:

Arvkontroll

Arv kan kontrolleras med hjälp av nyckelorden inherit, initial eller unset.

  • Om du vill aktivera arv: Du kan uttryckligen tvinga fram arv med hjälp av nyckelordet inherit.
1div {
2    color: inherit;  /* Inherit the color from its parent element */
3}
  • Om du inte vill ha arv: Du kan återställa egenskapen till dess initialvärde med hjälp av nyckelorden initial eller unset.
1p {
2    color: initial;  /* Reset the color to its initial/default value */
3}

Exempel:

Egenskapen all

Egenskapen all är en egenskap som kan återställa nästan alla CSS-egenskaper, inklusive de som kan ärvas, för ett specificerat element på en gång. Specifikt kan du använda följande tre nyckelord för att ställa in egenskaperna för ett element:.

  • initial: Återställer alla egenskaper till deras initialvärden.
  • inherit: Ärver alla egenskaper från föräldraelementet.
  • unset: Ärver egenskapen om den är ärvbar, annars återställs den till sitt initialvärde.

all är mycket användbar när du vill återställa eller ange flera egenskaper i bulk, istället för att ange specifika egenskaper enskilt.

Exempel på återställning till initialvärden 

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

  • När du vill återställa alla tidigare inställda stilar för ett specifikt element och återföra det till dess ursprungliga tillstånd kan du använda all: initial så här.

  • I detta exempel återställs alla egenskaper för <div>-elementet med klassen .all-initial till webbläsarens standardinitialvärden.

Exempel 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}
  • Genom att använda all: inherit ärver alla egenskaper från föräldraelementet.
  • I detta exempel ärver element med klassen .all-inherit alla egenskaper, såsom color och font-size, från föräldraelementet.

Exempel på att fastställa initialvärde eller arv baserat på villkor 

 1.parent-unset {
 2    color: blue;
 3}
 4
 5.all-unset {
 6    font-weight: bold;
 7}
 8
 9.all-unset {
10    all: unset;
11}
  • Genom att använda all: unset ärvs egenskaper om de kan ärvas; annars återställs de till sina initialvärden.
  • I detta fall ärvs color, medan font-weight återställs till sitt initialvärde, vanligtvis normal.

Relation med 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-egenskapen är en kraftfull återställningsmekanism, men den påverkas av CSS-specificitet. Om ett specifikt element har starka stilegenskaper kanske all-egenskapen inte kan åsidosätta dessa stilar. Egenskaper som specificeras med !important kan till exempel inte påverkas.

  • I det här exemplet, även om du försöker återställa stilen med all: initial, kommer color-egenskapen inte att återställas på grund av specifikationen color: red !important.

Blockelement och inlineelement

Blockelement

  • Exempel: <div>, <p>, <h1> 〜 <h6>, <ul>, <li>, <section>
  • Egenskaper:
    • De visas alltid på en ny rad och expanderar för att fylla hela bredden av deras föräldraelement.
    • Bredden (width) och höjden (height) kan ställas in fritt.
    • Marginaler (margin) och fyllning (padding) kan ställas in i alla riktningar och påverkar alla sidor.
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}

Inlineelement

  • Exempel: <span>, <a>, <strong>, <em>, <img>, <label>
  • Egenskaper:
    • De visas tillsammans med andra inlineelement på samma rad.
    • Bredd (width) och höjd (height) kan inte ställas in direkt (såvida inte display: block används).
    • Att ställa in marginaler (margin) eller fyllning (padding) vertikalt har begränsad effekt (horisontella marginaler och fyllning är effektiva).
1a {
2    padding: 5px;  /* Padding for inline elements */
3    margin-right: 10px;  /* Set margin to the right */
4    color: blue;
5}

Skillnader mellan blockelement och inline-element

  • Inställningar för bredd och höjd:

    • Blockelement: Bredd och höjd kan ställas in.
    • Inline-element: Bredd och höjd kan vanligtvis inte ställas in.

  • Marginal och utfyllnad (Padding):

    • Blockelement: Marginal och utfyllnad tillämpas på alla sidor.
    • Inline-element: Marginal och utfyllnad på toppen och botten är ineffektiva eller har begränsad effekt.

  • Layoutmetod:

    • Blockelement: Placeras automatiskt på en ny rad.
    • Inline-element: Justeras på samma rad med andra inline-element.

Som du kan se finns det skillnader i hur CSS-stilar tillämpas på blockelement och inline-element. I blockelement tillämpas layoutrelaterade CSS-egenskaper som bredd, höjd, marginal och utfyllnad som specificerat. Å andra sidan kan layoutrelaterade CSS-egenskaper som bredd, höjd, marginal eller utfyllnad för inline-element inte tillämpas eller tillämpas på ett begränsat sätt.

CSS-hantering av blockelement och inline-element 

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

Men genom att ställa in egenskapen display till block eller inline-block kan du justera stilar som bredd och höjd för inline-element som om de vore blockelement.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

CSS-grunderDetaljer om attributselektorer i CSS