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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
---
title: Czytelny CSS
slug: Learn/CSS/First_steps/How_CSS_is_structured
tags:
- CSS:Na_początek
translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS
original_slug: Web/CSS/Na_początek/Czytelny_CSS
---
<p>
</p><p>Ta strona opisuje styl i gramatykę języka CSS.
</p><p>Zmienisz wygląd swojego pliku CSS, aby był bardziej czytelny.
</p>
<h3 id="Informacja:_Czytelny_CSS" name="Informacja:_Czytelny_CSS"> Informacja: Czytelny CSS </h3>
<p>Możesz dodać białe znaki i komentarze do swojego arkusza stylów, aby uczynić go bardziej czytelnym.
Możesz też grupować selektory razem, kiedy te same reguły stylów dotyczą wybranych elementów w różny sposób.
</p>
<h4 id="Bia.C5.82e_znaki" name="Bia.C5.82e_znaki"> Białe znaki </h4>
<p>Białe znaki to spacje, tabulatory i nowe linie.
Dzięki białym znakom arkusz stylów będzie bardzie czytelny.
</p><p>Twój przykładowy plik CSS zawiera w tej chwili jedną regułę na linię i prawie minimalną liczbę białych znaków. W złożonych arkuszach stylów taki układ byłby bardzo trudny do czytania, utrudniając zarządzanie arkuszem.
</p><p>Styl, który wybierzesz, zazwyczaj zależy od prywatnych przyzwyczajeń, ale Twój arkusz stylów może być częścią projektu, którym zajmuje się więcej osób. W takiej sytuacji przyjmuje się pewne konwencje.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Przykłady
</caption><tbody><tr>
<td> Niektórzy ludzie lubią zwięzły układ, którego używaliśmy do tej pory, dzieląc linię jedynie wtedy, kiedy staje się ona bardzo długa:
<pre>
.carrot {color: orange; text-decoration: underline; font-style: italic;}
</pre>
<p>Inni wolą układać jedną własność-wartość na linię:
</p>
<div style="width: 45em;">
<p>.carrot
{
color: orange;
text-decoration: underline;
font-style: italic;
}
</p>
</div>
<p>Inni używają wcięć — często używane są dwie spacje, cztery spacje lub tabulator:
</p>
<div style="width: 45em;">
<p>.carrot {
</p>
<pre class="eval"> color: orange;
text-decoration: underline;
font-style: italic;
</pre>
<p>}
</p>
</div>
<p>Inni wolą ustawiać wszystko względem pionowej osi (jednak taki układ jest trudny w zarządzaniu):
</p>
<div style="width: 45em;">
<p>.carrot
</p>
<pre class="eval"> {
color : orange;
text-decoration : underline;
font-style : italic;
}
</pre>
</div>
<p>Tworząc wcięcia jedni wolą używać tabulatorów, inni zaś tylko spacji.
</p>
</td></tr></tbody></table>
<h4 id="Komentarze" name="Komentarze"> Komentarze </h4>
<p>Komentarze w CSS zaczynają się od <code>/*</code>, a kończą się na <code>*/</code>.
</p><p>Możesz używać komentarzy, aby komentować elementy swojego arkusza stylów oraz do <i>wykomentowywania</i> części aktualnie nieużywanych.
</p><p>Aby wykomentować części arkusza stylów, umieść tę część w komentarzu, a przeglądarka ją zignoruje.
Należy uważać, gdzie zaczyna, a gdzie kończy się komentarz.
Dalsza część arkusza stylów musi mieć poprawną składnię.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Przykład
</caption><tbody><tr>
<td><div style="width: 45em;">
<p>/* styl dla początkowej litery C w pierwszym paragrafie */
.carrot {
</p>
<pre class="eval"> color: orange;
text-decoration: underline;
font-style: italic;
}
</pre>
</div>
</td></tr></tbody></table>
<h4 id="Grupy_Selektor.C3.B3w" name="Grupy_Selektor.C3.B3w"> Grupy Selektorów </h4>
<p>Kiedy wiele selektorów ma ten sam styl, możesz określić grupę selektorów, oddzielając je przecinkami.
Deklaracja zostanie zastosowana do wszystkich wybranych elementów.
</p><p>W innych miejscach arkusza stylów możesz określić te same selektory ponownie, aby nadać im indywidualne reguł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 sprawia, że elementy <small>H1</small>, <small>H2</small> oraz <small>H3</small> są tego samego koloru.
<p>Wygodnie jest określić kolor tylko w jednym miejscu, na wypadek, gdyby miał być zmieniany.
</p>
<div style="width: 30em;">
<p>/* kolory nagłówków */
h1, h2, h3 {color: navy;}
</p>
</div>
</td></tr></tbody></table>
<h3 id="Zadanie:_Dodawanie_komentarzy_i_poprawianie_uk.C5.82adu" name="Zadanie:_Dodawanie_komentarzy_i_poprawianie_uk.C5.82adu"> Zadanie: Dodawanie komentarzy i poprawianie układu </h3>
<p>Wyedytuj swój plik CSS i upewnij się, że posiada on te reguły (w dowolnej kolejności):
</p>
<div style="width: 30em;">
<p>strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
</p>
<ol><li>first {font-style: italic;}
</li></ol>
<p>p {color: blue;}
</p>
</div>
<p>Spraw, aby stał się bardziej czytelny, zmieniając kolejność w sposób, który uznasz za logiczny oraz dodając białe znaki i komentarze w taki sposób, jaki uznasz za najlepszy.
</p><p>Zapisz ten plik i odśwież stronę w przeglądarce, aby upewnić się, że Twoje zmiany nie wpłynęły na działanie arkusza stylów:
</p>
<table style="border: 2px outset #36b; padding: 1em;">
<tbody><tr>
<td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
</td></tr>
<tr>
<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
</td></tr></tbody></table>
<p><br>
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
<caption>Wyzwanie
</caption><tbody><tr>
<td> Wykomentuj część arkusza stylów bez zmieniania czegokolwiek poza tym, aby pierwsza litera dokumentu była czerwona:
<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
<tbody><tr>
<td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
</td></tr>
<tr>
<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
</td></tr></tbody></table>
<p>(Jest więcej niż jeden sposób, aby to zrobić.)
</p>
</td></tr></tbody></table>
<p><br>
</p>
<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4>
<p>Twój przykładowy dokument używa kursywy oraz podkreślenia.
Następna strona omawia kolejne sposoby na określanie wyglądu tekstu w dokumencie:
<b><a href="pl/CSS/Na_pocz%c4%85tek/Style_tekstowe">Style tekstowe</a></b>
</p>
<div class="noinclude">
</div>
{{ languages( { "en": "en/CSS/Getting_Started/Readable_CSS", "fr": "fr/CSS/Premiers_pas/Des_CSS_lisibles", "it": "it/Conoscere_i_CSS/CSS_leggibili", "ja": "ja/CSS/Getting_Started/Readable_CSS", "pt": "pt/CSS/Como_come\u00e7ar/CSS_leg\u00edvel" } ) }}
|
