---
title: CSS podstawy
slug: Learn/Getting_started_with_the_web/CSS_basics
translation_of: Learn/Getting_started_with_the_web/CSS_basics
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>

<div class="summary">
<p>Kaskadowe arkusze stylów CSS (ang. Cascading Style Sheets) to kod służący do nadawania wyglądu strony. <em>CSS Podstawy</em> przeprowadzi cię przez bazowe zagadnienia, abyś mógł zacząć modyfikować wygląd swojej strony. Odpowiemy na takie pytania jak: Jak zrobić, żeby mój tekst był czarny albo czerwony? Jak wyświetlić poszczególną zawartość strony w wybranych miejscach ekranu? Jak dekorować stronę obrazami czy nadać kolor tła?</p>
</div>

<h2 id="Czym_właściwie_jest_CSS">Czym właściwie jest CSS?</h2>

<p>Podobnie jak HTML, CSS nie jest językiem programowania. Nie jest jednak też <em>językiem znaczników</em> — jest językiem arkuszy stylów (ang. <em>style sheet language</em>). <span id="result_box" lang="pl"><span>Oznacza to, że pozwala on selektywnie stosować style do elementów w dokumentach HTML.</span> <span>Na przykład, aby zaznaczyć wszystkie paragrafy na stronie HTML i zmienić w nich kolor tekstu na czerwono, należy napisać ten kod CSS:</span></span></p>

<pre class="brush: css">p {
  color: red;
}</pre>

<p>Sprawdźmy: wklej te trzy linie kodu do nowego pliku. Plik nazwij <code>style.css</code> i umieść go w katalogu <code>styles</code>.</p>

<p>Wciąż jednak musimy powiązać ten kod CSS z twoim dokumentem HTML. W przeciwnym wypadku stworzony kod CSS nie będzie miał wpływu na wygląd twojej strony. (Jeśli nie śledzisz naszego projektu od poczatku, przeczytaj <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Struktura plików witryny</a> oraz <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML podstawy</a>, żeby dowiedzieć się co wpierw należy wykonać.)</p>

<ol>
 <li>Otwórz plik <code>index.html</code> i wklej poniższy kod gdzieś w sekcji nagłówka (czyli pomiędzy elementami <code>&lt;head&gt;</code> i <code>&lt;/head&gt;</code>):

  <pre class="brush: html">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
 </li>
 <li>Zapisz plik <code>index.html</code> a następnie otwórz go w przeglądarce. Powinieneś móc zobaczyć coś takiego:</li>
</ol>

<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Jeśli tekst twoich akapitów jest czerwony, gratulacje! Właśnie napisałeś swój pierwszy skuteczny kod CSS.</p>

<h3 id="Anatomia_reguł_CSS">Anatomia reguł CSS</h3>

<p>Przyjrzyjmy się nieco bardziej szczegółowo naszemu kodowi CSS:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>

<p>Cała struktura jest nazywana <strong>listą </strong><strong>dyrektyw</strong> - reguł. Oto nazwy poszczególnych części:</p>

<dl>
 <dt>Selektor</dt>
 <dd>Element HTML na początku reguły. Wybiera poszczególne elementy (bądź też tylko jeden) do wystylizowania - w tym wypadku wszystkie elementy <code>p</code>. Aby dodać styl do innego elementu, po prostu zmień selektor;</dd>
 <dt>Deklaracja</dt>
 <dd>Pojedyncza reguła, taka jak <code>color: red;</code>, która ustala jakie <strong>właściwości</strong> elementu chcesz wystylizować.</dd>
 <dt>Właściwości</dt>
 <dd>Sposoby stylizowania danego elementu HTML. (W powyższym przykładzie <code>color</code> jest właściwością selektrora <code>p</code>.) W CSS wybierasz, która właściwość ma być nadana w danej deklaracji.</dd>
 <dt>Wartość właściwości</dt>
 <dd>Po prawej stronie właściwości za dwukropkiem mamy wartość właściwości, która wybiera jeden z wielu możliwych wyglądów dla danej właściwości (istnieje wiele wartości <code>color</code> oprócz <code>red</code>).</dd>
</dl>

<p>Zauważ inne ważne części składni:</p>

<ul>
 <li>Każda deklaracja (oprócz selektror) musi być ujęta w nawias klamrowy (<code>{}</code>).</li>
 <li>W ramach każdej deklaracji należy użyć dwukropka (<code>:</code>), aby oddzielić właściwość od jej wartości.</li>
 <li>W ramach każdej deklaracji należy użyć średnika (<code>;</code>), aby oddzielić każdą deklarację od następnej.</li>
</ul>

<p>Aby zmodyfikować wiele wartości właściwości jednocześnie, wystarczy napisać je oddzielone średnikami, np.:</p>

