HTML, XHTML I CSS. Biblia. Wydanie V

Id do
Spis treci
Przykadowy rozdzia
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
Kontakt
Helion SA
ul. Kociuszki 1c
44-100 Gliwice
tel. 32 230 98 63
e-mail: helion@helion.pl
Helion 19912010
HTML, XHTML i CSS.

Biblia. Wydanie V
Autor: Steven M. Schafer
Tumaczenie: Piotr Rajca
ISBN: 978-83-246-2742-4
Tytu oryginau: HTML, XHTML, and CSS Bible
Format: 172245, stron: 768
Opanuj moliwoci jzyka HTML i kaskadowych arkuszy stylw

Twrz strony statyczne, dynamiczne i na urzdzenia mobilne
Odkryj sposoby rozbudowania stron WWW
Jeli czytasz notk tej ksiki, zapewne zdecydowae si na stworzenie wasnej, profesjonalnej
strony internetowej. Jedyne, czego Ci teraz trzeba, to wiedza, jak sprawnie wykorzysta niezbdny
w tym celu zestaw technologii jzyki HTML i XHTML oraz kaskadowe arkusze stylw CSS.
To wanie te narzdzia pozwalaj zbudowa dokument witryny, sformatowa umieszczone na
niej teksty, osadza elementy multimedialne i nadawa jej atrakcyjny wizualnie wygld oraz
nowoczesny, dynamiczny charakter. A jeli masz jeszcze wtpliwoci, czy zadanie to ley
w zasigu Twoich umiejtnoci, ta ksika z pewnoci je rozwieje!
Podrcznik ten, adresowany zarwno do pocztkujcych webmasterw, jak i zawodowcw, dla
pierwszych stanowi solidn podstaw do rozpoczcia przygody z tworzeniem stron WWW,
natomiast dla drugich wyczerpujce kompendium wiedzy o odpowiednich technologiach.
Autor tak uporzdkowa zagadnienia od prostych po zoone aby w jak najwikszym stopniu
uatwi ich opanowanie przez czytelnika. Nauk rozpoczniesz zatem od poznania znacznikw
HTML, struktury i atrybutw tego jzyka. Dowiesz si, jak uywa multimediw i skryptw, oraz
skorzystasz z programw wspomagajcych tworzenie czy testowanie dokumentw. Pniej
przeczytasz o praktycznych rozszerzeniach HTML XML i HTML Basic oraz zgbisz wszystkie
kwestie zwizane ze stosowaniem CSS i publikacj strony. Ogarniesz w ten sposb wszystkie
aspekty samodzielnego budowania nowoczesnej, zgodnej ze standardami, estetycznej witryny
internetowej!
Budowanie treci z wykorzystaniem jzyka HTML
Tworzenie list, czy, tabel i ramek
Osadzanie elementw multimedialnych
Skrypty serwerowe i skrypty klienckie
Czym jest i czemu suy DHTML?
Projektowanie serwisw wielojzycznych i zasady lokalizacji serwisw
Publikacja witryny w sieci
Porzdkowanie i walidacja dokumentw
Zastosowanie jzyka XML
Tworzenia stron dla urzdze mobilnych
Kontrola prezentacji za pomoc jzyka CSS
Praktyczne sztuczki i triki w CSS
Spis treci
O autorze ......................................................................................................... 21
Wprowadzenie ................................................................................................. 23
Cz I Tworzenie treci z wykorzystaniem jzyka HTML ........... 33

Rozdzia 1. Czym jest jzyk znacznikw? ........................................................ 35
Co tu robimy? .....................................................................................................................................35
Przedstawienie hipertekstu ..................................................................................................................36
Przedstawienie instrukcji znacznikowych ...........................................................................................37
Przedstawienie jzyka znacznikw .....................................................................................................38
Podsumowanie ....................................................................................................................................40
Rozdzia 2. Wartoci i jednostki w HTML-u ...................................................... 41
Podstawowa posta zapisu atrybutw .................................................................................................41
Wsplne atrybuty ................................................................................................................................44
Identyfikacja znacznikw identyfikatory i klasy ......................................................................44
Teksty i komentarze ............................................................................................................................45
Komentarze ...................................................................................................................................45
Sekcje CDATA .............................................................................................................................46
Jednolite identyfikatory zasobw ........................................................................................................47
Opcje jzyka i ustawienia midzynarodowe .......................................................................................47
Kod jzyka ....................................................................................................................................48
Kierunek tekstu .............................................................................................................................48
Podsumowanie ....................................................................................................................................48
Rozdzia 3. Co jest umieszczane w dokumentach HTML? ................................ 49
Okrelanie typu dokumentu ................................................................................................................50
Oglna struktura dokumentu HTML, nagwek i tre ..................................................................50
Znacznik <html> ...........................................................................................................................51
Znacznik <head> ..........................................................................................................................51
Znacznik <body> ..........................................................................................................................52
Definicje stylw ..................................................................................................................................52
Elementy blokowe oznaczenia definiujce akapity oraz inne bloki treci ......................................53
Sformatowane akapity ..................................................................................................................54
Nagwki ......................................................................................................................................54
Cytaty ...........................................................................................................................................56
Elementy list .................................................................................................................................57
HTML, XHTML i CSS. Biblia

Tekst preformatowany ..................................................................................................................58
Sekcje strony .................................................................................................................................59
Elementy wewntrzwierszowe oznaczenia znakw .......................................................................61
Podstawowe znaczniki wewntrzwierszowe .................................................................................61
Fragmenty tekstu ..........................................................................................................................62
Znaki specjalne (symbole znakowe) ...................................................................................................63
Elementy organizacyjne ......................................................................................................................64
Tabele ...........................................................................................................................................64
Formularze ....................................................................................................................................65
cza do innych stron .........................................................................................................................67

Obrazy .................................................................................................................................................68
Komentarze .........................................................................................................................................69
Skrypty ................................................................................................................................................69
Poczenie wszystkich elementw ......................................................................................................70
Podsumowanie ....................................................................................................................................71
Rozdzia 4. Elementy nagwka ........................................................................ 73
Okrelanie tytuu dokumentu ..............................................................................................................73
Podawanie informacji uywanych przez wyszukiwarki ......................................................................74
Okrelanie domylnej cieki ..............................................................................................................75
Sekcje skryptw ..................................................................................................................................77
Sekcje stylw ......................................................................................................................................77
Okrelanie profili ................................................................................................................................77
Kolor i obraz ta ..................................................................................................................................78
Okrelanie koloru ta dokumentu ..................................................................................................78
Okrelanie obrazu ta dokumentu .................................................................................................79
Podsumowanie ....................................................................................................................................80
Rozdzia 5. Podstawy okrelania struktury tekstw ...................................... 81
Formatowanie akapitw ......................................................................................................................81
Podzia wiersza ...................................................................................................................................83
Sekcje ..................................................................................................................................................84
Poziome linie ......................................................................................................................................88
Cytaty blokowe ...................................................................................................................................89
Tekst preformatowany ........................................................................................................................90
Podsumowanie ....................................................................................................................................91
Rozdzia 6. Tekst ............................................................................................... 93
Metody formatowania tekstu ...............................................................................................................93
Znacznik <font> ...........................................................................................................................94
Akcentowanie i inne znaczniki dotyczce tekstu ..........................................................................94
Formatowanie tekstu przy uyciu CSS .........................................................................................94
Pogrubienie i kursywa .........................................................................................................................97
Stosowanie uwypuklenia zamiast kursywy .........................................................................................97
Czcionka o staej szerokoci ...............................................................................................................98
Indeksy grny i dolny ....................................................................................................................98
Skrty ..................................................................................................................................................99
Oznaczanie zmian w dokumencie wstawianie i usuwanie tekstu ...................................................99
Grupowanie elementw tekstowych znacznikiem <span> ................................................................100
Podsumowanie ..................................................................................................................................101
Spis treci
Rozdzia 7. Listy .............................................................................................. 103

Omwienie list ..................................................................................................................................103
Listy uporzdkowane (numerowane) ................................................................................................104
Listy nieuporzdkowane (punktowane) ............................................................................................108
Listy definicji ....................................................................................................................................112
Listy zagniedone ............................................................................................................................114
Podsumowanie ..................................................................................................................................115
Rozdzia 8. cza ............................................................................................. 117
Czym s cza? ..................................................................................................................................118
cza do stron WWW .......................................................................................................................119
cza wzgldne i bezwzgldne .........................................................................................................120

