IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE

ABC kaskadowych arkuszy

stylw (CSS)
Autor: Bartosz Danowski
ISBN: 83-7197-747-6
Format: B5, stron: 300

ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Dynamiczny rozwj technologii przesyu danych prowadzcy do zwikszenia

przepustowoci internetu by koem zamachowym powstawania nowych stron WWW
opartych na coraz to wymylniejszych rozwizaniach. Jednym z nich s kaskadowe
arkusze stylw (CSS), ktre obecnie s doskona alternatyw dla mudnego procesu
przygotowania stron WWW. Pozwalaj nada wsplny wygld dokumentom tworzcym
stron WWW bez wikszego wysiku i przy ogromnej oszczdnoci czasu.
Autor w ksice ABC kaskadowych arkuszy stylw (CSS) stworzy moliwie
kompletne, polskie opracowanie powicone roli CSS w tworzeniu stron WWW. Postawi
sobie jeszcze jeden cel, zgodnie z ktrym ksika miaa by przeznaczona zarwno dla
Czytelnikw rozpoczynajcych przygod z tworzeniem stron WWW, jak i dla starych
wyjadaczy, majcych w tej dziedzinie sporo dowiadczenia. Zgodnie z sugestiami
czytelnikw, ktrzy zapoznali si ju z poprzednimi ksikami Bartosza Danowskiego
(np. HTML. wiczenia praktyczne, Kaskadowe arkusze stylw. wiczenia
praktyczne), niniejsza publikacja zawiera jeszcze wicej praktycznych przykadw.
Ze wzgldu na charakter tematyki zaoono, e Czytelnik posiada ju niezbdn wiedz
do pracy z komputerem. Dokadniej mwic, chodzi o umiejtno pracy z dowolnym
edytorem tekstowym.
Doskonay podrcznik dla pocztkujcych twrcw stron WWW!

Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

Ksika opisuje m.in.:

formatowanie czcionek na stronie WWW;
osadzanie wasnych czcionek;
pozycjonowanie elementw;
regulowanie marginesw;
zmiana wygldu okna przegldarki i kursora myszki;
formatowanie tabel;
kontrola wygldu blokw tekstu i nagwkw;
kontrola wygldu formularzy;
tworzenie stron zgodnie z zaleceniami specyfikacji HTML 4.0.1.

"
"
"
"
"
"
"
"
"

Wstp ..................................................................................................................7
Rozdzia 1.

Wprowadzenie do zagadnie jzyka HTML 4.01

oraz kaskadowych arkuszy stylw.....................................................9
Krtkie wprowadzenie do jzyka HTML ........................................................................ 9
Wprowadzenie do kaskadowych arkuszy stylw CSS ............................................... 13
Komentarze dla tworzonych arkuszy....................................................................... 14
Implementacja CSS w przegldarkach .................................................................... 16
Metody umieszczania stylw w dokumencie .......................................................... 16
Problemy ze stylami w starych przegldarkach....................................................... 23
Jednostki miar stosowane w CSS ............................................................................ 24
Nazewnictwo kolorw uywane w CSS.................................................................. 26
Podsumowanie ............................................................................................................... 29

Rozdzia 2.

Budowa stylu selektory...............................................................31

Selektory proste.............................................................................................................. 31
Selektory uniwersalne .................................................................................................... 32
Selektory potomka ...................................................................................................... 33
Selektory dziecka........................................................................................................ 34
Selektory rodzestwa.................................................................................................. 36
Identyfikatory ID....................................................................................................... 36
Klasy .............................................................................................................................. 39
Pseudoklasy.................................................................................................................... 41
Pseudoelementy.............................................................................................................. 47
Grupowanie selektorw ................................................................................................. 51
Podsumowanie ............................................................................................................... 52

Rozdzia 3.

Dziedziczenie i kaskadowo ..........................................................53

