diff options
Diffstat (limited to 'files/pl/learn/css/building_blocks')
5 files changed, 1239 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..c6ca10a1c9 --- /dev/null +++ b/files/pl/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,98 @@ +--- +title: Kaskadowość i dziedziczenie +slug: Learn/CSS/Building_blocks/Cascade_and_inheritance +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 +original_slug: Web/CSS/Na_początek/Kaskadowość_i_dziedziczenie +--- +<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" } ) }} diff --git a/files/pl/learn/css/building_blocks/index.html b/files/pl/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..a62e5e31b7 --- /dev/null +++ b/files/pl/learn/css/building_blocks/index.html @@ -0,0 +1,72 @@ +--- +title: Bloki +slug: Learn/CSS/Building_blocks +tags: + - CSS:Na_początek +translation_of: Learn/CSS/Building_blocks +translation_of_original: Web/Guide/CSS/Getting_started/Boxes +original_slug: Web/CSS/Na_początek/Bloki +--- +<p> </p> +<p>Ta strona opisuje jak możesz użyć CSS do kontroli przestrzeni, którą zajmuje wyświetlany element.</p> +<p>W swoim przykładowym dokumencie będziesz zmieniać odstępy i dodawać reguły dekoracyjne.</p> +<h3 id="Informacja:_Bloki" name="Informacja:_Bloki">Informacja: Bloki</h3> +<p>Kiedy Twoja przeglądarka wyświetla element, zajmuje on miejsce. Przestrzeń, którą zajmuje element, dzieli się na cztery części.</p> +<p>W środku istnieje przestrzeń, której element potrzebuje do wyświetlenia swojej zawartości. Wokół tego jest margines wewnętrzny. Wokół tego jest ramka. Wokół tego jest margines zewnętrzny.</p> +<table> <tbody> <tr> <td style="width: 22em;"> <div style="padding: 0px 2em 2em; background-color: rgb(238, 238, 238); width: 16em;"> <p style="margin: 0px; text-align: center;">margines zewnętrzny</p> <p style="margin: 0px 0px -0.75em; text-align: center;">ramka</p> <div style="border: 4px solid rgb(255, 221, 153); padding: 0px 2em 2em; background-color: rgb(255, 255, 255);"> <p style="text-align: center;">margines wewnętrzny</p> <div style="background-color: rgb(238, 238, 238);"> <p style="margin: 0px; padding: 0px; text-align: center; font-size: 200%; font-weight: bold; color: rgb(153, 153, 153);">element</p> </div> </div> </div> <p><em>Jasny szary wskazuje części układu strony.</em></p> </td> <td> <div style="padding: 0px 2em 2em; background-color: rgb(255, 255, 255); width: 16em;"> <p style="margin: 0px; text-align: center;"> </p> <p style="margin: 0px 0px -0.75em; text-align: center;"> </p> <div style="border: 4px solid rgb(255, 221, 153); padding: 0px 2em 2em; background-color: rgb(255, 255, 255);"> <p style="text-align: center;"> </p> <div style="background-color: rgb(255, 255, 255);"> <p style="margin: 0px; padding: 0px; text-align: center; font-size: 200%; font-weight: bold; color: rgb(153, 153, 153);">element</p> </div> </div> </div> <p><em>Tak wygląda to w przeglądarce.</em></p> </td> </tr> </tbody> +</table> +<p>Marginesy wewnętrzne, zewnętrzne i ramka mogą mieć różne wielkości na górze, na dole, po prawej i po lewej stronie elementu. Każdy z nich może mieć wartość zero.</p> +<p>Margines wewnętrzny ma zawsze ten sam kolor, co tło elementu. Zatem kiedy określasz kolo tła, widzisz ten kolor w tle elementu i jego marginesu wewnętrznego. Margines jest zawsze przezroczysty.</p> +<table> <tbody> <tr> <td style="width: 22em;"> <div style="padding: 0px 2em 2em; background-color: rgb(238, 238, 238); width: 16em;"> <p style="margin: 0px; text-align: center;">margines zewnętrzny</p> <p style="margin: 0px 0px -0.75em; text-align: center;">ramka</p> <div style="border: 4px solid rgb(255, 221, 153); padding: 0px 2em 2em; background-color: rgb(238, 255, 238);"> <p style="text-align: center;">margines wewnętrzny</p> <div style="background-color: rgb(221, 238, 221);"> <p style="margin: 0px; padding: 0px; text-align: center; font-size: 200%; font-weight: bold; color: rgb(136, 153, 136);">element</p> </div> </div> </div> <p><em>Ten element ma zielone tło.</em></p> </td> <td> <div style="padding: 0px 2em 2em; background-color: rgb(255, 255, 255); width: 16em;"> <p style="margin: 0px; text-align: center;"> </p> <p style="margin: 0px 0px -0.75em; text-align: center;"> </p> <div style="border: 4px solid rgb(255, 221, 153); padding: 0px 2em 2em; background-color: rgb(238, 255, 238);"> <p style="text-align: center;"> </p> <div style="background-color: rgb(238, 255, 238);"> <p style="margin: 0px; padding: 0px; text-align: center; font-size: 200%; font-weight: bold; color: rgb(136, 153, 136);">element</p> </div> </div> </div> <p><em>Tak wygląda to w przeglądarce.</em></p> </td> </tr> </tbody> +</table> +<h4 id="Ramki" name="Ramki">Ramki</h4> +<p>Możesz użyć ramek do dekoracji elementów liniami lub blokami.</p> +<p>Aby utworzyć jednakową ramkę wokół całego elementu, użyj własności <code>border</code>. Określ szerokość (zwykle w pikselach), styl i kolor.</p> +<p>Istnieją następujące style:</p> +<table style="margin-left: 2em;"> <tbody> <tr> <td style="width: 6em;"> <div style="border: 2px solid rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>solid</code></div> </td> <td style="width: 6em;"> <div style="border: 2px dotted rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>dotted</code></div> </td> <td style="width: 6em;"> <div style="border: 2px dashed rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>dashed</code></div> </td> <td style="width: 6em;"> <div style="border: 4px double rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>double</code></div> </td> </tr> <tr> <td style="width: 6em;"> <div style="border: 2px inset rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>inset</code></div> </td> <td style="width: 6em;"> <div style="border: 2px outset rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>outset</code></div> </td> <td style="width: 6em;"> <div style="border: 4px ridge rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>ridge</code></div> </td> <td style="width: 6em;"> <div style="border: 4px groove rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>groove</code></div> </td> </tr> </tbody> +</table> +<p>Możesz także ustawić styl na <code>none</code> lub <code>hidden</code>, aby usunąć ramkę, lub ustawić kolor na <code>transparent</code>, aby ustawić przezroczystą ramkę bez dotykania układu.</p> +<p>Aby określić osobno każdą krawędź ramki, użyj własności: <code>border-top</code> (góra), <code>border-right</code> (prawo), <code>border-bottom</code> (dół), <code>border-left</code> (lewo). Możesz ich użyć do określenia ramki tylko po jednej stronie lub różnych ramek dla każdej krawędzi.</p> +<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(255, 255, 244); margin-bottom: 1em;"> <caption>Przykłady </caption> <tbody> <tr> <td>Ta reguła ustawia kolor tła i górną ramkę dla elementów nagłówka: <div style="width: 40em;"> <p>h3 {</p> <pre class="eval"> border-top: 4px solid #7c7; /* mid green */ + background-color: #efe; /* pale green */ + color: #050; /* dark green */ + } +</pre> </div> <p>Wygląda to tak:</p> <table> <tbody> <tr> <td> <p style="border-top: 4px solid rgb(119, 204, 119); font-size: 133%; font-weight: bold; background-color: rgb(238, 255, 238); color: rgb(0, 85, 0); padding-right: 6em;">Nagłówek w dobrym stylu</p> </td> </tr> </tbody> </table> <p>Dzięki tej regule obrazki są lepiej widoczne dzięki lekko szarej ramce wokół każdego z nich:</p> <div style="width: 30em;"> <p>img {border: 2px solid #ccc;}</p> </div> <p>Rezultat jest następujący:</p> <table> <tbody> <tr> <td>Obrazek:</td> <td style="border: 2px solid rgb(204, 204, 204);"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/2212/=Blue-rule.png"></td> </tr> </tbody> </table> </td> </tr> </tbody> +</table> +<h4 id="Marginesy_zewn.C4.99trzne_i_wewn.C4.99trzne" name="Marginesy_zewn.C4.99trzne_i_wewn.C4.99trzne">Marginesy zewnętrzne i wewnętrzne</h4> +<p>Użyj marginesów zewnętrznych i wewnętrznych, aby dopasować pozycję elementów i stworzyć przestrzeń wokół nich.</p> +<p>Użyj własności <code>margin</code> lub <code>padding</code>, aby ustawić szerokość marginesu wewnętrznego lub zewnętrznego.</p> +<p>Jeżeli podasz tylko jedną wartość, zostanie ona zastosowana wokół całego elementu (góra, prawo, dół i lewo).</p> +<p>Jeżeli określisz dwie wartości, pierwsza zostanie używa do określenia wymiarów góry i dołu, druga do prawa i lewa.</p> +<p>Możesz też określić wszystkie cztery szerokości w kolejności: góra, prawo, dół, lewo.</p> +<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(255, 255, 244); margin-bottom: 1em;"> <caption>Przykład </caption> <tbody> <tr> <td>Ta reguła oznacza akapity z klasą <code>remark</code> poprzez dodanie czerwonej ramki wokół nich. <p>Marginesy wewnętrzne ustawione dla wszystkie boków odsuną trochę ramki od tekstu.</p> <p>Lewy margines zewnętrzny odsuwa akapit od reszty tekstu:</p> <div style="width: 30em;"> <p>p.remark {</p> <pre class="eval"> border: 2px solid red; + padding: 4px; + margin-left: 24px; + } +</pre> </div> <p>Wynik wygląda tak:</p> <table> <tbody> <tr> <td> <p>Oto zwykły akapit.</p> <p style="border: 2px solid red; margin: 0px 0px 0px 24px; padding: 4px 6em 4px 4px;">A to akapit z klasą <code>remark</code>.</p> </td> </tr> </tbody> </table> </td> </tr> </tbody> +</table> +<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(244, 244, 244); margin-bottom: 1em;"> <caption>Więcej szczegółów </caption> <tbody> <tr> <td>Kiedy używasz marginesów zewnętrznych i wewnętrznych do określania, jak układane są elementu, Twoje reguły stylu wpływają na domyślne wartości przeglądarki w sposób, który może być bardzo skomplikowany. <p>Różne przeglądarki układają elementy na różne sposoby. Wynik może wyglądać podobnie, póki Twój arkusz stylów nic nie zmienia. Czasem może to dać dość zaskakujące rezultaty.</p> <p>Aby uzyskać spodziewany rezultat, możesz chcieć zmienić znaczniki dokumentu. Następna strona tego kursu tłumaczy, jak to zrobić.</p> <p>Aby dowiedzieć się więcej o marginesach i ramkach, zajrzyj do specyfikacji CSS do rozdziału <a class="external" href="http://www.w3.org/TR/CSS21/box.html">model blokowy</a>.</p> </td> </tr> </tbody> +</table> +<h3 id="Zadanie:_Dodawanie_ramek" name="Zadanie:_Dodawanie_ramek">Zadanie: Dodawanie ramek</h3> +<p>Wyedytuj swój plik CSS. Dodaj poniższą regułę, aby rysować linię nad każdym nagłówkiem:</p> +<div style="width: 30em;"> +<p>h3 {border-top: 1px solid gray;}</p> +</div> +<p>Jeżeli podjąłeś(aś) wyzwanie z poprzedniej strony, zmodyfikuj stworzoną regułę; w przeciwnym wypadku dodaj nową regułę, która doda przestrzeń pod każdym elementem listy:</p> +<div style="width: 30em;"> +<p>li {</p> +<pre class="eval"> list-style: lower-roman; + margin-bottom: 8px; + } +</pre> +</div> +<p>Odśwież okno przeglądarki, aby zobaczyć wynik:</p> +<table style="border: 2px outset rgb(51, 102, 187); padding: 1em; background-color: white;"> <tbody> <tr> <td> <p style="border-top: 1px solid gray; font-weight: bold; font-size: 133%; margin-bottom: 0.3em; padding-top: 0.4em; padding-bottom: 0.16em;">(A) Oceany</p> <ul style="list-style-type: disc;"> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Arktyczny</li> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Atlantycki</li> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Spokojny</li> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Indyjski</li> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Południowy</li> </ul> <p style="border-top: 1px solid gray; padding: 0.4em 4em 0.16em 0pt; font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: 0.3em;">(B) Numbered paragraphs</p> <p><strong>1: </strong>Lorem ipsum</p> <p><strong>2: </strong>Dolor sit</p> <p><strong>3: </strong>Amet consectetuer</p> <p><strong>4: </strong>Magna aliquam</p> <p><strong>5: </strong>Autem veleum</p> </td> </tr> </tbody> +</table> +<p> </p> +<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(255, 255, 244); margin-bottom: 1em;"> <caption>Wyzwanie </caption> <tbody> <tr> <td>Dodaj regułę do swojego arkusza stylów, która stworzy szeroką ramkę wokół wszystkich oceanów w kolorze, który kojarzy Ci się z morzem — coś w stylu: <table style="border: 2px outset rgb(51, 102, 187); padding: 1em; background-color: white;"> <tbody> <tr> <td> <p style="border-top: 1px solid gray; font-weight: bold; font-size: 133%; margin-bottom: 0.3em; padding-top: 0.4em; padding-bottom: 0.16em;">(A) The oceans</p> <div style="border: 12px solid rgb(102, 153, 187); padding-left: 1em;"> <ul style="list-style-type: lower-roman;"> <li style="margin-bottom: 8px;">Arctic</li> <li style="margin-bottom: 8px;">Atlantic</li> <li style="margin-bottom: 8px;">Pacific</li> <li style="margin-bottom: 8px;">Indian</li> <li style="margin-bottom: 8px;">Southern</li> </ul> </div> <p style="border-top: 1px solid gray; padding: 0.4em 4em 0.16em 0pt; font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: 0.3em;">(B) Numbered paragraphs</p> <p><strong>. . .</strong></p> </td> </tr> </tbody> </table> <p>(Nie musisz uzyskać identycznej szerokości ani koloru jak tutaj.)</p> </td> </tr> </tbody> +</table> +<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 href="/Talk:pl/CSS/Na_pocz%C4%85tek/Bloki" title="Talk:pl/CSS/Na_początek/Bloki">Dyskusji</a>.</p> +<p>Poprzez określenie marginesów modyfikujesz układ dokumentu. Na następnej stronie nauczysz się zmieniać układ w inny sposób: <strong><a href="/pl/CSS/Na_pocz%C4%85tek/Uk%C5%82ad" title="pl/CSS/Na_początek/Układ">Układ</a></strong></p> +<p>{{ languages( { "en": "en/CSS/Getting_Started/Boxes", "fr": "fr/CSS/Premiers_pas/Bo\u00eetes", "pt": "pt/CSS/Como_come\u00e7ar/Caixas" } ) }}</p> diff --git a/files/pl/learn/css/building_blocks/selectors/index.html b/files/pl/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..71ec313979 --- /dev/null +++ b/files/pl/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,261 @@ +--- +title: Selektory +slug: Learn/CSS/Building_blocks/Selectors +tags: + - CSS:Na_początek +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Web/Guide/CSS/Getting_started/Selectors +original_slug: Web/CSS/Na_początek/Selektory +--- +<p>Ta strona jest częścią piątą kursu <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a>. Wyjaśnia ona jak możesz używać stylów selektywnie, i jak różne typy selektorów mają różne priorytety. Dodasz pewne atrybuty do znaczników w swoim przykładowym dokumencie oraz użyjesz w nim tych atrybutów.</p> + +<h3 id="Informacja:_Selektory" name="Informacja:_Selektory">Informacja: Selektory</h3> + +<p>CSS posiada własną terminologię do opisania języka CSS. Poprzednio w trakcie tego kursu stworzyłeś(aś) linię w swoim arkuszu stylów w ten sposób:</p> + +<div style="width: 30em;"> +<pre>strong { + color: red; +} +</pre> +</div> + +<p>W terminologii CSS cała ta linia jest <em>regułą</em>. Ta reguła zaczyna się od <code>strong</code>, który jest <em>selektorem</em>. Wybiera, które elementy w drzewie DOM będą używały tej reguły.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <p><strong>Więcej szczegółów</strong><br> + Część wewnątrz nawiasów klamrowych nazywamy się <em>deklaracją</em>.</p> + + <p>Słowo kluczowe <code>color</code> jest <em>własnością</em>, a <code>red</code> jest <em>wartością</em>.</p> + + <p>Średnik po parze własność-wartość oddziela ją od innych par własność-wartość w tym samym opisie.</p> + + <p>Ten kurs odwołuje się do selektorów takich jak <code>strong</code> jako selektorów <em>znaczników</em>. Specyfikacja CSS odwołuje się do nich jako selektorów <em>typu</em>.</p> + </td> + </tr> + </tbody> +</table> + +<p>Ta strona kursu wyjaśnia więcej na temat selektorów, których możesz używać w regułach CSS.</p> + +<p>Dodatkowo do nazw znaczników możesz używać wartości atrybutów w selektorach. To pozwala sprecyzować Twoje reguły.</p> + +<p>Dwa atrybuty posiadają specjalny status w CSS. Są to <code>class</code> oraz <code>id</code>.</p> + +<h3 id="Selektor_class">Selektor class</h3> + +<p>Użycie atrybutu <code>class</code> w znaczniku przypisuje znacznikowi nazwaną klasę. Ty decydujesz jak ją nazwiesz.</p> + +<p>W swoim arkuszu stylów wpisz kropkę przed nazwą klasy, kiedy używasz jej w selektorze.</p> + +<h3 id="Selektor_ID">Selektor ID</h3> + +<p>Użycie atrybutu <code>id</code> w znaczniku przypisuje id do znacznika. Ty decydujesz, jakie <code>id</code> mu nadasz. Nazwa <code>id</code> musi być unikalna w dokumencie.</p> + +<p>W swoim arkuszu stylów wpisz znak numeru ("płotek" (ang. hash)) przed tym <code>id</code>, kiedy używasz go w selektorze.</p> + +<table style="background-color: #ffffee; border: 1px solid #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <p><strong>Przykłady</strong><br> + Ten znacznik HTML posiada zarówno atrybut <code>class</code>, jak i <code>id</code>:</p> + + <div style="width: 30em;"> + <pre> +<p class="key" id="principal"> +</pre> + </div> + + <p>Id, <code>principal</code>, musi być unikalne w dokumencie, lecz inne znaczniki mogą używać tej samej nazwy klasy <code>key</code>.</p> + + <p>W arkuszu stylów CSS ta reguła powoduje, że wszystkie elementy klasy <code>key</code> staną się zielone. (Nie wszystkie muszą być elementami <small>P</small>.)</p> + + <div style="width: 30em;"> + <pre> +.key { + color: green; +} +</pre> + </div> + + <p>Ta reguła powoduje, że jeden element o id <code>principal</code> zostanie pogrubiony:</p> + + <div style="width: 30em;"> + <pre> +#principal { + font-weight: bolder; +} +</pre> + </div> + </td> + </tr> + </tbody> +</table> + +<p>Jeżeli więcej niż jedna reguła odnosi się do elementu i określa tę samą własność, wtedy CSS nadaje priorytet regule, która posiada bardziej szczegółowy selektor. Selektor id jest bardziej szczegółowy od selektora klasy, który z kolei jest bardziej szczegółowy od selektora znacznika.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;"> + <caption>Więcej szczegółów</caption> + <tbody> + <tr> + <td>Możesz też mieszać selektory, czyniąc je bardziej szczegółowymi. + <p>Na przykład selektor <code>.key</code> wybiera wszystkie elementy, które mają klasę o nazwie <code>key</code>. Selektor <code>p.key</code> wybiera tylko elementy P, które mają klasę o nazwie <code>key</code>.</p> + + <p>Nie jesteś ograniczony(a) do dwóch specjalnych atrybutów, <code>class</code> i <code>id</code>. Możesz określać inne atrybuty poprzez użycie nawiasów kwadratowych. Na przykład selektor <code>{{ mediawiki.external('type=button') }}</code> wybiera wszystkie elementy, które mają atrybut <code>type</code> o wartości <code>button</code>.</p> + + <p>W dalszej części kursu (<a href="/pl/CSS/Na_pocz%C4%85tek/Tabele" title="pl/CSS/Na_początek/Tabele">Tabele</a>) można znaleźć informacje na temat złożonych selektorów opartych na wzajemnych relacjach.</p> + + <p>Aby dowiedzieć się więcej o selektorach, zajrzyj na stronę <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selektory</a> w specyfikacji CSS.</p> + </td> + </tr> + </tbody> +</table> + +<p>Jeżeli arkusz stylów posiada sprzeczne reguły i są one równie szczegółowe, wtedy CSS nadaje wyższy priorytet regule, która występuje później w arkuszu stylów.</p> + +<p>Gdy napotkasz problem ze sprzecznymi regułami, spróbuj rozwiązać go poprzez ustawienie jednej z reguł jako bardziej szczegółowej, aby można im było nadać priorytety. Jeżeli nie możesz tego zrobić, spróbuj przesunąć jedną z reguł bliżej końca arkusza stylów, aby nadać jej wyższy priorytet.</p> + +<h3 id="Zadanie:_U.C5.BCywanie_selektor.C3.B3w_class_i_id" name="Zadanie:_U.C5.BCywanie_selektor.C3.B3w_class_i_id">Zadanie: Używanie selektorów class i id</h3> + +<p>1. Wyedytuj swój plik HTML i zduplikuj akapit poprzez skopiowanie i wklejenie go.<br> + 2. Następnie dodaj atrybuty <strong>id</strong> i <strong>class</strong> do pierwszej kopii, a potem <strong>id</strong> do drugiej:</p> + +<div style="width: 48em; color: gray;"> +<pre><code><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p id="first"> + <strong class="carrot">C</strong>ascading + <strong class="spinach">S</strong>tyle + <strong class="spinach">S</strong>heets + </p> + <p id="second"> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html</code></pre> +</div> + +<p>Teraz wyedytuj swój plik CSS. Zamień całą treść na:</p> + +<div style="width: 40em;"> +<pre><code>strong { color: red; } +.carrot { color: orange; } +.spinach { color: green; } +#first { font-style: italic; }</code></pre> +</div> + +<p>Odśwież okno przeglądarki, aby zobaczyć wynik:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <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> + +<p>Możesz zmieniać kolejność linii w pliku CSS, aby zobaczyć, że kolejność nie ma wpływu na wynik.</p> + +<p>Selektory klas <code>.carrot</code> oraz <code>.spinach</code> mają priorytety nad selektorem znaczników <code>strong</code>.</p> + +<p>Selektor id <code>#first</code> ma priorytet nad selektorami klas i znaczników.</p> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em;"> + <caption>Wyzwanie</caption> + <tbody> + <tr> + <td>Bez zmieniania pliku HTML dodaj do pliku CSS pojedyncze reguły, które sprawią, że wszystkie początkowe litery będą nadal tego samego koloru, ale cały pozostały tekst w drugim akapicie stanie się niebieski: + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><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> + + <p>Teraz zmień regułę, którą właśnie dodałeś(aś) (bez zmieniania czegokolwiek innego), aby pierwszy akapit też był niebieski:</p> + + <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><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> + +<h2 id="Zadanie_użycie_pseudo_selectorów">Zadanie: użycie pseudo selectorów</h2> + +<ol> + <li>Utwórz plik HTML z następują treścią: + <pre><code><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p> + </body> +</html></code></pre> + </li> + <li>Edytuj plik CSS. Zamień jego treść na: + <pre><code>a.homepage:link, a.homepage:visited { + padding: 1px 10px 1px 10px; + color: #fff; + background: #555; + border-radius: 3px; + border: 1px outset rgba(50,50,50,.5); + font-family: georgia, serif; + font-size: 14px; + font-style: italic; + text-decoration: none; +} + +a.homepage:hover, a.homepage:focus, a.homepage:active { + background-color: #666; +}</code></pre> + </li> + <li>Zapisz pliki i odśwież przeglądarkę aby zobaczyć rezultat (przeciągnij muszkę nad przycisk, aby zobaczyć efekt): + <table> + <tbody> + <tr> + <td>Go to our <a href="https://developer.mozilla.org/pl/docs/Web/CSS/Na_pocz%C4%85tek/Selektory$edit#" title="Home page">Home page</a></td> + </tr> + </tbody> + </table> + </li> +</ol> + +<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 href="/Talk:pl/CSS/Na_pocz%C4%85tek/Selektory" title="Talk:pl/CSS/Na_początek/Selektory">Dyskusji</a>.</p> + +<p>Twój przykładowy arkusz stylów zaczyna wyglądać na zbity i skomplikowany. W następnej części opiszemy jak sprawić, by CSS był łatwiejszy w czytaniu: <strong><a href="/pl/CSS/Na_pocz%C4%85tek/Czytelny_CSS" title="pl/CSS/Na_początek/Czytelny_CSS">Czytelny CSS</a></strong></p> + +<p>{{ languages( { "en": "en/CSS/Getting_Started/Selectors", "fr": "fr/CSS/Premiers_pas/Les_s\u00e9lecteurs", "it": "it/Conoscere_i_CSS/I_Selettori", "ja": "ja/CSS/Getting_Started/Selectors", "pt": "pt/CSS/Como_come\u00e7ar/Seletores" } ) }}</p> diff --git a/files/pl/learn/css/building_blocks/styling_tables/index.html b/files/pl/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..23e9302a21 --- /dev/null +++ b/files/pl/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,598 @@ +--- +title: Tabele +slug: Learn/CSS/Building_blocks/Styling_tables +tags: + - CSS:Na_początek +translation_of: Learn/CSS/Building_blocks/Styling_tables +translation_of_original: Web/Guide/CSS/Getting_started/Tables +original_slug: Web/CSS/Na_początek/Tables +--- +<p> </p> +<p>Ta strona bardziej szczegółowo opisuje selektory oraz sposoby tworzenia stylów dla tabel.</p> +<p>Stworzysz nowy dokument zawierający tabelę oraz nadasz mu styl.</p> +<h3 id="Informacja:_Wi.C4.99cej_o_selektorach" name="Informacja:_Wi.C4.99cej_o_selektorach">Informacja: Więcej o selektorach</h3> +<p>CSS daje wiele sposobów na wybranie elementów, bazując na ich wzajemnych relacjach. Możesz ich użyć, aby stworzyć bardziej dokładne selektory.</p> +<p>Poniżej znajduje się podsumowanie selektorów bazujące na ich wzajemnych relacjach:</p> +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="width: 10em;"><strong>Selektor</strong></td> + <td><strong>Wybiera</strong></td> + </tr> + <tr> + <td><code>A E</code></td> + <td>Dowolny element E, który jest <b>potomkiem</b> elementu A (to znaczy jest dzieckiem albo dzieckiem dziecka, <i>itp</i>.))</td> + </tr> + <tr> + <td><code>A > E</code></td> + <td>Dowolny element E, który jest dzieckiem elementu A</td> + </tr> + <tr> + <td><code>E:first-child</code></td> + <td>Dowolny element E, który jest pierwszym dzieckiem swojego rodzica</td> + </tr> + <tr> + <td><code>B + E</code></td> + <td>Dowolny element E, który jest następnym z <i>rodzeństwa</i> elementu B (to znaczy: następnym dzieckiem tego samego rodzica)</td> + </tr> + </tbody> +</table> +<p>Możesz łączyć te selektory w złożone relacje.</p> +<p>Możesz też użyć symbolu <code>*</code> (gwiazdka), który znaczy "dowolny element".</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Przykład</caption> + <tbody> + <tr> + <td>Tabela HTML posiada atrybut <code>id</code>, ale jej wiersze i komórki nie posiadają własnych identyfikatorów: + <div style="width: 30em;"> + <p><TABLE id="data-table-1"> ... <TR> <TD>Prefiks</TD> <TD>0001</TD> <TD>domyślnie</TD> </TR> ...</p> + </div> + <p>Poniższe reguły powodują, że pierwsza komórka w każdym wierszu jest pogrubiona, natomiast druga używa kroju monospace. Dotyczą one tylko jednej, określonej tabeli w dokumencie:</p> + <div style="width: 45em;"> + <ol> + <li>data-table-1 td:first-child {font-weight: bolder;}</li> + <li>data-table-1 td:first-child + td {font-family: monospace;}</li> + </ol> + </div> + <p>Wygląda to tak:</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <table style="width: 18em; margin-right: 2em;"> + <tbody> + <tr> + <td><strong>Prefiks</strong></td> + <td><tt>0001</tt></td> + <td>domyślnie</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption> + Więcej szczegółów</caption> + <tbody> + <tr> + <td>Kiedy stworzysz bardziej szczegółowy selektor, zazwyczaj wzrośnie jego priorytet. + <p>Jeżeli korzystasz z opisanych tu technik, unikasz potrzeby określania atrybutu <code>class</code> lub <code>id</code> w wielu znacznikach dokumentu. Zamiast tego logika zostaje przeniesiona na CSS.</p> + <p>W dużych projektach, gdzie prędkość ma duże znaczenie, możesz sprawić, że twój arkusz stylów będzie działał szybciej, poprzez unikanie złożonych reguł, które zależą od relacji między elementami.</p> + <p>Aby dowiedzieć się więcej o selektorach, zajrzyj do specyfikacji CSS na stronę <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selektory</a>.</p> + </td> + </tr> + </tbody> +</table> +<h3 id="Informacja:_Tabele" name="Informacja:_Tabele">Informacja: Tabele</h3> +<p>Tabela układa informacje w prostokątną siatkę. Niektóre tabele mogą być skomplikowane, a różne przeglądarki mogą pokazywać różne wyniki.</p> +<p>Kiedy tworzysz swój dokument, użyj tabel do wyrażenia relacji między elementami informacji. Wówczas nie ma znaczenia, jeśli różne przeglądarki wyświetlą je w trochę inny sposób, ponieważ przekaz pozostanie jasny.</p> +<p>Nie używaj tabel w sposób, do którego nie zostały przeznaczone, na przykład aby tworzyć przy ich pomocy układ wizualny. Techniki opisane na poprzedniej stronie tego kursu (<a href="pl/CSS/Na_pocz%c4%85tek/Uk%c5%82ad">Układ</a>) nadają się do tego znacznie lepiej.</p> +<h4 id="Struktura_tabeli" name="Struktura_tabeli">Struktura tabeli</h4> +<p>W tabeli każdy kawałek informacji jest wyświetlany w <i>komórce</i>.</p> +<p>Komórki wyświetlane w jednej linii tworzą <i>wiersz</i>.</p> +<p>W niektórych tabelach wiersze mogą być grupowane. Specjalna grupa wierszy, która znajduje się na górze tabeli, nazywa się <i>nagłówkiem</i>. Specjalna grupa wierszy znajdująca się na dole tabeli nazywa się <i>stopką</i>. Główne wiersze w tabeli tworzą jej <i>ciało</i> i one również mogą być łączone w grupy.</p> +<p>Komórki ułożone w pionowej linii tworzą <i>kolumnę</i>, ale użyteczność kolumn w tabelach CSS jest ograniczona.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Przykład</caption> + <tbody> + <tr> + <td>Tabela selektorów znajdująca się na górze tej strony posiada dziesięć komórek i pięć wierszy. + <p>Pierwszy wiersz jest nagłówkiem. Kolejne cztery są ciałem tabeli. Nie posiada ona stopki.</p> + <p>Ma natomiast dwie kolumny.</p> + </td> + </tr> + </tbody> +</table> +<p><br> + Ten kurs omawia tylko proste tabele, dla których wynik jest przewidywalny. W prostej tabeli każda komórka zajmuje miejsce w jednym wierszu i jednej kolumnie. Możesz skorzystać z CSS-u do złożonych tabel, gdzie komórki rozciągają się na więcej niż jeden wiersz lub kolumnę, ale tego typu tabele wykraczają poza zakres tego kursu.</p> +<h4 id="Ramki" name="Ramki">Ramki</h4> +<p>Komórki nie posiadają marginesów zewnętrznych.</p> +<p>Komórki posiadają ramki oraz marginesy wewnętrzne. Domyślnie ramki są oddzielone o wartość własności <code>border-spacing</code> tabeli. Możesz usunąć całkowicie odstępy przez ustawienie własności <code>border-collapse</code> tabeli na wartość <code>collapse</code>.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Przykład</caption> + <tbody> + <tr> + <td>Poniżej widać trzy tabele. + <p>Tabela po lewej ma ustawione odstępy ramek na 0.5 em. Tabela w środku ma ustawione odstępy ramek na zero. Tabela po prawej ma zwinięte ramki:</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style=""> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 2em;"> + <table style=""> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 6em;"> + <table style="border-collapse: collapse;"> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<h4 id="Opis" name="Opis">Opis</h4> +<p><i>Opis</i> jest etykietą opisującą całą tabelę. Domyślnie jest wyświetlana nad tabelą.</p> +<p>Aby przesunąć opis na dół, ustaw jego własność <code>caption-side</code> na <code>bottom</code>. Ta własność jest dziedziczona, więc możesz ją ustawić dla całej tabeli lub innego rodzica.</p> +<p>Aby ustawić styl tekstu opisu, użyj normalnych własności tekstowych.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Przykład</caption> + <tbody> + <tr> + <td>Ta tabela posiada opis na dole: + <div style="width: 30em;"> + <ol> + <li>demo-table > caption {</li> + </ol> + <pre class="eval"> + caption-side: bottom; + font-style: italic; + text-align: right; + } +</pre> + </div> + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <table> + <caption> + Suits</caption> + <tbody> + <tr> + <td> + <table style="border-collapse: collapse;"> + <tbody> + <tr> + <td style="border: 1px solid gray; text-align: center;">Clubs</td> + <td style="border: 1px solid gray; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid gray; text-align: center;">Diamonds</td> + <td style="border: 1px solid gray; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<h4 id="Puste_kom.C3.B3rki" name="Puste_kom.C3.B3rki">Puste komórki</h4> +<p>Możesz wyświetlić puste komórki (czyli ich ramki oraz tło) przez określenie <code>empty-cells: show;</code> dla elementu tabeli.</p> +<p>Możesz je ukryć, określając <code>empty-cells: hide;</code>. Wtedy jeżeli element rodzic komórki posiada tło, zostanie ono pokazane w miejscu pustej komórki.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Przykład</caption> + <tbody> + <tr> + <td>Poniższe tabele mają jasnozielone tło. Ich komórki mają tło jasnoszare i ciemnoszare ramki. + <p>W lewej tabeli puste komórki są wyświetlane, w prawej ukrywane:</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="background-color: #dfd;"> + <tbody> + <tr> + <td style="border: 1px solid #555; background-color: #eee;"> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 6em;"> + <table style="background-color: #dfd;"> + <tbody> + <tr> + <td> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<p> </p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption> + Więcej szczegółów</caption> + <tbody> + <tr> + <td>Aby dowiedzieć się więcej o tabelach, zajrzyj do rozdziału <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tabele</a> w specyfikacji CSS. + <p>Informacje tam zawarte wykraczają poza ten kurs, ale nie opisują różnic miedzy przeglądarkami, które mogą wpływać na wyświetlanie złożonych tabel.</p> + </td> + </tr> + </tbody> +</table> +<h3 id="Zadanie:_Ustawianie_styl.C3.B3w_dla_tabeli" name="Zadanie:_Ustawianie_styl.C3.B3w_dla_tabeli">Zadanie: Ustawianie stylów dla tabeli</h3> +<p>Stwórz nowy dokument HTML, <code>doc3.html</code>. Skopiuj i wklej poniższy kod, upewniając się, że zaznaczasz całą zawartość:</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre><DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> +<HEAD> +<TITLE>Przykładowy dokument 3</TITLE> +<LINK rel="stylesheet" type="text/css" href="style3.css"> +</HEAD> +<BODY> + +<TABLE id="demo-table"> +<CAPTION>Oceans</CAPTION> + +<THEAD> +<TR> +<TH></TH> +<TH>Area</TH> +<TH>Mean depth</TH> +</TR> +<TR> +<TH></TH> +<TH>million km<SUP>2</SUP></TH> +<TH>m</TH> +</TR> +</THEAD> + +<TBODY> +<TR> +<TH>Arctic</TH> +<TD>13,000</TD> +<TD>1,200</TD> +</TR> +<TR> +<TH>Atlantic</TH> +<TD>87,000</TD> +<TD>3,900</TD> +</TR> +<TR> +<TH>Pacific</TH> +<TD>180,000</TD> +<TD>4,000</TD> +</TR> +<TR> +<TH>Indian</TH> +<TD>75,000</TD> +<TD>3,900</TD> +</TR> +<TR> +<TH>Southern</TH> +<TD>20,000</TD> +<TD>4,500</TD> +</TR> +</TBODY> + +<TFOOT> +<TR> +<TH>Total</TH> +<TD>361,000</TD> +<TD></TD> +</TR> +<TR> +<TH>Mean</TH> +<TD>72,000</TD> +<TD>3,800</TD> +</TR> +</TFOOT> + +</TABLE> + +</BODY> +</HTML> +</pre> +</div> +<p>Stwórz nowy arkusz stylów, <code>style3.css</code>. Skopiuj i wklej poniższy kod, upewniając się, że zaznaczasz cały:</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre>/*** Styl dla doc3.html (Tabele) ***/ + +#demo-table { + font: 100% sans-serif; + background-color: #efe; + border-collapse: collapse; + empty-cells: show; + border: 1px solid #7a7; + } + +#demo-table > caption { + text-align: left; + font-weight: bold; + font-size: 200%; + border-bottom: .2em solid #4ca; + margin-bottom: .5em; + } + + +/* basic shared rules */ +#demo-table th, +#demo-table td { + text-align: right; + padding-right: .5em; + } + +#demo-table th { + font-weight: bold; + padding-left: .5em; + } + + +/* header */ +#demo-table > thead > tr:first-child > th { + text-align: center; + color: blue; + } + +#demo-table > thead > tr + tr > th { + font-style: italic; + color: gray; + } + +/* fix size of superscript */ +#demo-table sup { + font-size: 75%; + } + +/* body */ +#demo-table td { + background-color: #cef; + padding:.5em .5em .5em 3em; + } + +#demo-table tbody th:after { + content: ":"; + } + + +/* footer */ +#demo-table tfoot { + font-weight: bold; + } + +#demo-table tfoot th { + color: blue; + } + +#demo-table tfoot th:after { + content: ":"; + } + +#demo-table > tfoot td { + background-color: #cee; + } + +#demo-table > tfoot > tr:first-child td { + border-top: .2em solid #7a7; + } +</pre> +</div> +<p>Otwórz dokument w swojej przeglądarce. Powinien wyglądać mniej więcej tak:</p> +<table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div> + <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p> + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Area</th> + <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Arctic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlantic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacific:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Indian:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Mean:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> + </tr> + </tbody> + </table> + </div> + </div> + </td> + </tr> + </tbody> +</table> +<p>Porównaj reguły ze swojego arkusza stylów z wyświetloną tabelą, aby upewnić się, że rozumiesz działanie każdej reguły. Jeżeli napotkasz regułę, której nie rozumiesz, wykomentuj ją i odśwież okno przeglądarki, aby zobaczyć, co się stanie.</p> +<p>Poniżej znajduje się kilka uwag dotyczących tej tabeli:</p> +<ul> + <li>Opis znajduje się poza ramką tabeli.</li> + <li>Jeżeli masz określoną minimalną wielkość punktu, może to wpłynąć na indeks górny w km<sup>2</sup>.</li> + <li>Istnieją trzy puste komórki. Dwie z nich pozwalają na pokazanie tła tabeli. Trzecia posiada własne tło i górną ramkę.</li> + <li>Dwukropki zostały dodane przez arkusz stylów.</li> +</ul> +<p> </p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Wyzwania</caption> + <tbody> + <tr> + <td>Zmień arkusz stylów tak, aby tabela wyglądała jak poniżej: + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div> + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Area</th> + <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Arctic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlantic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacific:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Indian:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Mean:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> + </tr> + </tbody> + </table> + </div> + <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p> + </div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<p> </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>Jest to ostatnia strona tego kursu, która opisuje własności i wartości CSS. Aby dowiedzieć się więcej o własnościach i wartościach w CSS, zajrzyj na stronę <a class="external" href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a> w specyfikacji CSS.</p> +<p>Następna strona znowu wraca do tematu przeznaczenia i struktury arkuszy stylów CSS: <b><a href="pl/CSS/Na_pocz%c4%85tek/Media">Media</a></b></p> diff --git a/files/pl/learn/css/building_blocks/values_and_units/index.html b/files/pl/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..e13cc8d2de --- /dev/null +++ b/files/pl/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,210 @@ +--- +title: Kolor +slug: Learn/CSS/Building_blocks/Values_and_units +tags: + - CSS:Na_początek +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +translation_of_original: Web/Guide/CSS/Getting_started/Color +original_slug: Web/CSS/Na_początek/Kolor +--- +<p> +</p><p>Ta strona dokładniej opisuje sposoby pracy z kolorami w CSS-ie. +</p><p>W swoim przykładowym arkuszu stylów, dodasz kolory tła. +</p> +<h3 id="Informacja:_Kolor" name="Informacja:_Kolor"> Informacja: Kolor </h3> +<p>Do tej pory w tym kursie używałeś(aś) ograniczonej liczby nazwanych kolorów. +CSS 2 definiuje 17 nazwanych kolorów. +Niektóre z nazw mogą nie być tym, czego się spodziewasz: +</p> +<table style="border: 0px; margin-left: 2em; text-align: right;"> +<tbody><tr> +<td> </td><td> black </td><td style="width: 2em; height: 2em; background-color: black;"> </td><td> gray </td><td style="width: 2em; height: 2em; background-color: gray;"> </td><td> silver </td><td style="width: 2em; height: 2em; background-color: silver;"> </td><td> white </td><td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> +</td></tr> +<tr> +<td> podstawowe </td><td> red </td><td style="width: 2em; height: 2em; background-color: red;"> </td><td> lime </td><td style="width: 2em; height: 2em; background-color: lime;"> </td><td> blue </td><td style="width: 2em; height: 2em; background-color: blue;"> +</td></tr> +<tr> +<td> drugorzędne </td><td> yellow </td><td style="width: 2em; height: 2em; background-color: yellow;"> </td><td> aqua </td><td style="width: 2em; height: 2em; background-color: aqua;"> </td><td> fuchsia </td><td style="width: 2em; height: 2em; background-color: fuchsia;"> +</td></tr> +<tr> +<td> </td><td>maroon</td><td style="width: 2em; height: 2em; background-color: maroon;"> </td><td> orange</td><td style="width: 2em; height: 2em; background-color: orange;"> </td><td> olive</td><td style="width: 2em; height: 2em; background-color: olive;"> </td><td> purple</td><td style="width: 2em; height: 2em; background-color: purple;"> </td><td> green</td><td style="width: 2em; height: 2em; background-color: green;"> </td><td> navy</td><td style="width: 2em; height: 2em; background-color: navy;"> </td><td> teal</td><td style="width: 2em; height: 2em; background-color: teal;"> +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Twoja przeglądarka może obsługiwać znacznie więcej nazwanych kolorów, na przykład: +<table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;"> +<tbody><tr> +<td> dodgerblue</td><td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td><td> peachpuff </td><td style="width: 2em; height: 2em; background-color: peachpuff;"> </td><td> tan </td><td style="width: 2em; height: 2em; background-color: tan;"> </td><td> firebrick </td><td style="width: 2em; height: 2em; background-color: firebrick;"> </td><td> aquamarine </td><td style="width: 2em; height: 2em; background-color: aquamarine;"> +</td></tr></tbody></table> +<p>Szczegółową listę znajdziesz w dokumentacji CSS 3, w module Kolor, sekcji +<a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">słowa kluczowe kolorów w SVG</a>. Unikaj używania nazwanych kolorów, których przeglądarka osoby czytającej Twój dokument może nie obsługiwać. +</p> +</td></tr></tbody></table> +<p>Aby móc korzystać w większej palety kolorów, określ czerwony, zielony i niebieski komponent koloru, z którego chcesz skorzystać, używając znaku "hash" oraz trzech <i>heksadecymalnych</i> liczb w zakresie od 0 – 9, a – f. Litery a – f reprezentują wartości 10 – 15. +</p> +<table style="border: 0px; margin-left: 2em;"> +<tbody><tr> +<td>black </td><td style="width: 2em; height: 2em; background-color: #000;"> </td><td><code>#000</code> +</td></tr> +<tr> +<td>pure red </td><td style="width: 2em; height: 2em; background-color: #f00;"> </td><td> <code>#f00</code> +</td></tr> +<tr> +<td>pure green </td><td style="width: 2em; height: 2em; background-color: #0f0;"> </td><td> <code>#0f0</code> +</td></tr> +<tr> +<td>pure blue </td><td style="width: 2em; height: 2em; background-color: #00f;"> </td><td> <code>#00f</code> +</td></tr> +<tr> +<td>white </td><td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td><td> <code>#fff</code> +</td></tr></tbody></table> +<p>Aby skorzystać z pełnej palety, określ dwie heksadecymalne liczby na każdy komponent: +</p> +<table style="border: 0px; margin-left: 2em;"> +<tbody><tr> +<td>black </td><td style="width: 2em; height: 2em; background-color: #000;"> </td><td> <code>#000000</code> +</td></tr> +<tr> +<td>pure red </td><td style="width: 2em; height: 2em; background-color: #f00;"> </td><td> <code>#ff0000</code> +</td></tr> +<tr> +<td>pure green </td><td style="width: 2em; height: 2em; background-color: #0f0;"> </td><td> <code>#00ff00</code> +</td></tr> +<tr> +<td>pure blue </td><td style="width: 2em; height: 2em; background-color: #00f;"> </td><td> <code>#0000ff</code> +</td></tr> +<tr> +<td>white </td><td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td><td> <code>#ffffff</code> +</td></tr></tbody></table> +<p>Zazwyczaj te sześcioliczbowe, heksadecymalne kody możesz pobrać z Twojego programu graficznego lub innego narzędzia. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> +<caption>Przykłady +</caption><tbody><tr> +<td> Odrobina praktyki i w większości wypadków możesz modyfikować trzyliczbowe kolory ręcznie: +<table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> +<tbody><tr> +<td>Zacznij od czystej czerwieni: </td><td style="width: 2em; height: 2em; background-color: #f00;"> </td><td><code>#f00</code> +</td></tr> +<tr> +<td>Aby ją rozjaśnić, dodaj trochę zielonego i niebieskiego: </td><td style="width: 2em; height: 2em; background-color: #f77;"> </td><td><code>#f77</code> +</td></tr> +<tr> +<td>Aby kolor był bardziej pomarańczowy, dodaj trochę zielonego: </td><td style="width: 2em; height: 2em; background-color: #fa7;"> </td><td><code>#fa7</code> +</td></tr> +<tr> +<td>Aby kolor był ciemniejszy, zmniejsz wartość wszystkich komponentów: </td><td style="width: 2em; height: 2em; background-color: #c74;"> </td><td><code>#c74</code> +</td></tr> +<tr> +<td>Aby zmniejszyć nasycenie, zmniejsz różnice między wartościami komponentów: </td><td style="width: 2em; height: 2em; background-color: #c98;"> </td><td><code>#c98</code> +</td></tr> +<tr> +<td>Jeśli ustawisz jednakową wartość wszystkich komponentów, uzyskasz kolor szary: </td><td style="width: 2em; height: 2em; background-color: #ccc;"> </td><td><code>#ccc</code> +</td></tr></tbody></table> +</td></tr> +<tr> +<td> Aby uzyskać pastelowy odcień, taki jak blady niebieski: +<table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> +<tbody><tr> +<td>Zacznij od białego: </td><td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td><td><code>#fff</code> +</td></tr> +<tr> +<td>Zredukuj trochę wartości komponentów innych, niż niebieski: </td><td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td><td><code>#eef</code> +</td></tr></tbody></table> +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Możesz także określić kolor, używając decymalnych wartości RGB w zakresie 0 – 255, lub procentów. +<p>Na przykład to jest kasztanowaty (ciemnoczerwony): +</p> +<div style="width: 24em;"><pre> +rgb(128, 0, 0) +</pre></div> +<p>Więcej szczegółów na temat określania kolorów znajdziesz w sekcji +<a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Kolory</a> w specyfikacji CSS. +</p><p>Więcej informacji na temat dopasowania kolorów do kolorów systemowych, jak Menu czy ThreeDFace, znajdziesz w: +<a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 Kolory Systemowe</a> specyfikacji CSS. +</p> +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="W.C5.82asno.C5.9Bci_kolor.C3.B3w" name="W.C5.82asno.C5.9Bci_kolor.C3.B3w"> Własności kolorów </h4> +<p>Korzystałeś(aś) już z własności <code>color</code> dla tekstu. +</p><p>Możesz też użyć własności <code>background-color</code>, aby zmienić tła elementów. +</p><p>Jeżeli ustawisz wartość tła na <code>transparent</code>, będzie ono przezroczyste i pokaże tło elementu rodzica. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> +<caption>Przykład +</caption><tbody><tr> +<td> Boksy <b>Przykład</b> w tym kursie używają bladożółtego tła: +<div style="width: 24em;"><pre> +background-color: #fffff4; +</pre></div> +<p>Boksy <b>Więcej szczegółów</b> używają bladoszarego: +</p> +<div style="width: 24em;"><pre> +background-color: #f4f4f4; +</pre></div> +</td></tr></tbody></table> +<h3 id="Zadanie:_Korzystanie_z_kod.C3.B3w_kolor.C3.B3w" name="Zadanie:_Korzystanie_z_kod.C3.B3w_kolor.C3.B3w"> Zadanie: Korzystanie z kodów kolorów </h3> +<p>Wyedytuj swój plik CSS. +</p><p>Wykonaj zmiany oznaczone tutaj pogrubieniem, aby nadać pierwszym literom bladoniebieskie tło. +(Styl i komentarze w Twoim pliku będą prawdopodobnie inne niż pokazane tutaj. +Zachowaj styl i komentarze w stylu jaki wybrałeś(aś)). +</p> +<div style="width: 32em;"> +<pre class="eval">/*** CSS Tutorial: Color page ***/ + +/* page font */ +body {font: 16px "Comic Sans MS", cursive;} + +/* paragraphs */ +p {color: blue;} +#first {font-style: italic;} + +/* initial letters */ +strong { + color: red; + <strong>background-color: #ddf;</strong> + font: 200% serif; + } + +.carrot {color: red;} +.spinach {color: green;} +</pre> +</div> +<p>Odśwież okno przeglądarki, aby zobaczyć wynik: +</p> +<table> +<tbody><tr> +<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets +</td></tr> +<tr> +<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 100%;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> W swoim pliku CSS zmień wszystkie nazwy kolorów na 3-cyfrowe kody kolorów, tak, żeby rezultat pozostał taki sam. +<p>(To nie jest do końca możliwe, ale możesz być blisko ideału. +Aby uzyskać dokładnie taki efekt, potrzebujesz 6-cyfrowych kodów oraz musisz zajrzeć do specyfikacji CSS lub użyć narzędzia graficznego, aby znaleźć odpowiednie kody). +</p> +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Twój przykładowy dokument i przykładowy arkusz stylów ściśle rozdzielają treść od stylu. +</p><p>Następna strona wyjaśnia, jak robić wyjątki od tego rozdziału: +<b><a href="pl/CSS/Na_pocz%c4%85tek/Tre%c5%9b%c4%87">Treść</a></b> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS/Getting_Started/Color", "fr": "fr/CSS/Premiers_pas/Couleurs", "it": "it/Conoscere_i_CSS/Colori", "ja": "ja/CSS/Getting_Started/Color", "pt": "pt/CSS/Como_come\u00e7ar/Cor" } ) }} |