Docelowe okna czy ........................................................................................................................122
Tekst podpowiedzi cza ...................................................................................................................123
Skrty klawiaturowe i kolejno uaktywniania czy .......................................................................123
Skrty klawiaturowe ...................................................................................................................124
Kolejno uaktywniania czy ....................................................................................................125
Tworzenie kotwic ..............................................................................................................................125
Dobr kolorw czy .........................................................................................................................126
Parametry dokumentu docelowego ...................................................................................................128
Znacznik <link> ................................................................................................................................129
Podsumowanie ..................................................................................................................................130
Rozdzia 9. Tabele ........................................................................................... 131
Czci skadowe tabeli HTML ..........................................................................................................131
Szeroko i wyrwnanie tabeli ..........................................................................................................133
Odstpy i otoczenie komrek ............................................................................................................137
Obramowanie i krawdzie ................................................................................................................138
Obramowanie tabeli ....................................................................................................................138
Krawdzie tabeli .........................................................................................................................140
Wiersze .............................................................................................................................................140
Komrki ............................................................................................................................................142
Podpis tabeli ......................................................................................................................................144
Grupowanie wierszy nagwek, tre i stopka tabeli ....................................................................146
Kolor ta ............................................................................................................................................148
Komrki rozcigajce si na kilka wierszy lub kolumn ....................................................................149
Grupowanie kolumn ..........................................................................................................................153
Zastosowanie tabel do formatowania stron .......................................................................................154
Podstawy formatowania z wykorzystaniem tabel .......................................................................155
Przykady stron dostpnych w internecie ....................................................................................158
Strony pywajce ........................................................................................................................158
Niestandardowe poczenie grafiki i tekstu ................................................................................163
Menu nawigacyjne i bloki dokumentw .....................................................................................166
Dokumenty wielokolumnowe .....................................................................................................167
Podsumowanie ..................................................................................................................................169
Rozdzia 10. Ramki ........................................................................................... 171
Omwienie ramek .............................................................................................................................171
Zbiory ramek i zawarto ramek .......................................................................................................172
Tworzenie zbioru ramek .............................................................................................................173
Marginesy, obramowania i paski przewijania ramek ..................................................................176
Modyfikacja rozmiaru ramek ......................................................................................................179
10

Odsyacze do ramek ..........................................................................................................................179
Zagniedone zbiory ramek ..............................................................................................................182
Ramki pywajce ...............................................................................................................................183
Podsumowanie ..................................................................................................................................186
Rozdzia 11. Formularze .................................................................................. 187
Podstawowe informacje o formularzach ...........................................................................................188
Wstawianie formularzy .....................................................................................................................191
Metoda GET ...............................................................................................................................191
Metoda POST .............................................................................................................................192
Dodatkowe atrybuty znacznika <form> ......................................................................................192
Etykiety pl .......................................................................................................................................193
Pola tekstowe ....................................................................................................................................193
Pola hase ..........................................................................................................................................194
Przyciski opcji ...................................................................................................................................194
Pola wyboru ......................................................................................................................................195
Listy wyboru .....................................................................................................................................195
Obszary tekstowe ..............................................................................................................................197
Pola ukryte ........................................................................................................................................199
Przyciski ...........................................................................................................................................199
Rysunki .............................................................................................................................................200
Pola plikw .......................................................................................................................................201
Przyciski przesyania danych i czyszczenia pl ................................................................................202
Kolejno uaktywniania kontrolek i skrty klawiaturowe ................................................................203
Uniemoliwienie wprowadzania zmian ............................................................................................203
Grupy pl i ich opis ...........................................................................................................................205
Stosowanie zdarze do obsugi formularzy .......................................................................................206
Skrypty formularzy i usugi skryptowe .............................................................................................210
Pobranie programu obsugi formularza .......................................................................................210
Wykorzystanie usug skryptowych .............................................................................................211
Podsumowanie ..................................................................................................................................211
Rozdzia 12. Kolory i rysunki ........................................................................... 213
Podstawowe informacje o kolorach ..................................................................................................213
Inne sposoby okrelania kolorw ......................................................................................................214
Ewolucja kolorw uywanych na stronach WWW ...........................................................................215
Stosowanie odpowiednich metod okrelania kolorw ......................................................................221
Formaty graficzne stosowane w dokumentach WWW .....................................................................223
Kompresja obrazu .......................................................................................................................223
Opcje kompresji ..........................................................................................................................224
Format GIF .................................................................................................................................225
Format JPEG ...............................................................................................................................225
Format PNG ................................................................................................................................226
Przygotowanie plikw graficznych ...................................................................................................226
Najwaniejsze funkcje ................................................................................................................227
Progresywne obrazy JPEG i rysunki GIF z przeplotem ..............................................................228
Wykorzystanie efektu przezroczystoci ......................................................................................228
Animacje .....................................................................................................................................229
Wstawianie rysunkw .......................................................................................................................230
Rozmieszczanie rysunkw ................................................................................................................232
Spis treci
11
Opis wywietlany w przegldarkach tekstowych ..............................................................................235

Wymiary i skalowanie rysunkw ......................................................................................................236
Obramowanie rysunkw ...................................................................................................................238
Mapy obrazu .....................................................................................................................................239
Definiowanie mapy obrazu .........................................................................................................240
Definiowanie obszarw aktywnych ............................................................................................240
Poczenie poszczeglnych rozwiza .......................................................................................243
Podsumowanie ..................................................................................................................................244
Rozdzia 13. Obiekty multimedialne ............................................................... 245
Animowane obrazy ...........................................................................................................................246
Formaty animacji i klipw wideo, pluginy oraz odtwarzacze ...........................................................248
Popularne formaty i odtwarzacze ................................................................................................250
Windows Media Player ...............................................................................................................251
Osadzanie multimediw przy uyciu znacznika <object> ................................................................251
Osadzanie odtwarzacza Windows Media Player przy uyciu znacznika <object> ...........................255
Osadzanie klipw wideo z serwisu YouTube ...................................................................................256
Umieszczanie plikw dwikowych na stronach WWW ..................................................................260
Tworzenie plikw multimedialnych ..................................................................................................261
Podsumowanie zagadnie wykorzystania multimediw na stronach WWW ....................................261
Podsumowanie ..................................................................................................................................262
Rozdzia 14. Znaki specjalne ........................................................................... 263
Kodowanie znakw ...........................................................................................................................263
Znaki specjalne .................................................................................................................................264
Znaki spacji i mylnikw ..................................................................................................................265
Symbol praw autorskich i znaku towarowego ...................................................................................266
Symbole walut ..................................................................................................................................267
Rzeczywiste znaki cudzysowu .........................................................................................................267
Strzaki ..............................................................................................................................................268
Znaki zawierajce symbole akcentu ..................................................................................................269
Litery alfabetu greckiego i symbole matematyczne ..........................................................................271
Inne uyteczne symbole ....................................................................................................................274
Podsumowanie ..................................................................................................................................276
Rozdzia 15. Projektowanie stron WWW dla obcokrajowcw ...................... 277
Projektowanie serwisw wielojzycznych i zasady lokalizacji serwisw .........................................277
Tumaczenie strony internetowej ......................................................................................................279
Standard Unicode ..............................................................................................................................279
Basic Latin (podstawowy aciski, U+0000 U+007F) .............................................................284
Kodowanie polskich znakw diakrytycznych .............................................................................290
Podsumowanie ..................................................................................................................................290
Rozdzia 16. Skrypty ........................................................................................ 293
Skrypty serwerowe i skrypty klienckie .............................................................................................293
Skrypty klienckie ........................................................................................................................293
Skrypty serwerowe .....................................................................................................................294
Okrelanie domylnego jzyka skryptowego ....................................................................................294
Doczanie skryptw .........................................................................................................................295
Wywoywanie zewntrznych skryptw .............................................................................................296
12

Wywoywanie skryptw za pomoc zdarze ....................................................................................297
Ukrywanie skryptw przed starszymi przegldarkami ......................................................................301
Podsumowanie ..................................................................................................................................301
Rozdzia 17. Dynamiczny HTML ....................................................................... 303
Do czego suy dynamiczny HTML? ................................................................................................303
Jak dziaa DHTML? ..........................................................................................................................304
Obiektowy model dokumentu ...........................................................................................................305
Historia DOM .............................................................................................................................305
Opis obiektowego modelu dokumentu ........................................................................................306
Waciwoci i metody wzw DOM .........................................................................................308
Poruszanie si po drzewie DOM i modyfikacja wzw .............................................................309
Obiektowy model dokumentu jzyka JavaScript ..............................................................................312
Obiekt window ...........................................................................................................................313
Obiekt document .........................................................................................................................315
Obiekt form .................................................................................................................................316
Obiekt location ...........................................................................................................................316
Obiekt history .............................................................................................................................317
Obiekt this ..................................................................................................................................317
Stosowanie procedur obsugi zdarze ...............................................................................................318
Dostp do elementw przy wykorzystaniu ich identyfikatorw .......................................................319
Zagadnienia zgodnoci z rnymi przegldarkami ...........................................................................320
Wykrywanie uywanej przegldarki ...........................................................................................320
Wykrywanie obiektw ................................................................................................................321
Przykady rozwiza DHTML ..........................................................................................................321
Automatyzacja formularzy obsuga pl wyboru ..........................................................................322
Tworzenie efektw podmiany przy wykorzystaniu JavaScriptu .................................................323
Rozwijane menu .........................................................................................................................324
Podsumowanie ..................................................................................................................................327
Rozdzia 18. Przyszo jzyka HTML HTML 5 ............................................. 329
Wiksze moliwoci publikowania i okrelania ukadu ....................................................................329
Dostpne multimedia ........................................................................................................................331
Zmiany elementy i atrybuty .........................................................................................................332
Nowe elementy ...........................................................................................................................333
Nowe atrybuty w elementach ......................................................................................................333
Nowe typy pl formularzy (elementu input) ...............................................................................334
Nowe globalne atrybuty ..............................................................................................................335
Elementy uznane za przedawnione .............................................................................................335
Przedawnione atrybuty ...............................................................................................................336
Podsumowanie ..................................................................................................................................337
Cz II Narzdzia oraz inne wersje jzyka HTML ...................... 339