Dziedziczenie ................................................................................................................. 53
Kaskadowo.................................................................................................................. 59
Podsumowanie ............................................................................................................... 61

Rozdzia 4.

Waciwoci tekstu ........................................................................63

Poziome wyrwnanie ..................................................................................................... 63
Pionowe wyrwnanie ..................................................................................................... 66
Wcicie tekstu ................................................................................................................ 71
Dekoracja tekstu............................................................................................................. 74
Przeksztacanie tekstu .................................................................................................... 78
Regulacja odstpw pomidzy literami ......................................................................... 80

ABC kaskadowych arkuszy stylw (CSS)

Regulacja odstpw pomidzy wyrazami ...................................................................... 82
Regulacja odstpw pomidzy wierszami ..................................................................... 83
Pusta przestrze.............................................................................................................. 85
Podsumowanie ............................................................................................................... 87

Rozdzia 5.

Waciwoci czcionki .....................................................................89

Rodzaj uytej czcionki rodzina czcionek .................................................................. 90
Rozmiar czcionki ........................................................................................................... 97
Waga czcionki.............................................................................................................. 101
Styl czcionki................................................................................................................. 104
Warianty czcionki ........................................................................................................ 106
Szeroko czcionki....................................................................................................... 107
Proporcja czcionki........................................................................................................ 107
Zbiorczy zapis waciwoci czcionek .......................................................................... 108
Podsumowanie ............................................................................................................. 109

Rozdzia 6.

Osadzanie czcionek na stronie WWW............................................111

Open Type.................................................................................................................... 111
True Doc....................................................................................................................... 116
Podsumowanie ............................................................................................................. 120

Rozdzia 7.

Waciwoci list ...........................................................................121

Typ listy ....................................................................................................................... 123
Dowolny obraz jako wypunktowanie listy................................................................... 134
Pozycjonowanie listy wzgldem wypunktowania lub numeracji ................................ 135
Zbiorczy zapis waciwoci list.................................................................................... 137
Podsumowanie ............................................................................................................. 138

Rozdzia 8.

Kolor i to poszczeglnych elementw ...........................................141

Kolor ............................................................................................................................ 141
To ................................................................................................................................ 144
Definicja koloru jako ta ........................................................................................ 144
Element graficzny jako to ..................................................................................... 148
Zbiorczy zapis waciwoci ta .............................................................................. 157
Podsumowanie ............................................................................................................. 158

Rozdzia 9.

Marginesy....................................................................................161
Marginesy zewntrzne margin ................................................................................ 161
Zbiorczy zapis waciwoci marginesw zewntrznych ....................................... 171
Marginesy wewntrzne padding ............................................................................. 172
Zbiorczy zapis waciwoci marginesw wewntrznych (dopenienia) ................ 177
Podsumowanie ............................................................................................................. 178

Rozdzia 10. Obramowanie poszczeglnych elementw .....................................183

Definicja obramowania ................................................................................................ 183
Styl obramowania......................................................................................................... 187
Szeroko obramowania............................................................................................... 190
Kolor obramowania...................................................................................................... 191
Podsumowanie ............................................................................................................. 192

Rozdzia 11. Tabele .........................................................................................199

Formatowanie zawartoci tabeli................................................................................... 202
Formatowanie krawdzi tabeli ..................................................................................... 207
Formatowanie wygldu tabeli za pomoc dodatkowych stylw.................................. 212
Podsumowanie ............................................................................................................. 217

Spis treci

Rozdzia 12. Pozycjonowanie elementw ..........................................................219

Pozycjonowanie bezwzgldne (absolute) .................................................................... 219
Pozycjonowanie wzgldne (relative) ........................................................................... 223
Pozycjonowanie statyczne (static) ............................................................................... 225
Pozycjonowanie typu fixed .......................................................................................... 226
Nakadanie elementw na siebie .................................................................................. 228
Kolejno nakadanych elementw.............................................................................. 231
Wymiarowanie pozycjonowanych elementw ............................................................ 232
Podsumowanie ............................................................................................................. 234

