initial commit

2 files changed, 226 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" } ) }}
diff --git a/files/pl/learn/css/howto/index.html b/files/pl/learn/css/howto/index.html
new file mode 100644
index 0000000000..1f087d3e22
--- /dev/null
+++ b/files/pl/learn/css/howto/index.html
@@ -0,0 +1,86 @@
+---
+title: Use CSS to solve common problems
+slug: Learn/CSS/Howto
+translation_of: Learn/CSS/Howto
+---
+<div>Translation in progress{{LearnSidebar}}</div>
+
+<p class="summary">The following links provide solutions to common problems you can solve with CSS.</p>
+
+<h2 id="Common_use_cases">Common use cases</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Basics">Basics</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to apply CSS to HTML</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#White_space">How to use whitespace in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#Comments">How to write comments in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors">How to select elements via element name, class or ID</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">How to select elements via attribute name and content</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">How to use pseudo-classes</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements">How to use pseudo-elements</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule">How to apply multiple selectors to the same rule</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">How to specify colors in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">How to debug CSS in the browser</a></li>
+</ul>
+
+<h3 id="CSS_and_text">CSS and text</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">How to style text</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">How to customize a list of elements</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Styling_links">How to style links</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows">How to add shadows to text</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Boxes_and_layouts">Boxes and layouts</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">How to size CSS boxes</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow">How to control overflowing content</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to control the part of a CSS box that the background is drawn under</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">How do I define inline, block, and inline-block?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to use <code>background-clip</code> to control how much of the box your background image covers</a>.</li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">How to change the box model completely using <code>box-sizing</code></a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Backgrounds">How to control backgrounds</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Borders">How to control borders</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Styling_tables">How to style an HTML table</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">How to add shadows to boxes</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Uncommon_and_advanced_techniques">Uncommon and advanced techniques</h2>
+
+<p>CSS allows very advanced design techniques. These articles help demistify the harder use cases you may face.</p>
+
+<h3 id="General">General</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">How to calculate specificity of a CSS selector</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance">How to control inheritance in CSS</a></li>
+</ul>
+
+<h3 id="Advanced_effects">Advanced effects</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">How to use filters in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">How to use blend modes in CSS</a></li>
+</ul>
+
+<h3 id="Layout">Layout</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Content">Using CSS generated content</a></li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<p><a href="/en-US/docs/Learn/CSS/Howto/CSS_FAQ">CSS FAQ</a> — A variety of topics: from debugging to selector usage.</p>