Rozdzia 19. Programy do projektowania stron internetowych ................. 341
Edytory tekstowe ..............................................................................................................................342
Proste edytory tekstowe ..............................................................................................................342
Inteligentne edytory tekstowe .....................................................................................................342
Edytory HTML ...........................................................................................................................343
Spis treci
13
Edytory HTML pracujce w trybie WYSIWYG ...............................................................................345

NetObjects Fusion ......................................................................................................................345
Dreamweaver firmy Macromedia ...............................................................................................346
Dodatki do przegldarki Firefox .................................................................................................347
Inne narzdzia ...................................................................................................................................349
Programy graficzne .....................................................................................................................349
Flash firmy Adobe ......................................................................................................................351
Podsumowanie ..................................................................................................................................352
Rozdzia 20. Publikacja witryn ........................................................................ 353
Wprowadzenie do FTP ......................................................................................................................353
Programy klienty FTP .......................................................................................................................354
Popularne klienty FTP ......................................................................................................................356
Podstawowe zasady organizacji plikw w obrbie witryny WWW ..................................................358
Podsumowanie ..................................................................................................................................359
Rozdzia 21. Wprowadzenie do jzyka XML ................................................... 361
Podstawy jzyka XML ......................................................................................................................362
Skadnia jzyka XML .......................................................................................................................363
Deklaracje XML i DOCTYPE ....................................................................................................364
Elementy .....................................................................................................................................364
Atrybuty ......................................................................................................................................366
Komentarze .................................................................................................................................367
Dane nieprzetwarzane .................................................................................................................367
Stae tekstowe .............................................................................................................................367
Przestrzenie nazw .......................................................................................................................368
Arkusze stylw ...........................................................................................................................369
Definicje typu dokumentu (DTD) .....................................................................................................369
Uycie elementw w definicji typu dokumentu ..........................................................................371
Definiowanie atrybutw w DTD .................................................................................................373
Definiowanie i uycie staych tekstowych w definicji DTD .......................................................374
Uycie danych typu PCDATA i CDATA w definicji typu .........................................................375
Schematy XML .................................................................................................................................375
Uycie schematw ............................................................................................................................376
Zastosowanie dokumentw XML .....................................................................................................378
Przeksztacenia XSLT .................................................................................................................379
Edycja kodu XML ......................................................................................................................379
Analiza kodu XML .....................................................................................................................379
Podsumowanie ..................................................................................................................................380
Rozdzia 22. Tworzenie stron dla urzdze przenonych ............................ 381
Ewolucja internetu mobilnego ..........................................................................................................381
Mroczne pocztki internetu mobilnego .......................................................................................382
Organizacja Open Mobile Alliance i nowe standardy .................................................................383
Podsumowanie ............................................................................................................................383
Jzyk XHTML Basic 1.1 ..................................................................................................................384
Deklaracja doctype XHTML Basic 1.1 .......................................................................................384
Elementy jzyka XHTML Basic 1.1 ...........................................................................................384
Zagadnienia wymagajce szczeglnej uwagi ..............................................................................385
Narzdzia do tworzenia stron dla urzdze przenonych ..................................................................388
Podsumowanie ..................................................................................................................................389
14

Rozdzia 23. Porzdkowanie i walidacja dokumentw ................................. 391
Porzdkowanie kodu HTML .............................................................................................................391
HTML Tidy ................................................................................................................................394
Pobieranie narzdzia HTML Tidy ..............................................................................................394
Uruchamianie narzdzia HTML Tidy .........................................................................................394
Sprawdzanie poprawnoci kodu ........................................................................................................397
Okrelanie poprawnego typu dokumentu ....................................................................................397
Narzdzia do weryfikacji poprawnoci kodu ..............................................................................397
Jak weryfikowa dokumenty? .....................................................................................................397
Dodatkowe testy i walidacja .............................................................................................................399
Testowanie kodu w rnych przegldarkach ..............................................................................399
Testowanie w rnych rozdzielczociach ekranu .......................................................................400
Podsumowanie ..................................................................................................................................400
Rozdzia 24. Sztuczki i triki w jzyku HTML .................................................... 401
Wstpne wczytywanie rysunkw ......................................................................................................401
Kontrolowanie podziau tekstu w komrkach tabeli .........................................................................403
Paski tytuu o zmiennej szerokoci ...................................................................................................404
Symulowanie gazetowego ukadu kolumn ........................................................................................406
Doczanie rozmiaru rysunkw w celu przyspieszenia ich wczytywania .........................................408
Zabezpieczenia adresw e-mail ........................................................................................................409
Automatyzacja formularzy ................................................................................................................411
Operacje na obiektach formularzy ..............................................................................................411
Weryfikacja wartoci pl ............................................................................................................413
Modyfikowanie rodowiska przegldarki .........................................................................................416
Koncepcja ...................................................................................................................................416
Implementacja ............................................................................................................................416
Zastosowane funkcje JavaScript .................................................................................................421
Podsumowanie ..................................................................................................................................422
Cz III Kontrolowanie prezentacji za pomoc CSS .................. 423

Rozdzia 25. Wprowadzenie do kaskadowych arkuszy stylw ..................... 425
Przeznaczenie CSS ............................................................................................................................425
Style i HTML ....................................................................................................................................426
1., 2. i 3. poziom CSS .......................................................................................................................428
Definiowanie stylw .........................................................................................................................429
Kaskada stylw .................................................................................................................................430
Podsumowanie ..................................................................................................................................432
Rozdzia 26. Tworzenie regu stylw ............................................................. 433
Zapis definicji stylw ........................................................................................................................433
Przedstawienie selektorw ................................................................................................................435
Dopasowywanie elementw wedug typu ...................................................................................435
Korzystanie z selektora uniwersalnego .......................................................................................435
Dopasowywanie elementw wedug klasy .................................................................................436
Dopasowywanie elementw przy uyciu identyfikatora .............................................................437
Dopasowywanie elementw, ktre zawieraj okrelony atrybut ................................................437
Korzystanie z elementw dzieci, potomkw oraz elementw przystajcych ..............................438
Omwienie dziedziczenia .................................................................................................................440
Spis treci
15
Pseudoklasy i ich stosowanie ............................................................................................................441

Definiowanie stylw czy ..........................................................................................................441
Pseudoklasa :first-child ...............................................................................................................442
Pseudoklasa :lang ........................................................................................................................442
Pseudoelementy ................................................................................................................................443
Stosowanie stylw dla pierwszego wiersza tekstu w elemencie .................................................443
Stosowanie stylw dla pierwszej litery elementu ........................................................................444
Definiowanie przed danym tekstem i po nim ..............................................................................445
Wyraenia skrtowe ..........................................................................................................................446
Podsumowanie ..................................................................................................................................448
Rozdzia 27. Wartoci i jednostki w jzyku CSS ............................................. 449
Oglne zasady podawania wartoci waciwoci ..............................................................................449
Jednostki wartoci waciwoci .........................................................................................................451
Wartoci w postaci sw kluczowych .........................................................................................452
Standardowe jednostki miar ........................................................................................................452
Miary rozdzielczoci ekranu .......................................................................................................453
Miary wzgldne ..........................................................................................................................454
Funkcje zwizane z kolorami i adresami URL ...........................................................................455
Jednostki dwikowe ..................................................................................................................456
Podsumowanie ..................................................................................................................................457
Rozdzia 28. Dziedziczenie i kaskadowanie w jzyku CSS ............................. 459
Dziedziczenie ....................................................................................................................................459
Kaskadowanie ...................................................................................................................................461
Specyficzno selektorw .................................................................................................................463
Podsumowanie ..................................................................................................................................464
Rozdzia 29. Waciwoci czcionek ................................................................. 465
Wprowadzenie do czcionek ..............................................................................................................465
Rodzaje czcionek ..............................................................................................................................466
Okrelanie rozmiaru czcionki ...........................................................................................................468
Okrelanie stylu czcionki ..................................................................................................................469
Interlinie ............................................................................................................................................470
Zagniedanie czcionek w dokumencie ............................................................................................470
Podsumowanie ..................................................................................................................................472
Rozdzia 30. Formatowanie tekstu ................................................................ 473
Wyrwnywanie tekstu .......................................................................................................................473
Kontrolowanie wyrwnania poziomego .....................................................................................474
Kontrolowanie wyrwnania pionowego .....................................................................................476
Tworzenie wcicia w tekcie ............................................................................................................479
Kontrolowanie znakw niewidocznych w tekcie .............................................................................479
Obiekty przestawne ....................................................................................................................479
Waciwo white-space .............................................................................................................481
Kontrolowanie odstpw midzy literami i sowami ........................................................................483
Definiowanie wielkich liter ...............................................................................................................484
Dekorowanie tekstu ..........................................................................................................................486
Tekst generowany automatycznie .....................................................................................................487
Definiowanie stylw tabeli ...............................................................................................................487
16

