Rozdział 12. Korzystanie z
kaskadowych arkuszy stylów
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:
Kaskadowa natura arkuszy stylów
Jak korzystać z jednego arkusza stylów w całej witrynie
Różnica między stylami HTML a CSS
Jak działają style konfigurowane w programie Dreamweaver poprzez interfejs GUI
Dlaczego stosować arkusze stylów?
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ądz
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

. 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

. Jak zauważysz, inne atrybuty znacznika

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ć.
Grupowanie stylów
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 }
Dziedziczenie stylu
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:

Witam na mojej NOWEJ stronie WWW

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 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.
Nie bez powodu nazywa się je kaskadowymi!
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.
Wyobraz
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 ). 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.
Stosowanie stylów na stronach WWW
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).
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:

index:1; left: 160px; top: 225px >

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






Analizując ten kod z
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:

W metodzie alternatywnej definiowane jest połączenie do pliku zewnętrznego zawierającego
arkusz CSS:

Wyrażenie to powinno znalez
ć się na zewnątrz jakichkolwiek znaczników określających styl, lecz
nadal w obrębie znaczników . 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:
.background { background-color: #0066FF; background-image: url(bg.gif);
background-repeat: no-repeat }
p { font-family: Arial, Helvetica, sans-serif; font-size: 12 pt }
HTML a CSS
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:
Większa precyzja i skalowalność.
Globalna natura.
Bardziej przyjazny sposób edycji.
Wady:
Mniejsza kompatybilność.
 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.
