Kaskadowe arkusze stylów pozwalają na efektywną pracę nad wyglądem strony. Dzisiaj coś dla totalnie zielonych, czyli jak zacząć.
Nowoczesne podejście do tworzenia stron mówi, że dokumenty HTML-a nie powinny zawierać informacji o wyglądzie strony, ale jedynie o danych i ich funkcji. Oznacza to, że odrzuca się znaczniki takie jak FONT (określający krój tekstu) czy BIG (oznaczający tekst w większym stopniu).
Bez manipulacji wyglądem strony, czyli warstwą prezentacji, byłoby jednak nudno – każda strona wyglądałaby tak samo. W 1996 wprowadzono więc standard CSS (Cascading Style Sheets – kaskadowe arkusze stylów), czyli język opisujący wygląd dokumentów.
Odrzuć stare nawyki
Dawno, dawno temu webmasterzy nagminnie stosowali takie elementy jak FONT czy SMALL, co w połączeniu z niesemantycznym kodem tworzyło wybuchową mieszankę – totalnie nieczytelny dokument, w którym taka drobnostka jak zmiana marginesu mogła prowadzić do edycji kilkudziesięciu plików.
Współpraca z programistą byłaby w takim przypadku niemożliwa. Trudno wyobrazić sobie jak bardzo wzrósłby czas wykonywania zlecenia, gdyby przy wprowadzaniu nawet najdrobniejszej zmiany trzeba było zmieniać kod aplikacji.
Gdzie umieścić arkusz stylów?
Składnia dokumentu CSS jest prosta. Podajemy jakiego elementu wygląd chcemy zmienić, a w nawiasie klamrowym wypisujemy wybrane własności i (po dwukropku) ich wartości. Kolejne własności oddzielamy średnikiem.
Spacje, wcięcia i złamania linii są ignorowane, ale większość osób stosuje je w celu zachowania czytelności. Z drugiej strony w kodzie produkcyjnym można je usunąć w celu zmniejszenia objętości pliku. Dopuszczalne jest stosowanie komentarzy. Zaczynają się one od ciągu {html}/*{/html}, a kończą na {html}*/{/html}.
Style definiujemy albo wewnątrz dokumentu jako właściwość elementu ({html}
Metoda pierwsza kłoci się z założeniem, że warstwa prezentacji powinna być oddzielona od danych. Dołączenie stylu w sekcji head redukuje tę wadę, ale powiększa rozmiar każdego pliku i w razie zmian wymaga edycji wszystkich dokumentów. Przeszkadza to głównie w przypadku statycznych stron.
Zalecane jest stosowanie zewnętrznego pliku ze stylami. Wymaga to najmniej pracy przy zmianach, zmniejsza wielkość dokumentów i nie wymaga wielokrotnego przesyłania tych samych informacji (większość stylów powtarza się dla wszystkich podstron).
Selektory i własności
Arkusz stylów może wyglądać następująco:
p /*dowolny akapit*/
{
color: #ff00ff; /*kolor tekstu: różowy*/
font-size: 1.5em; /*rozmiar tekstu w emach*/
}
a.first /*odnośnik o klasie „first”*/
{
margin: 1em 0 2px -1.5em; /*marginesy. Kolejno: górny, prawy, dolny, lewy*/
border: 1px dotted #808; /*ramka o grubości piksela, kropkowana, fioletowa*/
}
To, który element będziemy definiować wyznacza tzw. selektor. W przykładzie selektorami są „p” i „a.first”. Podstawowe selektory rozpoznaje się po sposobie zapisu. Elementy zdefiniowane przez standard wywołuje się tak jak się nazywają (np. {html}div{}, a{}, html{}{/html}). Obiekty należące do wybranej klasy wywołamy poprzez poprzedzenie nazwy klasy kropką ({html}.naglowek{}, .boczny{}{/html}). Elementy posiadające swoją nazwę (id) oznaczamy poprzedzając nazwę krzyżykiem ({html}#menu{}, #main{}{/html}). CSS definiuje więcej selektorów. Opisaliśmy je w artykule {link_wew 4890}CSS dla zaawansowanych: selektory{/link_wew}.
O co chodzi z kaskadami?
Tak jak pokazano w przykładzie, selektory można łączyć w ciągi zwane kaskadami. Jeśli przeglądarka trafi na przedstawione „a.first” wyszuka wszystkie odnośniki, a z nich wybierze tylko takie, które posiadają klasę o nazwie „first”. Można w ten sposób bardzo dokładnie wybrać elementy (np. {html}#menu div.lewy a#pierwszy{/html}).
Lista właściwości jest długa i charakteryzuje takie parametry jak rozmiar, kolor czy położenie elementów. Można ją znaleźć np. na stronie http://www.w3schools.com/css/default.asp. Każda z własności posiada listę wartości, które może przyjąć.
Dopuszczalne wartości
Najprostsze własności posiadają tylko jeden parametr ({html}”color: #ff00ff”{/html} w przykładzie). Inne składają się z całej listy parametrów, np. {html}”margin: 1em 0 2px -1.5em”{/html} definiuje cztery marginesy jednocześnie. Ta sama własność dopuszcza również jeden lub dwa parametry. Np. jeśli wszystkie marginesy mają być równe wystarczy jeden parametr ({html}”margin: 1em”{/html}). Przeglądarka podczas renderowania strony domyśli się którą wersję wybraliśmy.
Jednostki miary
Główne jednostki miary stosowane w CSS-ie to piksele i firety. Niestety nie ma tu miejsca na centymetry czy cale. Piksel to najmniejszy punkt widoczny na ekranie, a jego rozmiar zależy od rozdzielczości i wielkości monitora internauty, na co nie mamy wpływu. Nie zaleca się więc stosowania pikseli przy definiowaniu rozmiaru tekstu, szerokości akapitów itp., gdyż nie jesteśmy w stanie stwierdzić, czy tekst o rozmiarze 16 pikseli będzie miał centymetr wysokości czy na przykład trzy.
Zamiast tego stosuje się jednostki względne – emy (firety). Jeden em odpowiada rozmiarowi czcionki wybranemu przez czytelnika. Pozwala to zachować proporcje między tytułami (ok. 1,5 – 2 emów), tekstem na marginesie (0,8 ema) czy szerokością akapitu (kilkadziesiąt emów).
W CSS-ie nie ma jednostek domyślnych. Zawsze musimy sprecyzować o której myślimy (np. 1.5em, -2px). Wyjątkiem jest zero, które zapisujemy bez jednostki (0).
Możemy również wybrać szczegółowe parametry danej własności. Własność font zawiera wiele parametrów, m.in. czcionkę i grubość. Nas interesował tylko rozmiar, więc w przykładzie użyliśmy {html}font-size{/html}. Tak samo moglibyśmy postąpić jeśli chcielibyśmy zmienić kolor górnej ramki obiektu: {html}border-top-color: #8800ff{/html}.
Definiowanie koloru
Najczęściej stosowaną metodą definiowania koloru w CSS-ie jest opisanie jej za pomocą trzech składowych heksadecymalnych oznaczających „ilość” barw; kolejno: czerwonej, zielonej i niebieskiej w kolorze. Każda z nich to liczba z przedziału 0 – ff (szesnastkowo). Im większa liczba tym jaśniejszy będzie kolor. „Ilość” każdej barwy składowej będzie miała taki wpływ na kolor końcowy jak nałożenie różnokolorowych filtrów na źródło światła: np. czerwony z niebieskim dadzą fioletowy itp.
Jak odczytać kolor z ciągu {html}#8800ff{/html}? 88 to ciemnoczerwony, 00 oznacza brak zielonego, a ff to jasnoniebieski. Zsumowanie tych kolorów da jasnofioletowy.
Skrócona wersja {html}#80f{/html} oznacza, że pierwsza i druga cyfra składowej są takie same ({html}#80f{/html} to to samo co {html}#8800ff{/html}).
Najważniejsze są szczegóły
Podczas renderowania przeglądarka zaczyna definiowanie stylów od najbardziej ogólnych do bardziej szczegółowych selektorów i w takiej samej kolejności zastępuje domyślne własności elementów. Fragment arkusza zamieszczony poniżej oznacza, że kolorem tekstu w akapitach będzie czerwony, ale akapity o klasie „first” (określone bardziej szczegółowo niż ogólne „akapit”) będą miały niebieski tekst. Akapit o klasie „first” i nazwie „wstep” będzie natomiast zielony – jest to bardziej szczegółowy przypadek niż samo „first”.
p { color: #f00; }
p.first { color: #00f; }
p.first#wstep { color: #0f0; }
Kolejność definicji nie ma w tym przypadku znaczenia. Dopiero kiedy w arkuszu pojawią się dwa tak samo szczegółowe wpisy, pod uwagę będzie brany ten, który pojawił się jako ostatni. Na marginesie warto dodać, że „szczegółowość” jest bardzo dokładnie sprecyzowana, ale jako że zgadza się z intuicją nie będziemy o niej pisać.
Oczywiście kaskadowe arkusze stylów posiadają wiele szczegółów, które pozwalają na efektywniejszą pracę czy dokładniejsze określenie elementów, ale przedstawione informacje powinny wystarczyć do zrozumienia zasady ich działania i tworzenia stylów nawet rozbudowanych stron.
