Po co używać CSS

Ta strona tłumaczy, do czego dokumenty wykorzystują CSS. Używając CSS dodasz do swojego dokumentu arkusz stylów.

Informacja: Po co używać CSS?

CSS pomaga utrzymać treść dokumentu oddzieloną od informacji o tym, jak należy ją wyświetlać. Szczegóły opisujące, jak należy wyświetlać dokument, są znane jako styl. Utrzymywanie rozdzielenia treści od wyglądu:

  • pozwala uniknąć powtórzeń,
  • ułatwia zarządzanie dokumentem,
  • umożliwia wykorzystywanie różnych stylów do różnych celów w jednym dokumencie.
Przykład
Twoja strona WWW może mieć wiele dokumentów wyglądających podobnie. Korzystając z CSS, przechowujesz informacje o wyglądzie w osobnych plikach używanych we wszystkich dokumentach.

Kiedy użytkownik ogląda stronę WWW, przeglądarka pobiera informacje o stylach równolegle z treścią strony.

Kiedy użytkownik drukuje stronę, można mu dostarczyć inne informacje o stylu, które sprawią, że wydrukowany dokument będzie bardziej czytelny.

Ogólnie rzecz biorąc, dzięki CSS język znaczników jest wykorzystywany wyłącznie do opisu treści dokumentu, a nie jego stylu. CSS jest zaś używany do opisu stylu, nie treści. (Dalej w tym kursie będzie można zobaczyć pewne wyjątki od tej reguły.)

Więcej szczegółów
Język znaczników, taki jak HTML, również dostarcza pewnych mechanizmów opisu stylów. Na przykład w HTML-u można użyć znacznika <B>, aby pogrubić tekst albo określić kolor tła strony w znaczniku <BODY>.

Kiedy używasz CSS, zazwyczaj unikasz stosowania tych funkcji języka znaczników, aby trzymać wszystkie informacje o stylu dokumentu w jednym miejscu.

Zadanie: Tworzenia arkusza stylów

Stwórz inny plik tekstowy w tym samym katalogu, co poprzednio. Ten plik będzie arkuszem stylów. Nazwij go: style1.css

Skopiuj poniższą linię i wklej ją do pliku CSS, a następnie zapisz ten plik:

strong {color: red;}

Wiązanie arkusza stylów do dokumentu

Aby powiązać swój dokument z arkuszem stylów, wyedytuj plik HTML. Dodaj pogrubioną linię:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Sample document</TITLE>
  <LINK rel="stylesheet" type="text/css" href="style1.css">
  </HEAD>
  <BODY>
    <P>
      <STRONG>C</STRONG>ascading
      <STRONG>S</STRONG>tyle
      <STRONG>S</STRONG>heets
    </P>
  </BODY>
</HTML>

Zapisz ten plik i odśwież widok w swojej przeglądarce. Ten arkusz stylów sprawia, że pierwsze litery są czerwone:

Cascading Style Sheets
Wyzwanie
Poza czerwonym, CSS pozwala używać innych nazw kolorów.

Bez patrzenia w dokumentację znajdź pięć innych nazw kolorów, które działają w Twoim arkuszu stylów.

Co dalej?

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

Teraz masz już przykładowy dokument powiązany z osobnym arkuszem stylów, jesteś zatem gotów do zrozumienia, jak przeglądarka wiąże je podczas wyświetlania dokumentu: Jak działa CSS

Autorzy i etykiety dokumentu

Etykiety: 
Contributors to this page: teoli, Verruckt, Mgjbot, gandalf, Takenbot, Ptak82, Taken, Ruby, Witia, Anonymous, Marcoos, Dria
Ostatnia aktualizacja: teoli,