Być może zwróciłeś uwagę, że strony WWW zdobywające nagrody, na przykład w organizowanym przez Macromedia konkursie Sities of the Day, zazwyczaj zawierają sekwencje wideo programu Flash. Choć istnieje wiele sposobów umieszczania animacji na stronach WWW – choćby animacje DHTML, animowane GIFy, animacje Javy i JavaScriptu – trudno znaleźć osobę, która nie byłaby pod wrażeniem tego typu animacji, które można uzyskać w programie Flash.

Niezależnie od tego, czy jest to wirowanie, kręcenie, zanikanie, skakanie, podskakiwanie czy nawet śpiewanie, animacja Flash jest czymś spektakularnym. Abyś był jeszcze bardziej złakniony poznania narzędzia jakim jest Flash, wspomnę choćby o możliwości łączenia interfejsu programu Flash z dynamiczną bazą danych. Oznacza to, między innymi, że witryny e-komercji przestaną być nudne, a zaczną być piękne. Z każdą nową wersją Flash coraz lepiej spełnia wymagania stawiane standardowemu narzędziu do tworzenia witryn.

Ci, którzy budują swoje witryny od początku do końca w programie Flash, unikają wielu pułapek projektowych, które od lat są zmorą projektantów stron WWW. Na przykład sekwencje wideo programu Flash dostosowują się rozmiarami do okna przeglądarki, co eliminuje obawy związane z szerokością jej okna. Ponieważ Flash jest programem wektorowym, kwestia utraty jakości obrazu praktycznie nie istnieje.

Jak działa Flash

Aby zrozumieć jak działa Flash, musisz zacząć od tego, że Flash nie jest częścią składową programu Dreamweaver, ani też przeglądarki. Zanim wstawisz sekwencję wideo na stronę WWW tworzoną w programie Dreamweaver, najpierw musisz przygotować tę sekwencję w programie Flash. Programy Dreamweaver i Flash – oba wyprodukowane przez firmę Macromedia – można traktować jak członków jednego zespołu dążących do wspólnego celu: stworzenia wspaniałej witryny, która nie tylko doskonale wygląda, lecz także udostępnia wiele interaktywnych opcji.

Flash ewoluował od programu do tworzenia animacji typowych dla filmów rysunkowych, przez animacje dla gier elektronicznych, po prezentacje multimedialne. To, co odróżniło Flash od pozostałych programów do animacji, to możliwość wyeksportowania animacji jako plików Shockwave i stosowania ich na stronach WWW. Każda nowa wersja coraz lepiej zaspokaja potrzeby projektantów i twórców stron WWW. Obecnie jest to już nie tylko program do animacji. Chociaż nadal użytkownik programu Flash musi znać podstawy tworzenia animacji, to zakres możliwości, jakie daje program, jest znacznie szerszy.

Można na przykład przesłać zmienne z bazy danych do interfejsu Flash i zaprezentować rezultaty na stronie WWW za pomocą animacji. Można także stworzyć aplikacje e-komercji, udostępniające użytkownikom animowany interfejs, który dodatkowo pozwala śledzić stan rachunku oraz przechowuje numery kart kredytowych. Połączenie możliwości artystycznych i potencjału technicznego sprawiło, Flash stał się znany jako program do tworzenia bardziej interesujących witryn.

Grafika wektorowa a rastrowa

Jednym z terminów, który pojawia się często w połączeniu z programem Flash jest termin „grafika wektorowa”. Obrazy wektorowe są wyświetlane na ekranie lub wysyłane do drukarki obsługującej PostScript w oparciu o dokładnie określone równania matematyczne. Projektanci dokumentów drukowanych i stron WWW są równie wielkimi wielbicielami grafiki wektorowej, bowiem cechuje ją szeroki zakres skalowalności przy zachowaniu jakości obrazu. Dotyczy to zarówno ekranu komputera, jak i wydruku na drukarkach obsługujących PostScript.