Kontrolowanie atrybutw tabeli ........................................................................................................488
Obramowanie tabeli ....................................................................................................................488
Odstpy w ramce tabeli ...............................................................................................................489
Pojedyncze obramowanie ...........................................................................................................491
Obramowania wok pustych komrek ......................................................................................492
Ukad graficzny tabeli .......................................................................................................................493
Wyrwnywanie i pozycjonowanie podpisw ....................................................................................493
Podsumowanie ..................................................................................................................................495
Rozdzia 31. Formatowanie list ...................................................................... 497
Oglne informacje o listach ..............................................................................................................497
CSS kady element pasuje ...........................................................................................................498
Waciwo list-style-type ................................................................................................................499
Pozycjonowanie markerw ...............................................................................................................501
Punktory rysunkowe .........................................................................................................................501
Podsumowanie ..................................................................................................................................502
Rozdzia 32. Obramowania, odstpy i marginesy ......................................... 503
Omwienie modelu formatowania pojemnika ..................................................................................503
Dodawanie odstpu do elementu .......................................................................................................506
Dodawanie obramowania ..................................................................................................................507
Szeroko obramowania .............................................................................................................507
Styl obramowania .......................................................................................................................508
Kolor ramki .................................................................................................................................510
Najwikszy skrt: waciwo border .........................................................................................510
Dodatkowe waciwoci obramowa ..........................................................................................511
Definiowanie marginesw elementu .................................................................................................511
Wykorzystywanie dynamicznego obramowania ...............................................................................513
Podsumowanie ..................................................................................................................................514
Rozdzia 33. Kolory i to .................................................................................. 515
Kolory elementw .............................................................................................................................515
Kolor pierwszoplanowy ..............................................................................................................515
Kolory ta ....................................................................................................................................516
Obrazy ta ..........................................................................................................................................519
Powtarzanie i przewijanie obrazw ta .......................................................................................522
Okrelanie pozycji obrazw ta ...................................................................................................523
Skrtowa waciwo background ..............................................................................................525
Podsumowanie ..................................................................................................................................525
Rozdzia 34. Definiowanie ukadw stron ..................................................... 527
Omwienie pozycjonowania elementw ...........................................................................................527
Pozycjonowanie statyczne ..........................................................................................................528
Pozycjonowanie wzgldne ..........................................................................................................529
Pozycjonowanie bezwzgldne ....................................................................................................529
Pozycjonowanie stae ..................................................................................................................530
Okrelanie pozycji elementu .............................................................................................................532
Elementy dryfujce do lewej lub prawej strony ................................................................................534
Definiowanie szerokoci i wysokoci elementu ................................................................................537
Dokadne definiowanie rozmiarw .............................................................................................537
Definiowanie rozmiaru maksymalnego oraz minimalnego .........................................................538
Kontrola przepenienia elementu ................................................................................................539
Spis treci
17
Ukadanie elementw na stosie .........................................................................................................540

Kontrolowanie widocznoci elementu ..............................................................................................544
Podsumowanie ..................................................................................................................................546
Rozdzia 35. Pseudoelementy i wygenerowane treci ................................. 547
Waciwo content ..........................................................................................................................547
Pseudoelementy ................................................................................................................................549
Stosowanie stylw dla pierwszego wiersza tekstu w elemencie .................................................550
Stosowanie stylw dla pierwszej litery elementu ........................................................................550
Pseudoelementy :before i :after ..................................................................................................552
Definiowanie znakw cudzysowu ....................................................................................................553
Automatyczne numerowanie elementw ..........................................................................................553
Obiekt counter ............................................................................................................................554
Zmienianie wartoci obiektu counter ..........................................................................................554
Przykad zastosowania licznikw: numery rozdziaw i podrozdziaw ....................................555
Wasne numerowanie list ............................................................................................................556
Podsumowanie ..................................................................................................................................558
Rozdzia 36. Dynamiczny HTML i CSS ............................................................... 559
Korzystanie z waciwoci CSS w kodzie JavaScript .......................................................................559
Uyteczne operacje z uyciem CSS ..................................................................................................565
Ukrywanie i wywietlanie tekstu ................................................................................................565
Powikszanie obrazkw ..............................................................................................................567
Podmieniane menu ......................................................................................................................569
Podsumowanie ..................................................................................................................................572
Rozdzia 37. Typy mediw i definiowanie stron do druku ........................... 573
Typy mediw obsugiwane przez CSS ..............................................................................................574
Okrelanie typu mediw .............................................................................................................574
Przygotowywanie dokumentu do drukowania ..................................................................................577
Model formatowania pojemnika strony ......................................................................................577
Definiowanie rozmiaru strony ....................................................................................................577
Waciwoci page-break .............................................................................................................580
Zarzdzanie wdowami i sierotami ..............................................................................................583
Przygotowanie dokumentu do drukowania dwustronnego ..........................................................584
Tworzenie dokumentw dla rnych mediw ..................................................................................585
Dokument do prezentacji w internecie ........................................................................................585
Ponowne formatowanie strony ...................................................................................................589
Podsumowanie ..................................................................................................................................590
Rozdzia 38. Przyszo CSS CSS 3 ............................................................... 591
Po prostu lepsze ................................................................................................................................592
Modularno .....................................................................................................................................592
Stosowanie waciwoci CSS 3 ju dzi ............................................................................................594
Wiksza kontrola nad wybieranymi elementami ...............................................................................595
Zaokrglone wierzchoki elementw raz jeszcze ..............................................................................596
Podsumowanie ..................................................................................................................................597
18
Cz IV Dodatkowe narzdzia CSS ............................................. 599

Rozdzia 39. Style interfejsu uytkownika .................................................... 601
Modyfikacje wygldu wskanika myszy ..........................................................................................601
Kolory interfejsu uytkownika ..........................................................................................................603
Czcionki interfejsu uytkownika .......................................................................................................606
Podsumowanie ..................................................................................................................................607
Rozdzia 40. Testowanie i walidacja kodu CSS ............................................... 609
Sprawdzanie skadni w czasie tworzenia stylw ...............................................................................609
Sowo o formatowaniu ......................................................................................................................611
Walidacja kodu CSS .........................................................................................................................612
Dodatki do przegldarki Firefox suce do edycji CSS ...................................................................613
Podsumowanie ..................................................................................................................................614
Rozdzia 41. Sztuczki i triki w jzyku CSS ....................................................... 615
Wysunicie .......................................................................................................................................615
Rozszerzajce si przyciski ...............................................................................................................617
Wyrnione cytaty ............................................................................................................................620
Menu w formie zakadek ...................................................................................................................622
Elementy z zaokrglonymi wierzchokami .................................................................................624
Elementy pywajce ....................................................................................................................627
Tekst otaczajcy inne elementy ..................................................................................................630
Podsumowanie ..................................................................................................................................634
Dodatki ....................................................................................... 635

Dodatek A Krtki przegld elementw jzyka HTML .................................... 637
Lista elementw ................................................................................................................................638
<a> ..............................................................................................................................................638
<abbr> ........................................................................................................................................639
<acronym> ..................................................................................................................................639
<address> ....................................................................................................................................640
<area> (rzadko stosowany) .........................................................................................................641
<b> .............................................................................................................................................641
<base> ........................................................................................................................................642
<bdo> ..........................................................................................................................................642
<big> ..........................................................................................................................................643
<blockquote> ..............................................................................................................................643
<body> ........................................................................................................................................644
<br> ............................................................................................................................................645
<button> .....................................................................................................................................645
<caption> ....................................................................................................................................646
<cite> ..........................................................................................................................................647
<code> ........................................................................................................................................647
<col> ...........................................................................................................................................648
<colgroup> .................................................................................................................................648
<dd> ............................................................................................................................................649
<del> ...........................................................................................................................................649
<dfn> ..........................................................................................................................................650
<div> ..........................................................................................................................................650
Spis treci
19
<dl> ............................................................................................................................................651
<dt> ............................................................................................................................................651
<em> ...........................................................................................................................................652
<fieldset> ....................................................................................................................................652
<form> ........................................................................................................................................653
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> ........................................................................................654
<head> ........................................................................................................................................654
<hr> ............................................................................................................................................655
<html> ........................................................................................................................................655
<i> ..............................................................................................................................................656
<img> .........................................................................................................................................656
<input> .......................................................................................................................................657
<ins> ...........................................................................................................................................658
@<kbd> ......................................................................................................................................659
<label> ........................................................................................................................................659
<legend> .....................................................................................................................................660
<li> .............................................................................................................................................660
<link> .........................................................................................................................................661
<map> .........................................................................................................................................662
<meta> ........................................................................................................................................662
<noscript> ...................................................................................................................................663
<object> ......................................................................................................................................664
<ol> ............................................................................................................................................665
<optgroup> .................................................................................................................................665
<option> .....................................................................................................................................666
<p> .............................................................................................................................................666
<param> ......................................................................................................................................667
<pre> ..........................................................................................................................................668
<q> .............................................................................................................................................668
<samp> .......................................................................................................................................669
<script> .......................................................................................................................................669
<select> ......................................................................................................................................670
<small> .......................................................................................................................................671
<span> ........................................................................................................................................672
<strong> ......................................................................................................................................672
<style> ........................................................................................................................................673
<sub> ..........................................................................................................................................674
<sup> ..........................................................................................................................................674
<table> ........................................................................................................................................674
<tbody> ......................................................................................................................................676
<td> ............................................................................................................................................676
<textarea> ...................................................................................................................................677
<tfoot> ........................................................................................................................................678
<th> ............................................................................................................................................678
<thead> .......................................................................................................................................679
<title> .........................................................................................................................................680
<tr> .............................................................................................................................................680
<tt> .............................................................................................................................................681
<ul> ............................................................................................................................................682
<var> ..........................................................................................................................................682
20

