1 files changed, 140 insertions, 0 deletions
diff --git a/files/pl/learn/css/howto/generated_content/index.html b/files/pl/learn/css/howto/generated_content/index.html
new file mode 100644
index 0000000000..b027725c1a
--- /dev/null
+++ b/files/pl/learn/css/howto/generated_content/index.html
@@ -0,0 +1,140 @@
+---
+title: Treść
+slug: Learn/CSS/Howto/Generated_content
+tags:
+  - 'CSS:Na_początek'
+translation_of: Learn/CSS/Howto/Generated_content
+---
+<p>
+</p><p>Ta strona opisuje niektóre metody, dzięki którym możesz użyć CSS-a, aby dodać treść do dokumentu w trakcie jego wyświetlania.
+</p><p>Zmodyfikujesz swój arkusz stylów, aby dodać treść oraz obrazek.
+</p>
+<h3 id="Informacja:_Tre.C5.9B.C4.87" name="Informacja:_Tre.C5.9B.C4.87"> Informacja: Treść </h3>
+<p>Jedną z ważnych zalet CSS-a jest to, że pomaga on oddzielić warstwę prezentacyjną dokumentu od jego treści.
+Zdarzają się jednak sytuacje, kiedy dobrym rozwiązaniem jest określenie treści jako elementu arkusza stylów, a nie dokumentu.
+</p><p>Treść określona w arkuszach stylów może składać się z tekstu i obrazów. Możesz określić treść w arkuszu stylów, kiedy jest ona blisko związana ze strukturą dokumentu.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+<caption>Więcej szczegółów
+</caption><tbody><tr>
+<td> Wstawianie treści w arkusz stylów może spowodować komplikacje. Na przykład możesz mieć wiele wersji językowych dokumentu, które dzielą arkusz stylów.
+<p>Jeżeli jakiś fragment arkusza stylów zawiera ciągi wymagające tłumaczenia, to musisz go wyciągnąć do osobnego pliku i przygotować osobną wersję dla każdej wersji językowej.
+</p><p>Unikniesz takich komplikacji, jeśli treść określona w arkuszach stylów będzie zawierała tylko symbole i obrazki, które pasują do wszystkich języków i kultur.
+</p><p>Treść określona w arkuszu stylów nie staje się częścią DOM-u.
+</p>
+</td></tr></tbody></table>
+<h4 id="Teksty" name="Teksty">Teksty</h4>
+<p>CSS pozwala umieścić tekst przed i po elemencie. Stwórz regułę i dodaj
+<code>:before</code> lub <code>:after</code> do selektora. Ustaw własność <code>content</code> z tekstem jako wartością.
+</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 dodaje tekst <span style="font-weight: bold; color: navy;">Dokumentacja:</span> przed każdym elementem należącym do klasy <code>ref</code>:
+<div style="width: 30em;">
+<p>.ref:before {
+</p>
+<pre class="eval"> font-weight: bold;
+ color: navy;
+ content: "Dokumentacja: ";
+ }
+</pre>
+</div>
+</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> Arkusz stylów domyślnie zakodowany jest jako UTF-8, ale można to zmienić w odnośniku, w samym arkuszu stylów lub w inny sposób. Aby dowiedzieć się więcej, zajrzyj do specyfikacji CSS, do rozdziału <a class="external" href="http://...">4.4 reprezentacja arkuszy stylów CSS</a>.
+<p>Pojedyncze znaki mogą także być zakodowane przy użyciu znaku odwróconego ukośnika. Na przykład \265B jest symbolem szachów dla czarnej królowej ♛. Aby dowiedzieć się więcej, zajrzyj do dokumentacji CSS, do rozdziałów <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Korzystanie ze znaków nie reprezentowanych w kodowaniu</a> oraz <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a>.
+</p>
+</td></tr></tbody></table>
+<h4 id="Obrazki" name="Obrazki">Obrazki</h4>
+<p>Aby dodać obrazek przed lub po jakimś elemencie, możesz określić URL pliku obrazka jako wartość własności <code>content</code>.
+</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 dodaje wolną przestrzeń oraz ikonę po każdym odnośniku, który posiada klasę <code>glossary</code>:
+<div style="width: 45em;">
+<p>a.glossary:after {content: " " url("../images/glossary-icon.gif");}
+</p>
+</div>
+</td></tr></tbody></table>
+<p>Aby dodać obrazek jako element tła, określ URL pliku obrazu jako wartość własności <code>background</code>. Jest to skrótowa własność, która określa kolor tła, obrazek tła, jak ten obrazek jest powielany i inne szczegół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 określa tło podanego elementu, używając URL-a do określenia pliku obrazu.
+<p>Selektor określa identyfikator elementu.
+Wartość <code>no-repeat</code> powoduje, że obrazek wyświetlany jest tylko raz:
+</p>
+<div style="width: 50em;">
+<ol><li>sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
+</li></ol>
+</div>
+</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> Aby dowiedzieć się więcej o poszczególnych własnościach tła oraz innych opcjach określanych dla obrazków tła, zajrzyj do dokumentacji CSS, rozdział <a class="external" href="http://www.w3.org/TR/CSS21/colors.html#q2">Tła</a>.
+</td></tr></tbody></table>
+<h3 id="Zadanie:_Dodawanie_obrazu_t.C5.82a" name="Zadanie:_Dodawanie_obrazu_t.C5.82a"> Zadanie: Dodawanie obrazu tła </h3>
+<p>Poniższy obrazek to biały prostokąt z niebieską linią na dole.
+Pobierz ten obrazek do katalogu, w którym trzymasz plik CSS:
+</p>
+<table style="border: 2px solid #ccc;">
+<tbody><tr>
+<td><img alt="Grafika:Blue-rule.png">
+</td></tr></tbody></table>
+<p>(Na przykład wciśnij prawy klawisz myszy, aby otworzyć menu kontekstowe, i wybierz Zapisz Obraz Jako... a następnie określ katalog, którego używasz w tym kursie.)
+</p><p>Wyedytuj swój plik CSS i dodaj tę regułę, aby ustawić obrazek tła dla całej strony.
+</p>
+<div style="width: 40em;">
+<p>background: url("Blue-rule.png");
+</p>
+</div>
+<p>Wartość <code>repeat</code> jest domyślna i nie musi być określana.
+Obrazek jest powtarzany horyzontalnie i wertykalnie, sprawiając wrażenie, jakby strona była kartką papieru w linie:
+</p>
+<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
+<p style="margin: 0px;"><img alt="Grafika:Blue-rule-ground.png"></p>
+<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
+<div style="font-style: italic; width: 24em;">
+<p><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
+</p>
+</div>
+<div style="font-style: normal; padding-top: 2px; height: 8em;">
+<p><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
+</p>
+</div>
+</div>
+</div>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Wyzwanie
+</caption><tbody><tr>
+<td> Pobierz ten obraz:
+<table style="border: 2px solid #ccc;">
+<tbody><tr>
+<td><img alt="Grafika:Yellow-pin.png">
+</td></tr></tbody></table>
+<p>Dodaj jedną regułę do Twojego arkusza stylów, aby wyświetlał obrazek na początku każdej linii:
+</p>
+<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
+<p style="margin: 0px;"><img alt="Grafika:Blue-rule-ground.png"></p>
+<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
+<div style="font-style: italic; width: 24em; padding-top: 8px;"><img alt="Grafika:Yellow-pin.png"> <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
+</div>
+<div style="font-style: normal; padding-top: 12px; height: 8em;"><img alt="Grafika:Yellow-pin.png"> <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
+</div>
+</div>
+</div>
+</td></tr></tbody></table>
+<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4>
+<p>Zazwyczaj treść jest dodawana przez arkusz stylów podczas modyfikowania list.
+</p><p>Następna strona opisuje, jak określić style dla elementów listy:
+<b><a href="pl/CSS/Na_pocz%c4%85tek/Listy">Listy</a></b>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/CSS/Getting_Started/Content", "fr": "fr/CSS/Premiers_pas/Contenu", "ja": "ja/CSS/Getting_Started/Content", "pt": "pt/CSS/Como_come\u00e7ar/Conte\u00fado" } ) }}