<pre class="brush: css">p {
  color: red;
  width: 500px;
  border: 1px solid black;
}</pre>

<h3 id="Wybieranie_wielu_elementów">Wybieranie wielu elementów</h3>

<p>Możesz również wybrać wiele typów elementów i zastosować dla nich jeden zestaw deklaracji. Wypisz kilka selektorów oddzielonych przecinkami. Na przykład:</p>

<pre class="brush: css">p,li,h1 {
  color: red;
}</pre>

<h3 id="Inne_typy_selektorów">Inne typy selektorów</h3>

<p>Istnieje wiele innych typów selektorów. Do tej pory używaliśmy tylko <strong>selektorów elementów</strong>, które wybierają wszystkie elementy danego typu z kodu HTML. Ale możemy stworzyć bardziej szczegółowe selektory. Oto kilka powszechnych typów selektorów:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Nazwa selektora</th>
   <th scope="col">Co wybiera?</th>
   <th scope="col">Przykład</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Selektor elementu (czasem nazywany selektorem tagu lub typu)</td>
   <td>Element(y) HTML o podanym typie.</td>
   <td><code>p</code><br>
    Wybiera elementy <code>&lt;p&gt;</code></td>
  </tr>
  <tr>
   <td>Selektor ID</td>
   <td>Element na stronie o podanym ID (na jednej stronie HTML możesz użyć konkretnego ID tylko raz).</td>
   <td><code>#my-id</code><br>
    Wybiera <code>&lt;p id="my-id"&gt;</code> lub <code>&lt;a id="my-id"&gt;</code></td>
  </tr>
  <tr>
   <td>Selektor klasy</td>
   <td>Element(y) na stronie o podanej klasie (Tej samej klasy możesz użyć wiele razy na stronie).</td>
   <td><code>.my-class</code><br>
    Wybiera <code>&lt;p class="my-class"&gt;</code> oraz <code>&lt;a class="my-class"&gt;</code></td>
  </tr>
  <tr>
   <td>Selektor atrybutu</td>
   <td>Element(y) na stronie o podanym atrybucie.</td>
   <td><code>img[src]</code><br>
    wybiera <code>&lt;img src="myimage.png"&gt;</code> ale nie <code>&lt;img&gt;</code></td>
  </tr>
  <tr>
   <td>Selektor pseudo-klasy</td>
   <td>Element(y) o określonym stanie np. najechanie myszą na element</td>
   <td><code>a:hover</code><br>
    Wybiera <code>&lt;a&gt;</code>, ale tylko gdy kursor znajduje się nad elementem.</td>
  </tr>
 </tbody>
</table>

<p>Istnieje wiele innych typów selektorów, możesz je poznać w naszym <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">Selectors guide</a>.</p>

<h2 id="Czcionki_i_tekst">Czcionki i tekst</h2>

<p>Teraz, gdy poznaliśmy podstawy CSS, dodajmy więcej reguł i informacji do naszego pliku <code>style.css</code> żeby nasz przykład wyglądał lepiej. Zacznijmy od zmiany wyglądu czcionek i tekstu.</p>

<ol>
 <li>Na początek, cofnij się i znajdź <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">output from Google Fonts</a>, który przechowałeś w bezpiecznym miejscu. Dodaj element {{htmlelement("link")}} gdzieś wewnątrz sekcji head w pliku <code>index.html</code> (gdziekolwiek pomiędzy tagami <code>&lt;head&gt;</code> i <code>&lt;/head&gt;</code>). Linijka będzie wyglądała podobnie do:

  <pre class="brush: html">&lt;link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;</pre>
 </li>
 <li>Następnie, usuń istniejące reguły w pliku <code>style.css</code>. To był dobry test, ale czerwony tekst nie wygląda najlepiej.</li>
 <li>Dodaj poniższy kod, zastępując linie "placeholder" z <code>font-family</code> wygenerowanym w Google Fonts. (<code>font-family</code> oznacza czcionkę lub czcionki których chcesz używać). Pierwsza reguła ustala bazową wielkość tekstu i czcionkę dla całej strony (ponieważ <code>&lt;html&gt;</code> to element-rodzic całej strony i wszystkie elementy wewnątrz niego dziedziczą ten sam <code>font-size</code> i <code>font-family</code>):
  <pre class="brush: css">html {
  font-size: 10px; /* px oznacz 'piksele': bazowy rozmiar tekstu to teraz 10 pikseli wysokości  */
  font-family: placeholder; /* tu powinnien być font-family wygenerowany w Google fonts */
}</pre>

  <div class="note">
  <p><strong>Uwaga</strong>: Wszystko w dokumencie CSS pomiędzy <code>/*</code> i <code>*/</code> jest <strong>komentarzem </strong><strong>CSS</strong>, który przyglądarka zignoruje podczas wyświetlania strony. To miejsce dla Ciebie na notatki dotyczące tego co dzieje się w danym miejscu.</p>
  </div>
 </li>
 <li>Teraz ustawimy rozmiar czcionki dla elementów zawierających tekst wewnątrz ciała (body) HTML: ({{htmlelement("h1")}}, {{htmlelement("li")}}, i {{htmlelement("p")}}). Wycentrujemy również tekst naszego nagłówka i ustawimy wysokość linii tekstu i odstęp między znakami dla głównej treści aby uczynić ją bardziej czytelną:
  <pre class="brush: css">h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}</pre>
 </li>
