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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
---
title: Czym jest CSS
slug: Learn/CSS/First_steps/How_CSS_works
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
original_slug: Web/CSS/Na_początek/Czym_jest_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"><!DOCTYPE html></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Sample document<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">></span></span>C<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span>ascading
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">></span></span>S<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span>tyle
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">></span></span>S<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span>heets
<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></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>
|
