Dziedziczenie właściwości CSS

Przeglądając właściwości CSS w dziale przeznaczonym na ich opis, natkniemy się na informacje dotyczące dziedziczenia.

W realnym świecie zazwyczaj posiadamy rodzinę składającą się z mamy, taty, dziadków, czasami pradziadków, braci, sióstr, czy naszych dzieci, wnucząt itd. Niektóre cechy wyglądu czy osobowości dziedziczymy od naszych rodziców lub dalszych przodków, a następnie przekazujemy je naszym dzieciom, potomkom itd. Posiadamy również swoje indywidualne cechy wyglądu, czy osobowości. Jesteśmy potomkiem naszych przodków, naszych rodziców ich dziadków itd.

W świecie wirtualnym element HTML może posiadać kilku swoich przodków, jednego rodzica, kilkoro dzieci i kilku braci. Element HTML może dziedziczyć cechy wyglądu od swoich przodków, rodzica i przekazywać je dalej swoim dzieciom, potomkom.

Hierarchię przodek - rodzic - dziecko - potomek ustalamy na podstawie miejsca, w którym znajduje się dany element HTML, w kodzie HTML, a na jakiej zasadzie to działa, dowiesz się z tej części kursu CSS.


Element HTML może dziedziczyć różne właściwości CSS od swojego "przodka", czyli element "potomek" może posiadać takie same właściwości wyglądu jakie posiada jego "przodek" lub jego "przodkowie". Jednak nie wszystkie właściwości CSS są dziedziczone "automatycznie" od "przodka" przez element, który jest jego "potomkiem".

Brzmi to nieco skomplikowanie, prawda?

Dlatego musimy sobie wyjaśnić wszystkie zagadnienia, które zostały opisane w poprzednim akapicie.

Na początek wyjaśnimy sobie co to jest element "przodek" i element "potomek". Przyjrzyjmy się następującemu kodowi HTML:

<body>

  <div></div>

</body>

W kodzie HTML, który został przedstawiony powyżej, znajdują się dwa elementy HTML.

Element div znajduje się w elemencie body. W tym momencie element div jest potomkiem elementu body i może on dziedziczyć właściwości CSS od swojego "przodka", czyli od elementu body.

Kiedy dodamy do elementu body właściwość color:red; to wszystkie elementy znajdujące się w elemencie body będą posiadały czerwony kolor tekstu, ponieważ właściwość color jest "automatycznie" dziedziczona przez "potomków".

Rozbudujemy nieco nasz kod HTML:

<body>

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

  <p>drugi element - p</p>

</body>

W kodzie HTML przedstawionym powyżej znajduje się kilka elementów HTML.

Wszystkie elementy umieszczone w elemencie body są jego "potomkami". Warto zauważyć, że element p umieszczony w elemencie div posiada dwóch "przodków", są to elementy div oraz body. Natomiast element span posiada trzech "przodków", są to elementy: p, div oraz body.

Zobaczmy co się stanie, gdy umieścimy te elementy w dokumencie HTML i dodamy do niego następującą regułę CSS:

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

Nasz dokument HTML po wyświetleniu w oknie przeglądarki internetowej prezentuje się następująco:

pierwszy element - p to jest element - span

drugi element - p

Od tej pory element body zawiera w sobie właściwość color:red; oraz właściwość border:1px solid black; Właściwość color może być "automatycznie" dziedziczona przez "potomków" elementu body, czyli przez wszystkie elementy, które znajdują się w nim. Natomiast właściwość border nie może być "automatycznie" dziedziczona. Dlatego od tej pory wszystkie elementy HTML umieszczone w elemencie body posiadają czerwony kolor tekstu, natomiast właściwość border, odpowiadająca za obramowanie elementu HTML, została dodana tylko do elementu body.

Kod całego dokumentu HTML 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;
      }
    </style>
  </head>

  <body>

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

    <p>drugi element - p</p>

  </body>
</html>

Reguła dziedziczenia może być wykorzystana, na przykład do nadania jednakowego rozmiaru czcionki dla wszystkich elementów HTML znajdujących się w elemencie body, czy też do określenia jednakowego koloru tekstu dla wszystkich elementów HTML umieszczonych w elemencie body.

Dodatkowo przy nadawaniu takich samych cech wyglądu dla elementów HTML, poprzez wykorzystanie do tego celu dziedziczenia, należy zwrócić uwagę na jeszcze jeden fakt. Przyjrzyjmy się następującemu kodowi HTML:

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

    <style>
      body {
        font-size:18px;
      }
    </style>
  </head>

  <body>

    <div>
      <h2>to jest przykładowy element - h2</h2>
      <p>to jest przykładowy element - p - wraz z tekstem</p>
    </div>

    <p>kolejny przykładowy element - p</p>
    <div>kolejny przykładowy element - div</div>

  </body>
</html>

Dokument HTML po wyświetleniu w oknie przeglądarki internetowej prezentuje się następująco:

to jest przykładowy element - h2

to jest przykładowy element - p - wraz z tekstem

kolejny przykładowy element - p

kolejny przykładowy element - div