</ol>

<p>Możesz dostosować wartości <code>px</code> na jakiekolwiek chcesz, aby uzyskać wygląd jaki chcesz, ale generalnie twoja strona powinna wyglądać podobnie jak ta:</p>

<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p>

<h2 id="Pudełka_pudełka_wszędzie_pudełka">Pudełka, pudełka, wszędzie pudełka</h2>

<p>Jedną z rzeczy którą zauważysz podczas pisania CSS to, że wiele z nich dotyczy pudełek (ang. boxes) — ustawianie ich rozmiaru, koloru, pozycji etc. O większości elementów na stronie możesz myśleć jak o pudełkach stawianych jedne na drugim.</p>

<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>

<p>Nic dziwnego, że układ CSS opiera się głównie na <em>modelu pudełkowym</em> (ang. <em>box model</em>). Każdy z bloków zajmujących miejsce na Twojej stronie ma takie właściwości:</p>

<ul>
 <li><code>padding</code>, przestrzeń wokół elementu (np. wokół paragrafu tekstu)</li>
 <li><code>border</code>, obramowanie poza padding-iem</li>
 <li><code>margin</code>, przestrzeń wokół zewnętrznej części elementu</li>
</ul>

<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>

<p>W tej sekcji możemy także użyć:</p>

<ul>
 <li><code>width</code>, szerokość elementu,</li>
 <li><code>background-color</code>, kolor pod zawartością i paddingiem elementu,</li>
 <li><code>color</code>, kolor treści elementu (zazwyczaj tekstu),</li>
 <li><code>text-shadow</code>: ustawia cień pod tekstem wewnątrz elementu,</li>
 <li><code>display</code>: określa sposób wyświetlania elementu (póki co nie martw się tym).</li>
</ul>

<p>Dodajmy trochę więcej CSS do naszej strony! Dodawaj nowe reguły na dole pliku i nie bój się eksperymentować ze zmianą wartości, aby zobaczyć, jak działają.</p>

<h3 id="Zmiana_koloru_strony">Zmiana koloru strony</h3>

<pre class="brush: css">html {
  background-color: #00539F;
}</pre>

<p>Ten zestaw reguł ustawi kolor tła dla całej strony. Zmień powyższy kod koloru na dowolny wybrany podczas<a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Theme_color"> planning your site</a>.</p>

<h3 id="Sortowanie_elementów_body">Sortowanie elementów body</h3>

<pre class="brush: css">body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}</pre>

<p>Teraz element {{htmlelement("body")}}. Jest tu kilka deklaracji, więc przejrzyjmy je wszystkie jedna po drugiej:</p>

<ul>
 <li><code>width: 600px;</code> — wymusza, aby szerokość elementu body wynosiła 600 pikseli.</li>
 <li><code>margin: 0 auto;</code> — Kiedy ustawiasz dwie wartości na właściwościach takich jak <code>margin</code> czy <code>padding</code>, pierwsza wartość dotyczy górnej i dolnej strony elementu (ustawia je na 0 w tym wypadku), a druga wartość ustawia lewą i prawą stronę (<code>auto</code> to specjalna wartość która dzieli dostępną przestrzeń w poziomie równo pomiędzy lewą i prawą stronę). Możesz równiej użyć jednej, dwóch, trzech lub czterech wartości tak jak zostało to opisane <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">tutaj</a>.</li>
 <li><code>background-color: #FF9500;</code> — jak wcześniej, ustawia tło elementu. Użyliśmy czerwono-pomarańczowego koloru dla body, jako przeciwieństwa dla ciemno niebieskiego koloru dla elementu {{htmlelement("html")}}, ale nie krępuj się eksperymentować.</li>
 <li><code>padding: 0 20px 20px 20px;</code> — mamy cztery wartości do ustawienia odstępów do uzyskania przestrzeni wokół elementu. Tym razem ustawiamy brak górnego odstępu i po 20 pikseli odstępu dla prawej strony, dołu i lewej strony. Wartości ustawiają kolejno górę, prawą stronę, dół i lewą stronę.</li>
 <li><code>border: 5px solid black;</code> — ta prosta reguła ustawia obramowanie ciągłą linią o szerokości 5-ciu pikseli w czarnym kolorze dla każdego z boków.</li>