Ćwiczenie 12.1. porównanie stylów HTML i CSS
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.
1. Skopiuj pliki z foldera Ch12 na swój dysk twardy.
2. Otwórz plik index.html  znajdziesz go w folderze Excersise 1 umieszczonym w
folderze Chapter 12 (jest to folder podrzędny Ch12). Następnie wyświetl paletę HTML
Styles korzystając ze skrótu Ctrl+F11.
W oknie palety wyświetlany będzie styl o nazwie Legal Info. Jeśli nie, kliknij przycisk
New Style i utwórz styl HTML stosując takie same ustawienia jak pokazane na rysunku
12.1
Rys. 12.1.
Jeśli styl HTML nie
będzie wyświetlany w
oknie palety HTML
Styles, musisz utworzyć
go sam
3. Przewiń stronę i zaznacz jej stopkę.
4. Zastosuj zdefiniowany właśnie styl Legal Info klikając jego nazwę na palecie HTML
Styles. W pewnych sytuacjach może być konieczne naciśnięcie przycisku Apply, u dołu
palety  to zależy od sposobu skonfigurowania programu Dreamweaver (jeśli zaznaczysz
pole wyboru obok tego przycisku, wskazany styl będzie stosowany automatycznie, w
przeciwnym razie będziesz musiał nacisnąć Apply  przypis tłum). Efekt końcowy tej
operacji pokazuje rysunek 12.2.
5. Spróbuj teraz cofnąć operację zastosowania stylu do zaznaczonego obszaru nie
korzystając z opcji Undo. Jedynym sposobem usunięcia stylu jest pozbycie się go ręczne.
Nawet jeśli zastosujesz jeden ze stylów przeznaczonych do usuwania stylu (Clear
Selection Style), zaburzysz jedynie formatowanie. Różnica między stylem HTML a
CSS staje w tym momencie oczywista.
Zamknij plik bez zapisywania. Jeśli już go zapisałeś, skopiuj go ponownie z dysku CD.
W taki sam sposób jak poprzednio zastosujesz teraz styl Legal Info z palety CSS Styles.
Efekt wizualny będzie identyczny jak poprzednio, lecz usunięcie stylu przestanie być
problemem.
6. Otwórz oryginalną kopię pliku index.htm z foldera podrzędnego Exercise 1 foldera
Chapter 12 na dysku CD. Otwórz paletę CSS Styles  zastosuj Shift+F11 lub kliknij
zakładkę CSS Styles.
Rys. 12.2.
Jeśli poprawnie wykonałeś
zadanie, zastosowanie
stylu HTML da taki
właśnie efekt
7. Zauważysz na liście dwa style: background i Legal Info (patrz rysunek 12.3). Styl
background definiuje styl tła w taki sposób, by nie było ono składane z kafelków  nim
jednak nie będziemy się teraz zajmować. Skup się na stylu Legal Info.
8. Zaznacz ten sam tekst, co poprzednio (w kroku 2.), a następnie zastosuj styl Legal Info z
palety CSS Style  wystarczy po prostu kliknąć nazwę stylu. Być może trzeba będzie
zastosować styl naciskając przycisk Apply (patrz przypis w punkcie 4.).
9. Do zaznaczonego tekstu zostanie zastosowany nowy styl. Rzuć okiem na kod z
ródłowy,
aby sprawdzić, jakie znaczniki zostały dodane. Zobaczysz dwa znaczniki , tak jak
na rysunku 12.4.
10. Spróbuj teraz usunąć styl. Zaznacz ponownie tekst i kliknij na palecie CSS Styles nazwę
None. Oto prosty sposób zaznaczenia właściwego fragmentu tekstu: umieść punkt
wstawiania w obrębie tekstu, a następnie kliknij na pasku stanu selektor znacznika
.
Jeśli styl został zastosowany poprzez dwa różne znaczniki (lub

), zastosuj
opisaną metodę do każdego z nich osobno i usuń styl.
Rys. 12.3.
Na tej stronie zastosowano
dwa style
Rys. 12.4.
Znacznik
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.
Tworzenie i stosowanie arkuszy stylów
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ł:
Tworzyć nowe style.
Stosować na swoich stronach WWW istniejące style.
Modyfikować istniejące style.
Tworzyć połączenia do plików zawierających arkusze stylów.
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
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.
Paleta CSS Styles
Dodatkowa opcja dotycząca arkuszy stylów to opcja Export CSS Styles. Jest ona dostępna w
menu podrzędnym Export menu File lub w menu rozwijanym palety CSS Styles (kliknij
przycisk ze strzałką z prawej strony palety, aby rozwinąć jej menu). Opcja ta umożliwia
przekształcenie stylów osadzonych w zewnętrzne arkusze stylów, które można póz
niej stosować
także do innych stron WWW.
Tworzenie nowego stylu
Naciśnięcie przycisku New Style na pasku palety CSS Style lub przycisku New w oknie
dialogowym Edit Style Sheet spowoduje wyświetlenie okna New Style (patrz rysunek 12.6). W
nim właśnie definiujesz trzy podstawowe właściwości swojego arkusza stylów: nazwę, typ i
obszar definiowania stylu. Nazwa stylu jest szczególnie istotna, ponieważ umożliwi odwoływanie
się do stylu na stronach WWW. Oczywiście powinieneś pamiętać o podstawowych zasadach
obowiązujących przy definiowaniu nazw.
Twoja pierwsza decyzja odnośnie tworzonego stylu dotyczy typu stylu. Do wyboru masz
możliwość utworzenia zwykłego stylu, zmiany definicji wskazanego znacznika HTML lub
zdefiniowanie formatowania określonej kombinacji znaczników. Ta ostatnia może nie być dla
Ciebie oczywista, ponieważ nic na ten temat jeszcze nie mówiliśmy. Tym trzem możliwościom
odpowiadają w oknie dialogowym New Style te trzy opcje:
Make Custom Style (Class)  utworzenie klasy stylu pozwala zastosować definicję
formatowania do dowolnego obszaru zaznaczonego tekstu, bez względu na rodzaj
otaczających go znaczników HTML, które kontrolują jego wygląd.
Redefine HTML Tag  ta opcja umożliwia zmianę definicji znacznika poprzez
wprowadzenie innych atrybutów.
Use CSS Selector  w tym przypadku możesz na przykład określić atrybuty
określonych stanów znacznika (stosowanego do definiowania połączeń).
Rys. 12.6.
Zdefiniuj typ tworzonego
arkusza
Zastanów się teraz, gdzie chcesz zdefiniować styl. Jeśli będziesz stosować go w dokumencie,
powinieneś zaznaczyć w sekcji Define In przycisk opcji This Document Only. Jeśli jednak
definicja stylu mogłaby znalez
ć zastosowanie także na innych stronach Twojej witryny, zapisz styl
w zewnętrznym pliku. Mówiąc krótko, opcja This Document Only odpowiada utworzeniu
arkusza stylów osadzonego w danym dokumencie. Zewnętrzny arkusz stylów (plik o rozszerzeniu
nazwy .css) może być stosowany w wielu dokumentach, nawet należących do różnych witryn,
ponieważ plik .css rezyduje na serwerze WWW i stamtąd jest odczytywany.
Po wskazaniu miejsca zdefiniowania i typu stylu, musisz podać nazwę stylu lub wybrać znacznik,
ewentualnie selektor stylu CSS (zależy to od wybranego typu). Oto parę porad, które mogą Ci się
przydać przy wprowadzaniu tego typu informacji.
Nazwa klasy musi rozpoczynać się od kropki, po której pojawia się litera. Reszta nazwy
może być kombinacją liter i cyfr. Jeśli zapomnisz o kropce rozpoczynającej nazwę klasy,
Dreamweaver wstawi ją automatycznie.
Wybrany przez Ciebie znacznik HTML musi być poprawny. Możesz wpisać go w polu
tekstowym (lecz pomijając nawiasy) lub wybrać z listy rozwijanej. Do kwestii redefinicji
znaczników HTML podchodz
z pewną dozą ostrożności  wprowadzone tu zmiany będą
miały szerokie i poważne konsekwencje na wszystkich stronach Twojej witryny.
Selektor CSS to dowolny, poprawnie zdefiniowany selektor, taki jak na przykład
#webStyle. Na liście rozwijanej znajdziesz cztery najczęściej stosowane selektory:
a:active, a:link, a:hover i a:visited. Odpowiadają one różnym stanom znacznika
(zależnym od użytkownika). Pozwalają one zmienić wygląd i zachowanie połączeń na
stronach WWW.
Po wprowadzeniu podstawowych ustawień tworzonego arkusza CSS, naciśnij OK. Jeśli
zdecydowałeś się na przygotowanie zewnętrznego arkusza stylów, pojawi się teraz okno
dialogowe umożliwiające zapisanie stylu w wybranym katalogu. Wreszcie wyświetlone zostanie
okno Style Definition. Jest to miejsce, w którym można definiować właściwości stylu. Więcej
informacji na temat typów i działania stylów znajdziesz w podrozdziale  Style i atrybuty .
Edycja stylu
Edycja istniejącego stylu jest niezwykle prosta. Zacznij od naciśnięcia przycisku Edit Style Sheet
w oknie palety CSS Styles. Spowoduje to wyświetlenie okna Edit Style Sheet, takiego jak
pokazane na rysunku 12.7. Wybierz w nim styl, który chcesz modyfikować i naciśnij przycisk
Edit. Edycja stylu przebiega w taki sam sposób jak proces jego tworzenia w oknie dialogowym
Style Definition. Jedyna różnica polega na tym, że pola tego okna są już wypełnione bieżącymi
ustawieniami. Przycisk Edit jest stosowany także w przypadku redefiniowanych znaczników 
umożliwia wyświetlenie ich właściwości.
Definiowanie połączeń do zewnętrznych arkuszy
stylów
W przypadku dużych witryn najlepszym rozwiązaniem jest przygotowanie nadrzędnego arkusza
stylów, z którego za pośrednictwem zdefiniowanych na stronach witryny połączeń pobierane są
podstawowe informacje o sposobach formatowania. Z kolei każdy oddział firmy może mieć
własne style w dokumentach lokalnych, które zmienią odpowiednio definicję nadrzędną zawartą w
pliku zewnętrznym.
Istnieją dwa sposoby umożliwiające korzystanie z zewnętrznego arkusza stylów. Można dokonać
importu stylu lub zdefiniować połączenie do niego prowadzące. Import jest równoznaczny z
pobraniem definicji stylu i umieszczeniem jej w dokumencie. Styl jest więc osadzany w
dokumencie i jego edycja jest możliwa z tego właśnie poziomu. W przypadku zaimportowania
stylu ewentualne zmiany wprowadzone w jego zewnętrznej kopii nie będą miały wpływu na kopię
lokalną, chyba że przeprowadzona zostanie ręczna procedura aktualizacji lub ponowna operacja
importu.
Rys. 12.7.
Okno dialogowe Edit
Style Sheet
Aby podłączyć zewnętrzny arkusz stylów, kliknij w oknie palety CSS Styles przycisk Attach
Style. Znajdz
plik zawierający żądany arkusz stylów. Zaimportowany arkusz stylów można
następnie stosować w dokumencie.
Alternatywna droga tworzenia połączenia do zewnętrznego pliku prowadzi przez okno dialogowe
Edit Style Sheet. Przycisk Link wywołuje okno dialogowe Link External Style Sheet. Pozwala
ono zarówno importować arkusze stylów, jak i tworzyć do nich połączenia.
Usuwanie arkusza stylów
Po tym wszystkim, co powiedziane zostało na temat wspaniałości arkuszy stylów, sama myśl o ich
usuwaniu wydaje się szalona. A jednak jest to czasami konieczne. Umiejętność całkowitego
usunięcia stylu ze stron witryny lub czasowego jego wyłączenia będzie Ci bez wątpienia kiedyś
choć raz potrzebna.
Metodą czyniącą najmniej szkód jest rezygnacja ze stosowania stylu. W tym przypadku połączenie
między dokumentem a zewnętrznym arkuszem stylu pozostaje nienaruszone, zachowane zostają
także style zdefiniowane lokalnie, rezydujące w sekcji HEAD dokumentu. Zacznij od zaznaczenia
elementu lub obszaru tekstu, do którego zastosowano styl. Następnie kliknij w oknie palety CSS
Styles opcję None. Spowoduje to usunięcie wszelkich stylów zastosowanych do wskazanego
fragmentu.
Druga metoda polega na całkowitym usunięciu stylu z dokumentu. Nie ma tu znaczenia, czy
chodzi o styl osadzony, czy też zewnętrzny  istniejące w sekcji HEAD dokumentu odwołanie do
niego zostanie usunięte. Jeśli jednak używasz klas, odwołania do klas umieszczone w obszarze
dokumentu pozostaną. Aby się ich pozbyć, musisz zaznaczyć odpowiedni tekst lub element i
wybrać w oknie palety CSS Styles opcję None, tak jak poprzednio. Aby definitywnie usunąć
styl, naciśnij w oknie palety CSS Styles przycisk Edit Style Sheet, zaznacz styl, którego chcesz
się pozbyć i naciśnij przycisk Remove. Ten sam efekt osiągniesz zaznaczając styl w oknie palety
CSS Styles i naciskając przycisk Delete Style. Wolę tę pierwszą metodę, ponieważ w tej drugiej
styl może zostać chwilowo zastosowany do elementu, który był zaznaczony w dokumencie.
Aczkolwiek ta preferencja jest czysto osobista.
Ćwiczenie 12.2. Tworzenie zewnętrznego arkusza stylów usuwającego
podkreślenia połączeń
W tym ćwiczeniu zdefiniujesz reguły CSS powodujące usuwanie podkreślenia połączeń
umieszczonych na stronie WWW. Jest to częste pragnienie projektantów stron, a jednocześnie
doskonała okazja, aby przekonać się jak ogromne możliwości tkwią w arkuszach stylów.
Zastosujemy pliki umieszczone w folderze podrzędnym Chapter 12 foldera Ch12 na dysku CD
dołączonym do książki.
1. Skopiuj pliki z foldera Chapter 12 na swój dysk twardy. Otwórz w oknie dokumentu
programu Dreamweaver plik index.htm ulokowany w folderze Exercise 2.
2. Wyświetl paletę CSS Styles stosując skrót klawiaturowy Shift+F11. Następnie naciśnij
przycisk Attach Style Sheet. Spowoduje to otwarcie okna dialogowego Select Style
Sheet. Znajdz
w nim plik plainlinks.css (jest on umieszczony w tym samym
folderze, co index.htm), zaznacz go i naciśnij przycisk Select (patrz rysunek 12.8).
3. Spowoduje to automatyczne utworzenie połączenia do pliku stylu, co pokazuje rysunek
12.9. Ten konkretny styl zmienia definicję znacznika . Zapisz plik, wyświetl go w
swojej ulubionej przeglądarce i przetestuj połączenia. Jak zauważysz, efekty zmian
widoczne są tylko na stronie index.htm.
4. Kontynuuj i utwórz połączenia do tego arkusza stylów na wszystkich stronach. Wyświetl
ponownie stronę index.htm i przejdz
na inne strony witryny  zauważysz, że wszystkie
wyświetlane na nich połączenia są bez podkreślenia.
5. Teraz wprowadzisz zmiany w arkuszu stylu zapisanym w pliku plainlinks.css, tak
aby połączenia były nadkreślane (kreska pojawi się nad nimi, a nie pod). Upewnij się
najpierw, czy paleta CSS Styles jest wyświetlana, a następnie kliknij przycisk Edit
Style Sheet. Pojawi się okno dialogowe podobne do tego z rysunku 12.10.
Rys. 12.8.
Zaznacz plik i naciśnij
przycisk Select, aby
utworzyć połączenie do
bieżącego dokumentu
Rys. 12.9.
Zwróć uwagę na kod
z
ródłowy  pojawia się w
nim definicja połączenia
 oraz na efekt działania