Rozdzia 13. Oblewanie tekstem innych elementw ..........................................237

Sterowanie oblewaniem ............................................................................................... 237
Blokowanie oblewania wybranych elementw............................................................ 240
Podsumowanie ............................................................................................................. 243

Rozdzia 14. Efekty wizualne ............................................................................245

Kadrowanie .................................................................................................................. 245
Ukrywanie elementw ................................................................................................. 247
Sterowanie wymiarowanymi elementami .................................................................... 249
Podsumowanie ............................................................................................................. 252

Rozdzia 15. Drukowanie..................................................................................255

Definicja rozmiaru strony ............................................................................................ 255
Kontrola amania strony............................................................................................... 256
Podsumowanie ............................................................................................................. 257

Rozdzia 16. Dodatkowe style dla przegldarki

MS Internet Explorer 5.5 oraz 6....................................................259
Wygld okna przegldarki ........................................................................................... 259
Wygld kursora ............................................................................................................ 261
Podsumowanie ............................................................................................................. 262

Rozdzia 17. Graficzne edytory CSS TopStyle................................................263

Charakterystyka programu ........................................................................................... 263
Praca z kreatorem ......................................................................................................... 267
Rczne definiowanie stylu ........................................................................................... 269
Dodatkowe funkcje ...................................................................................................... 271
Podsumowanie ............................................................................................................. 272

Zakoczenie .....................................................................................................273
Dodatek A

Przykady i gotowe rozwizania problemw....................................275

Formularze ................................................................................................................... 275
To skadane z wielu elementw .................................................................................. 276
Podpinanie arkuszy do dokumentw w najpopularniejszych edytorach WWW ......... 277
EzHTML ................................................................................................................ 277
Pajczek 2000 ........................................................................................................ 277
MS Front Page 2000/XP ........................................................................................ 278
Zmiana ta caej komrki tabeli.................................................................................... 279
Wczytywanie arkusza w zalenoci od wykrytej przegldarki.................................... 280
Gotowe arkusze do wykorzystania na stronie domowej .............................................. 281
Odnoniki bez podkrele, zmieniajce kolor
po najechaniu na nie kursorem myszy................................................................ 281
Przykad formatowania suwakw .......................................................................... 282

ABC kaskadowych arkuszy stylw (CSS)

Przykad definicji kursora dla rnych elementw na stronie ............................... 282
Arkusz formatujcy typow stron ........................................................................ 283
Przydatne adresy internetowe ...................................................................................... 285

Dodatek B
Dodatek C

Zestawienie obsugi stylw przez najpopularniejsze przegldarki ....287

Zbir opisanych stylw cznie z dostpnymi wartociami .............293
Waciwoci tekstu....................................................................................................... 293
Waciwoci czcionki................................................................................................... 294
Waciwoci listy ......................................................................................................... 294
Waciwoci ta i koloru............................................................................................... 295
Marginesy zewntrzne ................................................................................................. 295
Marginesy wewntrzne dopenienie........................................................................ 296
Obramowanie ............................................................................................................... 296
Waciwoci tabeli ....................................................................................................... 297
Pozycjonowanie ........................................................................................................... 297
Oblewanie tekstem innych elementw......................................................................... 298
Efekty wizualne............................................................................................................ 298
Waciwoci drukowania ............................................................................................. 298
Style dla przegldarki MS Internet Explorer ............................................................... 299

Rozdzia 3.

Dziedziczenie
Zrozumienie pojcia dziedziczenia wymaga od nas zapoznania si z hierarchi wanoci poszczeglnych znacznikw wewntrz dokumentu. Kaskadowe arkusze stylw
wprowadzaj pojcie drzewa i na jego przykadzie doskonale wida te zalenoci.
Poniej zamieszczam listing prostego kodu strony oraz rozrysowane dla niego drzewo.



 


 

 

 

  !"

