From de5c456ebded0e038adbf23db34cc290c8829180 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:24 +0100 Subject: unslug pl: move --- .../cascade_and_inheritance/index.html | 97 ++++++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 files/pl/learn/css/building_blocks/cascade_and_inheritance/index.html (limited to 'files/pl/learn/css/building_blocks/cascade_and_inheritance/index.html') 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 +--- +

+

Ta strona tłumaczy jak arkusze stylów oddziaływują w kaskadzie, oraz jak elementy dziedziczą style od swoich rodziców. +

Nauczysz się zmieniać styl wielu elementów dokumentu jednym ruchem dzięki dziedziczeniu. +

+

Informacja: Kaskadowość i dziedziczenie

+

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. +

Trzy główne źródła informacji o stylu tworzą kaskadę. +Są to: +

+ +

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. +

+ + +
Przykład +
Kiedy czytasz ten dokument w przeglądarce Mozilla, część stylu, który widzisz, pochodzi z domyślnego stylu przeglądarki dla HTML-a. +

Część tego stylu pochodzi z Twoich ustawień przeglądarki w Opcjach lub z pliku userContent.css w profilu przeglądarki. +

Część tego stylu pochodzi z arkusza stylów podpiętego do tego dokumentu przez serwer wiki. +

+
+

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. +

Elementy STRONG są czerwone. To ustawienie pochodzi z Twojego arkusza stylów. +

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. +

Dla stylów w kaskadzie najważniejsze są style autora strony, potem czytelnika, a na końcu ustawienia domyślne przeglądarki. +

Dla dziedziczonych stylów własne style ich dzieci mają wyższy priorytet od stylu dziedziczonego po rodzicu. +

Nie są to jedyne istniejące priorytety. Dalsze strony tego kursu wyjaśnią więcej. +

+ + +
Więcej szczegółów +
CSS daje też czytelnikowi możliwość nadpisania stylów autora dokumentu przez użycie słowa kluczowego !important. +

Oznacza to, że jako autor dokumentu, nie możesz nigdy dokładnie przewidzieć, co czytelnicy zobaczą. +

Jeżeli chcesz poznać wszystkie szczegóły kaskadowości i dziedziczenia, zobacz Przypisywanie wartości własności, Kaskadowość oraz dziedziczenie w specyfikacji CSS. +

+
+

Zadanie: Używanie dziedziczenia

+

Wyedytuj Twój przykładowy plik CSS. +

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 {color: blue; text-decoration: underline;}
+
+

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. +

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. +

+ + +
+ + +
Przed +
Cascading Style Sheets +
+		 + + +
Po +
Cascading Style Sheets +
+
+


+

+ + +
Wyzwanie +
Zmień swój arkusz stylów, aby tylko czerwone litery były podkreślone: + + +
Cascading Style Sheets +
+
+


+

+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. +

Twój przykładowy arkusz stylów opisuje style dla znaczników P oraz STRONG, +zmieniając styl odpowiednich elementów w Twoim dokumencie. +Następna strona opisuje, jak określić styl w bardziej selektywny sposób: +Selektory +

{{ 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" } ) }} -- cgit v1.2.3-54-g00ecf