Articles
Wprowadzenie do CSS
Dziedziczenie w CSS

Dziedziczenie w CSS

Ten artykuł wyjaśnia dziedziczenie w CSS.

Możesz sprawdzić reprezentatywne właściwości dziedziczone i niedziedziczone.

YouTube Video

HTML do podglądu

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>

Dziedziczenie w CSS

W CSS niektóre właściwości są automatycznie dziedziczone z elementów nadrzędnych do elementów podrzędnych. Jest to przydatny mechanizm, ponieważ po ustawieniu określonej właściwości, elementy podrzędne będą miały ten sam styl, co eliminuje potrzebę wielokrotnego ustawiania. Jednak nie wszystkie właściwości są dziedziczone; niektóre właściwości są dziedziczone, a inne nie. Na przykład color i font-family są dziedziczone, ale właściwości modelu box, takie jak margin i padding, nie są.

Właściwości dziedziczone

Właściwości dziedziczone to głównie te związane z tekstem i czcionkami.

Najczęściej dziedziczone właściwości

  1. color: Kolor tekstu
1body {
2    color: black;
3}
  • W tym przypadku wszystkie elementy podrzędne w body będą miały czarny kolor tekstu.
  1. font-family: Rodzina czcionek
1body {
2    font-family: "Times New Roman", cursive;
3}
  • Wszystkie elementy podrzędne używają czcionki Arial.
  1. font-size: Rozmiar tekstu
1body {
2    font-size: 16px;
3}
  • Cały tekst w body będzie domyślnie miał rozmiar 16px.
  1. line-height: Odstępy między liniami
1p {
2    line-height: 1.5;
3}
  • Tekst w elemencie <p> będzie wyświetlany z wysokością linii 1,5 raza większą, co wpłynie także na jego elementy podrzędne.
  1. text-align: Wyrównanie tekstu
1div {
2    text-align: center;
3}
  • Tekst i elementy liniowe w elemencie div są wyświetlane wyśrodkowane.
  1. visibility: Widoczność elementu
1div {
2    visibility: hidden;
3}
  • visibility to właściwość, która kontroluje widoczność elementu. Po ustawieniu na hidden, element staje się niewidoczny.
  • W tym przypadku elementy podrzędne w elemencie div również będą ukryte.
  1. list-style: Styl listy (znaczniki list dla <ul> i <ol>)
1ul {
2    list-style: square;
3}
  • W tym przypadku elementy listy w tagu ul będą wyświetlane z kwadratowymi znacznikami.

Przykład:

Właściwości niedziedziczone

Właściwości związane z układem i modelem pudełkowym zwykle nie są dziedziczone. Te właściwości muszą być ustawione indywidualnie dla każdego elementu.

Typowe właściwości niedziedziczone

  1. margin, padding: Zewnętrzne i wewnętrzne marginesy elementu
1div {
2    margin: 10px;
3    padding: 20px;
4}
  • Nawet jeśli ustawisz zewnętrzne lub wewnętrzne marginesy dla elementu div, nie wpływa to na jego elementy podrzędne.
  1. border: Obramowanie elementu
1div {
2    border: 1px solid black;
3}
  • Nawet jeśli obramowanie zostanie ustawione na elemencie nadrzędnym, nie wpływa to na elementy podrzędne.
  1. width, height: Szerokość i wysokość elementu
1div {
2    width: 100px;
3    height: 50px;
4}
  • Szerokość i wysokość elementu nadrzędnego nie wpływają automatycznie na elementy podrzędne.
  1. background: Styl tła
1body {
2    background-color: lightblue;
3}
  • Kolor tła ustawiony na body nie wpływa bezpośrednio na elementy podrzędne. Jednakże, jeśli element podrzędny ma przezroczyste tło, kolor tła elementu nadrzędnego może być widoczny przez niego.

Przykład:

Kontrola dziedziczenia

Dziedziczenie można kontrolować za pomocą słów kluczowych inherit, initial lub unset.

  • Jeśli chcesz włączyć dziedziczenie: Możesz wymusić dziedziczenie, używając słowa kluczowego inherit.
1div {
2    color: inherit;  /* Inherit the color from its parent element */
3}
  • Jeśli nie chcesz dziedziczenia: Możesz zresetować właściwość do jej wartości początkowej, używając słów kluczowych initial lub unset.
1p {
2    color: initial;  /* Reset the color to its initial/default value */
3}

Przykład:

Właściwość all

Właściwość all umożliwia zresetowanie prawie wszystkich właściwości CSS, w tym tych, które można dziedziczyć, dla określonego elementu jednocześnie. Konkretnie, możesz użyć trzech następujących słów kluczowych do ustawienia właściwości elementu:.

  • initial: Resetuje wszystkie właściwości do ich wartości początkowych.
  • inherit: Dziedziczy wszystkie właściwości z elementu nadrzędnego.
  • unset: Dziedziczy właściwość, jeśli jest dziedziczalna; w przeciwnym razie resetuje ją do wartości początkowej.

