Czy zdarzyło Ci się już słyszeć terminy takie jak arkusz stylów, CSS, warstwy i inne, lecz nie wiesz co one znaczą? Wszystkie te nazwy odnoszą się do kaskadowych arkuszy stylów (CSS), rozwijającego się standardu wprowadzonego przez Konsorcjum W3C (World Wide Web Consortium; www.w3c.org) będącego de facto organizacją zajmującą się standardami internetowymi.
Tam, gdzie kończy się HTML, tam zaczyna się CSS – a przynajmniej w aspekcie układu i stylu dokumentu internetowego. Wraz z rozwojem przeglądarek i śmiałości twórców stron WWW, termin kaskadowe arkusze stylów przejdzie do codzienności, a same arkusze CSS będą stosowane na niemal wszystkich stronach WWW. Ponieważ to wiemy, nie możemy nie sięgnąć po tę technologię. Zacznijmy od zastanowienia się nad tym, czym w rzeczywistości są arkusze CSS. Oto lista najważniejszych tematów, które tu poruszymy:
q Kaskadowa natura arkuszy stylów
q Jak korzystać z jednego arkusza stylów w całej witrynie
q Różnica między stylami HTML a CSS
q Jak działają style konfigurowane w programie Dreamweaver poprzez interfejs GUI
O impresji dzieła multimedialnego lub wizualnego wywieranej na publiczność decydują dwa czynniki: treść i styl. Tak jest zawsze, niezależnie od tego, czy dzieło ma postać wirtualną, jak strona WWW, czy też materialną. W odniesieniu do publikacji sieciowych termin treść oznacza zawartość strony WWW. To przede wszystkim zawartość przyciąga czytelników. Z drugiej strony styl to finezja, dekoracja i ostatnie muśnięcie, dzięki którym danie staje się bardziej smakowite.
Tradycyjny HTML usiłuje wspomóc projektanta w stylizacji stron, ale bieżąca implementacja języka jest mało precyzyjna i ma ograniczone możliwości. I tu właśnie pojawiają się kaskadowe arkusze stylów, propozycja autorstwa W3C standaryzacji zaawansowanych atrybutów stylu do zastosowań na stronach WWW. Dzięki arkuszom stylów nie ma już potrzeby stosowania stylu do każdego elementu, czy nawet każdej strony. Jeden styl może być wykorzystywany w całej witrynie, a jego aktualizacja wymaga jedynie zmian w jednym pliku. Co więcej, wszelkie zmiany wprowadzone w procesie aktualizacji są natychmiast uwzględniane na wszystkich stronach, do których styl został zastosowany. Arkusze stylów wykazują dwojakiego rodzaju przewagę nad tradycyjnym formatowaniem HTML:
q W kwestii stylu umożliwiają uzyskanie efektów, które są praktycznie nie do realizacji za pomocą języka HTML. Dotyczy to wykorzystania warstw i innych efektów dynamicznych.
q W kwestii ekonomiki pracy zdecydowanie przyspieszają i ułatwiają aktualizację stylów stron WWW.
Podobnie jak w przypadku potraw, styl i stopień perfekcji jego definicji zależą od dwóch spraw. Pierwsza to czas i pieniądze. Budżet i ograniczenia czasowe określające termin przygotowania witryny wymuszają włączenie bądź wyłączenie pewnych rozwiązań (podobnie jak w przypadku wyboru między barem szybkiej obsługi a restauracją z prawdziwego zdarzenia). Drugim czynnikiem są Twoi czytelnicy. Typowy kierowca ciężarówki zamówi z dużym prawdopodobieństwem solidny stek, a typowa nastolatka dbająca o linię będzie preferowała sałatkę szefa. Zawsze więc staraj się przeanalizować Twoją potencjalną publiczność pod kątem preferencji i w oparciu o taką analizę równoważ zawartość i styl każdej aplikacji.
Arkusze stylów budowane są z reguł, które rezydują w dokumencie lub osobnym pliku połączonym z dokumentem. Reguła zawiera dwa elementy: selektor i deklarację. Deklarację tworzy z kolei para: właściwość i wartość. Oto przykład reguły CSS:
h3 {text-decoration: underline }
W tym przykładzie h3 to selektor. To on właśnie wiąże arkusz stylów z dokumentem. W tym przypadku definiowany jest styl elementu HTML jakim jest nagłówek Heading 3. Wyrażenie text-decoration: underline to deklaracja – definicja sposobu, w jaki chcesz wpłynąć na znacznik <H3>. W naszym przykładzie text-decoration to właściwość, a underline wartość. Tak więc reguła spowoduje zastosowanie podkreślenia do tekstu zawartego między znacznikami <H3></H3>. Jak zauważysz, inne atrybuty znacznika <H3> nie zostaną usunięte – innymi słowy formatowanie poprzez arkusze CSS nie usuwa formatowania domyślnego, a jedynie go rozszerza. Nie oznacza to jednak, że nie masz możliwości całkowitej zmiany definicji stylu H3. Jest taka możliwość, a w dalszej części rozdziału dowiesz się jak z niej korzystać.
Jak widzisz, zmiana właściwości znacznika jest bardzo prosta. Co więcej, jak już wspominałem, można zmienić także całą definicję znacznika. Jak to zrobić? Tutaj dochodzimy do innej cechy kaskadowych arkuszy stylów. Reguła arkusza CSS może zawierać wiele deklaracji. Rozbudowując poprzedni przykład możesz dodać deklaracje koloru i rozmiaru, podobne to przedstawionych poniżej:
h3 { text-decoration: underline; color: blue; font-size: 14pt }
Nie tylko deklaracje można grupować, lecz także selektory. O ile deklaracje oddziela się średnikami, to grupowane selektory przecinkami. Oto przykład arkusza CSS, w którym definiowane są identyczne style dla tekstu nagłówka H3 i tekstu pogrubionego:
h3, b { text-decoration: underline; color: blue; font-size: 14pt }
Inną charakterystyczną cechą arkuszy CSS jest możliwość ich zastosowania do wielu znaczników poprzez dziedziczenie. Elementy zawarte w selektorze CSS będą dziedziczyć deklarację stylu tego selektora. Na przykład jeżeli w obszarze elementu H3 znajdują się inne znaczniki, odziedziczą one deklaracje stylu określone dla H3. Oto przykład tego, o czy tu mówiliśmy:
<h3>Witam na mojej <em>NOWEJ</em> stronie WWW</h3>
W tym przykładzie tekst NOWEJ odziedziczyłby właściwości takie jak podkreślenie, niebieski kolor tekstu i rozmiar czcionki 14 punktów, o ile oczywiście zastosowana zostałaby deklaracja stylu H3 taka, jak w poprzednim przykładzie. Znacznik <em> również wpłynąłby na styl tekstu, powodując dodanie emfazy (kursywa).
Dziedziczenie funkcjonuje także w relacji element nadrzędny-element podrzędny. Dzięki tej zależności istnieje możliwość określenia atrybutów stylu stosowanych na całej stronie za pomocą jednego stylu. Można to uzyskać definiując selektor body, tak jak w tym oto przykładzie:
body { font-family: Arial, Helvetica, sans-serif; font-size: 12pt }
W ten sposób wszystkie elementy dokumentu HTML domyślnie dziedziczą zdefiniowane w deklaracji właściwości (oczywiście o ile mogą mieć takie właściwości). Nie jest to żelazna reguła, od której nie ma odstępstwa. Odstępstwa są możliwe, a wprowadza się je bezpośrednio dla danego przypadku. Mówi o tym następny punkt.
Mówiąc o cechach kaskadowych arkuszy stylów CSS ograniczaliśmy się na razie do dwóch członów ich nazwy. Poruszaliśmy kwestię stylu i arkusza. Trzeci aspekt, także znajdujący odzwierciedlenie w nazwie, jest niewątpliwie decydujący i chyba równie ważny co pozostałe. To oczywiście termin kaskadowy. Termin ten opisuje zasadę przejmowania pierwszeństwa przez style lokalne nad stylami zdefiniowanymi na poziomie strony, które z kolei dominują nad stylami globalnymi.
Wyobraź sobie, że korzystasz z zewnętrznego arkusza stylów, który definiuje styl całego tekstu przypisując mu krój czcionki Arial, rozmiar 12 pt i kolor czarny (można by to osiągnąć poprzez zmianę definicji znacznika <body>). Taka definicja miałaby wpływ na wszystkie elementy dokumentu HTML, dla których dopuszczalne jest stosowanie którejkolwiek z tych trzech właściwości. Jest to dobra metoda ustanawiania i stosowania ogólnego układu i stylu strony WWW. Jeśli na przykład zdecydowałbyś się na dodanie do fotografii podpisów pisanych kursywą o rozmiarze 8 punktów drukarskich i na dodatek chciałbyś zastosować do tego celu styl nagłówka H1, aby wyróżnić znacząco podpisy, należałoby utworzyć nowy styl, stanowiący redefinicję stylu H1. Wówczas w arkuszu stylów styl lokalny zdominuje styl wyższego poziomu. Umożliwi to zastosowanie stylu podpisu do podpisów i zapewni im żądany wygląd nawet w warunkach zasad stylu globalnego.
Zanim nauczysz się stosować style CSS z poziomu programu Dreamweaver, musisz poznać trzy metody stosowania stylów w dokumencie HTML. Omówimy je w kolejności malejącej kontroli (co oznacza, że definicje stylów są dominowane przez definicje definiowane na niższym poziomie).
W metodzie najniższego poziomu wykorzystuje się atrybuty stylu, które umieszczane są w znaczniku HTML, do którego styl ma być zastosowany. Ustawienia stylu wprowadzone w ten sposób dominują nad wszelkimi innymi definicjami stylu (tego typu zastosowanie stylu nosi nazwę stylu wpisanego – przypis tłum.). Oto przykład typowego zastosowania atrybutów stylu:
<div id=”Layer1” style=”position:absolute; width:358px; height:378px; z-index:1; left: 160px; top: 225px”></div>
Jest to kod definiujący element DHTML zwany warstwą. Rozdział 10., „Korzystanie z warstw”, omawia szczegółowo zastosowania i możliwości warstw. Jak możesz zobaczyć, położenie warstwy na stronie WWW określone jest w arkuszu CSS. Ponieważ warstwy zazwyczaj miewają różne pozycje, reguły CSS są definiowane w obrębie każdego znacznika warstwy osobno.
W metodzie pośredniego poziomu styl stosowany jest w obrębie strony, lecz nie w poszczególnych znacznikach. Takie podejście pozwala zdefiniować styl strony bez potrzeby przygotowywania odrębnego pliku. Jedną z największych zalet takiego rozwiązania jest szybka aktualizacja stylu – mówiliśmy o tym wcześniej. Chociaż regułę stylu można wpisać w dowolnym miejscu dokumentu, standardowo przyjmuje się, że miejscem osadzonego stylu CSS jest sekcja HEAD dokumentu. Oto typowa definicja stylu osadzonego:
<head>
<meta blah blah...>
<style type=”text/css”>
<!--
.background { background-color: #0066FF; background-image: url(bg.gif); background-repeat: no-repeat }
p { font-family: Arial, Helvetica, sans-serif; font-size: 12 pt }
-->
</style>
</head>
Analizując ten kod źródłowy zauważysz w pierwszej kolejności, że osadzony arkusz stylów jest zawarty w elemencie STYLE, którego wartością atrybutu type jest text/css. Zauważysz także prawdopodobnie, choć być może nie będziesz wiedział na razie co to oznacza, że rzeczywista definicja stylu umieszczona jest w znacznikach komentarza HTML.
W tych przeglądarkach, które nie potrafią obsługiwać arkuszy stylów, znaczniki komentarza obejmujące wszystkie reguły CSS spowodują potraktowanie kodu jako komentarza (i pominięcie go). Z kolei te przeglądarki, którym arkusze CSS nie są obce, wiedzą, że między znacznikami zawarte są definicje stylów.
Ostatnia z metod wykorzystuje zewnętrzne arkusze stylów. Jest to idealne rozwiązanie tam, gdzie celem jest stworzenie ogólnego stylu całej witryny (na przykład witryny firmy). Zmiana jednej reguły, wpłynie na styl wszystkich stron, na których umieszczono odwołania do zewnętrznego arkusza stylów. Jest to jeden z powodów, dla których arkusze CSS mają tak szerokie możliwości.
Zewnętrzne arkusze stylów są łączone z dokumentem za pomocą połączenia. Aby zastosować do dokumentu zewnętrzny arkusz CSS, możesz skorzystać z dwóch metod. Pierwsza metoda opiera się na imporcie. Oto jej przykład:
@import”arkusz_stylow.css”;
W metodzie alternatywnej definiowane jest połączenie do pliku zewnętrznego zawierającego arkusz CSS:
<link rel=”stylesheet” href=”arkusz_stylow.css” type="text/css">
Wyrażenie to powinno znaleźć się na zewnątrz jakichkolwiek znaczników określających styl, lecz nadal w obrębie znaczników <head></head>. Ta metoda uznana jest za standardową metodę łączenia zewnętrznych arkuszy stylów z dokumentem, jest także metodą domyślną w programie Dreamweaver. Wynika to między innymi z tego, że połączenia jako takie są obsługiwane przez większość przeglądarek. Zawartość pliku .css ma taką samą postać jak w przypadku każdego innego arkusza stylów. Oto przykładowa definicja:
Rozdział 4., „Praca z tekstem” omawiał między innymi style HTML. Jeśli można stosować zwykły HTML w taki sam sposób jak CSS, to po co w ogóle stosować CSS? Przynajmniej pięć cech odróżnia style CSS od stylów HTML. Są to zalety i wady:
Zalety:
q Większa precyzja i skalowalność.
q Globalna natura.
q Bardziej przyjazny sposób edycji.
Wady:
q Mniejsza kompatybilność.
q Wyższy stopień trudności, szczególnie dla początkujących.
Dreamweaver 4 udostępnia co najmniej 65 atrybutów pozwalających precyzyjnie definiować styl, z których można korzystać z poziomu okna dialogowego Style Definition. Rzeczywista liczba możliwych atrybutów jest ograniczana tylko kompatybilnością przeglądarki i specyfikacją CSS, która jest znacznie nowsza niż specyfikacja HTML i stawia sobie styl i projekt jako punkt centralny. Arkusze CSS mają naturę globalną. Reguły zawarte w arkuszu stylów można stosować do każdej strony witryny, a dzięki globalnemu charakterowi edycja arkusza jest wyjątkowo prosta – zmiany w jednym pliku wpływają na wiele dokumentów. Edycja stylów HTML nie jest tak wygodna. Ewentualne modyfikowanie raz zastosowanego stylu HTML wymaga żmudnej pracy nad zmianą definicji stylu w każdym znaczniku i na każdej stronie.
Wadą arkuszy CSS jest brak kompatybilności, czy też raczej częściowa kompatybilność aktualnej specyfikacji CSS z przeglądarkami sieciowymi. Wersje 3 i starsze nie obsługują ich wcale. Wersja 4 obsługuje do pewnego stopnia, a wersja 5.0 i nowsze nareszcie umożliwiają szeroką obsługę arkuszy.
Ponieważ interpretacja stylu zdefiniowanego za pomocą stylów HTML wymaga od przeglądarki tylko znajomości starych, zwykłych znaczników HTML, a nie arkuszy CSS, przeglądarki bez trudu rozumieją takie definicje. Nie ma w tym nic dziwnego, biorąc pod uwagę, że HTML to naturalny język przeglądarki, język, w którym ona powstała. Kolejna wada arkuszy CSS to inna filozofia zapisywania ich kodu. Chociaż ze swej natury proste, arkusze CSS mogą nieco zdezorientować niewprawnego programistę. Jednak efektywne opanowanie zasad ręcznego definiowania reguł arkuszy CSS zawsze owocuje. Warto więc poświęcić im parę chwil. Pamiętaj także, że kaskadowe arkusze stylów udostępniają wiele właściwości, o których w przypadku języka HTML nawet nie może być mowy.
To ćwiczenie pozwoli Ci poznać różnice między stylami HTML a CSS. Dzięki temu lepiej zrozumiesz użyteczność i potrzebę kaskadowych arkuszy stylów. Będziesz korzystał z plików, które znajdziesz w folderze Ch12 na dysku CD dołączonym do książki.
Rys. 12.1.
Jeśli styl HTML nie będzie wyświetlany w oknie palety HTML Styles, musisz utworzyć go sam
Rys. 12.2.
Jeśli poprawnie wykonałeś zadanie, zastosowanie stylu HTML da taki właśnie efekt
Rys. 12.3.
Na tej stronie zastosowano dwa style
Rys. 12.4.
Znacznik <span> umożliwia zastosowanie stylu do zaznaczonego tekstu
Mam nadzieję, że teraz wiesz na czym polega różnica między stylem HTML a stylem CSS. Myślę również, że już nie trzeba Cię przekonywać, że arkusze CSS mogą znacznie uprościć życie twórcy stron WWW.
Podstawowa wiedza na temat arkuszy CSS i zasad ich stosowania to odpowiednia baza, aby spróbować własnych sił w implementacji arkuszy CSS. Wcześniej jednak powinieneś poznać narzędzia i okna programu Dreamweaver umożliwiające efektywne wykorzystanie stylów CSS. Są to: paleta CSS Styles, okna dialogowe New Style i Edit Style Sheet oraz okno Style Definition. Dzięki nim będziesz mógł:
q Tworzyć nowe style.
q Stosować na swoich stronach WWW istniejące style.
q Modyfikować istniejące style.
q Tworzyć połączenia do plików zawierających arkusze stylów.
q Usuwać style użyte na stronie WWW.
Zaczniemy od poznania palety CSS Styles – stanowi ona w programie Dreamweaver podstawowe centrum kontroli nad stylami CSS.
Paleta CSS Styles, pokazana na rysunku 12.5, to centrum tworzenia, wyboru i obsługi stylu. Aby ją wyświetlić, wybierz pozycję CSS Styles w menu Window lub zastosuj kombinację Shift+F11. Jeśli na stronie WWW osadzono jakieś style CSS, pojawią się one w oknie tej palety. Style utworzone lub dołączone do strony także się tu znajdą.
Aby zastosować styl z wyświetlanej na palecie listy, zaznacz blok tekstu lub znacznik HTML, do którego styl ma zostać zastosowany. Następnie kliknij nazwę wybranego stylu. Jeśli Dreamweaver potrafi wyświetlić styl w oknie dokumentu, zobaczysz, że zaznaczony fragment tekstu zmieni się odpowiednio do definicji stylu. W przeciwnym razie, aby zobaczyć efekty formatowania, będziesz musiał wyświetlić dokument w kompatybilnej przeglądarce.
Domyślnie, style są stosowane do zaznaczonego tekstu automatycznie. Jeśli preferujesz metodę ręcznego stosowania stylów, wyczyść na pasku palety CSS Styles pole wyboru obok przycisku Apply. Pamiętaj, że w takim przypadku, aby efekty wybranego stylu stały się widoczne, musisz kliknąć przycisk Apply.
Z prawej strony przycisku Apply znajdziesz cztery ikony: Attach Style Sheet, New Style, Edit Style Sheet i Delete Style.
Rys. 12.5.
...
Wolf-1