---
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" } ) }}