all jest bardzo przydatne, gdy chcesz zresetować lub ustawić wiele właściwości jednocześnie, zamiast ustawiać tylko konkretne właściwości pojedynczo.

Przykład resetowania do wartości początkowych 

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

  • Jeśli chcesz zresetować wszystkie wcześniej ustawione style dla konkretnego elementu i przywrócić go do stanu początkowego, użyj all: initial w taki sposób.

  • W tym przykładzie wszystkie właściwości elementu <div> z klasą .all-initial są resetowane do domyślnych wartości początkowych przeglądarki.

Przykład dziedziczenia 

 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}
  • Użycie all: inherit powoduje, że wszystkie właściwości są dziedziczone z elementu nadrzędnego.
  • W tym przykładzie elementy z klasą .all-inherit dziedziczą wszystkie właściwości, takie jak color i font-size, z elementu nadrzędnego.

Przykład określania wartości początkowej lub dziedziczenia na podstawie warunków 

 1.parent-unset {
 2    color: blue;
 3}
 4
 5.all-unset {
 6    font-weight: bold;
 7}
 8
 9.all-unset {
10    all: unset;
11}
  • Użycie all: unset powoduje, że właściwości są dziedziczone, jeśli mogą być; w przeciwnym razie są resetowane do wartości początkowych.
  • W tym przypadku color jest dziedziczony, podczas gdy font-weight zostaje zresetowany do swojej wartości początkowej, zazwyczaj normal.

Relacja ze specyficznością (priorytetem) 

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

  • all jest potężnym mechanizmem resetowania, ale jest zależny od specyficzności CSS. Jeśli konkretny element ma silne specyfikacje stylu, właściwość all może nie być w stanie nadpisać tych stylów. Na przykład, właściwości określone za pomocą !important nie mogą być zmienione.

  • W tym przykładzie, nawet jeśli spróbujesz zresetować styl za pomocą all: initial, właściwość color nie zostanie zresetowana z powodu specyfikacji color: red !important.

Elementy blokowe i elementy liniowe

Elementy blokowe

  • Przykład: <div>, <p>, <h1> 〜 <h6>, <ul>, <li>, <section>
  • Cechy charakterystyczne:
    • Zawsze pojawiają się w nowej linii i rozciągają się na pełną szerokość elementu nadrzędnego.
    • Można dowolnie ustawiać szerokość (width) i wysokość (height).
    • Marginesy (margin) i wypełnienie (padding) można ustawiać we wszystkich kierunkach, co wpłynie na wszystkie strony.
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}

Elementy liniowe

  • Przykład: <span>, <a>, <strong>, <em>, <img>, <label>
  • Cechy charakterystyczne:
    • Pojawiają się obok innych elementów liniowych w tej samej linii.
    • Szerokość (width) i wysokość (height) nie mogą być ustawiane bezpośrednio (chyba że zastosowano display: block).
    • Ustawienie marginesów (margin) lub wypełnienia (padding) w pionie ma ograniczony efekt (marginesy i wypełnienie w poziomie są skuteczne).
1a {
2    padding: 5px;  /* Padding for inline elements */
3    margin-right: 10px;  /* Set margin to the right */
4    color: blue;
5}

Różnice między elementami blokowymi a elementami liniowymi

  • Ustawienia szerokości i wysokości:

    • Elementy blokowe: Można ustawić szerokość i wysokość.
    • Elementy liniowe: Szerokość i wysokość na ogół nie mogą być ustawione.

  • Margines i Wypełnienie:

    • Elementy blokowe: Margines i wypełnienie są stosowane po wszystkich stronach.
    • Elementy liniowe: Margines i wypełnienie na górze i na dole są nieskuteczne lub mają ograniczony efekt.

  • Metoda Układu:

    • Elementy blokowe: Automatycznie rozmieszczane na nowej linii.
    • Elementy liniowe: Wyrównane w tej samej linii z innymi elementami liniowymi.

Jak widać, istnieją różnice w tym, jak style CSS są stosowane do elementów blokowych i liniowych. W elementach blokowych właściwości CSS związane z układem, takie jak szerokość, wysokość, margines i wypełnienie, są stosowane zgodnie z podanymi wartościami. Z drugiej strony, w przypadku elementów liniowych, ustawianie właściwości CSS związanych z układem, takich jak szerokość, wysokość, margines lub wypełnienie, może nie być stosowane lub być stosowane w ograniczonym zakresie.

Obsługa elementów blokowych i liniowych w CSS 

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

Jednak poprzez ustawienie właściwości display na block lub inline-block można dostosować style, takie jak szerokość i wysokość, dla elementów liniowych tak, jakby były to elementy blokowe.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Podstawy CSSSzczegóły selektorów atrybutów w CSS