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.