Po Prostu HTML 4. Wydanie III

IDZ DO
PRZYKADOWY ROZDZIA
SPIS TRECI
KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG
TWJ KOSZYK
DODAJ DO KOSZYKA
CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK
CZYTELNIA
FRAGMENTY KSIEK ONLINE
Po prostu HTML 4.
Wydanie III
Autor: Elizabeth Castro
Tumaczenie: Piotr Rajca
ISBN: 83-7361-039-1
Tytu oryginau: HTML for the World Wide Web
with XHTML and CSS VQG
Format: B5, stron: 490
Wrd ksiek powiconych jzykowi HTML, Po prostu HTML 4. Wydanie III zajmuje
szczegln pozycj. To prawdziwy bestseller i najpopularniejsza w Polsce ksika
o HTML-u, ktra doczekaa si ju trzech edycji. Najnowsze wydanie przynosi
najwiesze informacje na temat jzyka XHTML, nowego standardu tworzenia stron
internetowych. Nowoci s liczne porady niezbdne webmasterom opracowujcym
strony internetowe dedykowane urzdzeniom przenonym (palmtopom, telefonom
komrkowym).
Szczegln zalet ksiki jest przejrzysty ukad i prosty jzyk, ktrym zostaa napisana.
Zamiast dugich objanie znajdziesz w niej krtkie, trafne i zwize informacje.
Towarzyszce im liczne ilustracje sprawiaj, e przyswajanie przedstawionej w niej
wiedzy jest szybkie i atwe.
Dziki ksice:
Stworzysz wasne strony wykorzystujc HTML i XHTML
Nauczysz si stosowa CSS (kaskadowe arkusze stylw)
Dowiesz si, jak tworzy elastyczne ukady stron, dostosowujce si do wieloci
ekranu uytkownika
Uczynisz strony atrakcyjniejszymi umieszczajc klipy wideo, pliki dwikowe
w formacie MP3 oraz inne multimedia bezporednio na stronach WWW
Korzystajc z WML-a stworzysz strony przeznaczone dla urzdze przenonych
Skorzystasz z bogatego dowiadczenia autorki ksiki
Z poprzednich wyda tej ksiki tysice ludzi nauczyo si tworzy strony WWW.
By moe odwiedzae ich witryny w Internecie. Teraz i Ty masz szans poznania
tajnikw WWW i zaprosi wszystkich ma samodzielnie stworzon stron.
Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl
Spis treci
Spis treci
Wstp
13
Internet, WWW oraz HTML.......................................................................................14

Otwarty, jednak nie identyczny ...................................................................................15
Wojny przegldarek ...................................................................................................16
Denie do wprowadzania standardw.........................................................................17
Rzeczywisto ...........................................................................................................20
Czego naley uywa? ...............................................................................................21
Kilka sw o niniejszej ksice....................................................................................23
Witryna WWW Autorki .............................................................................................24
Rozdzia 1.
Elementy tworzce strony WWW
25
Rozdzia 2.
Praca z dokumentami (X)HTML
47
Projektowanie witryny ...............................................................................................48

Tworzenie nowej strony WWW ..................................................................................49
Zapisywanie stron WWW...........................................................................................50
Kilka sw o programie Microsoft Word i stronach WWW............................................52
Okrelanie strony domylnej (domowej) ...................................................................53
Edycja stron WWW...................................................................................................54
Organizowanie plikw................................................................................................55
Wywietlanie stron w przegldarce..............................................................................56
Czerpanie inspiracji od innych ....................................................................................57
Rozdzia 3.
Podstawowa struktura dokumentw (X)HTML
59
Rozpoczynanie strony ................................................................................................60

Tworzenie podstawowej struktury kodu.......................................................................62
Okrelanie sposobu kodowania ...................................................................................63
Nadawanie tytuu .......................................................................................................64
Tworzenie nagwkw sekcji ......................................................................................65
Rozpoczynanie nowego akapitu ..................................................................................66
Spis treci
Znaczniki: elementy, atrybuty oraz wartoci.................................................................26

Tekstowa zawarto stron WWW................................................................................30
cza, obrazki oraz inna zawarto nie bdca tekstem .................................................31
Nazwy plikw ...........................................................................................................32
Adresy URL..............................................................................................................33
HTML a XHTML......................................................................................................36
Wersje, rodzaje oraz DOCTYPE.................................................................................38
Domylny sposb wywietlania (X)HTML ..................................................................40
Dodawanie stylw do stron WWW..............................................................................41
Kaskada: kiedy style koliduj ze sob ..........................................................................42
Wartoci waciwoci .................................................................................................44
Spis treci
Nazywanie elementw................................................................................................67
Podzia strony na dziay..............................................................................................68
Tworzenie obszarw wewntrzwierszowych ................................................................69
Tworzenie nowych wierszy ........................................................................................70
Dodawanie komentarzy ..............................................................................................71
Nadawanie nazw elementom stron...............................................................................72
Rozdzia 4.
Podstawy formatowania tekstu
73
Tworzenie tekstu pogrubionego oraz kursywy ..............................................................74

Zmiana wielkoci tekstu .............................................................................................75
Stosowanie czcionki o staej szerokoci znakw ...........................................................76
Stosowanie tekstu preformatowanego ..........................................................................77
Cytaty.......................................................................................................................78
Tworzenie indeksw dolnych i grnych .......................................................................80
Oznaczanie zmodyfikowanego tekstu ..........................................................................81
Wyjanianie skrtw..................................................................................................82
Rozdzia 5.
Tworzenie obrazw na potrzeby stron WWW
83
Spis treci
O obrazach tworzonych na potrzeby stron WWW.........................................................84

Zdobywanie obrazw .................................................................................................89
Polecenie Zapisz dla Weba .........................................................................................90
Zmniejszanie wymiarw obrazu ..................................................................................92
Tworzenie przezroczystoci ........................................................................................93
Zapisywanie obrazu z przezroczystymi obszarami ........................................................94
Symulacja przezroczystoci ........................................................................................95
Wykorzystanie (przewanie) bezpiecznych kolorw......................................................96
Redukcja iloci kolorw .............................................................................................98
Progresywne wywietlanie obrazu ...............................................................................99
Rozmywanie obrazkw JPEG dla uatwienia kompresji...............................................100
Tworzenie animowanych obrazw GIF......................................................................101
Rozdzia 6.
Wykorzystanie obrazw
103
Wstawianie ilustracji na stron..................................................................................104

Tekst zastpczy .......................................................................................................105
Okrelanie wymiarw obrazu w celu jego szybszego wywietlenia...............................106
Skalowanie ilustracji ................................................................................................108
czenie ikon z obrazami .........................................................................................109
Otaczanie obrazw tekstem ......................................................................................110
Zakoczenie otaczania tekstem .................................................................................112
Zwikszanie odstpu wok obrazw.........................................................................113
Wyrwnywanie obrazkw ........................................................................................114
Poziome linie...........................................................................................................115
Rozdzia 7.
cza
117
Tworzenie czy do innych stron ...............................................................................118

Odnoniki ...............................................................................................................120
cza wykorzystujce odnoniki ...............................................................................121
Tworzenie cza do wybranego okna .........................................................................122
Spis treci
Okrelenie domylnego okna ....................................................................................123
Tworzenie innych rodzajw czy .............................................................................124
Definiowanie klawiszy skrtw dla czy...................................................................126
Okrelenie kolejnoci czy dla klawisza TAB............................................................127
Przyciski nawigacyjne ..............................................................................................128
Podzia obrazka na obszary przypisane do rnych czy.............................................129
Tworzenie map odnonikw obsugiwanych po stronie klienta.....................................130
Korzystanie z mapy interpretowanej na serwerze........................................................132
Rozdzia 8.
Tworzenie stylw
133
Tworzenie reguy stylu .............................................................................................134

Tworzenie selektorw ..............................................................................................135
Wybr elementw na podstawie nazwy .....................................................................136
Wybieranie elementu na podstawie klasy lub identyfikatora ........................................137
Wybieranie elementw na podstawie kontekstu ..........................................................138
Wybieranie czy na podstawie ich stanu ...................................................................141
Wybieranie fragmentw elementu .............................................................................142
Wybieranie elementw na podstawie atrybutw .........................................................144
Definiowanie grup elementw...................................................................................145
czenie selektorw.................................................................................................146
Rozdzia 9.
Stosowanie stylw
147
Rozdzia 10. Formatowanie przy wykorzystaniu stylw
157
Wybr czcionki .......................................................................................................158

Osadzanie czcionek w dokumencie............................................................................159
Tworzenie czcionki pochyej (kursywy).....................................................................160
Pogrubianie czcionki ................................................................................................161
Okrelanie wielkoci czcionki ...................................................................................162
Okrelanie wysokoci linii ........................................................................................164
Jednoczesne okrelanie wszystkich parametrw czcionki.............................................165
Definiowanie koloru tekstu .......................................................................................166
Zmiana koloru ta tekstu ...........................................................................................167
Kontrola odstpw pomidzy wyrazami i literami.......................................................168
Dodawanie wci akapitowych .................................................................................169
Parametry odstpw.................................................................................................170
Wyrwnywanie tekstu..............................................................................................171
Zmiana wielkoci liter ..............................................................................................172
Wykorzystanie kapitalikw.......................................................................................173
Dekorowanie tekstu .................................................................................................174
Spis treci
Tworzenie zewntrznego arkusza stylw....................................................................148

Doczanie zewntrznego arkusza stylw...................................................................149
Udostpnianie alternatywnych arkuszy stylw ............................................................150
Tworzenie wewntrznego arkusza stylw...................................................................151
Importowanie zewntrznych arkuszy stylw...............................................................152
Lokalne stosowanie stylw .......................................................................................153
Znaczenie pooenia.................................................................................................154
Dodawanie komentarzy do arkuszy stylw.................................................................155
Spis treci
Rozdzia 11. Okrelanie ukadu strony za pomoc stylw
175
Okrelanie struktury strony.......................................................................................176

Model prostoktw ..................................................................................................177
Wywietlanie i ukrywanie elementw ........................................................................178
Bezwzgldne rozmieszczanie elementw ...................................................................179
Okrelanie staego pooenia elementu w oknie przegldarki .......................................180
Przesuwanie elementw wzgldem ich naturalnego pooenia......................................181
Modyfikowanie ta ...................................................................................................182
Zmiana koloru .........................................................................................................184
Modyfikacja wskanika myszy..................................................................................185
Tworzenie obramowa.............................................................................................186
Dodawanie wypenienia wok elementu ...................................................................188
Okrelanie marginesw wok elementu ....................................................................189
Okrelanie wysokoci i szerokoci elementu...............................................................190
Pozycjonowanie elementw w trzecim wymiarze .......................................................192
Okrelanie sposobu wywietlania zawartoci elementu................................................193
Otaczanie elementw tekstem ...................................................................................194
Kontrola sposobu otaczania elementw......................................................................195
Wyrwnywanie elementw w pionie .........................................................................196
Rozdzia 12. Arkusze stylw przeznaczone do drukowania stron
197
Spis treci
Stosowanie arkuszy stylw przeznaczonych

