Budowa arkusza stylów cz. 4. Wartości

Kończę omówienie budowy arkusza stylów. Wiemy, już jak działają selektory, jakie są ich rodzaje i jak je zapisywać, omówiłem też zagadnienie własności, w jakie można wyposażyć dokument HTML. Teraz czas na przedstawienie problematyki wartości przyjmowanych przez własności stylowe.

Banalne i jałowe jest rozpisywanie się o jednostkach i wartościach, których można użyć w definicjach stylów. Specyfikacja CSS dostarcza w tym względzie wystarczających wyjaśnień. Ale dla minimalnej jasności wypada cokolwiek na ten temat wspomnieć.

Jakie wartości i jakie jednostki są używane do opisywania własności elementów? Z przedstawionych wcześniej wielu przykładów wynika po pierwsze, że do pewnych własności stosuje się tylko określone wartości i jednostki. Nie byłoby sensu do własności font-size przypisywać wartość Verdana. Bardziej szczegółowo wartości i jednostki je wyrażające opisujemy przy każdej nadarzącej się okazji w artykułach publikowanych w „HTML-Zonie”, ale teraz krótko wspomnę, że arkusze stylów posługują się najczęściej takimi oto jednostkami:

pt = punkty typograficzne (1/72 cala)
pc = pica (1 pica = 12 punktów)
in = cale (1 cal = 2,54 cm)
cm = centymetry
mm = milimetry
px = piksele (rozmiar piksela zależny jest od urządzenia wyświetlającego)
% = procenty
em = wielkość względna w odniesieniu do elementu nadrzędnego

Niektóre wartości mogą być wyrażane liczbą całkowitą (np. 12px) lub rzeczywistą (np. 1.2em). Bywa, że używamy wartości ujemnych (np. -0.5cm).

Wartości czcionek wyrażamy poprzez ich nazwy, co pokazano już wcześniej. Kolory można oznaczać za pomocą słów kluczowych: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. W takim wypadku nie używa się cudzysłowów! Dowolny kolor z 24-bitowej palety RGB można oznaczyć za pomocą liczb szesnastkowych, np. czarny to #000000, czerwony – #FF0000 itd. Kolory „tworzymy” następująco:

#0000FF daje kolor niebieski. Tak opisany kolor trzeba poprzedzić znakiem '#’.

Qualis pater, talis filius

Dużo ciekawszym zagadnieniem, które warto omówić przy okazji stosowanych w arkuszach wartości, jest problematyka kaskadowości i dziedziczenia własności stylowych.

Jest uproszczeniem mówienie, że dopiero autor strony przypisuje dokumentowi jakieś własności stylowe. W rzeczywistości arkusz stylów obsługujący wyświetlanie dokumentów może pochodzić z trzech źródeł:

• od przeglądarki,
• od użytkownika,
• od autora strony.

Każda przeglądarka wyposażona jest w domyślny arkusz stylów. Np. prosty akapit zostanie wyświetlony w domyślnie skonfigurowanej przeglądarce tak:

Co tu widzimy? Strona posiada białe tło, tekst jest odsunięty od krawędzi lewej i górnej, zatem strona ma jakiś margines, tekst wyrównany jest do lewej, a użyty font to czcionka szeryfowa w kolorze czarnym w określonej wielkości. Załóżmy więc, że stylowo mogłoby się to przedstawiać następująco (proszę to traktować jako uproszczenie i pewną spekulację):

BODY {
  background-color : #FFFFFF;
  margin: 10px;
  color : #000000;
  font-size : 12pt;
  font-family : serif;
  text-align : left;
 }

Ustawienia przeglądarki można modyfikować, zatem poprzez zmianę opcji użytkownik wpływa na domyślny „arkusz stylów”. Nowsze wersje przeglądarek umożliwiają jeszcze więcej: można dołączyć jako domyślny własny plik CSS, który obsłuży każdą wyświetlaną w przeglądarce stronę WWW.