Atrybuty zdarze ...............................................................................................................................683
Zdarzenia standardowe ...............................................................................................................683
Inne zdarzenia .............................................................................................................................683
Inne czsto spotykane atrybuty .........................................................................................................684
Atrybuty podstawowe .................................................................................................................684
Atrybuty umidzynarodawiania ..................................................................................................684
Kody czsto uywanych kolorw ...............................................................................................684
Dodatek B Krtki przegld znakw specjalnych jzyka HTML ..................... 685
Dodatek C Krtki przegld waciwoci jzyka CSS ...................................... 695
Lista waciwoci ..............................................................................................................................696
Lista waciwoci zestawienie ...............................................................................................696
To ..............................................................................................................................................698
Listy ............................................................................................................................................700
Wygenerowane dane ...................................................................................................................702
Czcionki i tekst ...........................................................................................................................703
Kierunek tekstu ...........................................................................................................................707
Bloki ...........................................................................................................................................708
Okrelanie pozycji elementw ....................................................................................................711
Obramowania ..............................................................................................................................713
Tabele .........................................................................................................................................716
Druk ............................................................................................................................................717
Rne ..........................................................................................................................................718
Dodatek D Krtki przegld selektorw jzyka CSS ....................................... 721
Podstawowe selektory elementw ....................................................................................................722
Selektory potomkw .........................................................................................................................722
Selektory dzieci .................................................................................................................................722
Selektory pierwszego brata ...............................................................................................................723
Selektory klas ....................................................................................................................................723
Selektory identyfikatorw .................................................................................................................723
Selektory atrybutw ..........................................................................................................................724
Dodatek E Krtki przegld pseudoelementw i pseudoklas ....................... 725
Pseudoelementy ................................................................................................................................726
Pseudoklasy ......................................................................................................................................726
Skorowidz ...................................................................................................... 729
Rozdzia 36.
Dynamiczny HTML i CSS

W tym rozdziale:
Korzystanie z waciwoci CSS w kodzie JavaScript
Uyteczne operacje z uyciem CSS
Kaskadowe arkusze stylw mog by potnym narzdziem umoliwiajcym tworzenie

adnie sformatowanych stron WWW. W tym rozdziale opisano, w jaki sposb w rnych
przegldarkach mona manipulowa wartociami waciwoci CSS, by nada dokumentom HTML dynamiczny charakter. Dowiesz si z niego, w jaki sposb mona uzyskiwa
dostp do waciwoci CSS oraz jak operowa nimi w skryptach, aby wykonywa takie
operacje jak zmiana koloru tekstu. Jak si okae, mona zmieni warto kadej waciwoci CSS.
Jak si przekonasz, niektre przegldarki (mamy tu na myli gwnie program Internet
Explorer) udostpniaj moliwo tworzenia dynamicznych efektw wizualnych, takich
jak cienie i rozmycia, z wykorzystaniem skadni zblionej do CSS.
Korzystanie z waciwoci CSS

w kodzie JavaScript
Przegldarki fundacji Mozilla (Firefox) oraz Internet Explorer zapewniaj moliwo
dostpu do waciwoci CSS poziomu 1. w kodzie JavaScript, za porednictwem obiektowego modelu dokumentu (DOM). Niestety, pomidzy DOM stosowanym w przegldarkach Firefox oraz Internet Explorer wystpuj pewne rnice. W obu tych rozwizaniach zostay czciowo zaimplementowane moliwoci standardu CSS2, jednak nie s
to te same moliwoci, przez co wykorzystujcy je skrypt, ktry dziaa w jednej z tych
przegldarek, moe nie dziaa w drugiej. Naley zwrci uwag, e silnik Gecko (uywany do przetwarzania i wywietlania stron WWW w przegldarkach Mozilli) obsuguje wszystkie waciwoci standardu CSS poziomu 2.
Oglnie rzecz biorc, z waciwoci CSS korzysta si w standardowy sposb ich
wartoci s odczytywane w sposb typowy dla waciwoci i ustawiane przy uyciu
metod. Aby odwoa si do waciwoci CSS w kodzie JavaScript, naley po prostu poda
jej nazw, o ile tylko nie zawiera ona cznika. W przypadku nazw kilkuczonowych znak
560
Cz III Kontrolowanie prezentacji za pomoc CSS
cznika naley usun , a znak znajdujcy si bezporednio za nim naley zapisa wielk
liter. Wszystkie pozostae znaki nazwy waciwoci s zapisywane maymi literami. Na
przykad waciwo :
font-size
staje si w kodzie JavaScript:

fontSize
Tak uzyskan nazw waciwoci dodaje si do nazwy (lub identyfikatora) obiektu zawierajcego kolekcj stylw. Na przykad, aby odwoa si do waciwoci font-size obiektu
o nazwie bigText, naley uy nastpujcego wyraenia:
bigText.style.fontSize
Powysze wyraenie moe zosta uyte take do okrelenia nowej wartoci waciwoci. Na przykad ponisza instrukcja przypisuje waciwoci font-size obiektu bigText
warto xx-large:
bigText.style.fontSize = "xx-large";
Przeanalizuj kod poniszego przykadu. Kiedy klikniemy wywietlony na stronie akapit

tekstu, procedura obsugi zdarze onClick wywoa funkcj SuperSizeMe(), ktra z kolei
przypisuje waciwoci font-size akapitu warto xx-large (przez co tekst akapitu zostaje
powikszony). Pocztkowy wygld strony zosta przedstawiony na rysunku 36.1, natomiast
rysunek 36.2 przedstawia t sam stron po klikniciu akapitu.
Rysunek 36.1.
Pocztkowo,
przed klikniciem,
tekst jest wywietlony
czcionk o redniej
wielkoci (medium)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
Rozdzia 36. Dynamiczny HTML i CSS
561
Rysunek 36.2.
Po klikniciu wielko
czcionki zostaje
zmieniona na bardzo
du (xx-large)
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Powikszanie akapitu</title>
<style type="text/css">
#bigText { font-size: medium; }
</style>
<script type="text/javascript">
function SuperSizeMe(obj) {
obj.style.fontSize = "xx-large";
}
</script>
</head>
<body>
<p id="bigText" onClick="SuperSizeMe(this);">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nullam nibh. Sed egestas ornare turpis. Integer augue nisl,
bibendum interdum, ultrices at, mattis sit amet, ligula. Integer ornare. Duis leo
leo, ultricies placerat, egestas sed, sagittis vel, tellus. Proin ante quam,
rutrum id, lobortis molestie, dictum consectetur, erat. In et lectus eget leo
placerat adipiscing. Donec facilisis dui non elit. Vivamus et diam. Donec lectus
augue, facilisis non, interdum at, bibendum adipiscing, odio. Pellentesque
ullamcorper aliquet mauris. Integer sed erat. Nullam tincidunt placerat dui. Nulla
nisl risus, mollis in, pellentesque nec, porttitor blandit, nibh. Mauris vehicula
eros. Mauris risus velit, ullamcorper non, tincidunt ut, hendrerit ac, quam. Proin
tincidunt.</p>
</body>
</html>
A teraz musimy powici troch czasu na to, by dobrze przeanalizowa i zrozumie , jak
dziaa powyszy przykad. Mona sdzi , e kolekcja style zapewnia dostp do stylw
562
przypisanych danemu elementowi, niezalenie od tego, skd one pochodz. Okazuje si jednak, e tak nie jest. Kolekcja style zapewnia moliwo odwoywania si i operowania
na atrybucie style umieszczonym w znaczniku obiektu. Oznacza to, e wykonanie poniszego fragmentu kodu JavaScript bezporednio po wywietleniu naszej przykadowej strony
w przegldarce spowodowaoby wywietlenie okienka informacyjnego z napisem null:
alert(document.getElementById("bigText").style.fontSize);
Waciwo style.fontSize ma warto null, poniewa w elemencie bigText nie zosta