zewnętrznego arkusza
stylów w dokumencie
Rys. 12.10.
Edycja arkusza stylów
plainlinks.css
6. Kliknij dwukrotnie etykietę plainlinks.css, aby wyświetlić listę stylów zawartych w
tym pliku. Ponieważ zdefiniowano jedynie styl dla znacznika , tylko taka zawartość
pliku pojawi się w sekcji File Contents. Raz jeszcze kliknij dwukrotnie etykietę ,
aby otworzyć okno dialogowe Style Definition for .
7. Jak zauważysz, jedynym zdefiniowanym atrybutem jest atrybut Decoration. Została mu
przypisana wartość None. Twoim zamiarem jest zmiana tego atrybutu w taki sposób, aby
połączenia były wyświetlane jako nadkreślane. Wyczyść więc pole wyboru None i
zaznacz pole wyboru Overline. Po tej operacji kliknij OK. Naciśnij przycisk Save, aby
zapisać arkusz stylów, a następnie przycisk Done zamykający okno dialogowe Edit
Style Sheet.
8. Teraz finał  wyświetl stronę w ulubionej przeglądarce (polecam przeglądarkę Internet
Explorer lub Netscape 6, które gwarantują poprawne działanie). Wprowadzona
modyfikacja, jak zapewne zauważyłeś, nie jest uwzględniana w oknie programu
Dreamweaver. Jeśli cofniesz się do okna Style Definition, zauważysz, że właściwość
oznaczona jest gwiazdką i opatrzona komentarzem informującym, że nie jest wyświetlana
ona w oknie dokumentu programu Dreamweaver. Na rysunku 12.11 przedstawiony jest
efekt końcowy.
Rys. 12.11.
Ukończone dzieło. Nie bój
się poeksperymentować z
innymi kombinacjami
stylu połączeń
Style i atrybuty
Po zdefiniowaniu nazwy i typu arkusza stylów (i miejsca obowiązywania definicji) lub po
wybraniu bieżącego stylu do edycji, wyświetlane jest okno Style Definition dla tego stylu. Okno
to pozwala definiować style i określać ich atrybuty. Okno Style Definition ma osiem kategorii czy
też grup stylów, które można definiować. Kategorie są pogrupowane zgodnie z kryterium
podobieństwa, lecz nic nie stoi na przeszkodzie, aby w jednym arkuszu stylów CSS użyć stylów z
różnych kategorii. Oto lista kategorii:
Type
Background
Block
Box
Border
List
Positioning
Extensions
Aby wyświetlić ustawienia dla innej kategorii, kliknij po prostu jej nazwę na liście Category.
Zawartość okna dialogowego dostosuje się dynamicznie do wskazanej pozycji. Zauważ, że style
oznaczone gwiazdką nie są wyświetlane w oknie dokumentu programu Dreamweaver. Aby
zobaczyć efekty ich działania, musisz wyświetlić stronę w oknie przeglądarki. Przeanalizujmy
teraz poszczególne kategorie i ich ustawienia stylu.
Kategoria Type
Ustawienia kategorii Type określają wygląd tekstu (patrz rysunek 12.12). Jednym z częściej
implementowanych na dzisiejszych stronach WWW stylów jest styl czcionki o ustalonej
szerokości  należy on niewątpliwie do tej kategorii. Jest szczególnie przydatny przy stosowaniu
na stronach warstw. Tabela 12.1 prezentuje style tekstu i ich krótkie opis.
Początek ramki
Uwaga
Elementy oznaczone w tabeli gwiazdką (*) to elementy, które nie są w pełni obsługiwane w
dzisiejszych przeglądarkach, lub są obsługiwane nieoprawnie.
Koniec ramki
Rys. 12.12.
Style tekstu  kategoria
Type
Tabela 12.1. Style tekstu  kategoria Type
Ustawienie Działanie
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.
Kategoria Background
Ustawienia kategorii Background zaprezentowane na rysunku 12.13 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. Tabela 12.2 opisuje
poszczególne ustawienia kategorii Background.
Rys. 12.13.
Style tła  kategoria
Background
Tabela 12.2. Style tła  kategoria Background
Ustawienie Działanie
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.
Vertical Position Umożliwia zdefiniowanie pozycji obrazu wskazanego jako tło
strony (na osi y). Pozycja jest określana względem elementu
HTML, do którego styl jest dołączony.
Kategoria Block
Ustawienia kategorii Block (pokazane na rysunku 12.14) dotyczą formatowania bloku tekstu.
Wśród zawartych tu możliwości są opcje pozwalające zmieniać odstępy między wyrazami i
literami oraz ustawienia wcięcia  a więc są to rzeczy, których zwykły HTML po prostu nie
udostępnia. Tabela 12.3 opisuje funkcje poszczególnych ustawień.
Rys. 12.14.
Style bloku tekstu 
kategoria Block
Tabela 12.3. Style bloku tekstu  kategoria Block
Ustawienie Działanie
Word Spacing Umożliwia określenie odstępów między wyrazami. Jednostką
domyślną jest em. Można stosować zarówno wartości dodatnie, jak
i ujemne.*
Letter Spacing Umożliwia określenie odstępów między poszczególnymi literami.
Jednostką domyślną jest em. Można stosować zarówno wartości
dodatnie, jak i ujemne.*
Vertical Alignment Określa sposób wyrównania w pionie. Można zastosować wartości
z listy rozwijanej lub wprowadzić wartość procentową.
Text Align Definiuje sposób wyrównania tekstu. Możliwości są następujące:
left (do lewego marginesu), right (do prawego marginesu), center
(wycentrowanie) i justify (wyjustowanie).
Text Indent Definiuje głębokość wcięcia pierwszego wiersza tekstu.
Whitespace Określa sposób traktowania odstępów i tabulacji. Ustawienie Pre
zachowuje odstępy, podobnie jak znacznik

 języka HTML.