Jeśli na przykład chcesz umieścić logo firmy na tablicy ogłoszeń, projektant Twojego plakatu niewiele będzie w stanie zdziałać z przesłanym mu obrazem rastrowym o rozdzielczości 72 dpi. Żeby uzyskać sensowny efekt, najpierw musi on odtworzyć logo w postaci wektorowej – korzystając z takich programów, jak Adobe Illustrator lub Photoshop, ewentualnie Macromedia Freehand lub Fireworks. Dopiero powstały w ten sposób obraz wektorowy można powiększyć do rozmiaru wymaganego na plakacie, bez obaw o rozmycie krawędzi i utratę koloru. Jeśli będzie to konieczne, to samo logo wektorowe można następnego dnia pomniejszyć tak, aby zmieściło się w rogu koperty, i nadać mu inny kolor. I nadal krawędzie będą ostre, a kolor prawdziwy. W tym się właśnie zawiera piękno grafiki wektorowej. Dodatkowa korzyść to niewielki rozmiar plików.

Flash jest programem wektorowym, a więc wszelkie obiekty, które powstają przy użyciu jego modułu rysunkowego automatycznie przeskalowują się, dopasowując do rozmiarów okna. Nie musisz więc ich rozciągać lub pomniejszać i nie tracą one jakości. To samo dotyczy wszelkich kształtów wektorowych, które wklejasz lub importujesz do biblioteki programu Flash. Inaczej jest jednak w przypadku fotografii i zeskanowanych grafik. Obrazy fotograficzne, takie jak obrazy JPG, to pliki zawierające ilustracje rastrowe i nie można ich skalować. Innymi przykładami grafiki rastrowej (oprócz obrazów BMP) są obrazy w formatach TIF, PICT i GIF.

Komputery nie potrafią skalować grafiki rastrowej bez utraty jakości, ponieważ obraz rastrowy stanowi zestaw pikseli, których ułożenia nie można zmienić. Dla grafiki rastrowej układ pikseli jest czymś tak trwałym, jak dla Ciebie struktura DNA. Wymuszenie zmiany rozmiarów takiego obrazu zawsze powoduje utratę jakości. Uwaga ta jest równie prawdziwa dla obrazów prezentowanych na ekranie, jak i drukowanych. Utrata jakości pojawia się także jako efekt kompresji lub usunięcia kolorów (tak jak w przypadku eksportu do formatu GIF).

Program Flash pozwala na importowanie grafiki rastrowej i stosowanie jej w animacjach. Warto jednak, abyś już teraz wiedział, że spowolni to odtwarzanie filmu tam, gdzie nie są dostępne łącza

o wysokiej przepustowości. Oczywiście wzrośnie także rozmiar pliku .swf powstałego po wyeksportowaniu do formatu Shockwave.

Obrazy rastrowe nie są wcale rzadkie w sekwencjach wideo, lecz zaleca się ograniczanie ich liczby. W przeciwnym razie efektem Twoich działań będzie bardzo wolny film. Flash daje nad tym pewną kontrolę, poprzez możliwość zmiany poziomu jakości obrazu przy eksporcie do formatu JPG. Im wyższa jakość obrazu JPG, tym większy rozmiar pliku i wyższe obciążenie łączy.

Znaczniki <OBJECT> i <EMBED>

Ponieważ pliki .swf są w formacie wprowadzonym przez Macromedia, ich obsługa w przeglądarce jest możliwa dopiero po zainstalowaniu programu Macromedia Flash Player. Najnowsze wersje przeglądarek Firefox i Internet Explorer mają już wbudowany moduł Flash Player, aczkolwiek w różnych wersjach.

W przeglądarce Microsoft Internet Explorer Macromedia Flash Player występuje jako kontrolka ActiveX, do której odwołanie w kodzie HTML umieszcza się w znaczniku <OBJECT>. W Navigatorze Netscape jest to moduł dodatkowy, do którego odwołanie definiowane jest w znaczniku <EMBED>. Tak więc, aby umożliwić obsługę plików .swf w obu typach przeglądarek, w kodzie HTML należy umieścić oba znaczniki – <OBJECT> i <EMBED>.

Aby wstawiana w dokumencie HTML sekwencja wideo mogła zostać skonfigurowana i odtworzona w przeglądarce, musi ona być w formacie Shockwave Flash (.swf). Sekwencja wideo utworzona w programie Flash zostanie zapisana jako plik .fla, a większość przeglądarek będzie miała problemy z jej odtworzeniem, dopóki wersja pliku nie zostanie przekonwertowana do postaci .swf za pomocą polecenia Export.