"#$!
 

 



 !"
%#&%'


 

(


(

(


(

(


(

 



 

Przykadowe drzewo dla powyszego kodu wygldaoby tak jak na rysunku 3.1.
Analizujc rysunek, widzimy, e okrelenie np. koloru tekstu jako niebieski bezporednio dla pary znacznikw

 spowoduje jego uycie dla kadego elementu naszej strony znajdujcego si niej w hierarchii. Jeeli dodatkowo zdefiniujemy kolor listy
 
  jako zielony, to tekst caego dokumentu bdzie niebieski
poza list, ktra zostanie sformatowana za pomoc koloru zielonego. Idc dalej tym
tokiem rozumowania, dopiszmy do stylu odpowiedzialnego za formatowanie


 definicj wielkoci czcionki rwn 14 punktw. Strona wynikowa bdzie

54

ABC kaskadowych arkuszy stylw (CSS)

Rysunek 3.1.
Przykadowe
drzewo
dziedziczenia
zbudowane
na podstawie
opisanego
kodu HTML

sformatowana za pomoc czcionki o wielkoci 14 punktw i w kolorze niebieskim.

Natomiast lista bdzie miaa kolor zielony i identyczn wielko czcionki, podobnie
jak reszta dokumentu. Innymi sowy, styl odpowiedzialny za definicj czcionki bdzie
dziedziczony z nadrzdnego w hierarchii znacznikw

.
Innym prostszym przykadem dziedziczenia moe by deklaracja stylu dla odnonikw, ktra opiera si na pseudoklasach. Mam tutaj na myli przykad z definicj
dwch rodzajw odsyaczy.
)*+,

./*/)
,!01

2/,%&+#)
345%1

%#6%"#./!%+/,)
,/,#1

7
8!*)*+,

2/,%&+#)
395%1

Zwr uwag na to, e pierwszy selektor okrela rodzaj domylnego odnonika, ktremu przypisuje kolor granatowy, wysoko 18 punktw oraz brak podkrelenia.
Drugi selektor jest definicj klasy o nazwie
  i odpowiada za utworzenie hipercza o takich samych waciwociach jak gwny odsyacz, a jedyna rnica ma polega na wysokoci tekstu, ktra tym razem wynosi zaledwie 12 punktw. Dlatego te
wystarczy w przypadku mniejszego odsyacza zadeklarowa jedynie rozmiar czcionki, gdy pozostae elementy s dziedziczone z wyej stojcego w hierarchii odsyacza
podstawowego.
Nic nie stoi na przeszkodzie, by poza wielkoci zmieni rwnie kolor mniejszego
odsyacza. W takiej sytuacji odpowiedni kod powinien przybra nastpujc form:
)*+,

./*/)
,!01

2/,%&+#)
345%1

%#6%"#./!%+/,)
,/,#1

Rozdzia 3. Dziedziczenie i kaskadowo

55

8!*)*+,

2/,%&+#)
395%1

./*/)
#"1

Duy, domylny odsyacz, bdzie granatowy, natomiast mae hipercze okrelone za

pomoc klasy powinno przybra kolor czerwony.
Niestety, od zasady dziedziczenia zdarzaj si wyjtki wynikajce z niedoskonaoci
implementacji CSS przez producentw przegldarek. Przykadem moe by dokument, gdzie w znacznikach

 zdefiniujemy kolor tekstu, a nastpnie
wstawimy tabel przegldarka Netscape Navigator nie bdzie umiaa zastosowa
naszej reguy dla zawartoci komrek tabeli. Oczywicie w Mozilli, na ktrej bazuj
w niniejszej ksice, wspomniany problem z dziedziczeniem nie wystpuje. Rwnie
Opera w miar poprawnie dziedziczy style z elementw nadrzdnych.
Idealnym testem na sprawdzenie, czy nasza przegldarka poprawnie dziedziczy style
przypisane elementom nadrzdnym, s poniszy arkusz CSS:


:!.;/',"./*/)
$<+%#1

2/,%$#+;<%)
:/*"1

2/,%&+#)
3=5%1

2/,%&%*#)
+%!*+.1

./*/)
#"1

oraz kod HTML.



 


 
<%%5)$$$$/;(
( <%8*&%+.%"%"

<%8*

<#!"

8#%!
<%%5#>'+0?/,%#,%%5#
./,%#,%?%#6%<%8*1.<!&#%?@44=A9

8#%!
,!8#?B#$/"&
./,%#,%?& /$!C
*'./$#C
"*!C
&%/,
$$$

8#%!
,!8#?#&.+5%+/,
./,%#,%?BD%+
/5+&
&%/,


8#%!
,!8#?'%</
./,%#,%?!%/&
!,/$&+

8#%!
,!8#?/5+;<%
./,%#,%?"!$,+.%$/
 

B
<#2?!'&.&&
#*?&%*#&<##%
%5#?%#6%@@

%+%*#%'
@%/,

%+%*#

<#!"

:/"
.$+E.+#
,+.
,+#
&%/+
,!
5#&/"+#C
:
5&#'"/#*#8#,%
)2+&%*#%%#
&%/&/$!F

+,,8+
,!.,+!8+
 !"#8
%!+#;/
5/&%G5/$!,+!
8/H#
:F
5/,+H&
*+&%+,;C
,!
%D8
5/ I. #8
%#,
#*#8#,%

,!; D$+#8
&%/5,+!
5+#$&#;/

%!:*#
:/"#?9

%

%"
.$+E.+#
,+.
,+#
&%/+
,!
5#&/"+#C
:
5&#'"/#*#8#,%
)2+&%*#%%#
&%/&/$!F