Trzecim źródłem szablonu stylów jest projekt autora strony. Gdy oglądamy stronę WWW, łatwo dojść do wniosku, że ustawienia zapisane w arkuszu autora mają pierwszeństwo przed ustawieniami użytkownika, a te z kolei „pokrywają” ustawienia domyślne przeglądarki. Ten porządek rzeczy można modyfikować: jeśli użytkownik w swoim arkuszu stylu przy określonej definicji użyje deklaracji !important, np.:

P {
 font-size : 11pt;
 font-family : sans-serif !important
}

to jego definicja będzie miała pierwszeństwo przed definicją autora strony. Jeśli w obu arkuszach znajdą się deklaracje !important, wówczas definicja użytkownika będzie ważniejsza.

Źródła autorskiego arkusza stylów

Arkusz stylów może być łączony z dokumentem HTML w trojaki sposób:

• Arkusz dołączony wstawiany jest do strony WWW poleceniem w nagłówku strony:

<LINK REL=STYLESHEET HREF="style.css" TYPE="text/css">

– gdzie plik „style.css” jest prostym zewnętrznym plikiem tekstowym zawierającym definicje stylów.

• Arkusz osadzony wstawiany jest do strony WWW poleceniem w nagłówku strony:

<STYLE type="text/css">
<!--
BODY {background-color: #FFFFFF;}
/* itd. */
-->
</STYLE>

– gdzie pomiędzy znacznikami <STYLE>...</STYLE> umieszczane są kolejne definicje, a komentarz <!--  --> „chroni” je przed niepotrzebnym wyświetleniem w przeglądarkach, które nie potrafią interpretować arkuszy stylów. Dzisiaj bardzo rzadkie zjawisko, ale ostrożności nigdy za wiele.

• Arkusz in-line wstawiany jest do strony WWW przez zastosowanie dla wybranego znacznika atrybutu STYLE=, np:

<P STYLE="color: red; font-weight: bold;">Tekst czerwony,
pogrubiony</P>

Jaka wartość?

Przeglądarka obsługująca CSS, zanim wyświetli stronę, musi ustalonym własnościom elementów przypisać wartość – jaką – o tym decydują ściśle określone reguły.

• Wartości są wymienianew arkuszu stylów.
  1. Który arkusz ostatecznie jest najważniejszy – pisałem wyżej.
  2. Jeśli arkusz nie zawiera wyspecyfikowanej wartości, wówczas przeglądarka dobiera ją na podstawie dziedziczenia własności po elemencie – rodzicu.
  3. Jeśli wyliczenie wartości w powyższy sposób jest niemożliwe, przeglądarka przypisuje własności wartość wstępną, predefiniowaną zgodnie ze specyfikacją CSS.
• Wartości są obliczane.
  • Wartości mogą być absolutne, np. 2cm lub green, albo względne (w stosunku do innej wartości), np. 15%. Jeśli są względne, muszą być obliczone do stosownej wielkości, np. procentowo określona szerokość marginesu musi być każdorazowo przeliczana z uwzględnieniem rozdzielczości monitora i wielkości okna przeglądarki.
• Wartości muszą być aktualizowane (urealnione) stosownie do warunków środowiska.
  • Jest dopuszczalne wskazanie szerokości np. krawędzi ramki w wielkości 0.1em. W pewnych warunkach realna, obliczona wartość może wynieść jakiś ułamek piksela, ale żadna graficzna przeglądarka nie jest w stanie takiej krawędzi wyświetlić, więc jej aktualna, przybliżona wartość jest obliczana z uwzględnieniem fizycznych możliwości urządzenia (monitora).

Kaskadowe przypisywanie wartości

Poniższy przykład pozwoli wyjaśnić mechanizm kaskadowego przypisywania własnościom wartości oraz ich dziedziczenia. Załóżmy, że poddamy modyfikacji domyślny arkusz stylów i wykorzystamy wcześniejszy przykład. Załóżmy, że powyższy arkusz został osadzony w dokumencie HTML).