Być może z tego względu wyraz Shockwave stał się podstawowym źródłem nieporozumienia. Wiele osób myśli, że Shockwave to program, a tak nie jest. W rzeczywistości Shockwave to typ pliku. Tak jak .JPG czy .GIF to typy plików graficznych tworzonych przy eksporcie obrazu w programie do obróbki grafiki, tak rozszerzenie .swf (pochodzące od Shockwafe Flash) przypisywane jest plikom eksportowanym z Macromedia Flash lub Director (oraz paru innych programów). Pliki wyeksportowane w programach Flash lub Director do formatu Shockwave mogą być odtwarzane w przeglądarkach i prezentują się w nich nieźle.

Konfigurowanie właściwości sekwencji wideoprogramu Flash

Inspektor Property umożliwia zmianę najczęściej stosowanych dla sekwencji wideo programu Flash ustawień:

• Nazwa sekwencji wideo – wpisz w tym polu nazwę sekwencji, do która będzie można odwoływać się w skryptach. Pole nazwy nie ma w inspektorze Property swojej etykiety. Znajdziesz je obok ikony Flash, z lewej strony okna. Pamiętaj, aby nie używać w nazwach znaków specjalnych oraz spacji.
• W i H – te pola określają w pikselach szerokość i wysokość pola sekwencji wideo. Możesz także zdefiniować wymiary w innych jednostkach: pc (pica), pt (punkty), in (cale), mm (milimetry), cm (centymetry) i % (procentowa wartość mierzona względem obiektu nadrzędnego). Między wartością a jednostką nie można umieszczać spacji. Oto przykład definicji: 30%.
• File – to pole określa ścieżkę dostępu do pliku programu Flash. Możesz kliknąć ikonę foldera, aby znaleźć plik.
• Align – skorzystaj z tego pola, aby wskazać sposób wyrównania sekwencji wideo na stronie i w oknie przeglądarki.
• Bg – tu definiowany jest kolor tła dla sekwencji wideo. Skorzystaj z palety kolorów Dreamweavera i wskaż kolor bezpieczny, obsługiwany w Internecie.
• ID – w tym polu definiowany jest opcjonalny parametr ID kontrolki ActiveX. Jest on stosowany przede wszystkim do przekazywania informacji między kontrolkami ActiveX.
• V Space i H Space – określ w pikselach szerokość wolnego obszaru wokół pola sekwencji wideo.
• Parameters – ten przycisk otwiera okno dialogowe zawierające dodatkowe ustawienia dla sekwencji wideo. Opis parametrów programu Flash znajdziesz w punkcie „Parametry sekwencji wideo programu Flash”. Dodatkowe parametry pojawiają się, gdy sekwencja wideo pochodzi z programu Flash. Sięgnij do dokumentacji tego programu, aby znaleźć więcej informacji na temat stosowania parametrów.
• Quality – w tym polu umieszczana jest wartość atrybutu QUALITY znaczników <OBJECT> i <EMBED> uruchamiających sekwencję wideo. Wartość ta określa stopień wygładzania stosowany w trakcie odtwarzania sekwencji. Kuszące jest przyjąć wartość najwyższą, lecz trzeba pamiętać, że odtwarzanie filmów w wysokiej jakości wymaga szybszych procesorów. W punkcie „Parametry sekwencji wideo programu Flash” znajdziesz więcej informacji na temat ustawień jakości odtwarzania.
• Scale – to pole wskazuje znacznikom <OBJECT> i <EMBED>, które uruchamiają
  sekwencję wideo, stopień przeskalowania.
• Autoplay – jeśli zaznaczysz to pole wyboru, sekwencja zostanie odtworzona
  automatycznie, po załadowaniu strony.
• Loop – zaznaczenie tego pola wyboru spowoduje powtarzanie sekwencji w
  nieskończonej pętli.
• Reset Size – ten przycisk pozwala przywrócić domyślne rozmiary zaznaczonej
  sekwencji.

Flash staje się coraz bardziej popularny głównie dlatego, że umożliwia przeskalowywanie grafiki wektorowej tak, by zajmowała całe okno przeglądarki, niezależnie od jego rozmiarów. Rozmiary plików grafiki wektorowej są przy tym bardzo niewielkie, dzięki czemu czasy ładowania są krótkie. Sekwencje wideo programu Flash mogą także zawierać obrazy rastrowe, co z kolei wydłuża czas odtwarzania.