Opcja Nowrap powoduje zawijanie tekstu, tylko wówczas gdy
wstawiono znacznik 
.
Kategoria Box
Jeśli znane są Ci ustawienia formatowania tabel, ustawienia tej kategorii nie sprawią Ci kłopotu.
Mogą być stosowane do różnych elementów strony, lecz głównie są używane do obrazów. W
oznaczonym dwoma gwiazdkami komentarzu, który znajdziesz w oknie dla tej kategorii, znajduje
się informacja, że efekty niektórych ze stylów pojawią się w oknie dokumentu tylko w przypadku
zastosowania tych ustawień do pewnych elementów dokumentu. Na przykład efekty ustawień
Float i Clear można przeglądnąć w Dreamweaverze tylko w przypadku obrazów. Poszczególne
ustawienia tej kategorii opisuje tabela 12.4.
Rys. 12.15.
Style kontrolujące
ustawienie elementów na
stronie   kategoria Box
Tabela 12.4. Style kontrolujące ustawienie elementów na stronie   kategoria Box
Ustawienie Działanie
Width Określa szerokość elementu, do którego zastosowano styl.
Height Określa wysokość elementu, do którego zastosowano styl.
Float Powoduje przemieszczenie elementu na lewą lub prawą stronę
dokumentu. Jeśli przesuwany element trafi w obszar tekstu, tekst
zostanie obłamany wokół niego.
Clear To ustawienie jest stosowane razem z Float. Zapobiega
wyświetlaniu elementu w tej samej płaszczyz
nie horyzontalnej, w
jakiej wyświetlany jest element ruchomy. Ustawienia Float i Clear
powinny mieć tą samą wartość. Do wyboru są następujące
możliwości: Left, Right, None.
Padding Ustawienia tej sekcji umożliwiają zdefiniowanie odstępu między
elementem a obramowaniem lub marginesami. Z każdej strony
elementu można zdefiniować inny odstęp (pola Top (od góry),
Right (z prawej), Bottom (od dołu) i Left (z lewej)).
Margin Ustawienia tej sekcji umożliwiają zdefiniowanie marginesów
między obramowaniem elementu a innymi elementami. Można
określić cztery marginesy: Top (górny), Right (prawy), Bottom
(dolny) i Left (lewy).
Kategoria Border
Ustawienia kategorii Border pokazane na rysunku 12.16 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 opisuje
tabela 12.5.
Rys. 12.16.
Style obramowania  
kategoria Border
Atrybuty Width i Color można definiować niezależnie dla każdej z krawędzi obramowania
(górnej (Top), prawej (Right), dolnej (Bottom) i lewej (Left)). Aby uniknąć powtórzeń, tutaj
omówimy tę procedurę tylko raz.
Tabela 12.5. Style obramowania   kategoria Border
Ustawienie Działanie
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).
Kategoria List
Ta grupa ustawień zaprezentowana jest na rysunku 12.17. Pozwala ona konfigurować listy HTML.
Zamiast domyślnych znaków wypunktowania, można zastosować własny znak graficzny. Można
tu także określić sposób łamania tekstu pozycji listy. Poszczególne ustawienia tej kategorii opisuje
tabela 12.6.
Rys. 12.17.
Style listy   kategoria
List
Tabela 12.6. Style listy   kategoria List
Ustawienie Działanie
Type To ustawienia określa typ znaku wypunktowania lub numerowania.
Do wyboru są dyski, kółka, kwadraty, liczby dziesiętne, liczby
rzymskie pisane małymi i wielkimi literami, małe i wielkie litery.
Bullet Image Jeśli chcesz zastąpić domyślny znak wypunktowania własnym, to
pole umożliwia wskazanie ulokowania pliku zawierającego znak.
Position To ustawienia wpływa na sposób łamania tekstu pozycji listy do
następnego wiersza. Domyślnie stosowane jest łamanie tekstu
względem wcięcia (Outside). Można to zmienić wybierając
pozycję Inside   wówczas tekst jest zawijany względem marginesu
strony.
Kategoria Positioning
Ustawienia tej kategorii zaprezentowane na rysunku 12.18 oferują większą kontrolę i elastyczność
nad pozycjonowaniem elementów strony (aczkolwiek tylko w przypadku przeglądarek
obsługujących je). Stanowią także podstawę tworzenia warstw (pozwalają zamienić blok tekstu
lub zaznaczony tekst w nową warstwę poprzez zastosowanie domyślnego znacznika definiowania
warstw   przypis tłumacza). Pozwalają określić dokładnie pozycje elementów względem całej
strony lub innego jej elementu. Szczegółowy opis poszczególnych ustawień zawiera tabela 12.7.
Rys. 12.18.
Style pozycjonowania  
kategoria Positioning
Tabela 12.7. Style pozycjonowania   kategoria Positioning
Ustawienie Działanie
Type Określa sposób definiowania pozycji elementu. Do wyboru są trzy
możliwości: pozycjonowanie bezwzględne (opcja Absolute),
względem innego elementu (opcja Relative) i brak
pozycjonowania (opcja Static).
Visibility Określa widzialność elementu. Wartość Inherit wskazuje, że
widzialność jest taka, jak w określona znaczniku nadrzędnym
względem elementu.
Z-index To ustawienia informuje o kolejności ułożenia elementów w stosie.
Im większa liczba, tym bliżej  szczytu  stosu znajduje się element.
Overflow Ustawienia tej sekcji definiują miejsce elementu na ekranie
(atrybuty Left i Top) oraz jego rozmiary (atrybuty Width i Height).
Clip Ustawienia tej sekcji określają wyświetlaną na ekranie część
elementu (atrybuty Top, Right, Bottom i Left).
Kategoria Extensions
Ustawienia tej kategorii pokazane na rysunku 12.19, takie jak Filter, są nowe i często radykalne w
swej naturze. Należy pamiętać, że są one obsługiwane tylko przez przeglądarkę Internet Explorer.
Ich opis znajdziesz w tabeli 12.8.
Rys. 12.19.
Style rozszerzeń  
kategoria Extensions
Tabela 12.8. Style rozszerzeń   kategoria Extensions
Ustawienie Działanie
Page Wymusza łamanie strony w czasie drukowania przed lub po obiekcie, do którego
Break zastosowano styl.
Cursor Zmienia postać wskaz
nika myszki, gdy znajdzie się on nad obrazem kontrolowanym przez
styl. Lista możliwości jest bardzo rozbudowana. Niektórzy użytkownicy nie lubią, gdy ktoś
zmienia im postać wskaz
nika myszki, korzystaj więc z tej możliwości z umiarem.
Filter Umożliwia zastosowanie do obiektu kontrolowanego przez styl efektów specjalnych. Ich
natura jest podobna do działania filtrów programu PhotoShop. Spróbuj poeksperymentować z
tymi filtrami   niektóre efekty są zadziwiające. Więcej informacji na ten temat znajdziesz
pod adresem
www.msdn.microsoft.com/workshop/author/filter/reference/reference.asp.
Podsumowanie
Ten rozdział dotyczył arkuszy CSS. Wśród podejmowanych tematów znalazła się dyskusja o
istocie arkuszy stylów i ich wpływie na możliwości projektowe. Zajmowaliśmy się także
poszczególnymi stylami i ich atrybutami. Nauczyłeś się definiować arkusz CSS i stosować go w
swoich dokumentach. Wiesz już także, jaka jest różnica między stylem HTML a stylem CSS.