+,,8+
,!.,+!8+
 !"#8
%!+#;/
5/&%G5/$!,+!
8/H#
:F
5/,+H&
*+&%+,;C
,!
%D8
5/ I. #8
%#,
#*#8#,%

,!; D$+#8
&%/5,+!
5+#$&#;/

56

ABC kaskadowych arkuszy stylw (CSS)

%"

%

%!:*#

:/"

<%8*

Porwnujc rysunki 3.2 oraz 3.3 widzimy, e w przypadku Internet Explorera tekst
wewntrz tabeli niczym nie rni si do tego na zewntrz, czyli ma wysoko 15 punktw, kolor czerwony oraz zosta pogrubiony i pochylony. Natomiast na rysunku 3.3
od razu wida, e zawarto tabeli jest wywietlona za pomoc domylnej czcionki
przegldarki.
Rysunek 3.2.
MS Internet
Explorer
przykad
poprawnego
dziedziczenia.
Tekst w tabeli
jest dokadnie
taki sam jak
na zewntrz

Rozwizaniem tego problemu jest odpowiednie przygotowanie arkusza stylw (patrz

rysunek 3.4).
C


:!.;/',"./*/)
$<+%#1

2/,%$#+;<%)
:/*"1

2/,%&+#)
3=5%1

2/,%&%*#)
+%!*+.1

./*/)
#"1

Ciekawym przykadem dziedziczenia jest niej przedstawiony przypadek.

Zawarto arkusza stylw:
.#$/,

2/,%&+#)
3=5%1

Rozdzia 3. Dziedziczenie i kaskadowo

Rysunek 3.3.
Netscape Navigator
przykad bdnego
dziedziczenia.
Tekst w tabeli
jest inny ni
na zewntrz

Rysunek 3.4.
Netscape Navigator
po odpowiednich
zmianach w kodzie
arkusza CSS potrafi
wywietli stron
zgodnie z naszymi
oczekiwaniami
jednak nadal
nie dziedziczy
stylw nadrzdnych
elementw

./*/)
#"1
7
3

2/,%&+#)
5%1
./*/)
+#*/,1
7

Przykadowy kod HTML:

<3
.*!&&?.#$/,!;D$#
&%/5,+!
5+#$&#;/
<3

57

58

ABC kaskadowych arkuszy stylw (CSS)

Analizujc definicj stylw dochodzimy do wniosku, e nagwek stopnia pierwszego

powinien mie wysoko tekstu rwn 30 punktw oraz kolor zielony. Jeeli przyjrzymy si samemu nagwkowi w kodzie stronie, to widzimy, e nasz nagwek ma
przypisan klas o nazwie
.
O zgrozo, co tu teraz zadziaa?... Ot nie jest to takie skomplikowane, gdy specyfikacja CSS okrela specyficzno poszczeglnych elementw. W moim przykadzie
specyficzno ksztatuje si nastpujco:
J  nisza specyficzno rwna 1,
J
 wysza specyficzno rwna 10,

Zgodnie z zaoeniami zawartymi w specyfikacji realizowana jest regua z wikszy

numerem. Dlatego w tym konkretnym przypadku nagwek zostanie wywietlony
czcionk o wysokoci 15 punktw w kolorze czerwonym gdy ta klasa ma wysz
specyficzno.
Czasami chcemy wyczy dziedziczenie pewnych stylw w czasie formatowania.
W takim przypadku naley skorzysta z wanoci danych stylw. Rwnie tym razem
opr si na przykadzie z nagwkiem. Chciabym, aby mj nagwek na stronie zosta wywietlony czcionk o wysokoci 15 punktw w kolorze zielonym. Niestety,
moja zachcianka to poczenie wybranych waciwoci klasy
 oraz selektora . Najprostszym rozwizaniem jest przygotowanie odpowiedniej klasy i przypisanie jej dla nagwka . Niestety, tym razem nie moemy dodawa nowych definicji
do arkusza, a jedynie dokona kosmetycznej poprawki. Jak ju wiesz, w poprzednim
przykadzie nagwek zosta sformatowany za pomoc klasy
, gdy miaa
ona wysz specyficzno, a styl dla selektora  zosta zupenie pominity. Teraz
skorzystamy z zaistniaej sytuacji i dla selektora , a dokadniej dla koloru zielonego,
dodamy polecenie . Zmodyfikowany arkusz jest widoczny poniej.
.#$/,

2/,%&+#)
3=5%1

./*/)
#"

7
3

2/,%&+#)
5%1

./*/)
;##,
+85/%!,%1

Zwr uwag na sposb, w jaki zostao dodane polecenie  do konstrukcji

stylu. Zawsze wystpuje po wartoci przypisanej dla waciwoci konkretnego selektora. Oczywicie sam kod HTML nie uleg adnej zmianie i nadal ma nastpujc posta:

<3
.*!&&?.#$/,!;D$#
&%/5,+!
5+#$&#;/
<3

Przypisywanie wanoci umoliwia zablokowanie dziedziczenia pewnych stylw

z nadrzdnych elementw, dziki czemu mamy jeszcze wiksze moliwoci kontrolowania wygldu strony WWW.

Rozdzia 3. Dziedziczenie i kaskadowo

59

Polecenie  jest poprawnie obsugiwane przez przegldarki, na ktrych

oparem si w niniejszej ksice. Niestety, w przypadku Netscape Navigatora nie
dziaa ono poprawnie i dany styl jest dziedziczony z elementu znajdujcego si wyej
w hierarchii.

Kaskadowo
Kolejnym bardzo wanym pojciem stosowanym w kaskadowych arkuszach stylw,
a przy tym wystpujcym w samej nazwie, jest kaskadowo. Funkcja ta odpowiada
za okrelenie hierarchii stosowanych stylw w dokumencie. Wiemy ju, e style do
dokumentu moemy wstawia na kilka sposobw (bezporednio w kodzie strony jako
atrybut dowolnego znacznika, w nagwku

, globalnie dla danego dokumentu oraz przez doczenie zewntrznego arkusza). Mieszanie zastosowanych
stylw jest jak najbardziej moliwe i czsto spotykane, dlatego konieczne stao si
okrelenie wanoci poszczeglnych metod. Zasada kaskadowoci przyjta przez
twrcw wyglda nastpujco: najpierw adowane i uwzgldniane s zewntrzne arkusze, nastpnie style wpisane do nagwka