Jeśli decydujesz się na wprowadzenie na swoich stronach WWW elementów animowanych, w procesie projektowania witryny zastanów się najpierw nad najwłaściwszym narzędziem do przygotowania takich elementów. W przypadku pasków reklamowych, tak zwanych banerów,

które będą włączać się i wyłączać wyświetlając komunikaty, najlepszym rozwiązaniem jest skorzystanie z programu Macromedia Fireworks. Daje on dostęp do rozbudowanych narzędzi tekstowych i graficznych, przy zachowaniu możliwości wyeksportowania animacji jako sekwencji GIF, którą bez trudu można przesłać ewentualnym klientom.

Jednak jeżeli chcesz zbudować porywającą witrynę, w której obok obracających się kształtów i błyszczących fotografii pojawić się mają cyfrowe klipy wideo i przesuwający się tekst, a w tle sączyć się będą dźwięki, wybór powinien paść na Macromedia Flash. Narzędzia graficzne tego programu nie są może najlepsze (aczkolwiek znacznie je poprawiono w najnowszej wersji), ale masz za to możliwość tworzenia złożonych animacji, oszczędnych pod względem objętości pliku, które można skalować do dowolnych rozmiarów okna przeglądarki.

Tworzenie animacji

Niewątpliwa obfitość programów do tworzenia animacji sprawia, że jest z czego wybierać. Być może zastanawiasz się, dlaczego masz korzystać akurat z programu Dreamweaver, skoro programy Flash lub Fireworks także się do tego nadają. Najważniejsze jednak, że linie czasowe pozwalają zintegrować złożone animacje oraz struktury nawigacyjne w całość. Innymi słowy, linie czasowe mogą stanowić coś w rodzaju narzędzia choreograficznego, które pozwala „dyrygować” sposobem i momentem pojawiania się poszczególnych elementów Twojej witryny oraz ich działaniem. Jest to szczególnie użyteczne w przypadku tworzenia animowanych (rozwijanych) systemów menu, co jest obecnie jednym z najczęstszych zastosowań linii czasowych DHTML.

Po zdobyciu podstawowej wiedzy dotyczącej tworzenia animacji, nie ustawaj w poszukiwaniach nowych rozwiązań. Pomysły możesz znaleźć także w Internecie, przeglądając strony prezentujące zasoby DHTML. Poniżej przedstawiam kilka podpowiedzi przy tworzeniu animacji:

• Rozciągnięcie paska animacji pomaga uczynić ruch bardziej płynnym.
• O ile to możliwe, stosuj w swoich liniach czasowych obrazy GIF lub niewielkie obrazy JPG. Duże pliki spowolnią animację i zaburzą jej płynność. Rozważ także zaimportowanie wektorowej animacji programu Flash, aby uzyskać bardziej profesjonalny efekt.
• Podziel linię czasową na kilka krótszych, aby nie pogubić się. Pamiętaj, że opcje Autoplay i Loop należy ustawić dla każdej z linii.
• Zaoszczędzisz swój czas kopiując i wklejając animacje.
• Dostosuj synchronizację korzystając z ustawienia FPS. Dodaj puste klatki tam, gdzie ma być pauza.
• Nie stosuj zbyt wysokich wartości FPS. Jeśli animacja ma być krótsza, skróć samą linię czasową.

Tworzenie animacji z liniami czasowymi odbywa się poprzez organizację warstw i ich zawartości w funkcji czasu. Do tworzenia pasków animacji służy okno Timelines, a każdy z pasków może zawierać obiekt taki jak tekst, obraz i plik multimedialny, stanowiący element finalnej animacji. Język DHTML (Dynamic Hypertext Markup Language) to podstawa linii czasowych.

Font

Umożliwia wybranie stosowanych czcionek. Tekst na stronie WWW zostanie wyświetlony pierwszym z wybranej listy krojów czcionki, o ile jest on zainstalowany na komputerze użytkownika. W przeciwnym razie zastosowana zostanie druga w kolejności czcionka i tak do skutku. Możesz zdefiniować własną listę krojów pisma.

Size

Określa rozmiar czcionki w pikselach lub względem otaczającego tekstu. Tak więc, konieczne jest podanie wartości liczbowej i jednostki. Jednostkę wybiera się z listy rozwijanej umieszczonej z prawej strony pola Size. Wielu projektantów woli stosować piksele, ponieważ zapewnia to powtarzalność efektu w różnych przeglądarkach.