dla konkretnych rodzajw mediw ............................................................................198
Czym rni si style przeznaczone do drukowania ....................................................199
Kontrola dzielenia dokumentw na strony..................................................................200
Inne waciwoci CSS, charakterystyczne
dla sporzdzania wydrukw ......................................................................................201
Rozdzia 13. Listy
203
Tworzenie list wypunktowanych i uporzdkowanych ..................................................204

Okrelanie ksztatu znacznikw (punktw).................................................................206
Okrelanie pocztkowej wartoci numeracji punktw..................................................207
Stosowanie niestandardowych znacznikw.................................................................208
Okrelanie miejsca wywietlania znacznikw .............................................................209
Okrelanie wszystkich waciwoci listy w jednym miejscu .........................................210
Tworzenie list definicji.............................................................................................211
Okrelanie wygldu list zagniedonych ....................................................................212
Rozdzia 14. Tabele
215
Projektowanie ukadu strony.....................................................................................216

Tworzenie prostej tabeli ...........................................................................................217
Dodawanie krawdzi tabeli .......................................................................................218
Okrelanie szerokoci tabel.......................................................................................220
Wyrwnywanie tabeli do rodka strony .....................................................................222
Otaczanie tabeli tekstem ...........................................................................................223
czenie tabel..........................................................................................................224
Wyrwnywanie zawartoci komrek .........................................................................226
Zmiana koloru ta.....................................................................................................228
Spis treci
Kontrola odstpw pomidzy i wewntrz komrek .....................................................230
czenie komrek lecych w ssiednich kolumnach..................................................232
czenie komrek w ssiednich wierszach .................................................................233
Podzia tabeli na grupy kolumn .................................................................................234
Podzia tabeli na poziome sekcje ...............................................................................236
Wybr linii do wywietlania .....................................................................................237
Kontrola amania wierszy w komrce ........................................................................239
Przyspieszenie wywietlania tabeli ............................................................................240
Rozdzia 15. Ramki
241
Rozdzia 16. Formularze
263
Skrypty CGI............................................................................................................264
Zdobywanie skryptw ..............................................................................................266
Wykorzystanie skryptw doczonych do tej ksiki ...................................................267
Przygotowanie skryptu do uycia ..............................................................................268
Tworzenie formularza ..............................................................................................269
Przesyanie danych poczt elektroniczn....................................................................270
Wykorzystanie serwisw obsugujcych formularze....................................................271
Tworzenie pl tekstowych ........................................................................................272
Tworzenie pl hasa .................................................................................................273
Tworzenie przyciskw opcji .....................................................................................274
Tworzenie pl wyboru .............................................................................................275
Menu......................................................................................................................276
Obszary tekstowe ....................................................................................................278
Umoliwienie uytkownikom przesyania plikw .......................................................279
Kilka uwag o polach ukrytych...................................................................................280
Dodawanie pl ukrytych do formularzy .....................................................................281
Tworzenie przycisku wysyajcego............................................................................282
Czyszczenie zawartoci formularza ...........................................................................284
Aktywne obrazki......................................................................................................286
Organizacja elementw formularzy ...........................................................................287
Spis treci
Tworzenie prostego ukadu ramek .............................................................................242

Ramki w kolumnach ................................................................................................244
Tworzenie ramek w wierszach i kolumnach................................................................245
Kombinowany ukad ramek ......................................................................................246
Ramki wpisane ........................................................................................................248
Okrelanie wielkoci marginesw ramki ....................................................................249
Wywietlanie lub chowanie paskw przewijania.........................................................250
Wybieranie koloru krawdzi .....................................................................................251
Modyfikacja gruboci krawdzi.................................................................................252
Uniemoliwienie uytkownikowi zmiany rozmiarw ramki .........................................254
Wywietlanie czy w konkretnych ramkach ..............................................................255
Okrelanie miejsca docelowego dla cza ...................................................................256
Zmiana domylnego miejsca docelowego...................................................................257
Zagniedanie ukadw ramek ..................................................................................258
Tworzenie zamiennika ramek....................................................................................259
Osadzanie zawartoci przy uyciu obiektw ...............................................................260
Zapewnianie wikszej dostpnoci ramek ..................................................................262
Spis treci
Formalne nadanie etykiety elementowi formularza......................................................288
Okrelenie kolejnoci klawisza TAB w formularzach..................................................289
Definiowanie klawiszy skrtw.................................................................................290
Dezaktywacja elementw formularza.........................................................................291
Uniemoliwienie modyfikacji elementw...................................................................292
Rozdzia 17. Multimedia
293
Spis treci
Aplikacje pomocnicze i moduy dodatkowe (plug-ins).................................................294

Zdobywanie odtwarzaczy dla uytkownikw..............................................................296
Pobierania plikw multimedialnych...........................................................................297
Osadzanie w stronach filmw QuickTime ..................................................................298
Skalowanie filmw QuickTime .................................................................................300
Odtwarzanie filmw QuickTime w ptli ....................................................................301
Umieszczanie dwikw QuickTime na stronach WWW ............................................302
Ukrywanie dwikw QuickTime .............................................................................303
Odtwarzanie plikw za pomoc programu Windows Media Player...............................304
Doczanie apletw ..................................................................................................306
Osadzanie innych plikw multimedialnych.................................................................307
Doczanie plikw multimedialnych ..........................................................................308
Tworzenie automatycznego pokazu slajdw ...............................................................309
Tworzenie szyldw ..................................................................................................310
Dwik odtwarzany w tle .........................................................................................311
Rozdzia 18. Skrypty
313
Wstawianie automatycznego skryptu ......................................................................314

Wywoanie zewntrznego skryptu automatycznego.....................................................315
Wyzwalanie skryptu.................................................................................................316
Tworzenie przycisku, ktry wykonuje skrypt .............................................................318
Dodawanie informacji zastpczych............................................................................319
Ukrywanie skryptu przed starszymi przegldarkami....................................................320
Ukrywanie skryptw przed analizatorami skadni XML ..............................................321
Definiowanie domylnego jzyka skryptowego ..........................................................322
Rozdzia 19. Podstawy JavaScriptu
323
Dodawanie aktualnej daty i godziny ..........................................................................324

Zmiana etykiety stanu cza ......................................................................................325
Zmiana zawartoci kilku ramek przy uyciu jednego cza...........................................326
Wywietlanie stron w odpowiednich ramkach ............................................................327
Podmienianie obrazkw po wskazaniu ich myszk .....................................................328
adowanie obrazkw do pamici podrcznej..............................................................330
Okrelanie wielkoci nowego okna przegldarki .........................................................331
Rozdzia 20. Symbole oraz inne znaki

nie nalece do alfabetu angielskiego
333
Kilka sw o sposobach kodowania ...........................................................................334

Zapisywanie stron przy uyciu odpowiedniego sposobu kodowania..............................336
Edytowanie stron przy wykorzystaniu poprawnego sposobu kodowania........................337
10
Spis treci
Deklarowanie sposobu kodowania strony...................................................................338
Dodawanie znakw nie nalecych do danego sposobu kodowania...............................340
Okrelanie jzyka strony ..........................................................................................342
Rozdzia 21. Stare sposoby formatowania
343
Okrelanie domylnej postaci tekstu ..........................................................................344

Formatowanie fragmentw tekstu..............................................................................346
Inny sposb okrelania domylnych kolorw..............................................................348
Zmienianie koloru czy ...........................................................................................349
Przekrelenia i podkrelenia tekstu ............................................................................350
Tekst migajcy ........................................................................................................351
Rozdzia 22. Okrelanie ukadu strony stary sposb
353
Rozdzia 23. WML: strony WWW dla urzdze przenonych
369
Przygotowywanie serwera ........................................................................................370

Pocztek tworzenia strony WML ..............................................................................371
Tworzenie karty ......................................................................................................372
Tworzenie podstawowej zawartoci...........................................................................373
Doczanie obrazw.................................................................................................374
Tworzenie tabel .......................................................................................................375
Tworzenie odnonikw ............................................................................................376
Programowanie przyciskw ......................................................................................378
Tworzenie zada warunkowych ................................................................................380
Planowanie zada ....................................................................................................381
Nawizywanie poczenia.........................................................................................382
Tworzenie i stosowanie zmiennych............................................................................383
Tworzenie pl tekstowych ........................................................................................384
Tworzenie list..........................................................................................................386
Przetwarzanie informacji podawanych przez uytkownikw ........................................388
Tworzenie elementw na wielu stronach ....................................................................390
Ograniczanie dostpu do talii ....................................................................................391
Testowanie stron WML............................................................................................392
11
Spis treci
Kolor ta..................................................................................................................354
Stosowanie obrazw ta ............................................................................................355
Wyrodkowanie elementw na stronie .......................................................................356
Okrelenie marginesw ............................................................................................357
Zapobieganie dzieleniu wierszy.................................................................................358
Warunkowe amanie wierszy ....................................................................................359
Okrelanie odstpu pomidzy akapitami ....................................................................360
Tworzenie wci......................................................................................................361
Tworzenie wci za pomoc list ................................................................................362
Wstawianie pustych prostoktw ..............................................................................363
Wykorzystanie prostoktw pikselowych...................................................................364
Wykorzystanie kolumn.............................................................................................365
Rozmieszczanie elementw na warstwach..................................................................366
Spis treci
Rozdzia 24. Testowanie stron WWW
393
Sprawdzanie poprawnoci kodu ................................................................................394

Sprawdzanie prostych bdw: HTML.......................................................................395
Sprawdzanie prostych bdw: XHTML ....................................................................396
Sprawdzanie prostych bdw: CSS...........................................................................397
Testowanie stron .....................................................................................................398
Gdy przegldarka wywietla kod...............................................................................400
Obrazki nie s wywietlane.......................................................................................401
Wspaniae w jednej przegldarce, a brzydkie w innych................................................402
Gdy strona nie jest wywietlana w Netscape 4............................................................403
Wci nie dziaa?.....................................................................................................404
Rozdzia 25. Publikowanie stron w sieci WWW
405
Jak znale serwer dla swoich stron...........................................................................406

