2 Wprowadzenie do CSS 2.1
Spis treści
2.1 Krótki kurs zastosowania CSS 2.1 w HTML
Ten podrozdział nie jest normatywny.
W kursie tym zademonstrujemy jak łatwe jest projektowanie prostych arkuszy stylów. Do jego zrozumienia potrzebna jest podstawowa wiedza z zakresu języka HTML (zobacz [HTML4]) oraz znajomość najważniejszych pojęć z zakresu poligrafii komputerowej.
Zaczniemy od niewielkiego dokumentu HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Strona osobista Bacha</TITLE>
</HEAD>
<BODY>
<H1>Strona osobista Bacha</H1>
<P>Johann Sebastian Bach był bardzo płodnym kompozytorem.
</BODY>
</HTML>
Do ustawienia koloru tekstu elementów H1 na czerwony, można posłużyć się poniższą regułą:
Reguła CSS składa się z dwóch zasadniczych części: selektora (‚h1′) i deklaracji (‚color: red’). W języku HTML wielkość liter w nazwach elementów nie ma znaczenia. Dzięki temu ‚h1′ niczym się nie różni od ‚H1′. Deklaracja dzieli się na dwie części: własność (‚color’) i wartość (‚red’). Mimo że powyższa reguła zmienia tylko jedną własność prezentowanego dokumentu HTML, jest samodzielnym arkuszem stylów. Reguła ta w połączeniu z innymi arkuszami stylów (jedną z podstawowych cech technologii CSS jest to, że arkusze stylów można łączyć) będzie decydować o ostatecznej prezentacji dokumentu.
W specyfikacji HTML 4 zdefiniowano następujące zasady dołączania reguł arkuszy stylów do dokumentów HTML: można je wpisywać bezpośrednio w dokumencie HTML lub dołączać zewnętrzne pliki arkuszy. Do wstawiania arkuszy stylów bezpośrednio w dokumencie HTML służy element STYLE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Strona osobista Bacha</TITLE>
<STYLE type="text/css">
h1 { color: red }
</STYLE>
</HEAD>
<BODY>
<H1>Strona osobista Bacha</H1>
<P>Johann Sebastian Bach był bardzo płodnym kompozytorem.
</BODY>
</HTML>
Jednak uzyskanie maksymalnej elastyczności możliwe jest dzięki stosowaniu zewnętrznych arkuszy stylów. Można je modyfikować nie ruszając dokumentów HTML oraz można je dołączać do wielu dokumentów HTML na raz. Do dołączania zewnętrznych arkuszy stylów służy element LINK:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Strona osobista Bacha</TITLE>
<LINK rel="stylesheet" href="bach.css" type="text/css">
</HEAD>
<BODY>
<H1>Strona osobista Bacha</H1>
<P>Johann Sebastian Bach był bardzo płodnym kompozytorem.
</BODY>
</HTML>
Element LINK dostarcza następujących informacji:
- typ łącza: do "arkusza stylów".
- miejsce przechowywania arkusza stylów określone za pomocą atrybutu "href".
- typ dołączanego arkusza stylów: "text/css".
Aby ukazać bliski związek arkuszy stylów ze strukturalnym kodem znakującym, w dalszej części tego kursu będziemy używać elementu STYLE. Zdefiniujemy więcej kolorów:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Strona osobista Bacha</TITLE>
<STYLE type="text/css">
body { color: black; background: white }
h1 { color: red; background: white }
</STYLE>
</HEAD>
<BODY>
<H1>Strona osobista Bacha</H1>
<P>Johann Sebastian Bach był bardzo płodnym kompozytorem.
</BODY>
</HTML>
Ten arkusz stylów zawiera cztery reguły: pierwsze dwie ustawiają kolor pierwszego planu i tła elementu BODY (dobrze jest ustawiać kolor tła i pierwszego planu razem), natomiast pozostałe dwie ustawiają kolor pierwszego planu i tła elementu H1. Ponieważ dla elementu P nie został zdefiniowany żaden kolor, oddziedziczy on kolor po elemencie nadrzędnym BODY. Element H1 również jest potomkiem elementu BODY, ale w tym przypadku wartość oddziedziczona zostanie przesłonięta przez drugą regułę CSS. W CSS tego typu konflikty wartości zdarzają się często. W specyfikacji tej opisano sposób ich rozwiązywania.
W CSS 2.1 jest ponad 90 własności, do których należy także ‚color’. Zobaczmy jakie inne własności są dostępne:
Przede wszystkim należy zwrócić uwagę na zgrupowanie kilku deklaracji w bloku zamkniętym w nawiasach klamrowych ({…}). Poszczególne deklaracje są od siebie oddzielone średnikiem. Za ostatnią deklaracją również może znajdować się średnik.
Pierwsza deklaracja dla elementu BODY ustawia rodzinę fontów na "Gill Sans". Jeśli ten font będzie niedostępny, aplikacja kliencka (często nazywana "przeglądarką") użyje rodziny ‚sans-serif’, która należy do grupy pięciu rodzin znanych wszystkim aplikacjom klienckim. Elementy potomne elementu BODY oddziedziczą tę wartość własności ‚font-family’.
Druga deklaracja ustawia rozmiar pisma elementu BODY na 12 punktów. Jednostka "punkt" jest powszechnie stosowana w poligrafii do określania rozmiarów pisma i innych długości. Jest to jednostka bezwzględna, a więc nie zmieniająca rozmiaru w zależności od otoczenia.
W trzeciej deklaracji użyto jednostki względnej, która zmienia się zależnie od kontekstu. Wartość jednostki "em" jest wyznaczana na podstawie rozmiaru pisma elementu. W tym przypadku marginesy wokół elementu BODY będą trzykrotnie szersze niż wynosi rozmiar pisma.
2.2 Krótki kurs zastosowania CSS 2.1 w XML
Ten podrozdział nie jest normatywny.
Technologia CSS nadaje się do zastosowania z każdym strukturalnym formatem dokumentu, np. także z aplikacjami rozszerzalnego języka znaczników (eXtensible Markup Language — XML) [XML10]. W rzeczywistości język XML jest bardziej zależny od CSS niż HTML, ponieważ w XML istnieje możliwość tworzenia niestandardowych elementów, których aplikacje klienckie nie wiedzą jak wyświetlać.
Poniżej znajduje się prosty fragment kodu XML:
<ARTICLE>
<HEADLINE>Fryderyk Wielki spotyka się z Bachem</HEADLINE>
<AUTHOR>Johann Nikolaus Forkel</AUTHOR>
<PARA>
Pewnego wieczoru, gdy właśnie przygotowywał swój
<INSTRUMENT>flet</INSTRUMENT> a muzycy
już się zebrali, pewien oficer przyniósł mu listę
obcych, którzy przybyli.
</PARA>
</ARTICLE>
W celu wyświetlenia tego fragmentu jako dokumentu, należy najpierw zadeklarować które elementy są śródliniowe (tzn. nie powodują przejścia do nowego wiersza), a które są blokowe (tzn. powodują złamanie wiersza).
Pierwsza reguła deklaruje element INSTRUMENT jako śródliniowy. Natomiast druga, zawierająca listę selektorów oddzielonych przecinkami, deklaruje wszystkie pozostałe elementy jako blokowe. W języku XML wielkość znaków w nazwach elementów ma znaczenie, a więc selektor napisany małymi literami (np. ‚instrument’) jest czym innym niż selektor napisany wielkimi literami (np. ‚INSTRUMENT’).
Jednym ze sposobów dołączania arkuszy stylów do dokumentów XML jest użycie instrukcji przetwarzania:
<?xml-stylesheet type="text/css" href="bach.css"?>
<ARTICLE>
<HEADLINE>Fryderyk Wielki spotyka się z Bachem</HEADLINE>
<AUTHOR>Johann Nikolaus Forkel</AUTHOR>
<PARA>
Pewnego wieczoru, gdy właśnie przygotowywał swój
<INSTRUMENT>flet</INSTRUMENT> a muzycy
już się zebrali, pewien oficer przyniósł mu listę
obcych, którzy przybyli.
</PARA>
</ARTICLE>
Wizualna aplikacja kliencka mogłaby sformatować powyższy przykład następująco:
Należy zauważyć, że słowo "flet" pozostało wewnątrz akapitu, ponieważ stanowi ono treść elementu śródliniowego INSTRUMENT.
Formatowanie tekstu nadal jednak nie jest takie, jak należy oczekiwać. Na przykład rozmiar tekstu nagłówka powinien być większy niż reszty tekstu, a nazwisko autora można by napisać kursywą:
Wizualna aplikacja kliencka mogłaby sformatować powyższy przykład następująco:
Dodając kolejne reguły do arkusza stylów można zdefiniować kolejne własności prezentacyjne dokumentu.
2.3 Model przetwarzania CSS 2.1
Część tego podrozdziału obejmująca tekst do pierwszego pod-podrozdziału jest nienormatywna.
W podrozdziale tym przedstawiono jeden możliwy model działania aplikacji klienckich obsługujących CSS. Jest to tylko model poglądowy. Rzeczywiste implementacje mogą się od niego różnić.
W modelu tym aplikacja kliencka przetwarza źródło w następujących krokach:
- Analiza składniowa dokumentu źródłowego i utworzenie drzewa dokumentu.
- Identyfikacja docelowego typu mediów.
- Odszukanie wszystkich arkuszy stylów związanych z dokumentem i przeznaczonych dla określonego typu mediów.
- Oznaczenie każdego elementu w drzewie dokumentu poprzez przypisanie pojedynczej wartości każdej własności dotyczącej docelowego typu mediów. Wartości są własnościom przypisywane według zasad opisanych w podrozdziale o kaskadzie i dziedziczeniu.
Sposób obliczania wartości częściowo zależy od algorytmu formatowania właściwego docelowemu typowi mediów. Jeśli na przykład medium docelowym jest ekran, aplikacje klienckie stosują wizualny model formatowania.
- Wygenerowanie z oznaczonego drzewa dokumentu struktury formatującej. Struktura formatująca często przypomina drzewo dokumentu, ale może się też od niego znacznie różnić, gdy autor dokumentu użyje pseudoelementów i treści generowanej. Po pierwsze struktura formatująca nie musi mieć "kształtu drzewa" — wszystko zależy od implementacji. Po drugie struktura formatująca może zawierać mniej lub więcej informacji niż drzewo dokumentu. Jeśli na przykład własność ‚display’ elementu w drzewie dokumentu ma wartość ‚none’, w strukturze formatującej element ten nic nie wygeneruje. Natomiast element listy może w strukturze formatującej wygenerować więcej informacji: treść elementu listy i informacje o stylu tego elementu (np. obraz punktora).
Należy zauważyć, że w tej fazie aplikacja kliencka CSS nie zmienia drzewa dokumentu. W szczególności treść generowana przez arkusze stylów nie jest zwracana do procesora języka dokumentu (np. w celu przeprowadzenia ponownej analizy składniowej).
- Wysłanie struktury formatującej do medium docelowego (np. wydruk wyników, wyświetlenie ich na ekranie, przetworzenie na tekst mówiony itd.).
2.3.1 Kanwa
We wszystkich typach mediów terminem kanwa określa się "obszar, w którym prezentowana jest struktura formatująca". Kanwa jest nieskończona w każdym wymiarze tego obszaru, ale prezentacja zwykle odbywa się na ograniczonym obszarze kanwy wyznaczonym przez aplikację kliencką w zgodzie z medium docelowym. Na przykład aplikacje klienckie prezentujące dokument na ekranie zwykle narzucają minimalną szerokość i określają szerokość początkową na podstawie wymiarów obszaru widoku. Aplikacje klienckie prezentujące dokument na stronach zwykle narzucają ograniczenia szerokości i wysokości. Aplikacje słuchowe mogą narzucać ograniczenia w przestrzeni audio, ale nie w czasie.
2.3.2 Model adresowania CSS 2.1
Selektory i własności CSS 2.1 umożliwiają odwoływanie się do następujących części dokumentu lub aplikacji klienckiej z poziomu arkuszy stylów:
- Elementy w drzewie dokumentu i określone zależności między nimi (zobacz podrozdział o selektorach).
- Atrybuty elementów w drzewie dokumentu i wartości tych atrybutów (zobacz podrozdział o selektorach atrybutów).
- Niektóre części treści elementów (zobacz pseudoelementy :first-line i :first-letter).
- Elementy drzewa dokumentu znajdujące się w określonym stanie (zobacz pseudoklasy).
- Niektóre aspekty kanwy, w miejscu prezentowania dokumentu.
- Niektóre informacje systemowe (zobacz podrozdział o interfejsie użytkownika).
2.4 Zasady projektowe CSS
Ten podrozdział nie jest normatywny.
CSS 2.1, podobnie jak CSS 2 i CSS 1, są oparte na zestawie zasad projektowych:
-
Zgodność w przyszłości i wsteczna Aplikacje klienckie CSS 2.1 będą w stanie przetwarzać arkusze stylów CSS 1. Aplikacje klienckie CSS 1 będą w stanie przetwarzać arkusze CSS 2.1 ignorując fragmenty, których nie rozpoznają. Także aplikacje nie obsługujące CSS będą w stanie wyświetlać dokumenty wzbogacone stylami. Oczywiście dodatki stylistyczne wykonane za pomocą CSS nie będą prezentowane, ale treść zostanie przedstawiona.
-
Uzupełnienie dla dokumentów strukturalnych Arkusze stylów stanowią uzupełnienie dokumentów strukturalnych (np. HTML i aplikacji XML) poprzez dostarczanie informacji stylistycznych dla oznakowanego tekstu. Modyfikacja arkusza stylów powinna być łatwa i nie powinna wymagać zmian w kodzie HTML lub wymagać tylko niewielkich zmian.
-
Niezależność od producentów, platform i urządzeń Arkusze stylów pozwalają na uniezależnienie dokumentów od producentów, platform i urządzeń. Same arkusze stylów również są niezależne od producentów i platform, ale specyfikacja CSS 2.1 umożliwia tworzenie arkuszy stylów przeznaczonych dla określonych grup urządzeń (np. drukarek).
-
Łatwość zarządzania Dołączanie arkuszy stylów do dokumentów pozwala webmasterom uprościć proces zarządzania witryną internetową i zachować jednolity styl na wszystkich stronach. Aby na przykład zmienić kolor tła organizacji, wystarczy nanieść poprawkę w tylko jednym pliku.
-
Prostota CSS to prosty język stylistyczny nadający się do czytania i zapisywania przez ludzi. Własności CSS są od siebie niezależne w takim stopniu, jak to możliwe i zwykle istnieje tylko jeden sposób na uzyskanie określonego efektu.
-
Oszczędność transferu sieciowego CSS umożliwia zwięzłe kodowanie reguł prezentacji treści. W porównaniu z obrazami i plikami audio, które są często wykorzystywane do uzyskania pewnych efektów, arkusze najczęściej pozwalają zredukować rozmiar treści. Ponadto wymagane jest otwarcie mniejszej liczby połączeń sieciowych, co dodatkowo korzystnie wpływa na zmniejszenie ruchu sieciowego.
-
Elastyczność Arkusze CSS można zastosować do treści na kilka sposobów. Kluczowe znaczenie ma możliwość kaskadowego dołączania informacji stylistycznych zdefiniowanych w domyślnym (aplikacji klienckiej) arkuszu stylów, arkuszach stylów użytkownika, zewnętrznych arkuszach stylów, arkuszach stylów zapisanych w nagłówku dokumentu oraz arkuszach zdefiniowanych w atrybutach elementów znajdujących się w dokumencie.
-
Bogactwo Dzięki udostępnieniu bogatego zestawu efektów stylistycznych, arkusze stylów wzbogacają Sieć jako medium. Projektanci od dawna oczekują na zestaw funkcji, które można znaleźć w aplikacjach poligrafii komputerowej i do tworzenia pokazów slajdów. Niektóre z tych wymagań wykluczają niezależność od urządzeń, ale CSS 2.1 to duży krok w kierunku spełnienia oczekiwań projektantów.
-
Powiązania z alternatywnymi językami Zestaw własności CSS opisanych w tej specyfikacji stanowi spójny model formatowania dla prezentacji wizualnych i słuchowych. Dostęp do tego modelu można uzyskać za pomocą języka CSS, chociaż możliwe są też powiązania z innymi językami. Na przykład program w języku JavaScript może dynamicznie zmieniać wartość własności ‚color’ określonych elementów.
-
Dostępność Istnieje grupa funkcji CSS, które ułatwią dostęp do zasobów Sieci osobom niepełnosprawnym:
- Własności kontrolujące wygląd tekstu pozwalają autorom wykluczyć z użytku niedostępne obrazy bitmapowe.
- Własności pozycjonujące pozwalają pozbyć się sztuczek (np. stosowania niewidocznych obrazów) umożliwiających wymuszenie odpowiedniego układu elementów.
- Semantyka reguł !important umożliwia osobom mającym określone wymagania dotyczące prezentacji przesłonić arkusze stylów autora.
- Wartość ‚inherit’ dla wszystkich własności podnosi ogólność kaskady i umożliwia łatwiejsze i bardziej spójne dostosowywanie stylu.
- Poprawiona obsługa mediów, wliczając grupy mediów, urządzenia używające pisma Braille’a, drukarki Braille’a i urządzenia typu dalekopis (‚tty’), umożliwi użytkownikom i autorom dostosowanie stron dla tych urządzeń.
Uwaga: Aby uzyskać więcej informacji na temat projektowania dostępnych dokumentów przy użyciu CSS i HTML, zobacz [WAI-PAGEAUTH].
Dodaj komentarz