Weight

Określa grubość czcionki. Można ją zdefiniować w pikselach lub względem otaczającego tekstu. Poeksperymentuj z różnymi ustawieniami i wybierz najlepsze według Ciebie. Zwykłemu tekstowi odpowiada wartość 400, a czcionce pogrubionej 700.

Style

Umożliwia zdefiniowanie pisma zwykłego, kursywy i pochyłego.

Variant

Pozwala przełączać się między czcionką zwykła a kapitalikami. W przypadku wybrania kapitalików, cały tekst jest wyświetlany wielkimi literami, a wersaliki są nieco większe niż zwykłe litery.*

Line Height

Definiuje wysokość wiersza (musisz podać liczbę i jednostkę). Jest to odstęp między kolejnymi wierszami dokumentu, zazwyczaj o wartości kilku pikseli. Odstęp ten można dowolnie zwiększać lub

zmniejszać.*

Case

Przekształca tekst w tekst pisany wielkimi lub małymi literami, albo wersalikami.

Decoration

Umożliwia dodanie podkreślenia, nadkreślenia i przekreślenia oraz efektu migającego tekstu. Tego ostatniego efektu nie nadużywaj. Irytuje on wielu użytkowników. Opcje tej sekcji pozwalają wyłączyć podkreślanie połączeń, czego tak bardzo pragną twórcy stron WWW.

Color

Umożliwia wybranie koloru tekstu.

Background

Ustawienia kategorii Background służą wyłącznie do definiowania tła dokumentów. Początkowo tła stron były automatycznie składane z kafelków – identycznych obrazów powtarzających się w pionie i poziomie. Nie dość, że ograniczało to kreatywność, to jeszcze na dodatek działało irytująco po odwiedzeniu iluś tam stron. Dzięki arkuszom CSS znacznie powiększyła się kontrola projektanta nad tłem strony.

Background Color

Umożliwia wybranie koloru tła, które będzie stosowane poprzez arkusz stylów CSS.

Background Image

Umożliwia wybranie obrazu jako tła, które będzie stosowane poprzez arkusz stylów CSS.

Repeat

Umożliwia złożenie tła z powtarzalnych elementów i określenie sposobu zestawiania elementów. Do wyboru są cztery możliwości. Ustawienie no-repeat wymusza jednokrotne wyświetlenie obrazu, bez powtórzeń. Opcja Repeat działa podobnie jak domyślna metoda składania tła z kafelków – obraz jest powtarzany w pionie i w poziomie strony. Opcja Repeat-x powoduje wyświetlenie powtórzeń tylko w poziomie, a Repeat-y – tylko w pionie.

Attachment

Pozwala wybrać, czy tło ma przewijać się wraz ze stroną, czy też pozostać nieruchome i niezależne od przewijania strony.

Horizontal Position

Umożliwia zdefiniowanie pozycji obrazu wskazanego jako tło (na osi x). Pozycja jest określana względem elementu HTML, do którego styl jest dołączony.

Border

Ustawienia kategorii Border pozwalają skonfigurować i wyświetlić obramowania wokół różnych elementów, takich jak obrazy lub tekst. Są one bardzo użyteczne przy umieszczaniu akapitów tekstu w ramkach. Poszczególne ustawienia tej kategorii

Width

Umożliwia zdefiniowanie grubości obramowania w oparciu o miarę względną lub liczbową.

Color

Umożliwia wybranie koloru krawędzi obramowania.*

Style

Pozwala wybrać styl obramowania (dla wszystkich czterech krawędzi). Wśród opcji są: dotted (kropki), dashed (linia przerywana), solid (linia ciągła), double (linia podwójna), groove (pseudo 3D – rowek), ridge (pseudo 3D – linia wypukła), inset (wypukłe) i outset (wklęsłe).

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.

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:

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.

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

Atrybuty stylu

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; zindex:1; left: 160px; top: 225px”></div>

Jest to kod definiujący element DHTML zwany 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.

Style osadzone

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…>

<head>

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

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

Zewnętrzne arkusze 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:

<style type=”text/css”> @import”arkusz_stylow.css”; </style>

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

.background { background-color: #0066FF; background-image: url(bg.gif);background-repeat: no-repeat }

p { font-family: Arial, Helvetica, sans-serif; font-size: 12 pt }