Gdzie w Polsce opublikowa strony WWW?..............................................................407
Onet.pl Republika WWW ....................................................................................411
Rejestracja nazwy domeny .......................................................................................419
Przesyanie plikw na serwer ....................................................................................420
Rozdzia 26. Zdobywanie uytkownikw
423
Spis treci
O sowach kluczowych.............................................................................................424
Jawne podawanie sw kluczowych ...........................................................................425
Opis strony..............................................................................................................426
Zarzdzanie innymi informacjami o stronie ................................................................427
Jak unikn odwiedzin .............................................................................................428
Zapobieganie archiwizacji strony ..............................................................................429
Tworzenie strony z adresami.....................................................................................430
Dodawanie witryny do wyszukiwarki ........................................................................432
Jak zapewni wysok pozycj strony w wynikach wyszukiwania .................................433
Pisanie stron atwych do indeksowania ......................................................................434
Inne sposoby reklamowania witryny ..........................................................................435
Dodatek A
Elementy i atrybuty (X)HTML
437
Dodatek B
Waciwoci i wartoci CSS
447
Dodatek C
Zdarzenia wbudowane
455
Dodatek D
Symbole i znaki (X)HTML
457
Dodatek E
Wartoci szesnastkowe
467
Dodatek F
Narzdzia (X)HTML
469
Skorowidz
473
12
11
Okrelanie ukadu strony za pomoc stylw
Okrelanie ukadu strony

za pomoc stylw
Rozdzia 11. Okrelanie ukadu strony za pomoc stylw
Podstawow wad kaskadowych arkuszy stylw,

w szczeglnoci w odniesieniu do okrelania ukadu stron,
jest fakt, i starsze przegldarki ich nie obsuguj lub
obsuguj je w sposb niewaciwy. W szczeglnoci
przegldarka Netscape 4.x cechuje si wyjtkowo z obsug
moliwoci CSS zwizanych z okrelaniem ukadu strony.
Nawet w najnowszych wersjach przegldarek nie wszystkie
moliwoci CSS s obsugiwane poprawnie. Czsto te
twrcy rnych przegldarek maj odmienne opinie odnonie
tego, ktre rozwizanie naley uzna za poprawne. Istniej
jednak sposoby na umoliwienie ogldania stron o ukadach
tworzonych za pomoc stylw osobom korzystajcym
ze starszych przegldarek oraz na ominicie rnic
w dziaaniu nowych wersji przegldarek; informacje na
ten temat zamieciam w rozdziale 9., Stosowanie stylw.
Rysunek 11.1. Ukad tej strony zosta okrelony przy

wykorzystaniu CSS. Zosta on szczegowo i dokadnie
wyjaniony w dalszej czci niniejszego rozdziau
Przykady uyte w tym rozdziale przelicznie

