aboutsummaryrefslogtreecommitdiff
path: root/files/pl/learn/css/first_steps/how_css_works
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:49:24 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:49:24 +0100
commitde5c456ebded0e038adbf23db34cc290c8829180 (patch)
tree2819c07a177bb7ec5f419f3f6a14270d6bcd7fda /files/pl/learn/css/first_steps/how_css_works
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-de5c456ebded0e038adbf23db34cc290c8829180.tar.gz
translated-content-de5c456ebded0e038adbf23db34cc290c8829180.tar.bz2
translated-content-de5c456ebded0e038adbf23db34cc290c8829180.zip
unslug pl: move
Diffstat (limited to 'files/pl/learn/css/first_steps/how_css_works')
-rw-r--r--files/pl/learn/css/first_steps/how_css_works/index.html133
1 files changed, 133 insertions, 0 deletions
diff --git a/files/pl/learn/css/first_steps/how_css_works/index.html b/files/pl/learn/css/first_steps/how_css_works/index.html
new file mode 100644
index 0000000000..4502cad557
--- /dev/null
+++ b/files/pl/learn/css/first_steps/how_css_works/index.html
@@ -0,0 +1,133 @@
+---
+title: Czym jest CSS
+slug: Web/CSS/Na_początek/Czym_jest_CSS
+tags:
+ - 'CSS:Na_początek'
+translation_of: Learn/CSS/First_steps/How_CSS_works
+translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS
+---
+<p> </p>
+
+<p>Ta strona opisuje, czym jest CSS.</p>
+
+<h3 id="Informacja:_Czym_jest_CSS.3F" name="Informacja:_Czym_jest_CSS.3F">Informacja: Czym jest CSS?</h3>
+
+<p>CSS jest językiem określającym, jak dokumenty mają być prezentowane użytkownikowi.</p>
+
+<p><em>Dokument</em>jest to kolekcja informacji ułożona w strukturę przy użyciu<em>języka znaczników</em>.</p>
+
+<table style="background-color: #fffff4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;">
+ <caption>Przykłady</caption>
+ <tbody>
+ <tr>
+ <td>
+ <ul>
+ <li>Strona, taka jak ta, jest dokumentem.<br>
+ Informacje, które widzisz na stronie, zazwyczaj są ułożone w strukturę przy użyciu języka znaczników HTML (HyperText Markup Language).</li>
+ </ul>
+
+ <ul>
+ <li>Okienko dialogowe w aplikacji Mozilli jest dokumentem.<br>
+ Kontrolki interfejsu użytkownika, które widzisz w okienku dialogowym Mozilli, są ułożone w strukturę przy użyciu języka znaczników XUL (XML User-interface Language).</li>
+ </ul>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<p>W tym kursie bloki oznaczone <strong>Więcej szczegółów</strong>, jak poniższy, zawierają informacje, których znajomość nie jest wymagana do dalszego korzystania z kursu. Jeżeli się spieszysz, możesz spokojnie pominąć te bloki i na przykład wrócić do nich później.</p>
+
+<table style="background-color: #f4f4f4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;">
+ <caption>Więcej szczegółów</caption>
+ <tbody>
+ <tr>
+ <td>
+ <p>Dokument nie jest tym samym co plik. Dokument może, ale nie musi być składowany w pliku.</p>
+
+ <p>Na przykład dokument, który w tym momencie czytasz, nie jest zapisany w pliku. Kiedy Twoja przeglądarka prosi o stronę, serwer odpytuje bazę danych i generuje dokument, składając jego części z wielu plików i fragmentów z bazy danych. Jednak w trakcie tego kursu będziesz pracować z dokumentami składowanymi w plikach.</p>
+
+ <p>Więcej informacji na temat dokumentów i języków znaczników znajdziesz w innych częściach tej strony — na przykład:</p>
+
+ <table style="background-color: inherit; margin-left: 2em;">
+ <tbody>
+ <tr>
+ <td><a href="pl/HTML">HTML</a></td>
+ <td>o stronach internetowych</td>
+ </tr>
+ <tr>
+ <td><a href="pl/XML">XML</a></td>
+ <td>o strukturalnych dokumentach</td>
+ </tr>
+ <tr>
+ <td><a href="pl/SVG">SVG</a></td>
+ <td>o grafice</td>
+ </tr>
+ <tr>
+ <td><a href="pl/XUL">XUL</a></td>
+ <td>o interfejsie użytkownika w Mozilli</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<p><em>Prezentowanie</em>dokumentu użytkownikowi oznacza skonwertowanie go do postaci, w jakiej będzie on przydatny użytkownikowi. Mozilla prezentuje dokumenty wizualnie — na przykład na ekranie komputera, obrazie wyświetlanym przez projektor lub wydruku.</p>
+
+<table style="background-color: #f4f4f4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;">
+ <caption>Więcej szczegółów</caption>
+ <tbody>
+ <tr>
+ <td>CSS jest przeznaczony nie tylko dla przeglądarek i prezentacji graficznych. W formalnej terminologii CSS program, który prezentuje dokumenty użytkownikowi, nazywany jest<em>agentem</em> (ang. User Agent - UA). Przeglądarka jest tylko jednym z wielu rodzajów UA. Jednakże część pierwsza tego kursu skupia się na pracy z językiem CSS w przeglądarce.
+ <p>Formalne definicje terminologii związanej z CSS znajdziesz w Specyfikacji CSS w dziale <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definicje</a>.</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="Zadanie:_Tworzenie_dokumentu" name="Zadanie:_Tworzenie_dokumentu">Zadanie: Tworzenie dokumentu</h3>
+
+<p>Stwórz nowy katalog, a w nim nowy plik. Ten plik będzie Twoim dokumentem.</p>
+
+<p>Skopiuj i wklej poniższy kod HTML. Zapisz plik pod nazwą <code>doc1.html</code></p>
+
+<div style="width: 40em;">
+<pre class="brush: html language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Sample document<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>strong</span><span class="punctuation token">&gt;</span></span>C<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>strong</span><span class="punctuation token">&gt;</span></span>ascading
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>strong</span><span class="punctuation token">&gt;</span></span>S<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>strong</span><span class="punctuation token">&gt;</span></span>tyle
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>strong</span><span class="punctuation token">&gt;</span></span>S<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>strong</span><span class="punctuation token">&gt;</span></span>heets
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+</div>
+
+<p>Otwórz nowy panel lub nowe okno w Twojej przeglądarce i otwórz ten plik.</p>
+
+<p>Powinieneś zobaczyć tekst zaczynający się od pogrubionych liter:</p>
+
+<table style="border: 2px outset #36b; padding: 1em;">
+ <tbody>
+ <tr>
+ <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>To, co widzisz w przeglądarce, może się trochę różnić z powodu ustawień przeglądarki oraz tego wiki. Jeżeli istnieją jakieś różnice w kroju pisma, odstępach i kolorach, które widzisz, nie jest to żaden problem.</p>
+
+<h4 id="Co_dalej.3F" name="Co_dalej.3F">Co dalej?</h4>
+
+<p>Jeżeli masz problemy ze zrozumieniem tej strony lub chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>.</p>
+
+<p>Twój dokument nie używa jeszcze CSS. Na następnej stronie zaczniesz używać CSS do określania stylów: <strong><a href="pl/CSS/Na_pocz%c4%85tek/Po_co_u%c5%bcywa%c4%87_CSS">Po co używać CSS</a></strong></p>
+
+<p>{{ languages( { "en": "en/CSS/Getting_Started/What_is_CSS", "fr": "fr/CSS/Premiers_pas/Pr\u00e9sentation_des_CSS", "it": "it/Conoscere_i_CSS/Che_cosa_sono_i_CSS", "ja": "ja/CSS/Getting_Started/What_is_CSS", "pt": "pt/CSS/Como_come\u00e7ar/O_que_\u00e9_CSS", "zh-cn": "cn/CSS/Getting_Started/What_is_CSS" } ) }}</p>