diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:49:24 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:49:24 +0100 |
commit | de5c456ebded0e038adbf23db34cc290c8829180 (patch) | |
tree | 2819c07a177bb7ec5f419f3f6a14270d6bcd7fda /files/pl/learn/css/building_blocks/cascade_and_inheritance/index.html | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-de5c456ebded0e038adbf23db34cc290c8829180.tar.gz translated-content-de5c456ebded0e038adbf23db34cc290c8829180.tar.bz2 translated-content-de5c456ebded0e038adbf23db34cc290c8829180.zip |
unslug pl: move
Diffstat (limited to 'files/pl/learn/css/building_blocks/cascade_and_inheritance/index.html')
-rw-r--r-- | files/pl/learn/css/building_blocks/cascade_and_inheritance/index.html | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/files/pl/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/pl/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..f100424b2f --- /dev/null +++ b/files/pl/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,97 @@ +--- +title: Kaskadowość i dziedziczenie +slug: Web/CSS/Na_początek/Kaskadowość_i_dziedziczenie +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +--- +<p> +</p><p>Ta strona tłumaczy jak arkusze stylów oddziaływują w kaskadzie, oraz jak elementy dziedziczą style od swoich rodziców. +</p><p>Nauczysz się zmieniać styl wielu elementów dokumentu jednym ruchem dzięki dziedziczeniu. +</p> +<h3 id="Informacja:_Kaskadowo.C5.9B.C4.87_i_dziedziczenie" name="Informacja:_Kaskadowo.C5.9B.C4.87_i_dziedziczenie"> Informacja: Kaskadowość i dziedziczenie </h3> +<p>Ostateczny styl elementu może być określony w wielu różnych miejscach, które mogą na siebie oddziaływać w złożony sposób. +Złożone interakcje czynią CSS potężnym, ale także mogą uczynić go niezrozumiałym i trudnym do debugowania. +</p><p>Trzy główne źródła informacji o stylu tworzą kaskadę. +Są to: +</p> +<ul><li>Domyślny styl przeglądarki dla danego języka znaczników +</li><li>Styl określony przez użytkownika czytającego stronę +</li><li>Styl podpięty do dokumentu przez jego autora +</li></ul> +<p>Styl użytkownika modyfikuje domyślny styl przeglądarki. +Styl autora dokumentu modyfikuje ten styl jeszcze bardziej. +W tym kursie Ty jesteś autorem przykładowego dokumentu i pracujesz tylko ze stylem autora. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> +<caption>Przykład +</caption><tbody><tr> +<td> Kiedy czytasz ten dokument w przeglądarce Mozilla, część stylu, który widzisz, pochodzi z domyślnego stylu przeglądarki dla HTML-a. +<p>Część tego stylu pochodzi z Twoich ustawień przeglądarki w Opcjach lub z pliku <code>userContent.css</code> w profilu przeglądarki. +</p><p>Część tego stylu pochodzi z arkusza stylów podpiętego do tego dokumentu przez serwer wiki. +</p> +</td></tr></tbody></table> +<p>Kiedy otwierasz przykładowy dokument w swojej przeglądarce, elementy STRONG są pogrubione w stosunku do reszty tekstu. Dzieje się tak, ponieważ zostało to ustawione w domyślnym stylu przeglądarki dla HTML-a. +</p><p>Elementy STRONG są czerwone. To ustawienie pochodzi z Twojego arkusza stylów. +</p><p>Elementy STRONG dziedziczą też większość ustawień stylu elementu P, ponieważ są jego dziećmi. W ten sam sposób element P dziedziczy wiele ustawień ze stylu elementu BODY. +</p><p>Dla stylów w kaskadzie najważniejsze są style autora strony, potem czytelnika, a na końcu ustawienia domyślne przeglądarki. +</p><p>Dla dziedziczonych stylów własne style ich dzieci mają wyższy priorytet od stylu dziedziczonego po rodzicu. +</p><p>Nie są to jedyne istniejące priorytety. Dalsze strony tego kursu wyjaśnią więcej. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> CSS daje też czytelnikowi możliwość nadpisania stylów autora dokumentu przez użycie słowa kluczowego <code>!important</code>. +<p>Oznacza to, że jako autor dokumentu, nie możesz nigdy dokładnie przewidzieć, co czytelnicy zobaczą. +</p><p>Jeżeli chcesz poznać wszystkie szczegóły kaskadowości i dziedziczenia, zobacz <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Przypisywanie wartości własności, Kaskadowość oraz dziedziczenie</a> w specyfikacji CSS. +</p> +</td></tr></tbody></table> +<h3 id="Zadanie:_U.C5.BCywanie_dziedziczenia" name="Zadanie:_U.C5.BCywanie_dziedziczenia"> Zadanie: Używanie dziedziczenia </h3> +<p>Wyedytuj Twój przykładowy plik CSS. +</p><p>Dodaj tę linię poprzez skopiowanie i wklejenie jej. +Nie ma żadnego znaczenia, czy dodasz ją pod czy nad linią, która już tam jest. +Jednakże dodawanie jej na górze jest bardziej logiczne, ponieważ w Twoim dokumencie element P jest rodzicem elementu STRONG: +</p> +<pre>p {color: blue; text-decoration: underline;} +</pre> +<p>Teraz odśwież okno przeglądarki, aby obejrzeć efekt na przykładowym dokumencie. +Podkreślenie wpłynęło na cały tekst paragrafu, włączając w to początkowe litery. +Elementy STRONG dziedziczyły styl podkreślenia po swoim rodzicu, elemencie P. +</p><p>Ale elementy STRONG nadal są czerwone. Kolor czerwony jest ich własnym stylem, ma zatem wyższy priorytet niż niebieski kolor ich rodzica, elementu P. +</p> +<table> +<tbody><tr> +<td> +<table style="border: 2px outset #36b; padding: 1em; margin-right: 2em;"> +<caption>Przed +</caption><tbody><tr> +<td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets +</td></tr></tbody></table> +</td><td> +<table style="border: 2px outset #36b; padding: 1em;"> +<caption>Po +</caption><tbody><tr> +<td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets +</td></tr></tbody></table> +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Zmień swój arkusz stylów, aby tylko czerwone litery były podkreślone: +<table style="border: 2px outset #36b; padding: 1em;"> +<tbody><tr> +<td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets +</td></tr></tbody></table> +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>. +</p><p>Twój przykładowy arkusz stylów opisuje style dla znaczników <code>P</code> oraz <code>STRONG</code>, +zmieniając styl odpowiednich elementów w Twoim dokumencie. +Następna strona opisuje, jak określić styl w bardziej selektywny sposób: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Selektory">Selektory</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/Cascading_and_inheritance", "fr": "fr/CSS/Premiers_pas/Cascade_et_h\u00e9ritage", "it": "it/Conoscere_i_CSS/Cascata_ed_ereditariet\u00e0", "ja": "ja/CSS/Getting_Started/Cascading_and_inheritance", "pt": "pt/CSS/Como_come\u00e7ar/Cascata_e_heran\u00e7a", "zh-cn": "cn/CSS/Getting_Started/Cascading_and_inheritance" } ) }} |