Autor publikacji
Virtual Patriot - Administrator

Wartość "inherit"

Data publikacji
Ostatnio edytowano

W poprzedniej części kursu CSS poznaliśmy na jakiej zasadzie działa dziedziczenie właściwości CSS, jednak nie zapoznaliśmy się z wartością inherit, ponieważ wspomniana wartość zostanie omówiona w tej części kursu CSS.

Na wstępie należy zaznaczyć, że niektóre właściwości CSS nie posiadają wartości inherit, jednak zdecydowana większość właściwości CSS posiada wspomnianą wartość.

Z poprzedniej części kursu CSS powinniśmy wiedzieć, co to jest element "rodzic", a co element "dziecko".

Jeżeli umieścimy jeden element HTML w drugim to będą one tworzyły hierarchię typu element "rodzic" (ten, w którym umieszczamy inny element) i element "dziecko" (element umieszczony w innym elemencie).

Na początek przyjrzyjmy się dokumentowi HTML, który został omówiony w poprzedniej części kursu CSS. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      body {
        color:red;
        border:1px solid black;
      }
    </style>
  </head>

  <body>

    <div>
      <p>pierwszy element - p <span>to jest element - span</span></p>
    </div>

    <p>drugi element - p</p>

  </body>
</html>

Rezultat po wyświetleniu w oknie przeglądarki internetowej:

pierwszy element - p to jest element - span

drugi element - p

W poprzedniej części kursu CSS powiedzieliśmy sobie, że niektóre właściwości CSS mogą być automatycznie dziedziczone od elementu "przodka" przez kolejnych jego "potomków" i właśnie taką właściwością jest właściwość color, dlatego tekst we wszystkich elementach, które zostały wyświetlone powyżej, jest koloru czerwonego.

W poprzedniej części kursu CSS powiedzieliśmy sobie również, że niektóre właściwości CSS nie mogą być automatycznie dziedziczone i właśnie taką właściwością jest właściwość border, która odpowiada za styl obramowania elementu HTML. W tym momencie przychodzi nam na pomoc wartość inherit, dzięki której możemy "wymusić" dziedziczenie (lecz owe "wymuszenie" zadziała tylko na "dzieciach" danego elementu "rodzica").

Wspomniana sytuacja została zaprezentowana w kodzie dokumentu HTML, który został umieszczony poniżej. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      body {
        color:red;
        border:1px solid black;
      }

      .dziedzicz {
        border:inherit;
      }
    </style>
  </head>

  <body>

    <div>
      <p class="dziedzicz">pierwszy element - p <span>to jest element - span</span></p>
    </div>

    <p class="dziedzicz">drugi element - p</p>

  </body>
</html>

Rezultat po wyświetleniu w oknie przeglądarki internetowej:

pierwszy element - p to jest element - span

drugi element - p

Jak możemy zauważyć, od tej pory, drugi element p posiada obramowanie, które jest takie samo jak obramowanie jego rodzica, czyli elementu body, ponieważ do wspomnianego elementu p została dodana reguła CSS, za pomocą selektora .dziedzicz, w której to regule CSS użyliśmy wartość inherit wraz z właściwością, która ma zostać odziedziczona przez dany element od elementu rodzica. W naszym wypadku tą właściwością jest właściwość border.

Do pierwszego elementu p również została dodana wspomniana reguła CSS, za pomocą selektora .dziedzicz, jednak element ten nie odziedziczył właściwości border od swojego rodzica, ponieważ dla rodzica pierwszego elementu p, czyli elementu div, nie została określona żadna reguła CSS, która zawierałaby w sobie właściwość border.

W momencie gdy dodamy atrybut class wraz z wartością dziedzicz, do elementu div, w naszym przykładzie, to zarówno pierwszy element p, jak i jego rodzic, czyli element div, odziedziczą taki sam styl obramowanie od elementu body. Wspomniana sytuacja została zaprezentowana w przykładzie znajdującym się poniżej (dodatkowo do elementów zostały dodane zewnętrzne marginesy margin, dla polepszenia widoczności ich obramowań).

pierwszy element - p to jest element - span

drugi element - p

Kod HTML ostatniego przykładu został umieszczony pod spodem: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      body {
        color:red;
        border:1px solid black;
      }

      .dziedzicz {
        border:inherit;
        margin:15px;
      }
    </style>
  </head>

  <body>

    <div class="dziedzicz">
      <p class="dziedzicz">pierwszy element - p <span>to jest element - span</span></p>
    </div>

    <p class="dziedzicz">drugi element - p</p>

  </body>
</html>

Wartość inherit nie jest za często wykorzystywana, lecz warto wiedzieć o jej istnieniu.

W następnej części kursu CSS poznamy różne typy selektorów CSS.