okrelony atrybut style. W jaki sposb zatem dziaa powyszy przykad, skoro nie zmienia on wartoci medium atrybutu font-size okrelonego w arkuszu stylw umieszczonym
w elemencie <style> w sekcji nagwka strony? Odpowied jest prosta wcale nie
musi on zmienia wartoci waciwoci okrelonych w elemencie <style>, zmienia on
wartoci przechowywane w atrybucie style elementu. Wartoci te maj bowiem wyszy
priorytet ni waciwoci zdefiniowane w arkuszach stylw w sekcji nagwka strony.
Oczywicie, gdyby wartoci przechowywane w atrybucie style zostay podane, to mona
by odczyta ich wartoci przy uyciu atrybutu style.
Aby odczyta waciwoci podane w sekcji <style>, naley uy jednej z dwch metod:
jedna z nich dziaa w przegldarkach Internet Explorer, a druga w przegldarkach Firefox. W pierwszym przypadku korzystamy z udostpnianej przez Internet Explorera waciwoci currentStyle; z kolei w przegldarce Firefox obiekt window udostpnia metod
getComputedStyle.
Korzystanie z waciwoci currentStyle w Internet Explorerze jest wyjtkowo proste
wystarczy odszuka interesujcy element strony, uywajc w tym celu jego identyfikatora, a nastpnie skorzysta z waciwoci, by pobra warto odpowiedniego stylu. Pokazano to na poniszym przykadzie:
obj = document.getElementById(id);
value = obj.currentStyle['fontSize'];
Naley zwrci uwag, e nazwa stylu jest zapisana bez cznika, zatem ma ona posta
fontSize, a nie font-size.
W przegldarce Firefox naley wykona dodatkowy, poredni krok, gdy wywoanie
metody getComputedStyle() zwraca kolekcj, z ktrej dopiero mona odczyta interesujc nas warto stylu. Ten etap poredni wymaga uycia metody getPropertyValue().
Cay proces wyglda nastpujco:
objstyles = window.getComputedStyle(obj,null);
value = objstyles.getProperty('font-size');
Warto zauway , e w tym rozwizaniu stosowane s standardowe nazwy waciwoci

CSS, a nie ich przeksztacone wersje bez cznikw. Niemniej jednak w obu przedstawionych przypadkach efekt bdzie taki sam w zmiennej value zostanie zapisana warto
waciwoci font-size.
Dziki wykorzystaniu niezbyt skomplikowanego kodu okrelajcego rodzaj uywanej
przegldarki istnieje moliwo poczenia obu przedstawionych wczeniej rozwiza
563
i zaimplementowania ich w postaci jednej funkcji. Poniszy listing przedstawia kod funkcji, ktra zwraca warto stylu na podstawie przekazanej w wywoaniu nazwy elementu
oraz nazwy waciwoci CSS (przy czym uywana jest tu prawidowa nazwa waciwoci,
a nie nazwa zapisywana bez cznika):
// Funkcja zwraca warto waciwoci CSS o nazwie propName
// odczytanej z elementu okrelonego przy uyciu identyfikatora id
function getStyleVal (id, propName) {
// Czy w ogle moemy cokolwiek zrobi [czy uda si nam
// pobra obiekt elementu przy uyciu metody getElementById()]?
if (obj = document.getElementById(id)) {
// Czy dostpna jest waciwo currentStyle (IE)?
if (obj.currentStyle) {
// Konwertujemy nazw waciwoci na format uywany w IE
if (propName.indexOf("-") != -1) {
hyp = propName.indexOf("-");
propName = propName.substr(0,hyp) +
propName.charAt(hyp+1).toUpperCase() +
propName.substr(hyp+2);
}
return obj.currentStyle[propName];
}
// Czy jest dostpna metoda getComputedStyle (Mozilla)?
if (window.getComputedStyle) {
compStyle = window.getComputedStyle(obj,null);
return compStyle.getPropertyValue(propName);
}
} // Koniec instrukcji if (obj == document.getElementById(id))
// Nie udao si odszuka elementu zwracamy pusty a
cuch znakw
return "";
}
Zwr uwag, e w pierwszej kolejnoci funkcja sprawdza, czy uywana przegldarka

udostpnia metod document.getElementById() (wszystkie nowoczesne przegldarki j
udostpniaj). Jeli metoda ta nie jest dostpna, funkcja koczy dziaanie, zwracajc pusty
acuch znakw. Nastpnie funkcja sprawdza, z jakiego sposobu odczytu wartoci stylu
moe skorzysta tego stosowanego w przegldarkach Internet Explorer czy tego z przegldarek Mozilli. Korzystajc z jednego z tych dwch sposobw, funkcja odczytuje warto podanej waciwoci stylu i zwraca j. Dodatkowo, w razie potrzeby, funkcja konwertuje nazw waciwoci na format stosowany w przegldarkach IE. Praktyczne wyniki
wykorzystania tej funkcji zostay przedstawione na rysunkach: 36.3 (w Internet Explorerze) oraz 36.4 (w przegldarce Firefox). W obu przypadkach uyto tej samej strony,
zawierajcej nastpujcy fragment kodu:
#bigText { font-size: medium; }
</style>
...
<p id="bigText" onClick="alert(getStyleVal('bigText','font-size'));">Lorem
ipsum dolor sit amet, consecterur adipisicing elit, ...
Po klikniciu tekstu wywietlonego na stronie zostanie wywietlone informacyjne okienko

dialogowe, a w nim informacje o wartoci waciwoci font-size we wskazanym akapicie.
564
Rysunek 36.3. Funkcja getStyleVal() zostaa tu zastosowana do wywietlenia wartoci waciwoci

font-size w przegldarce Internet Explorer
Rysunek 36.4. Funkcja getStyleVal() zostaa tu zastosowana do wywietlenia wartoci

waciwoci font-size w przegldarce Firefox
Warto zwrci uwag, e w przypadku wykonywania funkcji getStyleVal() w przegldarce
Firefox zwraca ona warto bezwzgldn wyraon w pikselach. Ze wzgldu na sposb
dziaania tej funkcji moe si okaza, e zwracane przez ni wartoci bd zapisane
w innym formacie ni ten, jakiego uyto do okrelania danej waciwoci stylu. Na przykad,
mimo e kolor jakiego elementu okrelisz w stylu przy uyciu wartoci szesnastkowej
#FFA500, funkcja zwrci nazw koloru orange. Albo, jak w zaprezentowanym wczeniej
przykadzie, zamiast wielkoci wzgldnych (medium) bezwzgldne wartoci wyraone
w pikselach.
A zatem dlaczego nie mona by uywa dwch przedstawionych wczeniej rozwiza

do manipulowania stylami? Wytumaczenie jest proste obie pozwalaj jedynie na
odczyt wartoci stylw. Wartoci stylw mona podawa bezporednio, w sposb przedstawiony na pocztku tego podrozdziau.
565
Uyteczne operacje z uyciem CSS

Przykady przedstawione we wczeniejszej czci rozdziau pokazay, w jaki sposb
mona operowa na waciwociach zwizanych z postaci czcionki. Cho s to cakiem przydatne operacje, to jednak bardziej zoone manipulacje waciwociami CSS
z poziomu kodu JavaScript mog pozwoli nam tworzy jeszcze bardziej atrakcyjne
efekty wizualne. W tej czci rozdziau znajdziesz kilka przykadw, ktre moesz wykorzysta jako punkt startowy do dalszych, wasnych eksperymentw.
Ukrywanie i wywietlanie tekstu

Dziki wykorzystaniu kaskadowych arkuszy stylw i JavaScriptu bez wikszych problemw mona ukrywa i wywietla teksty oraz inne elementy stron. Rozwizanie takie
moe by wykorzystane w przernych sytuacjach, takich jak tworzenie rozwijanego
menu bd ukrywanie fragmentu strony do momentu, gdy uytkownik zdecyduje si go
wywietli . Na przykad przeanalizujmy stron zawierajc list pyta i odpowiedzi.
Mona sdzi , e uytkownik nie bdzie chcia oglda caej listy odpowiedzi, ju bezporednio po wywietleniu strony. Jest bardziej prawdopodobne, e bdzie chcia selektywnie wywietla odpowiedzi tylko na te pytania, ktre go interesuj. Dziki zastosowaniu waciwoci CSS display napisanie skryptu zapewniajcego takie moliwoci
funkcjonalne nie nastrcza adnych problemw.
Przeanalizuj poniszy kod strony, w ktrym odpowiedzi na pytania s pocztkowo ukryte,
a przegldarka wywietli je dopiero po klikniciu duej litery P lub tekstu pytania.
Rysunek 36.5 przedstawia stron bezporednio po wywietleniu (z ukryt odpowiedzi),
natomiast rysunek 36.6 stron po wywietleniu odpowiedzi.
<html>
<head>
<title>Ukrywanie i wywietlanie tekstu</title>
/* Pocztkowo ukrywamy wszystkie odpowiedzi */
.hideseek { display: none; }
/* Rne stany widocznoci pyta
i odpowiedzi */
.Q { font-size: xx-large;
padding-bottom: 0;
margin-bottom:0;
cursor: pointer; }
.Qtext { margin-left: 20px;
margin-top: 0;
padding-top: 0; }
.A { font-size: xx-large;
padding-bottom: 0;
margin-bottom: 0;
clear: left; }
566
Rysunek 36.5. Odpowiedzi na pytania s pocztkowo ukryte
Rysunek 36.6. Odpowied jest wywietlana po klikniciu duej litery P (bd dowolnego innego
fragmentu pytania). Ponowne kliknicie powoduje ukrycie odpowiedzi
.Atext { margin-left: 20px;
margin-top: 0;
padding-top: 0; }
</style>
// Naprzemiennie ukrywamy i wywietlamy element
function hideseek(id) {
// Jeli styl nie jest okrelony, to moemy zaoy,
// e element nie by jeszcze modyfikowany i jest niewidoczny
567
if ((obj.style.display == "") ||
(obj.style.display == "none")) {
obj.style.display = "block";
} else {
obj.style.display = "none";
}
}
</script>
</head>
<body>
<div onClick="hideseek('A1');">
<p class="Q" >P:</p>
<p class="Qtext">Jakiego komputera i urzdze peryferyjnych potrzebuj, by mc
wzi udzia w rozgrywkach sieciowych?</p>
</div>
<div id="A1" class="hideseek">
<p class="A" >O:</p>
<p class="Atext">
Musisz przynie komputer o nastpujcej (minimalnej) konfiguracji: Pentium 4
z co najmniej 2 GB pamici RAM i wysokiej jakoci kart graficzn; do tego
monitor LCD (nie wikszy ni 19 cali), klawiatur, myszk i kabel sieciowy
(o minimalnej dugoci 2 metrw). Nie przyno niczego wicej
(a w szczeglnoci nie prbuj uywa dwch komputerw)!
</p>
</div>
</body>
</html>
Powyszy przykad wykorzystuje funkcj JavaScript, ktra odczytuje biec warto