<html>
 <head>
 <title>Kaskadowość i dziedziczenie</title>
 <style type="text/css">
  BODY {
   background-color : #CCCC99;
  }
  P {
   margin-left : 100px;
  }
  .par {
   font-family : Georgia;
   font-size : 10pt;
   color : #660000;
  }
  #par1 {
   font-weight : bold;
   background-color : #CCFFCC;
  }
  </style>
 </head>
 <body>
  <p>Lorem ipsum ea commodo consequat.
  Duis autem vel eum iriure dolor in hendrerit
  in vulputate velit esse molestie consequat.</p>
  <p class="par">Lorem ipsum ea commodo consequat.
  Duis autem vel eum iriure <em id="par1">dolor
  in hendrerit</em> in vulputate
  velit esse molestie consequat.</p>
 </body>
</html>

A oto rezultat w przeglądarce:

1. Pierwszy selektor wskazuje na element <BODY> i modyfikuje domyślny kolor tła strony.
2. Selektor rodzajowy P modyfikuje standardowe własności znacznika <P> przez ustawienie lewego marginesu.
3. Pierwszy akapit na stronie dziedziczy po domyślnym arkuszu stylów wszystkie atrybuty czcionki.
4. W drugim akapicie jednak dodano nowe własności, które „pokryły” ustawienia standardowe: nowy krój, wielkość i kolor.
5. Natomiast <EM>, który jest dzieckiem drugiego <P>, dodaje nowe własności: pogrubienie oraz inny kolor tła, jednak dziedziczy po rodzicu pozostałe własności, wcześniej zdefinowane; po domyślnym arkuszu stylów <EM> dziedziczy pochylenie czcionki.
6. Przy okazji warto zaznaczyć, że tło akapitów nie jest dziedziczone po <BODY>, ale jest przezroczyste, stąd wrażenie, że tło dla <P> jest takie samo jak dla <BODY>. Przezroczystość jest domyślną wartością dla background-color.

Jeśli na stronie użyjemy takiej konstrukcji:

<P style="color: red" id="par1">
 Lorem ipsum ea commodo consequat.
</P>

to pierwszeństwo w określaniu, jak ma być sformatowany akapit, jest następujące:

1. Jeśli element zawiera stylową definicję in-line (z wykorzystaniem atrybutu style), to ten styl ma pierwszeństwo przed innymi. Rezultat: w naszym przykładzie dojdzie do konfliktu kolorów czcionki, ale zwycięży styl in-line i akapit zostanie wyświetlony na czerwono.
2. Jeśli element zawiera atrybut ID i jednocześnie CLASS i dojdzie do konfliktu wartości, to identyfikator ma pierwszeństwo przed klasyfikatorem.
3. W następnej kolejności brany jest pod uwagę selektor rodzajowy w arkuszu osadzonym w dokumencie.

Podsumowanie

1. Arkusz in-line ma pierwszeństwo przed arkuszem osadzonym i dołączonym.
2. Arkusz osadzony w dokumencie ma pierwszeństwo przed dołączonym do dokumentu HTML.
3. Arkusz stylów stworzony przez autora strony ma pierwszeństwo przed arkuszem użytkownika (z wyjątkiem sytuacji użycia deklaracji !important).
4. Arkusze definiowane mają pierwszeństwo przed domyślnym arkuszem stylów przeglądarki.

Na koniec można powiedzieć, że kaskadowość stylów polega m.in. na dziedziczeniu własności. Jeśli danym elementom zostaną przypisane określone własności, to każda strona, która zawiera odwołanie do tego samego arkusza stylów, przejmie te cechy. Lokalnie (na stronie) można niektóre z nich zmienić. Zasłonią one wtedy własności zapisane w arkuszu, pozostawiając bez zmian resztę domyślnie określonych cech. A więc „kaskada stylów spływa z góry na dół”. Prawda, jakie to oczywiste, bo czyż może być inaczej?