1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
---
title: 'CSS: Kaskadowe arkusze stylów'
slug: Web/CSS
tags:
- CSS
- Kaskadowe arkusze stylów
- arkusze stylów
- szablony
- wygląd
translation_of: Web/CSS
---
<div>{{CSSRef}}</div>
<p class="summary"><span class="seoSummary"><strong>Kaskadowe arkusze stylów </strong>(<strong>CSS</strong>) są językiem stylów używanym do opisania warstwy prezentacji dokumentów napisanych w <a href="/en-US/docs/HTML" title="HyperText Markup Language">HTML</a></span> lub <a href="/en-US/docs/XML">XML</a> (włączając pochodne <a href="/en-US/docs/SVG">SVG</a> czy <a href="/en-US/docs/XHTML">XHTML</a>). CSS opisuje jak elementy powinny być prezentowane na ekranie, przy wydruku, w czytniku ekranowym, albo w innych mediach.</p>
<p>CSS jest jednym z podstawowych języków <strong>otwartej sieci</strong> i jest ustandaryzowany pomiędzy przeglądarkami zgodnie ze <a href="http://w3.org/Style/CSS/#specs">specyfikacją W3C</a>. Rozwijany stopniowo, CSS1 obecnie przestarzały , CSS2.1 rekomendowany, oraz <a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>, obecnie rozbity na mniejsze moduły w ciągłym procesie standaryzacji.</p>
<section id="sect1">
<ul class="card-grid">
<li><span>CSS wstęp</span>
<p>Jeżeli dopiero zaczynasz przygodę z web developmentem upewnij się, że przeczytałeś artykuł <a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">podstawy CSS</a>, który opisuje czym jest CSS i jak go używać.</p>
</li>
<li><span>CSS poradniki</span>
<p>Nasza<a href="/en-US/docs/Learn/CSS"> strefa uczenia CSS </a>zawiera niezliczoną ilość tutoriali, które sprawnie przeprowadzą Cie z poziomu początkującego do eksperta, pokrywając wszystkie fundamentalne zagadnienia.</p>
</li>
<li><span>CSS Reference</span>
<p>Our <a href="/en-US/docs/Web/CSS/Reference">exhaustive CSS reference</a> for seasoned Web developers describes every property and concept of CSS.</p>
</li>
</ul>
<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="Poradniki">Poradniki</h2>
<p><a href="/en-US/docs/Learn/CSS">CSS Learning Area</a> zawiera wiele modułów, które pozwolą Ci nauczyć się CSS od podstaw bez potrzeby wcześniejszej znajomości zagadnień.</p>
<dl>
<dt><a href="/pl/docs/Learn/CSS/Introduction_to_CSS">Wprowadzenie do CSS</a></dt>
<dd>Ten moduł wprowadza w podstawowe zagadnienia, tłumaczy jak CSS działa, omawia selektory i właściwości, pisanie reguł CSS, dodawanie CSS do HTMLa, jednostki i kolory, kaskadowość i dziedziczenie, podstawy modelu blokowego, a także debugowania.</dd>
<dt><a href="/en-US/docs/Learn/CSS/Styling_text">Stylowanie tekstu</a></dt>
<dd>Ten moduł opisuje podstawy stylowania tekstów, włączając w to ustawienia fontów, grubość, kursywe, interlinie i odstępy między literami, cienie oraz inne właściwości tekstu. Ten moduł kończy się dodaniem niestandardowych fontów na Twoją stronę oraz stylowaniem list i linków.</dd>
<dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Stylowanie bloków</a></dt>
<dd>Moduł ten poświęcony jest stylowaniu bloków, jest to krok w przód jeżeli chodzi o ułożenie elementów na stronie. W tym module streścimy czym jest model blokowy (ang. box model), a następnie zajmiemy się kontrolą wyglądu witryny poprzez wewnętrzne i zewnętrzne marginesy, obramowania, kolorowe tła, obrazki i inne właściwści, a także rzeczy bardziej widowiskowe takie jak cienie i filtry.</dd>
<dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt>
<dd>Do tej pory poznaliśmy podstawy takie jak stylowanie tekstu czy stylowanie i manipulowanie blokami z treścią. Przyszedł czas przyjrzeć się w jaki sposób umieścić dane bloki w odpowiednich miejscach m.in. w zależności od szerokości ekranu. Dzięki poznaniu niezabędnych podstaw możemy teraz wejść głębiej w tematykę szablonów CSS, omówić różne ustawienia wyświetlania, tradycyjne metody wykorzystujące <em>float </em>i <em>position</em>, a także nowe narzędzia takie jak <em>flexbox</em>.</dd>
</dl>
</div>
<div class="section">
<h2 class="Tools" id="Referencje">Referencje</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/Reference">CSS reference</a>: Wyczerpujący zbiór odnośników opisujących każdą właściwość i koncepcję CSS.</li>
<li>CSS kluczowe koncepcje:
<ul>
<li><a href="/en-US/docs/CSS/Syntax">Składnia i forma języka</a></li>
<li><a href="/en-US/docs/CSS/Specificity">Pierwszeństwo</a> i <a href="/en-US/docs/CSS/inheritance">dziedziczenie</a></li>
<li><a href="/en-US/docs/CSS/box_model">Model blokowy</a> i <a href="/en-US/docs/CSS/margin_collapsing">łączenie marginesów</a></li>
<li>The <a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">containing block</a></li>
<li><a href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">Stacking</a> and <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">block-formatting</a> contexts</li>
<li><a href="/en-US/docs/CSS/initial_value">Initial</a>, <a href="/en-US/docs/CSS/computed_value">computed</a>, <a href="/en-US/docs/CSS/used_value">used</a>, and <a href="/en-US/docs/CSS/actual_value">actual</a> values</li>
<li><a href="/en-US/docs/CSS/Shorthand_properties">CSS skrócone właściwości</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
<li><a href="/en-US/docs/Web/CSS/Media_Queries">Media queries</a></li>
</ul>
</li>
</ul>
<h2 class="Tools" id="Narzędzia_dla_developerów_CSS">Narzędzia dla developerów CSS</h2>
<ul>
<li>Możesz użyć <a class="external" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> do sprawdzenia czy Twój CSS jest poprawny. Jest to nieoceniony pomocnik przy debugowaniu kodu.</li>
<li><a href="/en-US/docs/Tools">Firefox Developer Tools</a> pozwalają na podgląd i edycję na żywo kodu CSS dzięki <a href="/en-US/docs/Tools/Page_Inspector">inspektorowi</a> i <a href="/en-US/docs/Tools/Style_Editor">edytorowi stylów</a>.</li>
<li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Roszerzenie Web Developer</a> dla Firefoxa pozwala na śledzenie i edytowanie na żywo CSS na oglądanych stronach.</li>
<li>Społeczność stworzyła inne <a href="/en-US/docs/Web/CSS/Tools">różnorodne narzędzia CSS</a>.</li>
</ul>
<h2 id="Meta_bugs">Meta bugs</h2>
<ul>
<li>Firefox: {{bug(1323667)}}</li>
</ul>
</div>
</div>
</section>
<h2 id="Zobacz_też">Zobacz też</h2>
<ul>
<li><a href="/en-US/docs/Web/Demos_of_open_web_technologies#CSS">CSS przykłady</a>: Dostań kreatywnego doładowanie dzięki przeglądaniu przykładów użycia najnowszych technik CSS.</li>
<li>Języki webowe, do których CSS jest najczęściej dołączany: <a href="/en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/SVG">SVG</a>, <a href="/en-US/docs/XHTML">XHTML</a> i <a href="/en-US/docs/XML">XML</a>.</li>
<li>Technologie Mozilli, które intensywnie używają CSS : <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/en-US/Firefox">Firefox</a>, <a href="/en-US/docs/Mozilla/Thunderbird">Thunderbird rozszerzenia</a> i <a href="/en-US/Add-ons/Themes">motyw</a>y.</li>
</ul>
|