</ul>

<h3 id="Ustawianie_i_stylowanie_głównego_nagłówka">Ustawianie i stylowanie głównego nagłówka</h3>

<pre class="brush: css">h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}</pre>

<p>Być może zauważysz paskudną szparę na górze ciała strony. Dzieje się tak dlatego, że przeglądarki stosują pewne <strong>domyślne style</strong> dla elementu {{htmlelement("h1")}} (oraz innych), nawet jeżeli nie użyjesz żadnego stylu CSS! To może brzmieć jak zła koncepcja, ale chcemy by nawet nieostylowana strona wyglądała czytelnie. Aby pozbyć się luki, zmieniliśmy domyślny styl, ustawiając <code>margin: 0;</code>.</p>

<p>Następnie ustawiliśmy górny i dolny margines nagłówka na 20 pikseli i nadaliśmy tekstowi nagłówka taki sam kolor, jak kolor tła dla html.</p>

<p>Ciekawą właściwością, którą tutaj wykorzystaliśmy, jest <code>text-shadow</code>, który nadaje cień dla tekstu wewnątrz elementu. Jego cztery wartości są następujące: </p>

<ul>
 <li>Pierwsza wartość w pikselach określa <strong>przesunięcie poziome</strong> cienia od tekstu - jak daleko przesunąć go w poprzek: wartość ujemna powinna przesunąć cień w lewo.</li>
 <li>Druga wartość w pikselach określa <strong>pionowe przesunięcie</strong> cienia - jak daleko przesunąć go w dół; Wartość ujemna przesunie cień w górę.</li>
 <li>Trzecia wartość w pikselach to <strong>promień rozmycia</strong> cienia — większa wartość oznacza bardziej rozmyty cień.</li>
 <li>Czwarta wartość określa kolor cienia.</li>
</ul>

<p>Ponownie, eksperymentuj z innymi wartościami i zobacz co możesz zrobić!</p>

<h3 id="Centrowanie_obrazka">Centrowanie obrazka</h3>

<pre class="brush: css">img {
  display: block;
  margin: 0 auto;
}</pre>

<p>Wreszcie wycentrujemy obrazek żeby wyglądał lepiej. Możemy użyć ponownie triku <code>margin: 0 auto</code> którego użyliśmy w przypadku body, ale dodatkowo musimy zrobić coś jeszcze. Element {{htmlelement("body")}} jest <strong>blokowy (ang. block)</strong>, co oznacza, że zajmuje całą dostępną przestrzeń na stronie i możesz zastosować dla niego marginesy i inne ustawienia wielkości. Z drugiej strony, obrazki są elementali <strong>liniowymi</strong> (ang.inline) i nie posiadają takich właściwości. Dlatego żeby zastosować marginesy dla grafiki musimy zmienić jej sposób wyświetlania na blokowy używając <code>display: block;</code>.</p>

<div class="note">
<p><strong>Note</strong>: Powyższe instrukcje zakładają, że używasz obrazu o szerokości mniejszej niż szerokość ustawiona dla elementu body (600 pikseli). Jeśli obraz jest większy, spowoduje to przelanie treści i rozlanie jej na resztę strony. Aby temu zapobiec możesz 1) zmniejszyć wielkość obrazu za pomocą <a href="https://pl.wikipedia.org/wiki/Edytor_grafiki_rastrowej">editora graficznego</a>, lub 2) zmniejszyć obraz przy użyciu CSS ustawiając właściwość {{cssxref("width")}} dla elementu <code>&lt;img&gt;</code> na mniejszą wartość (np., <code>400 px;</code>).</p>
</div>

<div class="note">
<p><strong>Uwaga</strong>: Nie przejmuj się jeżeli jeszcze nie rozumiesz <code>display: block;</code> i różnicy między elementami liniowymi a blokowymi. Zrozumiesz z czasem zgłębiania wiedzy o CSS. Więcej o różnych dostępnych sposobach wyświetlania możesz znaleźć w naszym <a href="/en-US/docs/Web/CSS/display">display reference page</a>.</p>
</div>

<h2 id="Konkluzja">Konkluzja</h2>

<p>Jeżeli prześledziłeś instrukcje z tego artykułu powinieneś zakończyć ze stroną wyglądającą jak ta (możesz również zobaczyć <a href="http://mdn.github.io/beginner-html-site-styled/">naszą wersję tutaj</a>):</p>

<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p>

<p>Jeżeli utkniesz możesz zawsze porównać swój kod z naszym <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">gotowym przykładem na GitHub</a>.</p>

<p>To naprawdę podstawowe informacje o CSS. Aby dowiedzieć się więcej sprawdź nasz <a href="https://developer.mozilla.org/en-US/Learn/CSS">CSS Learning topic</a>.</p>

<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p>