Skip to main content

Visit Mozilla.org

CSS:Na początek:Po co używać CSS

z Mozilla Developer Center, polskiego centrum programistów Mozilli.


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

[edytuj] 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.

[edytuj] 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;}

[edytuj] 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.

[edytuj] 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

Źródło: "http://developer.mozilla.org/pl/docs/CSS:Na_pocz%C4%85tek:Po_co_u%C5%BCywa%C4%87_CSS"