waciwoci display i ustawia j na warto przeciwn, co powoduje naprzemienne
wywietlanie i ukrywanie elementu. Funkcja ta jest wywoywana przez procedur obsugi
zdarze onClick, zdefiniowan w elemencie <div> zawierajcym pytanie. W wywoaniu
funkcji umieszczony jest identyfikator elementu <div> zawierajcego odpowied, dziki
czemu wie ona, na jakim elemencie ma operowa .
Jak ju wczeniej wspomniano, takie rozwizanie moe by stosowane w przernych
celach. Wystarczy ukry element, ktry pocztkowo ma by niewidoczny (wykorzystujc do tego celu waciwo display z wartoci none), a nastpnie wywietla go
przy uyciu funkcji wywoywanej po klikniciu przycisku lub zajciu jakiegokolwiek
innego zdarzenia.
Powikszanie obrazkw
Innym czsto spotykanym zastosowaniem moliwoci CSS do tworzenia ciekawych
efektw wizualnych jest powikszanie obrazkw, ktre pocztkowo s wywietlane
w postaci miniaturek. Technika ta jest powszechnie wykorzystywana we wszelkiego typu
galeriach internetowych lub w innych witrynach, na ktrych wywietlanie obrazkw w penej wielkoci jest podane, lecz kosztowne.
Prezentowana tu technika jest podobna do rozwizania przedstawionego w poprzednim
punkcie rozdziau take w tym przypadku generowane przez uytkownika zdarzenie
wywouje skrypt, ktry odpowiednio modyfikuje waciwoci CSS danego elementu.
568
W prezentowanym przykadzie skrypt operuje na waciwoci display miniatury oraz

penowymiarowego obrazka. Poniej przedstawiony zosta kod przykadowej strony WWW:
<html>
<head>
<title>Powikszanie obrazkw</title>
.zoom { display: none; margin: 0px 10px;
float: left;}
.zoom p {margin: 0;}
.thumb { display: block; margin: 0px 10px;
float: left; }
.thumb p {margin: 0;}
</style>
function PicZoom(id) {
pic = document.getElementById(id);
thum = document.getElementById("T"+id);
if ((pic.style.display == "") ||
(pic.style.display == "none")) {
pic.style.display = "block";
thum.style.display = "none";
} else {
pic.style.display = "none";
thum.style.display = "block";
}
}
</script>
</head>
<body>
<div id="1" class="zoom"><p><img src="cats.jpg" alt="Kotki"
onMouseOut="PicZoom(1)"/> </p></div>
<div id="T1" class="thumb"><p><img src="cats_thumb.jpg" alt="Kotki"
onMouseOver="PicZoom(1)" /></p></div>
<div class="text"><p>
Z rozrzewnieniem wspominam czasy modzie czych zabaw z mymi brami i siostrami.
Czasy pozbawione zmartwie i wypenione nieko czcymi si igraszkami, gonitwami,
skokami, wyimaginowanymi polowaniami na wielkie, tuste myszy. Czasy, kiedy
frasunkiem, a i to niewielkim, byo znalezienie matki i posilenie si wczeniej
ni pozostae rodze stwo. Z rozrzewnieniem wspominam ten czas, czas bez
dylematw i rozterek, bez wtpliwoci i koniecznoci dokonywania wyborw.
A teraz? C... teraz musz wybra, co jest dla mnie waniejsze: czy duma
i pozornie nieskrpowana wolno nie do ko ca dzikiego drapienika, walczcego
o egzystencj na obrzeach miejskiej dungli, czy te syta i bezproblemowa
egzystencja domowego kiciusia...
</p></div>
</body>
</html>
Aby uatwi formatowanie strony i zapewni wiksz elastyczno , wszystkie obrazki,

zarwno miniaturka, jak i obrazek penowymiarowy, zostay umieszczone w elementach
<div>. Waciwo display elementu <div> zawierajcego miniaturk ma pocztkowo
warto block, co sprawia, e element ten jest widoczny. Natomiast w elemencie <div>
569
zawierajcym penowymiarowy obrazek waciwo display ma pocztkowo warto none,

a zatem element ten jest pocztkowo ukryty. W elemencie img prezentujcym miniaturk
zdefiniowano procedur obsugi zdarze onMouseOver, w ktrej wywoywana jest funkcja PicZoom(). Dziki temu funkcja ta zostanie wywoana w momencie umieszczenia
wskanika myszy na miniaturce. Dziaanie funkcji PicZoom() polega na zamianie wartoci waciwoci display elementw <div> zawierajcych obrazki; innymi sowy, pojawi
si penowymiarowy obrazek, a miniaturka zniknie. Wskanik myszy pozostanie w tym
samym pooeniu w obszarze penowymiarowego zdjcia. Kiedy uytkownik przesunie go poza obrazek, zostanie zgoszone zdarzenie onMouseOut, a w efekcie ponownie
zostanie wywoana funkcja PicZoom(), ktra tym razem ukryje penowymiarowy obrazek
i wywietli miniaturk.
Dziaanie tej strony zostao zilustrowane na rysunkach 36.7 oraz 36.8. Pierwszy z nich
przedstawia stron w jej pocztkowej postaci, z widoczn miniaturk; natomiast na rysunku 36.8 widoczna jest strona po wywietleniu obrazka penowymiarowego.
Rysunek 36.7. Pocztkowo, po wywietleniu strony, widoczna jest miniaturka, natomiast

penowymiarowy obrazek jest ukryty
Podobnie jak w pozostaych przykadach przedstawionych w tym rozdziale, podobny
efekt mona uzyska na wiele sposobw. Jeden z nich polega na umieszczeniu wszystkich
obrazkw na jednym duym i przesuwanie go w taki sposb, by w danym momencie
by widoczny jego odpowiedni fragment. Inne rozwizanie polega na modyfikowaniu
atrybutu src znacznika <img> tak, by wywietlany by w nim odpowiedni obrazek. Istnieje
take bardziej zoona technika, bazujca na wykorzystaniu warstw i odpowiednich
modyfikacjach waciwoci z-index wybranego elementu. Nic nie stoi na przeszkodzie,
by wymyli take swoje wasne rozwizanie.
Podmieniane menu
We wszystkich przykadach przedstawionych we wczeniejszej czci rozdziau uzyskiwalimy zamierzony efekt wizualny, stosujc kod JavaScript do modyfikowania waciwoci CSS. Jak na razie nie skorzystalimy z pseudoklas CSS dostpnych w elementach
czy, ktre pozwalaj na uzyskanie podobnych efektw.
570
Rysunek 36.8. Po umieszczeniu wska nika myszy na miniaturce, zamiast niej w przegldarce
jest wywietlany obrazek w penych wymiarach
Pseudoklasy elementw <a> przedstawione zostay w tabeli 36.1.

Tabela 36.1. Pseudoklasy elementu <a>
Pseudoklasa
Zastosowanie lub efekt
:link
Formatuje elementy wybrane przez selektor jako cza, ktre jeszcze nie zostay odwiedzone.
:visited
Formatuje elementy wybrane przez selektor jako odwiedzone cza.
:hover
Formatuje elementy wybrane przez selektor w momencie umieszczenia na nich wskanika

myszy.
:active
Formatuje elementy wybrane przez selektor jako aktywne cza.
Pseudoklasy wymienione w tabeli 36.1 s zazwyczaj stosowane do okrelania wygldu

elementw traktowanych jak dynamiczne cza. Na przykad, korzystajc z pseudoklasy
:hover, mona dynamicznie zmienia wygld elementu w momencie umieszczenia nad
nim wskanika myszy czyli dokadnie tak samo, jak zachowuj si cza.
Na przykad przedstawiony poniej dokument HTML wykorzystuje pseudoklas :hover,
by zmienia wygld czy po wskazaniu ich mysz. Uzyskany efekt przypomina dynamicznie modyfikowane menu tworzone przy uyciu kodu JavaScript. Efekty jego dziaania
zostay przedstawione na rysunku 36.9.
571