, a na samym kocu style
wpisane bezporednio do znacznika. Takie rozwizanie umoliwia pen kontrol nad
dokumentem, a w przypadku sprzecznoci zdefiniowanych stylw uyty zostanie ten,
ktry jest najbliej formatowanego dokumentu.



 


 
<%%5)$$$$/;(
( <%8*&%+.%"%"

<%8*

<#!"

8#%!
<%%5#>'+0?/,%#,%%5#
./,%#,%?%#6%<%8*1.<!&#%?@44=A9

8#%!
,!8#?B#$/"&
./,%#,%?& /$!C
*'./$#C
"*!C
&%/,
$$$

8#%!
,!8#?#&.+5%+/,
./,%#,%?BD%+
/5+&
&%/,


8#%!
,!8#?'%</
./,%#,%?!%/&
!,/$&+

8#%!
,!8#?/5+;<%
./,%#,%?"!$,+.%$/
 

%+%*#%'
@%/,

%+%*#

&%*#
%5#?%#6%@@

./*/)
#"1

&%*#

<#!"

:/"

<3!; D$#
&%/5,+!
5+#$&#;/
2/8!%/$!,
5#
!'&
@@
$5+&!,
$
 
<3

<3
&%*#?./*/)
;##,1
2/,%&+#)
35%!; D$#
&%/5,+!
5+#$&#;/
<3

:/"

<%8*

Rysunek 3.5 przedstawia przykad dziaania kaskady. Domylnie dla kadego nagwka stopnia pierwszego zosta zdefiniowany kolor czerwony bezporednio w


 dokumentu. Nastpnie dla drugiego nagwka w samym znaczniku


 wpisaem dodatkowy styl okrelajcy kolor tekstu jako zielony o wielkoci 10

60

ABC kaskadowych arkuszy stylw (CSS)

punktw. Oczywicie kady nastpny nagwek stopnia pierwszego, wpisany do dokumentu i ograniczony tylko znacznikami

 bez dodatkowych wpisw, rwnie bdzie sformatowany zgodnie z definicj znajdujc si w

 strony.
Rysunek 3.5.
Przykad prostej
kaskady

Na pocztku tego rozdziau nie napisaem wszystkiego, gdy chciaem w moliwie

najatwiejszy sposb pokaza zasad dziaania kaskady. Ot kaskady nie ograniczaj
si jedynie do trzech moliwoci zdefiniowania stylw w dokumencie jest jeszcze
kilka innych poziomw. W praktyce wyglda to tak, e kada przegldarka ma zdefiniowane swoje domylne arkusze, za pomoc ktrych formatuje znaczniki w dokumencie. Na przykad, jeeli w kodzie strony znajduje si znacznik

, dla ktrego nie ustawiono adnych stylw, to przegldarka wywietli taki nagwek zgodnie
z tym, jak j zaprogramowano dla tego typu elementw.
Niektre przegldarki pozwalaj na przypisanie swoich arkuszy stylw, ktre potrafi
zastpi domylne formatowanie przegldarki. W ten sposb zdefiniowany arkusz jest
kolejnym poziomem kaskady.
Trzecim poziomem kaskady s style zdefiniowane przez projektanta strony WWW.
Innymi sowy, s to te wszystkie polecenia, ktre zostay opisane w tej ksice.
W praktyce wyglda to mniej wicej tak, e jeeli internauta wejdzie na stron, na
ktrej nie zastosowano adnych stylw, to przegldarka skorzysta ze swoich domylnych ustawie. Jeeli waciciel przegldarki przygotuje wasny arkusz stylw i wejdzie na t sam stron, na ktrej nie ma zdefiniowanych adnych stylw, to do wywietlenia jej zawartoci zostanie uyty arkusz uytkownika, gdy jest on waniejszy
w hierarchii kaskad. Idc dalej tym tokiem mylenia, rozpatrzmy trzeci przypadek,
w ktrym internauta wejdzie na stron, w ktrej umieszczone dowolne style. Teraz
zamy, e nadal korzysta z przegldarki, w ktrej zdefiniowa swj wasny arkusz
stylw. W takim przypadku do wywietlenia strony zostanie uyty styl przygotowany
przez autora strony, gdy stoi on wyej w hierarchii ni domylny styl przegldarki
oraz arkusz internauty. Na rysunku 3.6 dokadnie wida to, co staraem si opisa
powyej.
Oczywicie w przypadku arkusza autora mamy do czynienia z kolejnymi kaskadami,
o ktrych wspominaem na samym pocztku.

Rozdzia 3. Dziedziczenie i kaskadowo

61

Rysunek 3.6.
W rywalizacji arkuszy
wygrywa arkusz
autora, zaraz za nim
jest internauta,
a na ostatnim miejscu
znajduje si domylny
arkusz przegldarki

Wewntrz samego arkusza stylw rwnie mamy do czynienia z kaskadami, a idealnym przykadem takiej sytuacji by listing przedstawiony na pocztku tego rozdziau
oraz rysunek 3.5. W jednym dokumencie stary si style wpisane do nagwka


 ze stylami wpisanymi bezporednio do danego znacznika. Pomimo tego, e
obie deklaracje dotyczyy tego samego elementu, wygra styl wpisany bezporednio
do formatowanego akapitu. W razie potrzeby sytuacj tak moemy zmieni poprzez
zastosowanie polecenia .



 


 
<%%5)$$$$/;(
( <%8*&%+.%"%"

<%8*

<#!"

8#%!
<%%5#>'+0?/,%#,%%5#
./,%#,%?%#6%<%8*1.<!&#%?@44=A9

8#%!
,!8#?B#$/"&
./,%#,%?& /$!C
*'./$#C
"*!C
&%/,
$$$

8#%!
,!8#?#&.+5%+/,
./,%#,%?BD%+
/5+&
&%/,


8#%!
,!8#?'%</
./,%#,%?!%/&
!,/$&+

8#%!
,!8#?/5+;<%
./,%#,%?"!$,+.%$/
 

%+%*#%'
@%/,

%+%*#

&%*#
%5#?%#6%@@

./*/)
#"
+85/%!,%1

&%*#

<#!"

:/"

<3!; D$#
&%/5,+!
5+#$&#;/
2/8!%/$!,
5#
!'&
@@
$5+&!,
$
 
<3

<3
&%*#?./*/)
;##,1
2/,%&+#)
35%!; D$#
&%/5,+!
5+#$&#;/
<3

:/"

<%8*

Przykad, ktry jest widoczny powyej, spowoduje wywietlenie nagwkw o dwch

rnych wielkociach ale o identycznym kolorze. Stanie si tak pomimo tego, e bezporednio do

 wpisaem styl nadajcy temu elementowi kolor zielony.

Podsumowanie
Zrozumienie pojcia kaskadowo i dziedziczenie ma ogromne znaczenie dla wiadomej pracy ze stylami dlatego jeeli masz jakie problemy z ktrym z elementw
opisanych w tym rozdziale to sprbuj jeszcze raz si z nim zapozna. W przypadku

62

ABC kaskadowych arkuszy stylw (CSS)

gdy nadal czego nie rozumiesz sprbuj przepisa poszczeglne przykady a jeeli to
nic nie da napisz do mnie. Pytania przelij na adres eathan@irc.pl a w miar swoich
moliwoci postaram Ci si pomc.