unslug pl: move

1 files changed, 154 insertions, 0 deletions

diff --git a/files/pl/learn/css/first_steps/how_css_is_structured/index.html b/files/pl/learn/css/first_steps/how_css_is_structured/index.html
new file mode 100644
index 0000000000..0e62945cbd
--- /dev/null
+++ b/files/pl/learn/css/first_steps/how_css_is_structured/index.html
@@ -0,0 +1,154 @@
+---
+title: Czytelny CSS
+slug: Web/CSS/Na_początek/Czytelny_CSS
+tags:
+  - 'CSS:Na_początek'
+translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
+translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS
+---
+<p>
+</p><p>Ta strona opisuje styl i gramatykę języka CSS.
+</p><p>Zmienisz wygląd swojego pliku CSS, aby był bardziej czytelny.
+</p>
+<h3 id="Informacja:_Czytelny_CSS" name="Informacja:_Czytelny_CSS"> Informacja: Czytelny CSS </h3>
+<p>Możesz dodać białe znaki i komentarze do swojego arkusza stylów, aby uczynić go bardziej czytelnym.
+Możesz też grupować selektory razem, kiedy te same reguły stylów dotyczą wybranych elementów w różny sposób.
+</p>
+<h4 id="Bia.C5.82e_znaki" name="Bia.C5.82e_znaki"> Białe znaki </h4>
+<p>Białe znaki to spacje, tabulatory i nowe linie.
+Dzięki białym znakom arkusz stylów będzie bardzie czytelny.
+</p><p>Twój przykładowy plik CSS zawiera w tej chwili jedną regułę na linię i prawie minimalną liczbę białych znaków. W złożonych arkuszach stylów taki układ byłby bardzo trudny do czytania, utrudniając zarządzanie arkuszem.
+</p><p>Styl, który wybierzesz, zazwyczaj zależy od prywatnych przyzwyczajeń, ale Twój arkusz stylów może być częścią projektu, którym zajmuje się więcej osób. W takiej sytuacji przyjmuje się pewne konwencje.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Przykłady
+</caption><tbody><tr>
+<td> Niektórzy ludzie lubią zwięzły układ, którego używaliśmy do tej pory, dzieląc linię jedynie wtedy, kiedy staje się ona bardzo długa:
+<pre>
+.carrot {color: orange; text-decoration: underline; font-style: italic;}
+</pre>
+<p>Inni wolą układać jedną własność-wartość na linię:
+</p>
+<div style="width: 45em;">
+<p>.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+</p>
+</div>
+<p>Inni używają wcięć — często używane są dwie spacje, cztery spacje lub tabulator:
+</p>
+<div style="width: 45em;">
+<p>.carrot {
+</p>
+<pre class="eval"> color: orange;
+ text-decoration: underline;
+ font-style: italic;
+</pre>
+<p>}
+</p>
+</div>
+<p>Inni wolą ustawiać wszystko względem pionowej osi (jednak taki układ jest trudny w zarządzaniu):
+</p>
+<div style="width: 45em;">
+<p>.carrot
+</p>
+<pre class="eval">   {
+   color           : orange;
+   text-decoration : underline;
+   font-style      : italic;
+   }
+</pre>
+</div>
+<p>Tworząc wcięcia jedni wolą używać tabulatorów, inni zaś tylko spacji.
+</p>
+</td></tr></tbody></table>
+<h4 id="Komentarze" name="Komentarze"> Komentarze </h4>
+<p>Komentarze w CSS zaczynają się od <code>/*</code>, a kończą się na <code>*/</code>.
+</p><p>Możesz używać komentarzy, aby komentować elementy swojego arkusza stylów oraz do <i>wykomentowywania</i> części aktualnie nieużywanych.
+</p><p>Aby wykomentować części arkusza stylów, umieść tę część w komentarzu, a przeglądarka ją zignoruje.
+Należy uważać, gdzie zaczyna, a gdzie kończy się komentarz.
+Dalsza część arkusza stylów musi mieć poprawną składnię.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Przykład
+</caption><tbody><tr>
+<td><div style="width: 45em;">
+<p>/* styl dla początkowej litery C w pierwszym paragrafie */
+.carrot {
+</p>
+<pre class="eval"> color:            orange;
+ text-decoration:  underline;
+ font-style:       italic;
+ }
+</pre>
+</div>
+</td></tr></tbody></table>
+<h4 id="Grupy_Selektor.C3.B3w" name="Grupy_Selektor.C3.B3w"> Grupy Selektorów </h4>
+<p>Kiedy wiele selektorów ma ten sam styl, możesz określić grupę selektorów, oddzielając je przecinkami.
+Deklaracja zostanie zastosowana do wszystkich wybranych elementów.
+</p><p>W innych miejscach arkusza stylów możesz określić te same selektory ponownie, aby nadać im indywidualne reguły.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Przykład
+</caption><tbody><tr>
+<td> Ta reguła sprawia, że elementy <small>H1</small>, <small>H2</small> oraz <small>H3</small> są tego samego koloru.
+<p>Wygodnie jest określić kolor tylko w jednym miejscu, na wypadek, gdyby miał być zmieniany.
+</p>
+<div style="width: 30em;">
+<p>/* kolory nagłówków */
+h1, h2, h3 {color: navy;}
+</p>
+</div>
+</td></tr></tbody></table>
+<h3 id="Zadanie:_Dodawanie_komentarzy_i_poprawianie_uk.C5.82adu" name="Zadanie:_Dodawanie_komentarzy_i_poprawianie_uk.C5.82adu"> Zadanie: Dodawanie komentarzy i poprawianie układu </h3>
+<p>Wyedytuj swój plik CSS i upewnij się, że posiada on te reguły (w dowolnej kolejności):
+</p>
+<div style="width: 30em;">
+<p>strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+</p>
+<ol><li>first {font-style: italic;}
+</li></ol>
+<p>p {color: blue;}
+</p>
+</div>
+<p>Spraw, aby stał się bardziej czytelny, zmieniając kolejność w sposób, który uznasz za logiczny oraz dodając białe znaki i komentarze w taki sposób, jaki uznasz za najlepszy.
+</p><p>Zapisz ten plik i odśwież stronę w przeglądarce, aby upewnić się, że Twoje zmiany nie wpłynęły na działanie arkusza stylów:
+</p>
+<table style="border: 2px outset #36b; 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>
+<p><br>
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
+<caption>Wyzwanie
+</caption><tbody><tr>
+<td> Wykomentuj część arkusza stylów bez zmieniania czegokolwiek poza tym, aby pierwsza litera dokumentu była czerwona:
+<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+<tbody><tr>
+<td style="font-style: italic; color: blue;"><strong style="color: red;">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>(Jest więcej niż jeden sposób, aby to zrobić.)
+</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 używa kursywy oraz podkreślenia.
+Następna strona omawia kolejne sposoby na określanie wyglądu tekstu w dokumencie:
+<b><a href="pl/CSS/Na_pocz%c4%85tek/Style_tekstowe">Style tekstowe</a></b>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/CSS/Getting_Started/Readable_CSS", "fr": "fr/CSS/Premiers_pas/Des_CSS_lisibles", "it": "it/Conoscere_i_CSS/CSS_leggibili", "ja": "ja/CSS/Getting_Started/Readable_CSS", "pt": "pt/CSS/Como_come\u00e7ar/CSS_leg\u00edvel" } ) }}