W myśl tego, co do tej pory zostało napisane, wszystkie elementy umieszczone w elemencie body powinny odziedziczyć od niego właściwość font-size:18px; która może być "automatycznie" dziedziczona przez "potomków". Właściwość font-size:18px; sprawia, że rozmiar czcionki tekstu w danym elemencie HTML wynosi 18 pikseli, jednak rozmiar czcionki w elemencie h2 jest większy.

Dlaczego?

Ponieważ element h2 posiada domyślną wartość właściwości font-size (narzuconą domyślnie przez przeglądarkę internetową), która powiększa jego rozmiar czcionki. Domyślne właściwości elementów HTML nie mogą być zmienione za pomocą dziedziczenia w hierarchii typu "przodek - potomek".

Do zmiany domyślnych właściwości wyglądu jednego typu elementu HTML (np. tylko elementów h2) należy wykorzystywać reguły CSS utworzone za pomocą selektora elementu, dzięki czemu nie musimy martwić się, czy dane właściwości CSS interesującego nas elementu HTML zostaną zmienione, czy też nie.

Przykład:

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

    <style>
      body {
        font-size:18px;
      }

      h2 {
        font-size:18px;
      }
    </style>
  </head>

  <body>

    <div>
      <h2>to jest przykładowy element - h2</h2>
      <p>to jest przykładowy element - p - wraz z tekstem</p>
    </div>

    <p>kolejny przykładowy element - p</p>
    <div>kolejny przykładowy element - div</div>

  </body>
</html>

Dokument HTML po wyświetleniu w oknie przeglądarki prezentuje się następująco:

to jest przykładowy element - h2

to jest przykładowy element - p - wraz w tekstem

kolejny przykładowy element - p

kolejny przykładowy element - div

Od tej pory element h2 posiada ten sam rozmiar czcionki tekstu, co pozostałe elementy HTML znajdujące się w części body dokumentu HTML.

Jeżeli chcielibyśmy usunąć wszystkie domyślne właściwości CSS ze wszystkich elementów HTML to należy w tym celu zapoznać się z techniką zwaną reset CSS.

Pod spodem znajduje się analiza kodu HTML pod względem rodziców, dzieci, potomków i przodków, którą należy przeanalizować i zrozumieć, ponieważ jest ona wykorzystywana nie tylko w języku CSS, ale również w języku JavaScript oraz innych.

<body>

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

</body>

Element body jest rodzicem dla elementu div i dla drugiego elementu p.
Element body posiada dwójkę dzieci, są to element div i drugi element p
Element body posiada czterech potomków, są to wszystkie elementy HTML, które znajdują się w nim, czyli: div (pierwszy potomek pierwszego stopnia), pierwszy element p (potomek drugiego stopnia), span (potomek trzeciego stopnia) i drugi element p (drugi potomek pierwszego stopnia).

Element div jest rodzicem dla elementu p, który został w nim umieszczony.
Element div posiada jedno dziecko, czyli element p, który został w nim umieszczony.
Element div posiada dwóch potomków, czyli: p (potomek pierwszego stopnia) i span (potomek drugiego stopnia).
Element div jest pierwszym dzieckiem elementu body.
Element div jest potomkiem (pierwszego stopnia) elementu body.
Rodzicem elementu div jest element body.
Element div posiada jednego przodka (pierwszego stopnia) jest to element body.

Pierwszy element p jest rodzicem dla elementu span.
Pierwszy element p posiada jedno dziecko, czyli element span.
Pierwszy element p posiada jednego potomka, czyli element span (potomek pierwszego stopnia).
Pierwszy element p jest jedynym dzieckiem elementu div.
Pierwszy element p jest potomkiem (pierwszego stopnia) elementu div i potomkiem (drugiego stopnia) elementu body.
Rodzicem pierwszego elementu p jest element div.
Pierwszy element p posiada dwóch przodków. Jego pierwszym przodkiem jest element div, a drugim przodkiem element body.

<body>

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

</body>

Element span nie posiada swoich dzieci, a więc nie jest rodzicem, jak również nie ma swoich potomków.
Element span jest jedynym dzieckiem pierwszego elementu p.
Element span jest potomkiem (pierwszego stopnia) elementu p, potomkiem (drugiego stopnia) elementu div i potomkiem (trzeciego stopnia) elementu body.
Rodzicem elementu span jest pierwszy element p.
Element span posiada trzech przodków. Jego pierwszym przodkiem jest element p, drugim element div, a trzecim element body.

Drugi element p nie posiada swoich dzieci, a więc nie jest rodzicem, jak również nie ma swoich potomków.
Drugi element p jest drugim dzieckiem elementu body.
Drugi element p jest drugim potomkiem (pierwszego stopnia) elementu body.
Rodzicem drugiego elementu p jest element body.
Drugi element p posiada jedynego przodka (pierwszego stopnia) i jest nim element body.

Dodatkowo należy zauważyć, że element div posiada jednego brata i jest nim drugi element p (brat, czyli element HTML umieszczony po danym elemencie HTML).

W następnej części kursu CSS poznamy do czego służy wartość inherit.