<html>
<head>
<title>Menu wykorzystujce pseudoklasy</title>
.nav tr td {border: 1px solid black;}
.menu { color: black;
background-color: white;
text-transform: none;
text-decoration: none; }
.menu:hover { color: white;
background-color: black;
text-transform: uppercase;
text-decoration: none; }
.menucase { width: 100px; }
</style>
</head>
<body>
<div class="menucase">
<table border="0" width="100%" class="nav">
<tr><td><a class="menu" href="index.html">Strona gwna</a></td></tr>
<tr><td><a class="menu" href="produkty.html">Produkty</a></td></tr>
<tr><td><a class="menu" href="uslugi.html">Usugi</a></td></tr>
<tr><td><a class="menu" href="wsparcie.html">Wsparcie</a></td></tr>
<tr><td><a class="menu" href="onas.html">O nas</a></td></tr>
</table>
</div>
</body>
</html>
Rysunek 36.9. Pseudoklasy mog by stosowane do tworzenia dynamicznego menu, w tym
przypadku wskazany element menu jest podwietlany
572
Naley zauway , e cho technika polegajca na zastosowaniu pseudoklas w celu uzyskania ciekawych efektw wizualnych jest bardzo popularna, to jednak nie jest ona zgodna
z zasad separacji dziaa od prezentacji. Dlatego te znacznie lepszym rozwizaniem
jest tworzenie podobnych efektw przy wykorzystaniu kodu JavaScript.
Zwr uwag, e opisana tu technika moe by stosowana w poczeniu niemal
ze wszystkimi elementami HTML. Jednak pseudoklas mona uywa wycznie
do formatowania znacznikw czy, a zatem by odpowiednio formatowa cza
w dokumencie, naley korzysta z innych znacznikw.
Podsumowanie
W tym rozdziale przedstawione zostay technologie DHTML i CSS. Dowiedziae si,
jak uywa JavaScriptu, by modyfikowa style CSS elementw i uzyskiwa ciekawe
efekty wizualne, oraz jak tworzy takie efekty przy uyciu pseudoklas CSS. W nastpnym
rozdziale zamieszczone zostay informacje dotyczce stosowania kaskadowych arkuszy
stylw do okrelania postaci stron przeznaczonych do wydruku. W kolejnych rozdziaach, od 38. do 41., przedstawione zostay bardziej specjalistyczne zagadnienia zwizane
ze stosowaniem kaskadowych arkuszy stylw.

HTML, XHTML I CSS. Biblia. Wydanie V

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

HTML, XHTML I CSS. Biblia. Wydanie V

Uploaded by

Copyright:

Available Formats

Id do

HTML, XHTML i CSS.

Opanuj moliwoci jzyka HTML i kaskadowych arkuszy stylw

Cz I Tworzenie treci z wykorzystaniem jzyka HTML ........... 33

HTML, XHTML i CSS. Biblia

cza do innych stron .........................................................................................................................67

Rozdzia 7. Listy .............................................................................................. 103

cza do stron WWW .......................................................................................................................119

cza wzgldne i bezwzgldne .........................................................................................................120

HTML, XHTML i CSS. Biblia

Opis wywietlany w przegldarkach tekstowych ..............................................................................235

HTML, XHTML i CSS. Biblia

Cz II Narzdzia oraz inne wersje jzyka HTML ...................... 339

Edytory HTML pracujce w trybie WYSIWYG ...............................................................................345

HTML, XHTML i CSS. Biblia

Cz III Kontrolowanie prezentacji za pomoc CSS .................. 423

Pseudoklasy i ich stosowanie ............................................................................................................441

HTML, XHTML i CSS. Biblia

Ukadanie elementw na stosie .........................................................................................................540

HTML, XHTML i CSS. Biblia

Cz IV Dodatkowe narzdzia CSS ............................................. 599

Dodatki ....................................................................................... 635

HTML, XHTML i CSS. Biblia

Dynamiczny HTML i CSS

Korzystanie z waciwoci CSS w kodzie JavaScript

Uyteczne operacje z uyciem CSS

Kaskadowe arkusze stylw mog by potnym narzdziem umoliwiajcym tworzenie

Korzystanie z waciwoci CSS

Cz III Kontrolowanie prezentacji za pomoc CSS

staje si w kodzie JavaScript:

Przeanalizuj kod poniszego przykadu. Kiedy klikniemy wywietlony na stronie akapit

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

Rozdzia 36. Dynamiczny HTML i CSS

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Cz III Kontrolowanie prezentacji za pomoc CSS

Waciwo style.fontSize ma warto null, poniewa w elemencie bigText nie zosta

Warto zauway , e w tym rozwizaniu stosowane s standardowe nazwy waciwoci

Rozdzia 36. Dynamiczny HTML i CSS

Zwr uwag, e w pierwszej kolejnoci funkcja sprawdza, czy uywana przegldarka

Po klikniciu tekstu wywietlonego na stronie zostanie wywietlone informacyjne okienko

Cz III Kontrolowanie prezentacji za pomoc CSS

Rysunek 36.3. Funkcja getStyleVal() zostaa tu zastosowana do wywietlenia wartoci waciwoci

Rysunek 36.4. Funkcja getStyleVal() zostaa tu zastosowana do wywietlenia wartoci

A zatem dlaczego nie mona by uywa dwch przedstawionych wczeniej rozwiza

Rozdzia 36. Dynamiczny HTML i CSS

Uyteczne operacje z uyciem CSS

Ukrywanie i wywietlanie tekstu

Cz III Kontrolowanie prezentacji za pomoc CSS

Rysunek 36.5. Odpowiedzi na pytania s pocztkowo ukryte

Rozdzia 36. Dynamiczny HTML i CSS

Powyszy przykad wykorzystuje funkcj JavaScript, ktra odczytuje biec warto

Cz III Kontrolowanie prezentacji za pomoc CSS

W prezentowanym przykadzie skrypt operuje na waciwoci display miniatury oraz

Aby uatwi formatowanie strony i zapewni wiksz elastyczno , wszystkie obrazki,

Rozdzia 36. Dynamiczny HTML i CSS

zawierajcym penowymiarowy obrazek waciwo display ma pocztkowo warto none,

Rysunek 36.7. Pocztkowo, po wywietleniu strony, widoczna jest miniaturka, natomiast

Cz III Kontrolowanie prezentacji za pomoc CSS

Pseudoklasy elementw <a> przedstawione zostay w tabeli 36.1.

Zastosowanie lub efekt

Formatuje elementy wybrane przez selektor jako odwiedzone cza.

Formatuje elementy wybrane przez selektor w momencie umieszczenia na nich wskanika

Formatuje elementy wybrane przez selektor jako aktywne cza.

Cz I Tworzenie treci z wykorzystaniem jzyka HTML ........... 33

cza do innych stron .........................................................................................................................67

Rozdzia 7. Listy .............................................................................................. 103

cza do stron WWW .......................................................................................................................119

cza wzgldne i bezwzgldne .........................................................................................................120

Opis wywietlany w przegldarkach tekstowych ..............................................................................235

Edytory HTML pracujce w trybie WYSIWYG ...............................................................................345

Korzystanie z waciwoci CSS w kodzie JavaScript

Kaskadowe arkusze stylw mog by potnym narzdziem umoliwiajcym tworzenie

Korzystanie z waciwoci CSS

Przeanalizuj kod poniszego przykadu. Kiedy klikniemy wywietlony na stronie akapit

Rozdzia 36. Dynamiczny HTML i CSS

Waciwo style.fontSize ma warto null, poniewa w elemencie bigText nie zosta

Warto zauway , e w tym rozwizaniu stosowane s standardowe nazwy waciwoci

Rozdzia 36. Dynamiczny HTML i CSS

Zwr uwag, e w pierwszej kolejnoci funkcja sprawdza, czy uywana przegldarka

Po klikniciu tekstu wywietlonego na stronie zostanie wywietlone informacyjne okienko

Rysunek 36.3. Funkcja getStyleVal() zostaa tu zastosowana do wywietlenia wartoci waciwoci

Rysunek 36.4. Funkcja getStyleVal() zostaa tu zastosowana do wywietlenia wartoci

A zatem dlaczego nie mona by uywa dwch przedstawionych wczeniej rozwiza

Rozdzia 36. Dynamiczny HTML i CSS

Ukrywanie i wywietlanie tekstu

Rysunek 36.5. Odpowiedzi na pytania s pocztkowo ukryte

Rozdzia 36. Dynamiczny HTML i CSS

Powyszy przykad wykorzystuje funkcj JavaScript, ktra odczytuje biec warto

W prezentowanym przykadzie skrypt operuje na waciwoci display miniatury oraz

Aby uatwi formatowanie strony i zapewni wiksz elastyczno , wszystkie obrazki,

Rozdzia 36. Dynamiczny HTML i CSS

zawierajcym penowymiarowy obrazek waciwo display ma pocztkowo warto none,

Rysunek 36.7. Pocztkowo, po wywietleniu strony, widoczna jest miniaturka, natomiast

Formatuje elementy wybrane przez selektor jako odwiedzone cza.

Formatuje elementy wybrane przez selektor w momencie umieszczenia na nich wskanika

Formatuje elementy wybrane przez selektor jako aktywne cza.

Pseudoklasy wymienione w tabeli 36.1 s zazwyczaj stosowane do okrelania wygldu

Rozdzia 36. Dynamiczny HTML i CSS