CSS to technologia, która pozwala na dużą swobodę w formatowaniu dokumentów HTML. Upraszcza nie tylko tworzenie stron WWW, ale również ich późniejszą modyfikację. W artykule stawiamy pierwsze kroki w definiowaniu stylów.
Początki internetu były skromne. Miał służyć naukowcom do wymiany poglądów i porównywania wyników badań. Dopiero z biegiem lat uległ komercjalizacji.
Pierwsze strony internetowe były oparte na języku HTML, który pozwalał zarówno na przekazywanie treści, jak i odpowiadał za prezentację, czyli wystrój graficzny strony.
Gwałtowny rozwój sieci sprawił, że rozpoczęto prace nad stworzeniem technologii ułatwiającej formatowanie dokumentów HTML. Tak powstały Kaskadowe Arkusze Stylów – CSS. Tworząc arkusz CSS ustalamy, jak będzie wyglądał dokument HTML, np. czy będzie miał tło czarne, białe, czy tłem będzie zdjęcie. Gdy będziemy chcieli np. zmienić kolor tła na wszystkich podstronach, wystarczy dokonać zmiany włącznie w jednym pliku CSS.
Co to jest styl?
Styl CSS jest to zbiór reguł, którym mają podlegać wskazane znaczniki lub całe sekcje znaczników HTML.
Strona z zastosowanymi stylami CSS
Prezentowana witryna została stworzona przy użyciu technologii XHTML (obecny standard, który zastąpił HTML, bardzo zbliżony do HTML 4.0) i CSS 2.1 (obowiązująca wersja CSS). Witryna składa się ze strony HTML oraz pliku CSS, który ustala wszystkie style. Strona wykorzystuje metodę projektowania bez użycia tabel (rewolucja w podejściu do tworzenia stron).
Strona z wyłączonym stylami
Ukazuje się witryna pozbawiona formatowania, ponieważ wyłączono style. Treść nie ma na tej stronie nic wspólnego z formatowaniem tekstu. I o to właśnie chodzi w CSS.
Kod HTML prezentowanej witryny
Żaden element w kodzie nie ma parametrów! Są tylko najprostsze znaczniki {html}
{/html} czy {html}
{/html} pozbawione jakichkolwiek atrybutów. To zaleta, bo wyjściowy kod HTML jest bardzo krótki.
Jak wygląda kod?
Zobaczmy to na przykładzie. Gdy w HTML-u chcieliśmy pokolorować tekst w paragrafie na niebiesko, robiliśmy to tak:
{html}Jakiś tekst.{/html}
W CSS zrobimy to już bez pomocy znacznika {html}{/html}:
{html}
Jakiś tekst.{/html}
Przestawiamy się na znacznik {stala}style=”"{/stala} i zauważamy, że w deklarowaniu stylu występuje inna składnia:
{stala}cecha: wartość;{/stala}
Gdy chcemy zadeklarować więcej parametrów, dodajemy kolejne, nie zapominając o separatorze – średniku:
{stala}cecha: wartość; cecha: wartość{/stala}
Celowo zostały użyte dodatkowe znaki spacji. Są one dozwolone, lecz ich pominięcie sprzyja powstawaniu krótszego kodu.
Dlaczego warto korzystać z CSS?
- Pozwala ustalić zbiorczy styl dla całej witryny.
- Wszelkie modyfikacje oznaczają zmiany tylko w jednym pliku stylów.
- Rozmiar plików HTML po zastosowaniu stylów maleje, czasem bardzo pokaźnie.
- Mniejsze pliki to mniejszy transfer i szybsze ładowanie stron.
- Przeglądarka przechowuje plik CSS w swoim buforze.
Sposoby wprowadzania stylów
Style można definiować w trzech różnych, niewykluczających się miejscach: korzystając z zewnętrznego pliku, umieszczając style w nagłówku dokumentu HTML oraz tworząc atrybut „style” w dowolnym znaczniku HTML. Wszystkie trzy metody można stosować jednocześnie, lecz obowiązuje tu zasada priorytetów.
Im bliżej znacznika HTML znajdują się właściwości CSS, tym bardziej przebija on inne właściwości CSS umieszczone wcześniej. Tym sposobem raz zadeklarowany kolor paragrafu w pliku zewnętrznym może zostać zmieniony na zielony przez lokalne umieszczenie deklaracji stylu.
Style umieszczane lokalnie
Jest to najprostsza metoda definiowania stylu dla danej sekcji witryny. W przykładzie dla znacznika {html}
Ta metoda wprowadza bałagan w kodzie, lecz gdy konkretnego stylu używamy tylko raz, umieszczanie stylów lokalnie może być uzasadnione. Jednak profesjonalni webmasterzy nie używają tej metody, bo nie spełnia ona zasady: osobno treść, osobno prezentacja.
Style w nagłówku strony
Wirtualna Polska wszystkie swoje style umieszcza w nagłówku kodu źródłowego każdej strony. Wszystkie ustalenia CSS są umieszczane pomiędzy znacznikami {html}