BeautifulCode

Promocje Heliona

Bestsellery Heliona

wstecz   dalej   Spis treści   własności   indeks  

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łą:

  h1 { color: red }

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:

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: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
  <TITLE>Strona osobista Bacha</TITLE>
  <STYLE type="text/css">
    body { 
      font-family: "Gill Sans", sans-serif;
      font-size: 12pt;
      margin: 3em; 
    }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Strona osobista Bacha</H1>
    <P>Johann Sebastian Bach był bardzo płodnym kompozytorem.
  </BODY>
</HTML>

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). 

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

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:

Przykład formatowania   [O]

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ą:

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
HEADLINE { font-size: 1.3em }
AUTHOR { font-style: italic }
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }

Wizualna aplikacja kliencka mogłaby sformatować powyższy przykład następująco:

Przykład formatowania   [O]

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:

  1. Analiza składniowa dokumentu źródłowego i utworzenie drzewa dokumentu.
  2. Identyfikacja docelowego typu mediów.
  3. Odszukanie wszystkich arkuszy stylów związanych z dokumentem i przeznaczonych dla określonego typu mediów.
  4. 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.

  5. 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).

  6. 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:

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:

wstecz   dalej   Spis treści   własności   indeks