zaprojektowane przez Erica Costello (http://www.glish.com/)
wygldaj doskonale w nowoczesnych przegldarkach,
ale take w ich starszych wersjach nie trac wiele na swej
atrakcyjnoci (rysunek 11.1).
175
Wykorzystanie CSS do okrelania ukadu strony ma kilka

zalet w porwnaniu z innymi metodami, takimi jak na
przykad tabele (ktre opisaam w rozdziale 14.). Przede
wszystkim CSS doskonale nadaj si do tworzenia
elastycznych ukadw, ktre poszerzaj si lub zwaj
w zalenoci od wielkoci okna przegldarki. Poza tym
oddzielenie zawartoci strony od instrukcji okrelajcych
jej wygld daje moliwo bardzo atwego wykorzystania
tego samego ukadu w caej witrynie. Dziki temu,
modyfikujc jedynie plik CSS, mona take bardzo atwo
i szybko zmieni wygld caej witryny. Co wicej, poczenie
CSS z (X)HTML pozwala zmniejszy rozmiar plikw, co
z kolei oznacza krtszy czas oczekiwania na wywietlenie
witryny. W kocu, poniewa CSS i (X)HTML s aktualnie
uywanymi standardami, mona mie gwarancj, e strony
utworzone zgodnie z ich zaoeniami bd poprawnie
wywietlane w przyszych wersjach przegldarek (poza tym
stosowanie tych standardw stanie si koniecznoci
dla profesjonalnych projektantw stron).
Rozdzia 11.
Okrelanie struktury strony

Najwaniejszym aspektem CSS jest rozdzielenie
zawartoci strony i regu formatujcych oraz
okrelajcych styl. W ten sposb pozbywamy si cisych
dyrektyw definiujcych wygld strony i uzyskujemy
elastyczno, gwarantujc poprawn prezentacj strony
w rnych przegldarkach, systemach operacyjnych
oraz urzdzeniach wyjciowych (nawet na wydrukach).
Prawdopodobnie najwaniejsz cech stron, ktrych ukad
ma by okrelany za pomoc arkuszy stylw, jest ich
wewntrzna struktura. Przemylan, logiczn struktur
bdzie znacznie atwiej dostosowa do wicej ni jednego
rodzaju urzdze wyjciowych.
Okrelanie struktury strony
Aby okreli struktur strony:

1. Utwrz logiczne sekcje dokumentu w formie
elementw . Na naszej przykadowej stronie mona
wyrni dzia nawigacyjny (ang. navigation),
w ktrym zostan umieszczone poczenia z innymi
stronami, dzia zawierajcy obraz ta dziau
nawigacyjnego oraz dzia treci (ang. content)
zawierajcy podstawow tre strony, czyli tekst
i obrazki. Strona zawiera take dzia kalendarz,
bdcy ruchomym paskiem bocznym, sucym
do wywietlania przyszych zdarze.
Rysunek 11.2. Oto dokument, ktrego bd uywa

w tym rozdziale. Zwr uwag, e skada si on z trzech
podstawowych dziaw navigation (czci nawigacyjnej),
bg oraz content (tre). Peny kod strony mona znale
w przykadach doczonych do ksiki
2. Rozmie elementy w kolejnoci, ktra ma sens

nawet wtedy, gdy arkusze stylw nie s obsugiwane.
Na przykad na samym pocztku strony umie
tytu, za nim spis treci, a na kocu waciw tre
strony. Dziki temu wci bdziesz mg dowolnie
rozmieszcza elementy, wykorzystujc CSS,
a strona zawsze bdzie mie sensowny wygld
nawet jeli style nie bd obsugiwane (oczywicie
kolejno rozmieszczenia elementw zaley
od sytuacji, docelowej grupy odbiorcw oraz
wielu innych czynnikw. Pamitaj, aby cay czas
zastanawia si nad sposobami zapewnienia
dostpnoci strony, nawet w przypadkach,
gdy CSS nie bd stosowane).
Rysunek 11.3. Oto, jak nasza strona wyglda w przypadku,
3. W spjny sposb uywaj elementw tworzcych
nagwki (, i tak dalej), aby okreli znaczenie
informacji umieszczonych na stronie.
4. Stosuj komentarze, aby wskaza rne fragmenty
strony oraz opisa ich zawarto.
176
gdy style w ogle nie s wykorzystywane (w przegldarce

Netscape 4 dla Windows). Ze wzgldu na swoj odpowiedni
struktur wyglda ona cakiem przyzwoicie, cho moe nieco
spartasko
Model prostoktw
Rysunek 11.4. Prostokt kadego elementu posiada

cztery istotne cechy okrelajce jego wielko (podane tutaj
w kolejnoci od rodka obszaru elementu): obszar zawartoci,
wypenienie, krawdzie oraz margines. Kad z tych waciwoci
(a nawet wybrane cechy kadej z nich) mona okrela
niezalenie od pozostaych
Wykorzystujc CSS, mona okreli pooenie

prostokta kadego elementu strony, co daje nam
znaczc kontrol nad jej ukadem.
Zgodnie z tym, co podaam wczeniej (na stronie 28),
prostokt elementu moe mie charakter pojemnika
(przez co za elementem zostanie utworzony nowy
wiersz) lub charakter wewntrzwierszowy (i w takim
przypadku nowy wiersz za elementem nie bdzie
tworzony). Wanie ta cecha okrela pocztkowy
ukad strony: domylnie elementy s wywietlane
w kolejnoci, w jakiej wystpuj w kodzie (X)HTML,
przy czym nowe wiersze s tworzone na pocztku
i na kocu prostoktw elementw blokowych.
Istniej cztery podstawowe sposoby okrelenia
pooenia prostokta elementu: mona go pozostawi
w naturalnym pooeniu (domylnym, okrelanym
take jako statyczne), mona usun element
z naturalnego toku rozmieszczania i okreli dokadnie
jego pooenie w odniesieniu do elementu nadrzdnego
(pooenie bezwzgldne) lub caej strony (pooenie
ustalone), mona wreszcie te przesun element
wzgldem jego pooenia naturalnego (pooenie
wzgldne). Co wicej, jeli prostokty elementw
zachodz na siebie wzajemnie, mona okreli
kolejno, w jakiej powinny by wywietlane
(tak zwany z-indeks).
Po wskazaniu, gdzie naley wywietli prostokt
elementu, mona zaj si jego wygldem i okreli
jego wypenienie, krawdzie, marginesy, wielko,
wyrwnanie, kolor i tak dalej. Wszystkie te cechy
zostay opisane w niniejszym rozdziale.
Zwr uwag, e niektre waciwoci zwizane
z ukadem, w szczeglnoci te, ktrych wartoci s
okrelane w jednostkach em lub w formie wartoci
procentowych, s uzalenione od elementu nadrzdnego.
Pamitaj, e element nadrzdny to ten, w ktrym
element biecy jest umieszczony (patrz strona 28).
177
Model prostoktw
Rysunek 11.5. Kady element posiada wasny prostokt.

W tym przykadzie elementami blokowymi s dziay strony,
nagwki rnego stopnia, akapity , jak rwnie poczenia
nawigacyjne (Strona gwna, Barcelona, i tak dalej),
ktre, cho normalnie s elementami wewntrzwierszowymi,
w tym przykadzie zostay zmienione na elementy blokowe.
Zwr uwag, e elementy wewntrzwierszowe, takie jak em
(na przykad: budowanie stajni oraz Castellers),
nie generuj nowych wierszy
W CSS strona jest traktowana w taki sposb, jak

gdyby kady z umieszczonych na niej elementw
by zawarty w niewidocznym prostokcie. Prostokt
ten skada si z obszaru zawierajcego tre elementu,
obszaru otaczajcego obszar treci (nazywanego
wypenieniem), krawdzi wypenienia, czyli ramek,
oraz niewidzialnego obszaru umieszczonego poza
krawdziami (marginesw).
Rozdzia 11.
Wywietlanie i ukrywanie elementw

Waciwo
jest bardzo przydatna do ukrywania
lub wywietlania okrelonych elementw w zalenoci
od rodzaju przegldarki uytkownika, jego jzyka
lub dowolnego innego kryterium. Mona take zmieni
domylny sposb wywietlania danego elementu
(z blokowego na wewntrzwierszowy lub na odwrt).
Mona te sprawi, e wszystkie elementy bd
wywietlane w postaci listy, nawet bez potrzeby
stosowania znacznika (to zagadnienie opisaam
na stronie 203).
Rysunek 11.6. Wykorzystamy waciwo display,

aby zmieni na elementy blokowe elementy a umieszczone
w dziale nawigacyjnym, dziki czemu kady z nich zostanie
wywietlony w osobnym wierszu. Zwr uwag, i zmieniam
waciwo display wycznie w elementach a umieszczonych
w dziale navigation; te same elementy umieszczone w innych
czciach strony nie zostan w aden sposb zmodyfikowane
Aby okreli, jak wywietlane bd elementy:

1. Wpisz .
Wywietlanie i ukrywanie elementw
2. Dopisz
, aby ukry dany element,
lub wpisz
, aby wywietli element w postaci
blokowej (i tym samym utworzy nowy akapit),
lub wpisz , aby wywietli element w postaci
wewntrzwierszowej (nie tworzc nowego akapitu),
lub wpisz , aby wywietli element
w taki sposb, jak gdyby by on umieszczony
wewntrz elementu (zobacz strony od 203 212).
Wskazwki
Netscape 6 jest tak skrupulatny, gdy chodzi

o przestrzeganie standardw, e dodaje nieco
wolnej przestrzeni poniej wewntrzwierszowych
obrazkw umieszczanych w komrkach tabel.
Trzeba o tym pamita. Jeli w komrce tabeli
znajduje si tylko jeden obrazek, mona unikn
tego efektu, zmieniajc obrazek w element blokowy.
W razie uycia waciwoci
element
zostanie ukryty, nie pozostawiajc adnego ladu.
Miejsce po nich zostaje zapenione przez inne
elementy strony.
Waciwo
nie jest dziedziczona.
Do ukrywania elementw bez jednoczesnego
usuwania ich z ukadu strony mona uy waciwoci
. W takim przypadku element staje
si niewidoczny, lecz zajmowany przez niego obszar
wci jest uwzgldniany w ukadzie strony.
178
Rysunek 11.7. Teraz elementy a s wywietlane w osobnych

wierszach. Zwr uwag, e element a umieszczony
w pierwszym wierszu ostatniego widocznego akapitu
(budowanie stajni) wci jest wywietlany jako element
wewntrzwierszowy (czyli tak, jak powinien by wywietlany)
Bezwzgldne
rozmieszczanie elementw
Wszystkie elementy strony s rozmieszczane na niej
w takim porzdku, w jakim si pojawiaj. Oznacza to,
Rysunek 11.8. Cho podajc przesunicia naley dokadnie e jeli na przykad znacznik znajduje si przed
okreli, gdzie element umiejscawiany bezwzgldnie ma zosta znacznikiem
, to obrazek zostanie wywietlony przed
wywietlony (oczywicie w odniesieniu do jego elementu
akapitem. Nazywane jest to naturalnym ukadem
nadrzdnego), mona jednak do tego celu wykorzysta
strony. Moesz jednak zmieni naturalny ukad strony,
wartoci procentowe, tworzc w ten sposb elastyczny ukad,
rozmieszczajc elementy bezwzgldnie czyli okrelajc
ktry moe si dostosowywa do wielkoci okna przegldarki
ich pooenie wzgldem elementu nadrzdnego.
Aby rozmieci element bezwzgldnie:
1. Wpisz

(pamitaj o redniku,
odstp po nim jest ju opcjonalny).
2. Wpisz
, ,

lub .
4. Jeli chcesz, powtrz czynnoci z punktw 2. i 3.

dla innych kierunkw, rozdzielajc poszczeglne
pary waciwo-warto rednikami.
Wskazwki
Rysunek 11.9. Strona szybko nabiera ksztatu.

Dzia zawartoci (content) zaczyna si w odlegoci 30%
szerokoci okna przegldarki od jego lewej krawdzi,
a obszar nawigacyjny (navigation) rozpoczyna si
10 pikseli poniej grnej krawdzi okna przegldarki
i tylko 2% od jego lewej krawdzi. Obszar bg zosta
chwilowo wywietlony poniej obszaru nawigacyjnego
Pamitaj, e elementy s rozmieszczane wzgldem

ich elementu nadrzdnego. Informacje o elementach
nadrzdnych mona znale na stronie 28.
W przypadku tworzenia ukadw elastycznych,
dostosowujcych si do wielkoci okna przegldarki,
naley posugiwa si wartociami procentowymi.
Poniewa elementy rozmieszczane bezwzgldnie
nie s uwzgldniane przy naturalnym rozmieszczaniu
elementw strony, mog zatem wzajemnie na
siebie zachodzi (co nie zawsze jest niepodane).
Jeli nie okrelisz przesunicia elementu, zostanie
on wywietlony w swoim naturalnym pooeniu,
ale nie bdzie mia wpywu na pooenie kolejnych
elementw.
Sposb pozycjonowania elementu nie jest
dziedziczony w jego elementach podrzdnych.
179
Bezwzgldne rozmieszczanie elementw
3. Podaj , gdzie okrela przesunicie elementu

w stosunku do jego elementu nadrzdnego, wyraone
w formie wartoci bezwzgldnej lub wzgldnej
(na przykad
lub ), albo w formie wartoci
procentowej, okrelanej wzgldem elementu
nadrzdnego.
Rozdzia 11.
Okrelanie staego pooenia

elementu w oknie przegldarki
Gdy uytkownik przewija zawarto okna przegldarki,
porusza si ona w gr i w d, cho na przykad
przyciski Wstecz i Do przodu pozostaj nieaktywne.
Kaskadowe arkusze stylw pozwalaj na okrelenie
staego pooenia elementw wzgldem okna
przegldarki, dziki czemu elementy te nie s przesuwane
w przypadku przewijania zawartoci strony.
Rysunek 11.10. Jedyn rnic pomidzy przedstawionymi

tu reguami stylw a reguami z rysunku 11.8, zamieszczonego
na stronie 179, jest uycie waciwoci position z wartoci
fixed w reguach dla stylw bg oraz navigation
Aby okreli stae pooenie

elementu w oknie przegldarki:
1. Wpisz

(nie zapomnij rednika).
Okrelanie staego pooenia elementu
2. Wpisz
, ,

lub .
3. Wpisz , gdzie okrela przesunicie elementu
wzgldem krawdzi okna przegldarki, wyraone
(na przykad
lub ), albo w formie wartoci
procentowej, okrelanej wzgldem wielkoci okna
przegldarki.
4. W razie potrzeby powtrz kroki 2. oraz 3.,
definiujc przesunicia w innych kierunkach.
Pamitaj, aby poszczeglne pary waciwowarto oddziela rednikami.
Rysunek 11.11. Na pierwszy rzut oka ta strona wyglda

tak samo, jak strona z rysunku 11.9, przedstawionego
na stronie 179
Wskazwki
Pamitaj, e przesunicia elementw o ustalonym

pooeniu s okrelane wzgldem okna przegldarki,
natomiast przesunicia elementw umiejscawianych
bezwzgldnie w odniesieniu do ich elementu
nadrzdnego.
Gdyby umiejscawianie ustalone byo lepiej
obsugiwane w przegldarkach, stanowioby ono
doskonay substytut ramek i ukadw ramek.
Niestety przegldarka Internet Explorer
przeznaczona do uycia w systemach Windows
(wcznie z wersj 6) nie obsuguje tej metody
umiejscawiania elementw.
Sposb umiejscowienia elementu nie jest
dziedziczony.
180
Rysunek 11.12. Jednak gdy uytkownik zacznie przewija

stron, okae si, e zarwno pasek nawigacyjny,
jak i jego to nie zmieniaj pooenia
Przesuwanie elementw wzgldem

ich naturalnego pooenia
Rysunek 11.13. Ten fragment kodu przesuwa nagwki h2
oraz h3 o 25 pikseli w lewo wzgldem miejsca, w ktrym
powinny si znajdowa
Kady element posiada pewne naturalne pooenie

w zawartoci dokumentu. Przesuwanie elementw
wzgldem tego pooenia nazywane jest okrelaniem
pooenia wzgldnego. W przypadku wykorzystania
tego sposobu umiejscawiania pooenie elementw
ssiednich nie jest w aden sposb modyfikowane.
Aby przesun element wzgldem
jego naturalnego pooenia:
1. Wpisz

(nie zapomnij o redniku).
2. Wpisz
,

, lub .
3. Wpisz , gdzie okrela przesunicie elementu
wzgldem jego naturalnego pooenia, wyraone
(na przykad
lub ).
Wskazwki
Rysunek 11.14. Nagwki h2 oraz h3 s przesunite
w lewo poza obszar dziau strony, w jakim s umieszczone.
Nie ma to jednak adnego znaczenia s one przesuwane
wzgldem swego oryginalnego pooenia, niezalenie od tego,
gdzie by si nie znajdoway
W przypadku tego sposobu umiejscawiania

sowo wzgldem odnosi si do oryginalnego
pooenia elementu, a nie elementw ssiadujcych
z nim. Nie mona przesun elementu wzgldem
pooenia innego elementu strony. Zamiast tego
element mona przesun wzgldem pooenia,
jakie powinien on zajmowa. Tak, to jest bardzo
wane!
Pooenie innych elementw nie jest w aden
sposb modyfikowane s one rozmieszczane
w naturalny sposb, tak jak gdyby przesunity
element znajdowa si w swym oryginalnym
pooeniu. Dlatego te elementy mog si
wzajemnie przesania.
Podane przesunicie nie bdzie miao adnego
wpywu na pooenie elementu, jeli w stylu
nie zostanie okrelona waciwo
.
Sposb umiejscowienia elementu nie jest
dziedziczony.
181
Przesuwanie elementw
4. W razie potrzeby powtrz kroki 2. oraz 3.,

definiujc przesunicia w innych kierunkach.
Pamitaj, aby poszczeglne pary waciwowarto oddziela rednikami.
Rozdzia 11.
Modyfikowanie ta
Termin to odnosi si nie do ta caej strony, lecz do ta
konkretnego elementu. Innymi sowy, mona okrela
to dowolnego elementu w tym take obrazkw,
pl formularzy oraz tabel.
Aby zmieni kolor ta:
1. Wpisz

.
2. Wpisz (aby widoczne byo to elementu
nadrzdnego) lub

, gdzie jest nazw
koloru lub wartoci rgb (patrz strona 46 lub tylna
okadka ksiki).
Aby zastosowa obraz ta:
1. Wpisz
.
Rysunek 11.15. Definiujemy biae to elementu body,

dziau treci oraz wskazanych myszk czy nawigacyjnych.
Dzia bg strony ma mie czarne to (to przygotowanie do
zmian wprowadzanych na stronach 190 192). Wskazane
myszk cze do biecej strony ma by przezroczyste, gdy nie
chcemy, aby wygldao ono jak typowe cze
Modyfikowanie ta
2. Wpisz
, gdzie jest
nazw obrazka, ktry powinien by wywietlony
jako to elementu. Aby aden obraz nie by
wywietlany, wpisz
(rysunki 11.17 oraz 11.18).
Aby powtrzy obraz ta:
1. Wpisz
, gdzie
moe przybiera nastpujce wartoci:

(aby obrazek by powtarzany zarwno w pionie,
jak i w poziomie),
(aby obrazek by
powtarzany w poziomie),
(aby obrazek
by powtarzany w pionie) lub

(aby obrazek nie by powtarzany).
Aby okreli, czy obrazek ta
ma ustalone pooenie:
1. Wpisz
.
2. Wpisz , aby pooenie obrazka ta w oknie
przegldarki byo stae, lub
, aby obrazek
przesuwa si wraz z przewijan zawartoci
okna przegldarki.
Aby okreli pooenie obrazu ta elementu:
1. Wpisz

, gdzie oraz
mog by wyraone w formie wartoci procentowych
lub bezwzgldnych. Jako mona take uy
wartoci predefiniowanych , lub ,
a jako wartoci
, lub .
182
Rysunek 11.16. Prawdopodobnie najtrudniejsz

do zauwaenia modyfikacj jest okrelenie biaego ta
strony. Niemniej jednak jest to modyfikacja kluczowa
(o czym przekonamy si na stronach od 190 do 192)

Aby okreli wszystkie waciwoci ta
w jednym miejscu:
1. Wpisz
.
2. Wpisz dowoln kombinacj akceptowanych
wartoci zwizanych z okrelaniem postaci ta
elementu (opisanych na poprzedniej stronie).
Wartoci te mog by zapisane w dowolnej
kolejnoci.
Wskazwki
Rysunek 11.17. Tylko na chwilk wykorzystamy obraz ta,
ktrego w praktyce trudno jest uywa efektywnie
Domyln wartoci waciwoci

jest
. Domyln wartoci
waciwoci jest . Domyln
wartoci waciwoci

jest
, waciwoci
, a waciwoci

.
Waciwoci nie s dziedziczone.

Chcc przesoni inne reguy stylw, naley
jedynie jawnie poda wartoci domylne,
takie jak
lub .
Rysunek 11.18. Pomimo tego, e obraz ta elementu body
jest powtarzany w poziomie, jest on przesaniany przez
biay obraz ta dziau content (ktry, dziki zastosowaniu
atrybutu id, jest okrelany z wiksz precyzj). Zauwa,
e obraz ta rozpoczyna si w lewym, dolnym rogu caej
strony, a nie ekranu (jak jest to bdnie interpretowane
w IE dla komputerw Macintosh)
W przypadku wykorzystania powtarzanego

(
) obrazu ta i jednoczesnego uycia
waciwoci
bdzie ona
okrela pooenie pierwszego z powtarzanych
obrazw ta.
Aby stworzy to caej strony, naley okreli to
elementu (to jedyna metoda, aby wykorzysta
waciwo w Netscape 4).
W przypadku okrelenia zarwno koloru,
jak i obrazu ta, kolor zostanie wykorzystany
do momentu pobrania obrazu ta, a potem bdzie
widoczny przez jego przezroczyste obszary
(jeli kolor nie zostanie okrelony, to Netscape 4
uyje koloru czarnego).
183
Modyfikowanie ta
Uywajc skrconej waciwoci

(opisanej na pocztku tej strony), nie trzeba
podawa wszystkich wartoci okrelajcych
posta ta elementu. Naley jednak pamita,
e wszystkie waciwoci, ktre nie zostan
jawnie okrelone, przyjm swoje wartoci
domylne (co moe przesoni reguy stylw
zdefiniowane wczeniej).
Rozdzia 11.
Zmiana koloru
Mona zmienia kolor dowolnego elementu, w tym
take tekstu, linii poziomych oraz pl formularzy.
Aby zmieni kolor:
1. Wpisz

.
2. Wpisz

, gdzie
to jedna z 16 predefiniowanych nazw kolorw
(patrz strona 46 lub tylna okadka ksiki),
lub wpisz !, gdzie to szesnastkowa
reprezentacja koloru (patrz strona 46 lub tylna
okadka ksiki),
lub wpisz "", gdzie , i to liczby
cakowite z zakresu od 0 do 255, okrelajce
odpowiednio ilo koloru czerwonego, zielonego
oraz niebieskiego w kolorze wynikowym,
ktry chcemy zastosowa,
Zmiana koloru
lub wpisz #"#"#, gdzie , i to wartoci

okrelajce procentow ilo czerwonego, zielonego
i niebieskiego w kolorze wynikowym.
Rysunek 11.19. Zmieniam domylny kolor caego tekstu

na stronie na czarny (w elemencie body). Jednak tekst
w obszarze nawigacyjnym bdzie biay (aby odrnia si
od przyszego ta tego obszaru, ktre zostanie zmienione na
stronach 190 192). cze do biecej strony umieszczone
w obszarze nawigacyjnym bdzie bladote (#339, tak aby
nie wygldao jak cze). Jednak inne cza, po wskazaniu
ich wskanikiem myszy, powinny by wywietlane na niebiesko
(aby byy wyranie widoczne na biaym tle strony,
zdefiniowanym na stronie 182)
Wskazwki
Jeli jako , lub wpiszesz warto wiksz od 255,

zostanie ona zastpiona liczb 255. Podobnie, jeli
jako warto procentow wpiszesz wicej ni 100%,
zostanie ona zastpiona wartoci 100%.
Waciwo najczciej jest stosowana
do okrelania koloru tekstu. Wicej informacji
na ten temat mona znale na stronie 166,
w sekcji Definiowanie koloru tekstu.
Zmienianie koloru obrazu nie ma adnego
widocznego efektu (tak operacj naleaoby
wykona w programie graficznym). Mona jednak
zmieni kolor ta elementu (ktry bdzie
widoczny przez przezroczyste obszary obrazka).
Wicej informacji na ten temat mona znale
na stronie 182, w sekcji Zmiana koloru ta tekstu.
Rysunek 11.20. Teraz, gdy cza nawigacyjne s biae,
mona je zobaczy wycznie w przypadku umieszczenia
na nich wskanika myszy (lub zdefiniowania na stronie
jakiego ta patrz strony 190 192)
184
Modyfikacja wskanika myszy

Zazwyczaj to przegldarka okrela wygld wskanika
myszy, przy czym w wikszoci przypadkw ma on
ksztat strzaki, a po umieszczeniu go w obszarze cza
ksztat doni z wyprostowanym palcem wskazujcym.
Dziki CSS to projektant strony moe okreli posta
wskanika myszy.
Aby zmieni ksztat wskanika myszy:
1. Wpisz
.
Rysunek 11.21. Dodaam waciwo cursor do selektora
wybierajcego wycznie cza klasy current, nalece
do elementu o identyfikatorze navigation. Co wicej,
cza te musz by aktualnie wskazywane myszk.
Cakiem interesujcy selektor, nieprawda?
2. Wpisz
, aby wskanik mia ksztat doni ( ),
, aby mia ksztat strzaki ( ),
( ),

( ), ( ), ( ) lub ( ),
lub wpisz
, aby posta wskanika bya okrelana
automatycznie, w zalenoci od sytuacji,
Wskazwki
Internet Explorer 5.x dla Windows rozpoznaje

warto , lecz nie rozpoznaje standardowej
wartoci
( ). Aby zadowoli tych, ktrzy
lubi wszystko robi po swojemu, Microsoft Internet
Explorer 6 oraz inne przegldarki dziaajce zgodnie
ze standardami (takie jak Netscape 6) obsuguj
obie wartoci
! .
Kolejno zapisu jest w tym przypadku wana, gdy
przegldarka IE5 dla Windows wybierze warto
, jeli ta zostanie zapisana jako ostatnia.

Rysunki przedstawione na tej stronie zostay
Rysunek 11.22. Teraz, gdy kto wskae cze do biecej
sporzdzone przy uyciu przegldarki IE6 w systemie
strony, nie bdzie ono wcale wyglda jak cze (cho
adres strony docelowej bdzie wywietlany na pasku stanu,
Windows 98. Wskaniki uywane w rnych wersjach
a samo cze bdzie dziaa poprawnie)
przegldarek oraz w rnych systemach operacyjnych
nieznacznie si od siebie rni. Przykadowo,
wskanik typu na komputerach Macintosh
ma ksztat zegarka:
Osobicie uwaam, e nazwy uywane do okrelania
postaci wskanika myszy s dosy mylce. Warto
(ang. domylny) wcale nie okrela domylnego
ksztatu wskanika myszy, lecz przypomina strzak,
dlatego nazwaabym j
(ang.: wskanik);
jednak wartoci
odpowiada wskanik
o ksztacie doni (ang.: hand), z kolei warto
jest niestandardowa i stosowana tylko w Internet
Explorerze. O rany!
185
Modyfikacja wskanika myszy
lub wpisz , aby wskanik przybra posta

dwukierunkowej strzaki, przy czym jest okreleniem
jednego z gwnych kierunkw geograficznych,
na przykad (north pnoc), (northwest
pnocny zachd), (east wschd).
Przykadowo, wskanik ma posta .
Rozdzia 11.
Tworzenie obramowa
Mona stworzy obramowanie wok elementu,
a nastpnie okreli jego grubo, styl oraz kolor.
W przypadku okrelenia wypenienia (patrz strona 189)
obramowanie bdzie otacza zarwno zawarto danego
elementu, jak i jego wypenienie.
Aby zdefiniowa styl obramowania:
1. Wpisz
, gdzie
moe
przyjmowa jedn z nastpujcych wartoci:
, , , , , ,
, lub .
Aby okreli grubo obramowania:
1. Wpisz
, gdzie okrela grubo
obramowania i jest liczb wraz z jednostkami
(na przykad "
).
Rysunek 11.23. Przy wykorzystaniu skrtowej waciwoci

border-left mona jednoczenie okreli wszystkie trzy
waciwoci lewej krawdzi obramowania elementu
Tworzenie obramowa
Aby okreli kolor obramowania:

1. Wpisz

, gdzie
jest nazw koloru lub wartoci
(patrz strona 46 lub tylna okadka ksiki).
Aby jednoczenie okreli jedn lub kilka
waciwoci obramowania:
1. Wpisz
.
2. Jeli chcesz, wpisz
, ,

lub ,
aby ograniczy efekt dziaania reguy do konkretnej
krawdzi obramowania.
3. Jeli to konieczne, wpisz $%
%&,
gdzie waciwo to , lub .
W ten sposb moesz ograniczy dziaanie
reguy do konkretnej waciwoci.
4. Wpisz .
5. Wpisz odpowiednie wartoci (opisane na pocztku
strony). Jeli pomine krok 3., moesz poda
dowoln lub wszystkie trzy waciwoci krawdzi
(na przykad
lub

). Jeli w kroku 3. okrelie
wybran waciwo, powiniene poda wycznie
jedn z wartoci odpowiednich dla tej waciwoci
(na przykad ).
186
Rysunek 11.24. Oto proste obramowanie o szerokoci

1 piksela i postaci linii cigej. Zwr uwag, e pomidzy
obramowaniem i tekstem elementu przydaoby si wywietli
jaki odstp. Ju wkrtce si tym zajmiemy (patrz strona 188)

Wskazwki
Posta obramowania nie jest dziedziczona.
Rysunek 11.25. Za pomoc jednej waciwoci border-color

okreliam kolory wszystkich czterech krawdzi obramowania.
Nastpnie, korzystajc z waciwoci border-width, okreliam
gruboci poszczeglnych krawdzi (zaczynajc od wartoci
2px i przesuwajc si zgodnie z ruchem wskazwek zegara).
W kocu stworzyam klasy dla kadego z istniejcych stylw
i przypisaam je jednej lub kilku krawdziom poszczeglnych
dziaw strony
Poszczeglne waciwoci obramowania

(, oraz )
mog przyjmowa od jednej do czterech wartoci.
W razie podania jednej wartoci okreli ona posta
wszystkich krawdzi obramowania. Jeli podamy
dwie wartoci, pierwsza z nich okrela bdzie
posta dolnej i grnej krawdzi, a druga
krawdzi prawej i lewej. W razie podania trzech
wartoci pierwsza z nich posuy do okrelenia
grnej krawdzi, druga krawdzi prawej i lewej,
a trzecia dolnej. W razie podania czterech
wartoci zostan one uyte do okrelenia postaci
odpowiednio grnej, prawej, dolnej i lewej krawdzi
obramowania.
Aby obramowanie byo wywietlone, naley
okreli przynajmniej jego styl. Jeli styl nie
zostanie okrelony, obramowanie nie bdzie
widoczne. Domyln wartoci stylu jest .
Domylny kolor obramowania odpowiada

wartoci waciwoci danego elementu
(patrz strona 166).
Rysunek 11.26. Zwr uwag, jak dziaaj rne waciwoci

skrtowe. Na przykad border-style:dotted (pierwszy przykad)
tworzy kropkowane obramowanie na wszystkich czterech
krawdziach, natomiast border-style:dashed none tworzy
obramowanie w postaci linii przerywanej na grnej i dolnej
krawdzi elementu i nie wywietla adnego obramowania
na krawdzi prawej i lewej. Przegldarki (IE 6 z lewej
oraz Netscape 7 z prawej) w nieco odmienny sposb
interpretuj poszczeglne style obramowa
Grubo obramowania mona take okreli

za pomoc wartoci oglnych (cienka),
(rednia) oraz (gruba). Wartoci
domyln jest , ktra w Internet Explorerze
wynosi 4 piksele, a w Netscape 3 piksele.
Starsze wersje przegldarek (wczeniejsze ni
IE 5.5 oraz Netscape 6) nie obsuguj wszystkich
istniejcych, pojedynczych waciwoci,
okrelajcych posta obramowania.
Waciwo mona stosowa w tabelach
oraz w komrkach table. Wicej informacji na ten
temat mona znale na stronie 218, w sekcji
Dodawanie krawdzi tabel.
Szczerze mwic, uwaam, e kto przesadzi
z iloci moliwych sposobw okrelania postaci
obramowa.
187
Tworzenie obramowa
Jeli skorzystamy z waciwoci skrtowych

(takich jak lub ), a wartoci
nie zostan podane jawnie, przyjm one wwczas
odpowiednie wartoci domylne. A zatem
waciwo
odpowiada
waciwoci
(nawet
jeli styl zosta wczeniej okrelony za pomoc
waciwoci ).
Rozdzia 11.
Dodawanie wypenienia
wok elementu
Wypenienie to dodatkowa przestrze wok elementu,
umieszczona wewntrz jego obramowania. Mona je
sobie wyobrazi jako pokanych rozmiarw brzuch
witego Mikoaja, opity jego pasem. W przypadku
wypenienia mona okrela wycznie jego szeroko,
nie ma natomiast moliwoci okrelania ani jego koloru,
ani faktury.
Dodawanie wypenienia wok elementu
Aby doda wypenienie wok elementu:

1. Wpisz , gdzie jest szerokoci
dodawanego wypenienia, wyraon za pomoc
konkretnych jednostek (
) lub w formie wartoci
procentowej, odnoszcej si do wielkoci elementu
nadrzdnego (#).
Rysunek 11.27. Przypisanie wartoci 0 waciwoci padding

nie jest zym pomysem, gdy w rnych przegldarkach
domylne wypenienia rnych elementw maj rne
wielkoci. Zwr uwag, e ostatnie dwa style wypenienia
(dla elementw #navigation a oraz h1) s rwnowane
Wskazwki
Jeli w definicji wypenienia zostanie podana

tylko jedna warto, to posuy ona do okrelenia
szerokoci wypenienia ze wszystkich czterech
stron elementu. W przypadku podania dwch
wartoci pierwsza z nich posuy do okrelenia
wartoci wypenienia u gry i u dou elementu,
a druga z jego lewej i prawej strony. W razie
podania trzech wartoci pierwsza z nich okrela
bdzie wypenienie u gry elementu, druga
z lewej i prawej strony elementu, a trzecia
u dou elementu. W przypadku podania czterech
wartoci posu one do okrelenia odpowiednio
grnego, prawego, dolnego i lewego wypenienia
elementu.
Do waciwoci
mona take doda jedn
z nastpujcych kocwek, okrelajcych posta
wypenienia z konkretnej strony elementu:
,
, , . Pomidzy sowem

a kocwk nie powinno by adnych dodatkowych
odstpw.
Wypenienie nie jest dziedziczone.
W przypadku tworzenia elastycznych ukadw,
ktre rozszerzaj si lub zmniejszaj w zalenoci
od wielkoci okna przegldarki, wypenienie mona
okrela, wykorzystujc wartoci procentowe
lub jednostki em.
188
Rysunek 11.28. Zawarto elementu wyglda znacznie

lepiej, gdy pomidzy ni a obramowaniem elementu znajduje
si jaka wolna przestrze. Zwr uwag, e w przypadku
dodania wypenienia to obramowania (Katalonia)
jest powikszane
Okrelanie marginesw
wok elementu
Margines to przezroczysta przestrze, oddzielajca
elementy od siebie. Marginesy s niezalene oraz
znajduj si na zewntrz wypenienia (patrz strona 188)
i obramowania (patrz strona 186) mona by
je porwna do przestrzeni osobistej witego Mikoaja.
Aby okreli marginesy elementu:
Rysunek 11.29. Margines elementu h3 moglibymy
take okreli za pomoc waciwoci margin-top:15px
1. Wpisz , gdzie jest szerokoci dodawanego

obszaru, wyraon jako dugo lub warto
procentowa okrelana wzgldem szerokoci elementu
nadrzdnego, bd te przyjmujc warto .
Wskazwki
Do waciwoci mona take doda jedn

z czterech kocwek:
, , lub ,
aby ograniczy margines do konkretnej strony
elementu. Pomidzy sowem margin a kocwk
nie powinno by adnego odstpu (na przykad

).
Rysunek 11.30. Tekst prezentowany w dziale content

strony wyglda znacznie lepiej, gdy pomidzy nagwkiem
a akapitem jest mniej wolnego miejsca. Pamitaj,
e margines to obszar pomidzy prostoktami elementw,
ktrych rozmiar jest z kolei okrelany przez tak rnorodne
czynniki, jak zawarto, wysoko wiersza, waciwo height
i tak dalej. Zwr take uwag, e margines pomidzy
elementem h3 oraz p ma wielko 15 pikseli (czyli odpowiada
wikszemu z marginesw, a nie ich sumie, ktra ma warto
20 pikseli)
Faktyczna wielko warto przypisywanej

waciwoci zaley od wartoci waciwoci
(patrz strona 190). Jeli przypiszemy
warto jednemu marginesowi elementu,
przegldarka nada mu najwiksz z moliwych
wartoci. Jeli jednoczenie przypiszemy
lewemu i prawemu marginesowi wartoci ,
to przegldarka nada im dwie najwiksze,
rwne wartoci. Fakt ten mona wykorzysta
w celu wyrodkowania elementu na stronie.
Jeli jeden element jest umieszczony powyej
drugiego, wykorzystany zostanie tylko jeden
z dwch stykajcych si ze sob marginesw
ten wikszy. W takim przypadku mwimy,
e mniejszy margines zapada si. Ten sposb
dziaania nie dotyczy marginesw prawych i lewych.
Marginesy nie s dziedziczone.
189
Okrelanie marginesw wok elementu
Waciwoci mona przypisa od jednej

do czterech wartoci patrz pierwsza rada
dotyczca waciwoci
(na stronie 188).
Rozdzia 11.
Okrelanie wysokoci
i szerokoci elementu
Istnieje moliwo okrelenia wysokoci i szerokoci
niemal wszystkich elementw strony, w tym take
obrazkw, pl formularzy, a nawet blokw tekstu.
Rysunek 11.31. Przypomnij sobie, e w kodzie (X)HTML

dokumentu okrelilimy szeroko obrazka umieszczonego
w dziale bg strony 100 pikseli
Aby okreli wysoko i szeroko elementu:
Okrelanie wysokoci i szerokoci elementu
1. Wpisz , gdzie okrela szeroko obszaru

elementu, wyraon w formie dugoci (liczby wraz
z okreleniem jednostki) lub wartoci procentowej
(obliczanej wzgldem szerokoci elementu
nadrzdnego). Moesz take uy wartoci ,
aby szeroko elementu zostaa okrelona przez
przegldark.
2. Wpisz , gdzie okrela wysoko obszaru
elementu i moe by wyraona wycznie w formie
dugoci (liczby wraz z okreleniem jednostki).
Moesz take uy wartoci , aby wysoko
elementu zostaa okrelona przez przegldark.
Wskazwki
Jeli wysoko i szeroko elementu nie zostanie

jawnie podana, przegldarka uyje wartoci
(patrz strona 191).
Rysunek 11.32. Okreliam szeroko obrazka umieszczonego

w dziale bg przy uyciu waciwoci width (przesaniajc
w ten sposb warto atrybutu (X)HTML, przedstawionego
na rysunku 31). Zwr uwag, e zmieniam take pionowe
i poziome przesunicie elementu div o identyfikatorze bg,
a dodatkowo przypisaam ujemn warto lewemu marginesowi
elementu, aby wyrodkowa t cz obrazka, ktra mnie
interesuje
Pamitaj, e warto procentowa jest okrelana

na podstawie szerokoci elementu nadrzdnego
a nie oryginalnej szerokoci samego elementu.
Wypenienie, obramowania oraz marginesy nie
s uwzgldniane w wartoci waciwoci
(z wyjtkiem przegldarki IE 5.x dla Windows,
ktra bdnie zakada, e waciwo jest
sum szerokoci obszaru zawartoci elementu,
jego wypenienia i obramowania patrz nastpna
strona).
Szeroko i wysoko elementu nie s dziedziczone.
Istniej take waciwoci ,
oraz i , lecz aktualnie nie
s one obsugiwane przez wszystkie przegldarki.
190
Rysunek 11.33. Zwr uwag, e dzia zawartoci zaczynajcy

si od 30% szerokoci strony, liczc od jej lewej krawdzi,
zachodzi na dzia bg strony. Poniewa dzia zawartoci strony
ma biae to, jego cz pokrywajca si z tym obszarem
bdzie niewidoczna. Dodatkowo zwr uwag, i take
cz nawigacyjna strony jest w tej chwili niewidoczna.
Ju wkrtce rozwiemy ten problem

Szeroko, marginesy oraz warto auto
W przypadku wikszoci elementw blokowych
warto waciwoci odpowiada szerokoci
obszaru zawierajcego elementu, pomniejszonej
Rysunek 11.34. Ustaliam, e nadrzdny element div
o wypenienie, obramowanie oraz marginesy. Obszar
bdzie mie szeroko 300 pikseli. To bdzie nasz obszar
zawierajcy to szeroko przydzielona danemu
zawierajcy. Oba umieszczone w nim akapity maj marginesy
elementowi przez jego element nadrzdny czsto
o szerokoci 10 pikseli, wypenienie o szerokoci 5 pikseli
mylnie nazywana szerokoci odziedziczon, cho
i obramowanie o szerokoci 5 pikseli z kadej strony.
Szeroko pierwszego akapitu jest okrelana automatycznie, absolutnie nie ma nic wsplnego z normalnymi
natomiast drugiemu jawnie nadaam szeroko 200 pikseli zasadami dziedziczenia, obowizujcymi w CSS.
W przypadku rcznego okrelania waciwoci ,

oraz , gdy czna szeroko
wraz z wielkoci obramowania i wypenienia nie
odpowiadaj szerokoci obszaru zawierajcego, jak
szeroko trzeba bdzie zmieni. I faktycznie, w takim
przypadku przegldarka zignoruje podan warto
waciwoci i przypisze jej warto
(rysunki 11.34 oraz 11.35). Jeli rcznie okrelisz
warto waciwoci i przypiszesz szerokoci
jednego z marginesw warto , to margines ten
bdzie zmniejszany lub powikszany, tak by moliwe
byo skompensowanie rnic. Jeli samodzielnie
okrelisz warto waciwoci i szerokoci obu
marginesw przypiszesz , to przegldarka nada
obu marginesom t sam, maksymaln szeroko
(co w efekcie spowoduje, e element zostanie
wyrodkowany).
Zauwa, e przegldarka nigdy nie modyfikuje szerokoci
obramowania ani wypenienia elementu.
Rysunek 11.35. Jeli szeroko jest okrelana
automatycznie (jak w przypadku grnego akapitu),
zostaje ona okrelona na podstawie szerokoci obszaru
zawierajcego, pomniejszonej o szeroko marginesw,
wypenienia i obramowa. Jeli natomiast szeroko jest
podana jawnie (jak w przypadku drugiego akapitu), to
zazwyczaj wszelkie rnice kompensowane s poprzez
modyfikacj szerokoci prawego marginesu
Takie s zasady niezalenie od tego, ile s warte.

Niestety, w przegldarce IE 5 (oraz IE 6 dziaajcej
w trybie niestandardowym) okrelenie szerokoci
(waciwo ) jest interpretowane jako okrelenie
sumy szerokoci obszaru zawartoci, wypenienia,
obramowania i marginesw, a nie tak jak powinno
by samego obszaru zawartoci. Z kolei w IE 6
marginesy oraz elementy zastpowane, umieszczane
w elementach podrzdnych, mog wpywa na szeroko
bloku zawierajcego, cho w dokumentacji jej twrcy
zapewniaj, e nic takiego nie ma prawa si dzia.
Jak gdyby to wszystko i tak nie byo dostatecznie
skomplikowane!
191
Okrelanie wysokoci i szerokoci elementu
W przypadku elementw zawierajcych obrazki i inne

obiekty (elementy zastpione) warto szerokoci
odpowiada wewntrznej szerokoci elementu, czyli
faktycznej szerokoci obrazka lub obiektu zapisanego
w pliku zewntrznym. W przypadku elementw
pywajcych wartoci odpowiada szeroko
wynoszca 0 pikseli. We wszystkich innych elementach
wewntrzwierszowych waciwo jest ignorowana.
Rozdzia 11.
Pozycjonowanie elementw
w trzecim wymiarze
Wzgldne oraz bezwzgldne rozmieszczanie elementw
moe doprowadzi do sytuacji, gdy elementy bd
si wzajemnie nakada. W takiej sytuacji mona
okreli, ktry element powinien by wywietlony
powyej pozostaych.
Aby rozmieci elementy w przestrzeni:
1. Wpisz .
2. Wpisz , gdzie jest liczb, okrelajc pooenie
elementu na stosie obiektw.
Pozycjonowanie elementw w trzecim wymiarze
Wskazwki
Im wysza jest warto waciwoci ,

tym wyej element zostanie wywietlony.
Mona wyobraa sobie waciwo
jako okrelenie poziomu, na jakim element jest
wywietlany przy czym uytkownicy, szybujc
nad stron, patrz na ni z gry, widzc najpierw te
elementy, ktre zostay wywietlone na najwyszym
poziomie.
Rysunek 11.36. Wartoci waciwoci z-index elementw

content oraz navigation mona bez przeszkd zamienia,
o ile pozostan one wiksze od wartoci waciwoci z-index
elementu bg, wynoszcej 1 (warto z-index w elemencie
content musi by wiksza ni w elemencie bg, gdy jego
biae to ukrywa cz obrazka wychodzc poza obszar,
jaki ma zajmowa element bg)
Waciwoci mona przypisywa zarwno

wartoci dodatnie, jak i ujemne.
Jeli jakie elementy zostay umieszczone
w elemencie o okrelonej wartoci waciwoci
, to wszystkie te elementy zostan
rozmieszczone w pierwszej kolejnoci zgodnie
z wartociami zdefiniowanych w nich waciwoci
, a dopiero potem jako grupa elementw
zostan rozmieszczone w szerszym kontekcie
strony. Wyobramy sobie na przykad,
e w elemencie A waciwo ma warto
10, w elemencie B warto 20, a w elemencie C
warto 30. Element B zawiera dwa elementy
podrzdne: bb, w ktrym waciwo
ma warto 35, oraz bbb, w ktrym waciwo
ta ma warto 5. Wszystkie te elementy zostan
wywietlone w nastpujcej kolejnoci (liczc od
gry): C (ktry ma najwysz warto
na swoim poziomie strony), B (w ktrym
ma drug co do wielkoci warto); nastpnie
zostan wywietlone elementy podrzdne elementu
B bb oraz bbb (w takiej kolejnoci), a na samym
kocu zostanie wywietlony element A, ktrego
waciwo ma warto mniejsz ni
odpowiednia waciwo elementu B.
Waciwo nie jest dziedziczona.
192
Rysunek 11.37. Teraz obszar nawigacyjny jest wywietlony

powyej dziau bg; w kocu wyjanio si, dlaczego cza
zostay wywietlone na biao
Okrelanie sposobu wywietlania

zawartoci elementu
Rysunek 11.38. W pierwszej kolejnoci sformatowaam
element div o identyfikatorze calendar, tak aby adnie wyglda
Elementy nie zawsze s wywietlane wewntrz swych

prostoktw. Czasami prostokty te po prostu nie s
odpowiednio due. Moe si take zdarzy,
e zawarto zostaa umieszczona poza prostoktem
danego elementu. Niezalenie od przyczyny, za pomoc
waciwoci mona kontrolowa, co si bdzie
dziao z zawartoci znajdujc si poza prostoktem
elementu.
Aby okreli sposb
wywietlania zawartoci elementu
1. Wpisz

.
Rysunek 11.40. A zatem jawnie okreliam wysoko (height)

oraz szeroko (width) akapitu dates umieszczonego wewntrz
elementu calendar, dziki czemu wiem, jakie wymiary bdzie
mia wynikowy akapit. Nastpnie dodaam waciwo
overflow, aby odpowiednio uoy zawarto akapitu,
ktra nie mieci si w jego prostokcie
lub wpisz , aby ukry zawarto,

ktra nie mieci si w prostokcie elementu,
lub wpisz
, aby w elemencie zawsze byy
wywietlane paski przewijania, umoliwiajce
uytkownikom wywietlenie zawartoci
nie mieszczcej si w prostokcie elementu,
lub wpisz
, aby paski przewijania byy
wywietlane wycznie w razie koniecznoci.
Wskazwki
Rysunek 11.41. Teraz akapit dates ma dokadnie 150 pikseli

szerokoci i 2 em wysokoci; s w nim wywietlane paski
przewijania, aby uytkownicy mogli zobaczy ca jego
zawarto
Pamitaj, e w przegldarce Internet Explorer 6

zakadane jest, e nie wiesz, co robisz, nadajc
elementowi podrzdnemu wiksze wymiary ni
ma element nadrzdny, i powiksza element
nadrzdny tak, aby element podrzdny w nim si
zmieci. Jedynym wyjtkiem od tej reguy jest
sytuacja, w ktrej waciwoci zostanie
przypisana dowolna warto oprcz
(domylnej). W takim przypadku elementowi
nadrzdnemu zostanie nadana zamierzona wielko,
a waciwo bdzie moga speni swoje
zadanie.
Domyln wartoci waciwoci jest
. Waciwo ta nie jest dziedziczona.
193
Sposb wywietlania zawartoci elementu
Rysunek 11.39. Kalendarz wyglda cakiem adnie

u dou strony, ale wedug mnie jest zbyt dugi
2. Wpisz , aby nada elementowi wikszy

rozmiar, wystarczajcy do wywietlenia caej jego
zawartoci (to domylna warto waciwoci
),
Rozdzia 11.
Otaczanie elementw tekstem

Nic nie stoi na przeszkodzie, aby otoczy element
tekstem (bd take innymi elementami). Niestety
przegldarki czasami nieprawidowo obsuguj
waciwo .
Aby otoczy element tekstem:
Rysunek 11.42. Chcemy, aby cay dzia calendar strony

by dosunity do prawej krawdzi strony i otaczany tekstem
1. Wpisz
.
2. Wpisz , jeli chcesz, aby element znajdowa
si z lewej strony, a tekst otacza go z prawej,
lub wpisz , jeli chcesz, aby element
znajdowa si z prawej strony, a tekst otacza
go z lewej.
3. Skorzystaj z waciwoci (patrz strona 190),
aby jawnie okreli szeroko elementu.
Otaczanie elementw tekstem
Wskazwki
Pamitaj, e kierunek wybrany w definicji

waciwoci dotyczy pooenia elementu,
a nie tekstu. Definicja
spowoduje
umieszczenie tekstu z prawej strony elementu.
Sztuczka pozwalajca na rozmieszczenie tekstu
pomidzy elementami polega na umieszczeniu
elementu bezporednio przed tekstem,
ktry ma go otacza.
Rysunek 11.43. Tekst umieszczony bezporednio za dziaem

calendar otacza go z lewej strony
Rysunek 11.44. Teraz wyobramy sobie, e przed elementem

calendar znajduje si obrazek, w ktrym waciwoci float
take przypisano warto right
Informacje na temat staromodnego, odrzuconego,

ale powszechnie obsugiwanego sposobu
wywietlania tekstu pomidzy obrazkami
mona znale na stronie 110, w sekcji
Otaczanie obrazw tekstem.
Jeli w wicej ni jednym elemencie podano t
sam warto waciwoci , to pierwszy
element jest umieszczony najdalej we wskazanym
kierunku, drugi jest umieszczany za pierwszym
i tak dalej (rysunki 11.44 oraz 11.45).
Elementy, ktre nie s zastpowane i w ktrych
nie zostaa okrelona warto waciwoci ,
nie bd poprawnie otaczane.
Waciwo nie jest dziedziczona.
194
Rysunek 11.45. Poniewa niewielki obrazek jest umieszczony

w kodzie (X)HTML przed elementem div, zostanie on
wywietlony z jego prawej strony
Kontrola sposobu
otaczania elementw
Mona okreli, jakie elementy mog by otaczane
przez inne elementy, a jakie nie. Aby element nie by
wywietlany obok innego elementu, obok ktrego
nie powinien by umieszczany, naley posuy si
waciwoci .
Rysunek 11.46. Waciwo clear jest umieszczana
w elementach, ktre nie maj by wywietlane obok innych
otaczanych elementw. W tym przykadzie chcemy,
aby adne inne elementy nie znajdoway si z prawej strony
dziau calendar i dlatego w dotyczcej go regule arkusza
stylw umieciam waciwo clear: right
Aby kontrolowa sposb otaczania elementw:

1. Wpisz .
2. Wpisz , aby inne elementy nie otaczay
biecego elementu z lewej strony,
lub wpisz , aby inne elementy nie otaczay
biecego elementu z prawej strony,
lub wpisz
, aby inne elementy nie mogy
otacza biecego elementu ani z lewej,
ani z prawej strony.
Wskazwki
Rysunek 11.47. Dzia calendar nie zostanie wywietlony

a do momentu, gdy z jego prawej strony nie bdzie ju
adnych innych elementw (czyli przegldarka wywietli
go dopiero poniej niewielkiego obrazka)
Waciwo sprawia, e element, w ktrym

zostaa ona zdefiniowana, nie bdzie wywietlany
a do momentu, gdy po podanej stronie nie bd
ju wywietlane adne inne elementy.
Waciwo jest dodawana do elementw,
obok ktrych nie maj by wywietlane adne
inne otaczane elementy. A zatem jeli chcesz,
aby dany element nie by wywietlany a do
momentu, gdy z jego prawej strony nie bd ju
umieszczone adne inne otaczane elementy,
zdefiniuj w nim (a nie w tych innych elementach)
waciwo .
Sposb uycia waciwoci przypomina
posugiwanie si znacznikiem z (odrzuconym)
atrybutem (patrz strona 112).
195
Kontrola sposobu otaczania elementw
lub wpisz
, aby dany element nie by otaczany
ani z prawej, ani z lewej strony,
Rozdzia 11.
Wyrwnywanie elementw w pionie

Aby poprawi atrakcyjno strony, elementy mona
wyrwnywa na wiele rnych sposobw.
Aby wyrwna elementy w pionie:
1. Wpisz .
2. Wpisz , aby wyrwna elementy
do podstawy (ang.: baseline) elementu nadrzdnego,
lub wpisz , aby wyrwna rodki elementw
do rodka elementu nadrzdnego,
Rysunek 11.48. Jedynie w obrazkach nalecych do klasy

line uylimy wyrwnania elementu do grnej krawdzi linii
(vertical-align:top)
lub wpisz , aby umieci element w dolnym

indeksie elementu nadrzdnego,
Wyrwnywanie elementw w pionie
lub wpisz , aby umieci element grnym

indeksie elementu nadrzdnego,
lub wpisz
, aby wyrwna grn cz
elementu z grn czci elementu nadrzdnego,
lub wpisz

, aby wyrwna doln cz
elementu z doln czci elementu nadrzdnego,
lub wpisz
, aby wyrwna grn cz elementu
z grn czci najwyszego elementu w linii,
lub wpisz

, aby wyrwna doln cz
elementu z doln czci najniszego elementu
w linii,
lub podaj procent wysokoci elementu
(moesz uy wartoci dodatniej lub ujemnej).
196
Rysunek 11.49. Wszystkie trzy obrazki nalece do klasy

line s wyrwnane w pionie wzgldem swych grnych krawdzi

Po Prostu HTML 4. Wydanie III

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Po Prostu HTML 4. Wydanie III

Uploaded by

Copyright:

Available Formats

IDZ DO

Internet, WWW oraz HTML.......................................................................................14

Elementy tworzce strony WWW

Praca z dokumentami (X)HTML

Projektowanie witryny ...............................................................................................48

Podstawowa struktura dokumentw (X)HTML

Rozpoczynanie strony ................................................................................................60

Znaczniki: elementy, atrybuty oraz wartoci.................................................................26

Podstawy formatowania tekstu

Tworzenie tekstu pogrubionego oraz kursywy ..............................................................74

Tworzenie obrazw na potrzeby stron WWW

O obrazach tworzonych na potrzeby stron WWW.........................................................84

Wstawianie ilustracji na stron..................................................................................104

Tworzenie czy do innych stron ...............................................................................118

Tworzenie reguy stylu .............................................................................................134

Rozdzia 10. Formatowanie przy wykorzystaniu stylw

Wybr czcionki .......................................................................................................158

Tworzenie zewntrznego arkusza stylw....................................................................148

Rozdzia 11. Okrelanie ukadu strony za pomoc stylw

Okrelanie struktury strony.......................................................................................176

Rozdzia 12. Arkusze stylw przeznaczone do drukowania stron

Stosowanie arkuszy stylw przeznaczonych

Rozdzia 13. Listy

Tworzenie list wypunktowanych i uporzdkowanych ..................................................204

Rozdzia 14. Tabele

Projektowanie ukadu strony.....................................................................................216

Rozdzia 15. Ramki

Rozdzia 16. Formularze

Tworzenie prostego ukadu ramek .............................................................................242

Rozdzia 17. Multimedia

Aplikacje pomocnicze i moduy dodatkowe (plug-ins).................................................294

Rozdzia 18. Skrypty

Wstawianie automatycznego skryptu ......................................................................314

Rozdzia 19. Podstawy JavaScriptu

Dodawanie aktualnej daty i godziny ..........................................................................324

Rozdzia 20. Symbole oraz inne znaki

Kilka sw o sposobach kodowania ...........................................................................334

Rozdzia 21. Stare sposoby formatowania

Okrelanie domylnej postaci tekstu ..........................................................................344

Rozdzia 22. Okrelanie ukadu strony stary sposb

Rozdzia 23. WML: strony WWW dla urzdze przenonych

Przygotowywanie serwera ........................................................................................370

Rozdzia 24. Testowanie stron WWW

Sprawdzanie poprawnoci kodu ................................................................................394

Rozdzia 25. Publikowanie stron w sieci WWW

Jak znale serwer dla swoich stron...........................................................................406

Rozdzia 26. Zdobywanie uytkownikw

Elementy i atrybuty (X)HTML

Waciwoci i wartoci CSS

Symbole i znaki (X)HTML

Okrelanie ukadu strony za pomoc stylw

Okrelanie ukadu strony

Rozdzia 11. Okrelanie ukadu strony za pomoc stylw

Podstawow wad kaskadowych arkuszy stylw,

Rysunek 11.1. Ukad tej strony zosta okrelony przy

Przykady uyte w tym rozdziale przelicznie

Okrelanie ukadu strony za pomoc stylw

Wykorzystanie CSS do okrelania ukadu strony ma kilka

Okrelanie struktury strony

Okrelanie struktury strony

Aby okreli struktur strony:

Rysunek 11.2. Oto dokument, ktrego bd uywa

2. Rozmie elementy w kolejnoci, ktra ma sens

3. Podaj , gdzie okrela przesunicie elementu

Domyln wartoci waciwoci

Waciwoci nie s dziedziczone.

Uywajc skrconej waciwoci

lub wpisz #"#"#, gdzie , i to wartoci

Jeli jako , lub wpiszesz warto wiksz od 255,

, jeli ta zostanie zapisana jako ostatnia.

lub wpisz , aby wskanik przybra posta

1. Wpisz , gdzie jest szerokoci dodawanego

Do waciwoci mona take doda jedn

Faktyczna wielko warto przypisywanej

Waciwoci mona przypisa od jednej