Idź do
• Spis treści
• Przykładowy rozdział
Helion SA
ul. Kościuszki 1c
44-100 Gliwice
tel. 32 230 98 63
e-mail: helion@helion.pl
© Helion 1991–2010
Katalog książek
Twój koszyk
Cennik i informacje
Czytelnia
Kontakt
HTML, XHTML i CSS.
Biblia. Wydanie V
Autor: Steven M. Schafer
Tłumaczenie: Piotr Rajca
ISBN: 978-83-246-2742-4
Tytuł oryginału:
Format: 172×245, stron: 768
• Opanuj możliwości języka HTML i kaskadowych arkuszy stylów
• Twórz strony statyczne, dynamiczne i na urządzenia mobilne
• Odkryj sposoby rozbudowania stron WWW
Jeśli czytasz notkę tej książki, zapewne zdecydowałeś się na stworzenie własnej, profesjonalnej
strony internetowej. Jedyne, czego Ci teraz trzeba, to wiedza, jak sprawnie wykorzystać niezbędny
w tym celu zestaw technologii – języki HTML i XHTML oraz kaskadowe arkusze stylów CSS.
To właśnie te narzędzia pozwalają zbudować dokument witryny, sformatować umieszczone na
niej teksty, osadzać elementy multimedialne i nadawać jej atrakcyjny wizualnie wygląd oraz
nowoczesny, dynamiczny charakter. A jeśli masz jeszcze wątpliwości, czy zadanie to leży
w zasięgu Twoich umiejętności, ta książka z pewnością je rozwieje!
Podręcznik ten, adresowany zarówno do początkujących webmasterów, jak i zawodowców, dla
pierwszych stanowi solidną podstawę do rozpoczęcia przygody z tworzeniem stron WWW,
natomiast dla drugich wyczerpujące kompendium wiedzy o odpowiednich technologiach.
Autor tak uporządkował zagadnienia – od prostych po złożone – aby w jak największym stopniu
ułatwić ich opanowanie przez czytelnika. Naukę rozpoczniesz zatem od poznania znaczników
HTML, struktury i atrybutów tego języka. Dowiesz się, jak używać multimediów i skryptów, oraz
skorzystasz z programów wspomagających tworzenie czy testowanie dokumentów. Później
przeczytasz o praktycznych rozszerzeniach HTML – XML i HTML Basic – oraz zgłębisz wszystkie
kwestie związane ze stosowaniem CSS i publikacją strony. Ogarniesz w ten sposób wszystkie
aspekty samodzielnego budowania nowoczesnej, zgodnej ze standardami, estetycznej witryny
internetowej!
• Budowanie treści z wykorzystaniem języka HTML
• Tworzenie list, łączy, tabel i ramek
• Osadzanie elementów multimedialnych
• Skrypty serwerowe i skrypty klienckie
• Czym jest i czemu służy DHTML?
• Projektowanie serwisów wielojęzycznych i zasady lokalizacji serwisów
• Publikacja witryny w sieci
• Porządkowanie i walidacja dokumentów
• Zastosowanie języka XML
• Tworzenia stron dla urządzeń mobilnych
• Kontrola prezentacji za pomocą języka 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 znaczników? ........................................................ 35
Co tu robimy? .....................................................................................................................................35
Przedstawienie hipertekstu ..................................................................................................................36
Przedstawienie instrukcji znacznikowych ...........................................................................................37
Przedstawienie jzyka znaczników .....................................................................................................38
Podsumowanie ....................................................................................................................................40
Rozdzia 2. Wartoci i jednostki w HTML-u ...................................................... 41
Podstawowa posta zapisu atrybutów .................................................................................................41
Wspólne atrybuty ................................................................................................................................44
Identyfikacja znaczników — identyfikatory i klasy ......................................................................44
Teksty i komentarze ............................................................................................................................45
Komentarze ...................................................................................................................................45
Sekcje CDATA .............................................................................................................................46
Jednolite identyfikatory zasobów ........................................................................................................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
Ogólna struktura dokumentu — HTML, nagówek i tre ..................................................................50
Znacznik <html> ...........................................................................................................................51
Znacznik <head> ..........................................................................................................................51
Znacznik <body> ..........................................................................................................................52
Definicje stylów ..................................................................................................................................52
Elementy blokowe — oznaczenia definiujce akapity oraz inne bloki treci ......................................53
Sformatowane akapity ..................................................................................................................54
Nagówki ......................................................................................................................................54
Cytaty ...........................................................................................................................................56
Elementy list .................................................................................................................................57
8
HTML, XHTML i CSS. Biblia
Tekst preformatowany ..................................................................................................................58
Sekcje strony .................................................................................................................................59
Elementy wewntrzwierszowe — oznaczenia znaków .......................................................................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 elementów ......................................................................................................70
Podsumowanie ....................................................................................................................................71
Rozdzia 4. Elementy nagówka ........................................................................ 73
Okrelanie tytuu dokumentu ..............................................................................................................73
Podawanie informacji uywanych przez wyszukiwarki ......................................................................74
Okrelanie domylnej cieki ..............................................................................................................75
Sekcje skryptów ..................................................................................................................................77
Sekcje stylów ......................................................................................................................................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 tekstów ...................................... 81
Formatowanie akapitów ......................................................................................................................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 — górny i dolny ....................................................................................................................98
Skróty ..................................................................................................................................................99
Oznaczanie zmian w dokumencie — wstawianie i usuwanie tekstu ...................................................99
Grupowanie elementów tekstowych znacznikiem <span> ................................................................100
Podsumowanie ..................................................................................................................................101
Spis treci
9
Rozdzia 7. Listy .............................................................................................. 103
Omówienie 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
Skróty klawiaturowe i kolejno uaktywniania czy .......................................................................123
Skróty klawiaturowe ...................................................................................................................124
Kolejno uaktywniania czy ....................................................................................................125
Tworzenie kotwic ..............................................................................................................................125
Dobór kolorów czy .........................................................................................................................126
Parametry dokumentu docelowego ...................................................................................................128
Znacznik <link> ................................................................................................................................129
Podsumowanie ..................................................................................................................................130
Rozdzia 9. Tabele ........................................................................................... 131
Czci skadowe tabeli HTML ..........................................................................................................131
Szeroko i wyrównanie tabeli ..........................................................................................................133
Odstpy i otoczenie komórek ............................................................................................................137
Obramowanie i krawdzie ................................................................................................................138
Obramowanie tabeli ....................................................................................................................138
Krawdzie tabeli .........................................................................................................................140
Wiersze .............................................................................................................................................140
Komórki ............................................................................................................................................142
Podpis tabeli ......................................................................................................................................144
Grupowanie wierszy — nagówek, tre i stopka tabeli ....................................................................146
Kolor ta ............................................................................................................................................148
Komórki 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 dokumentów .....................................................................................166
Dokumenty wielokolumnowe .....................................................................................................167
Podsumowanie ..................................................................................................................................169
Rozdzia 10. Ramki ........................................................................................... 171
Omówienie ramek .............................................................................................................................171
Zbiory ramek i zawarto ramek .......................................................................................................172
Tworzenie zbioru ramek .............................................................................................................173
Marginesy, obramowania i paski przewijania ramek ..................................................................176
Modyfikacja rozmiaru ramek ......................................................................................................179
10
HTML, XHTML i CSS. Biblia
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 pól .......................................................................................................................................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 plików .......................................................................................................................................201
Przyciski przesyania danych i czyszczenia pól ................................................................................202
Kolejno uaktywniania kontrolek i skróty klawiaturowe ................................................................203
Uniemoliwienie wprowadzania zmian ............................................................................................203
Grupy pól 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 kolorów ......................................................................................................214
Ewolucja kolorów uywanych na stronach WWW ...........................................................................215
Stosowanie odpowiednich metod okrelania kolorów ......................................................................221
Formaty graficzne stosowane w dokumentach WWW .....................................................................223
Kompresja obrazu .......................................................................................................................223
Opcje kompresji ..........................................................................................................................224
Format GIF .................................................................................................................................225
Format JPEG ...............................................................................................................................225
Format PNG ................................................................................................................................226
Przygotowanie plików graficznych ...................................................................................................226
Najwaniejsze funkcje ................................................................................................................227
Progresywne obrazy JPEG i rysunki GIF z przeplotem ..............................................................228
Wykorzystanie efektu przezroczystoci ......................................................................................228
Animacje .....................................................................................................................................229
Wstawianie rysunków .......................................................................................................................230
Rozmieszczanie rysunków ................................................................................................................232
Spis treci
11
Opis wywietlany w przegldarkach tekstowych ..............................................................................235
Wymiary i skalowanie rysunków ......................................................................................................236
Obramowanie rysunków ...................................................................................................................238
Mapy obrazu .....................................................................................................................................239
Definiowanie mapy obrazu .........................................................................................................240
Definiowanie obszarów aktywnych ............................................................................................240
Poczenie poszczególnych rozwiza .......................................................................................243
Podsumowanie ..................................................................................................................................244
Rozdzia 13. Obiekty multimedialne ............................................................... 245
Animowane obrazy ...........................................................................................................................246
Formaty animacji i klipów wideo, pluginy oraz odtwarzacze ...........................................................248
Popularne formaty i odtwarzacze ................................................................................................250
Windows Media Player ...............................................................................................................251
Osadzanie multimediów przy uyciu znacznika <object> ................................................................251
Osadzanie odtwarzacza Windows Media Player przy uyciu znacznika <object> ...........................255
Osadzanie klipów wideo z serwisu YouTube ...................................................................................256
Umieszczanie plików dwikowych na stronach WWW ..................................................................260
Tworzenie plików multimedialnych ..................................................................................................261
Podsumowanie zagadnie wykorzystania multimediów na stronach WWW ....................................261
Podsumowanie ..................................................................................................................................262
Rozdzia 14. Znaki specjalne ........................................................................... 263
Kodowanie znaków ...........................................................................................................................263
Znaki specjalne .................................................................................................................................264
Znaki spacji i mylników ..................................................................................................................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 obcokrajowców ...................... 277
Projektowanie serwisów wielojzycznych i zasady lokalizacji serwisów .........................................277
Tumaczenie strony internetowej ......................................................................................................279
Standard Unicode ..............................................................................................................................279
Basic Latin (podstawowy aciski, U+0000 – U+007F) .............................................................284
Kodowanie polskich znaków 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 skryptów .........................................................................................................................295
Wywoywanie zewntrznych skryptów .............................................................................................296
12
HTML, XHTML i CSS. Biblia
Wywoywanie skryptów za pomoc zdarze ....................................................................................297
Ukrywanie skryptów 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 wzów DOM .........................................................................................308
Poruszanie si po drzewie DOM i modyfikacja wzów .............................................................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 elementów przy wykorzystaniu ich identyfikatorów .......................................................319
Zagadnienia zgodnoci z rónymi przegldarkami ...........................................................................320
Wykrywanie uywanej przegldarki ...........................................................................................320
Wykrywanie obiektów ................................................................................................................321
Przykady rozwiza DHTML ..........................................................................................................321
Automatyzacja formularzy — obsuga pól wyboru ..........................................................................322
Tworzenie efektów 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 pól 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 plików 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 stylów ...........................................................................................................................369
Definicje typu dokumentu (DTD) .....................................................................................................369
Uycie elementów w definicji typu dokumentu ..........................................................................371
Definiowanie atrybutów 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 schematów ............................................................................................................................376
Zastosowanie dokumentów 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 szczególnej uwagi ..............................................................................385
Narzdzia do tworzenia stron dla urzdze przenonych ..................................................................388
Podsumowanie ..................................................................................................................................389
14
HTML, XHTML i CSS. Biblia
Rozdzia 23. Porzdkowanie i walidacja dokumentów ................................. 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 rónych przegldarkach ..............................................................................399
Testowanie w rónych rozdzielczociach ekranu .......................................................................400
Podsumowanie ..................................................................................................................................400
Rozdzia 24. Sztuczki i triki w jzyku HTML .................................................... 401
Wstpne wczytywanie rysunków ......................................................................................................401
Kontrolowanie podziau tekstu w komórkach tabeli .........................................................................403
Paski tytuu o zmiennej szerokoci ...................................................................................................404
Symulowanie gazetowego ukadu kolumn ........................................................................................406
Doczanie rozmiaru rysunków w celu przyspieszenia ich wczytywania .........................................408
Zabezpieczenia adresów e-mail ........................................................................................................409
Automatyzacja formularzy ................................................................................................................411
Operacje na obiektach formularzy ..............................................................................................411
Weryfikacja wartoci pól ............................................................................................................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 stylów ..................... 425
Przeznaczenie CSS ............................................................................................................................425
Style i HTML ....................................................................................................................................426
1., 2. i 3. poziom CSS .......................................................................................................................428
Definiowanie stylów .........................................................................................................................429
Kaskada stylów .................................................................................................................................430
Podsumowanie ..................................................................................................................................432
Rozdzia 26. Tworzenie regu stylów ............................................................. 433
Zapis definicji stylów ........................................................................................................................433
Przedstawienie selektorów ................................................................................................................435
Dopasowywanie elementów wedug typu ...................................................................................435
Korzystanie z selektora uniwersalnego .......................................................................................435
Dopasowywanie elementów wedug klasy .................................................................................436
Dopasowywanie elementów przy uyciu identyfikatora .............................................................437
Dopasowywanie elementów, które zawieraj okrelony atrybut ................................................437
Korzystanie z elementów dzieci, potomków oraz elementów przystajcych ..............................438
Omówienie dziedziczenia .................................................................................................................440
Spis treci
15
Pseudoklasy i ich stosowanie ............................................................................................................441
Definiowanie stylów czy ..........................................................................................................441
Pseudoklasa :first-child ...............................................................................................................442
Pseudoklasa :lang ........................................................................................................................442
Pseudoelementy ................................................................................................................................443
Stosowanie stylów dla pierwszego wiersza tekstu w elemencie .................................................443
Stosowanie stylów dla pierwszej litery elementu ........................................................................444
Definiowanie przed danym tekstem i po nim ..............................................................................445
Wyraenia skrótowe ..........................................................................................................................446
Podsumowanie ..................................................................................................................................448
Rozdzia 27. Wartoci i jednostki w jzyku CSS ............................................. 449
Ogólne zasady podawania wartoci waciwoci ..............................................................................449
Jednostki wartoci waciwoci .........................................................................................................451
Wartoci w postaci sów 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 selektorów .................................................................................................................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
Wyrównywanie tekstu .......................................................................................................................473
Kontrolowanie wyrównania poziomego .....................................................................................474
Kontrolowanie wyrównania pionowego .....................................................................................476
Tworzenie wcicia w tekcie ............................................................................................................479
Kontrolowanie znaków niewidocznych w tekcie .............................................................................479
Obiekty przestawne ....................................................................................................................479
Waciwo white-space .............................................................................................................481
Kontrolowanie odstpów midzy literami i sowami ........................................................................483
Definiowanie wielkich liter ...............................................................................................................484
Dekorowanie tekstu ..........................................................................................................................486
Tekst generowany automatycznie .....................................................................................................487
Definiowanie stylów tabeli ...............................................................................................................487
16
HTML, XHTML i CSS. Biblia
Kontrolowanie atrybutów tabeli ........................................................................................................488
Obramowanie tabeli ....................................................................................................................488
Odstpy w ramce tabeli ...............................................................................................................489
Pojedyncze obramowanie ...........................................................................................................491
Obramowania wokó pustych komórek ......................................................................................492
Ukad graficzny tabeli .......................................................................................................................493
Wyrównywanie i pozycjonowanie podpisów ....................................................................................493
Podsumowanie ..................................................................................................................................495
Rozdzia 31. Formatowanie list ...................................................................... 497
Ogólne informacje o listach ..............................................................................................................497
CSS — kady element pasuje ...........................................................................................................498
Waciwo list-style-type ................................................................................................................499
Pozycjonowanie markerów ...............................................................................................................501
Punktory rysunkowe .........................................................................................................................501
Podsumowanie ..................................................................................................................................502
Rozdzia 32. Obramowania, odstpy i marginesy ......................................... 503
Omówienie modelu formatowania pojemnika ..................................................................................503
Dodawanie odstpu do elementu .......................................................................................................506
Dodawanie obramowania ..................................................................................................................507
Szeroko obramowania .............................................................................................................507
Styl obramowania .......................................................................................................................508
Kolor ramki .................................................................................................................................510
Najwikszy skrót: waciwo border .........................................................................................510
Dodatkowe waciwoci obramowa ..........................................................................................511
Definiowanie marginesów elementu .................................................................................................511
Wykorzystywanie dynamicznego obramowania ...............................................................................513
Podsumowanie ..................................................................................................................................514
Rozdzia 33. Kolory i to .................................................................................. 515
Kolory elementów .............................................................................................................................515
Kolor pierwszoplanowy ..............................................................................................................515
Kolory ta ....................................................................................................................................516
Obrazy ta ..........................................................................................................................................519
Powtarzanie i przewijanie obrazów ta .......................................................................................522
Okrelanie pozycji obrazów ta ...................................................................................................523
Skrótowa waciwo background ..............................................................................................525
Podsumowanie ..................................................................................................................................525
Rozdzia 34. Definiowanie ukadów stron ..................................................... 527
Omówienie pozycjonowania elementów ...........................................................................................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 rozmiarów .............................................................................................537
Definiowanie rozmiaru maksymalnego oraz minimalnego .........................................................538
Kontrola przepenienia elementu ................................................................................................539
Spis treci
17
Ukadanie elementów na stosie .........................................................................................................540
Kontrolowanie widocznoci elementu ..............................................................................................544
Podsumowanie ..................................................................................................................................546
Rozdzia 35. Pseudoelementy i wygenerowane treci ................................. 547
Waciwo content ..........................................................................................................................547
Pseudoelementy ................................................................................................................................549
Stosowanie stylów dla pierwszego wiersza tekstu w elemencie .................................................550
Stosowanie stylów dla pierwszej litery elementu ........................................................................550
Pseudoelementy :before i :after ..................................................................................................552
Definiowanie znaków cudzysowu ....................................................................................................553
Automatyczne numerowanie elementów ..........................................................................................553
Obiekt counter ............................................................................................................................554
Zmienianie wartoci obiektu counter ..........................................................................................554
Przykad zastosowania liczników: numery rozdziaów i podrozdziaów ....................................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 obrazków ..............................................................................................................567
Podmieniane menu ......................................................................................................................569
Podsumowanie ..................................................................................................................................572
Rozdzia 37. Typy mediów i definiowanie stron do druku ........................... 573
Typy mediów obsugiwane przez CSS ..............................................................................................574
Okrelanie typu mediów .............................................................................................................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 dokumentów dla rónych mediów ..................................................................................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 elementów raz jeszcze ..............................................................................596
Podsumowanie ..................................................................................................................................597
18
HTML, XHTML i CSS. Biblia
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 stylów ...............................................................................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
Wyrónione 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 Krótki przegld elementów jzyka HTML .................................... 637
Lista elementów ................................................................................................................................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
HTML, XHTML i CSS. Biblia
Atrybuty zdarze ...............................................................................................................................683
Zdarzenia standardowe ...............................................................................................................683
Inne zdarzenia .............................................................................................................................683
Inne czsto spotykane atrybuty .........................................................................................................684
Atrybuty podstawowe .................................................................................................................684
Atrybuty umidzynarodawiania ..................................................................................................684
Kody czsto uywanych kolorów ...............................................................................................684
Dodatek B Krótki przegld znaków specjalnych jzyka HTML ..................... 685
Dodatek C Krótki 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 elementów ....................................................................................................711
Obramowania ..............................................................................................................................713
Tabele .........................................................................................................................................716
Druk ............................................................................................................................................717
Róne ..........................................................................................................................................718
Dodatek D Krótki przegld selektorów jzyka CSS ....................................... 721
Podstawowe selektory elementów ....................................................................................................722
Selektory potomków .........................................................................................................................722
Selektory dzieci .................................................................................................................................722
Selektory pierwszego brata ...............................................................................................................723
Selektory klas ....................................................................................................................................723
Selektory identyfikatorów .................................................................................................................723
Selektory atrybutów ..........................................................................................................................724
Dodatek E Krótki przegld pseudoelementów 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 stylów mog by potnym narzdziem umoliwiajcym tworzenie
adnie sformatowanych stron WWW. W tym rozdziale opisano, w jaki sposób w rónych
przegldarkach mona manipulowa wartociami waciwoci CSS, by nada dokumen-
tom HTML dynamiczny charakter. Dowiesz si z niego, w jaki sposób 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 waci-
woci CSS.
Jak si przekonasz, niektóre przegldarki (mamy tu na myli gównie program Internet
Explorer) udostpniaj moliwo tworzenia dynamicznych efektów 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 obiek-
towego modelu dokumentu (DOM). Niestety, pomidzy DOM stosowanym w przegl-
darkach Firefox oraz Internet Explorer wystpuj pewne rónice. W obu tych rozwiza-
niach zostay czciowo zaimplementowane moliwoci standardu CSS2, jednak nie s
to te same moliwoci, przez co wykorzystujcy je skrypt, który dziaa w jednej z tych
przegldarek, moe nie dziaa w drugiej. Naley zwróci uwag, e silnik Gecko (uy-
wany do przetwarzania i wywietlania stron WWW w przegldarkach Mozilli) obsu-
guje wszystkie waciwoci standardu CSS poziomu 2.
Ogólnie rzecz biorc, z waciwoci CSS korzysta si w standardowy sposób — ich
wartoci s odczytywane w sposób 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 zawie-
rajcego kolekcj stylów. 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 waciwo-
ci. 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()
, która 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 stylów
562
Cz III Kontrolowanie prezentacji za pomoc CSS
przypisanych danemu elementowi, niezalenie od tego, skd one pochodz. Okazuje si jed-
nak, e tak nie jest. Kolekcja
style
zapewnia moliwo odwoywania si i operowania
na atrybucie
style
umieszczonym w znaczniku obiektu. Oznacza to, e wykonanie poni-
szego 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 sposób zatem dziaa powyszy przykad, skoro nie zmie-
nia on wartoci
medium
atrybutu
font-size
okrelonego w arkuszu stylów umieszczonym
w elemencie
<style>
w sekcji nagówka 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 stylów w sekcji nagówka 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 dwóch metod:
jedna z nich dziaa w przegldarkach Internet Explorer, a druga w przegldarkach Fire-
fox. W pierwszym przypadku korzystamy z udostpnianej przez Internet Explorera wa-
ciwoci
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 identyfika-
tora, a nastpnie skorzysta z waciwoci, by pobra warto odpowiedniego stylu. Poka-
zano to na poniszym przykadzie:
obj = document.getElementById(id);
value = obj.currentStyle['fontSize'];
Naley zwróci 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 której dopiero mona odczyta intere-
sujc nas warto stylu. Ten etap poredni wymaga uycia metody
getPropertyValue()
.
Cay proces wyglda nastpujco:
obj = document.getElementById(id);
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 czników. Niemniej jednak w obu przedstawio-
nych 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
Rozdzia 36. Dynamiczny HTML i CSS
563
i zaimplementowania ich w postaci jednej funkcji. Poniszy listing przedstawia kod funk-
cji, która 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 ogóle 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 znaków
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 znaków. Nastpnie funkcja sprawdza, z jakiego sposobu odczytu wartoci stylu
moe skorzysta — tego stosowanego w przegldarkach Internet Explorer czy tego z prze-
gldarek Mozilli. Korzystajc z jednego z tych dwóch sposobów, funkcja odczytuje war-
to podanej waciwoci stylu i zwraca j. Dodatkowo, w razie potrzeby, funkcja konwer-
tuje nazw waciwoci na format stosowany w przegldarkach IE. Praktyczne wyniki
wykorzystania tej funkcji zostay przedstawione na rysunkach: 36.3 (w Internet Explo-
rerze) oraz 36.4 (w przegldarce Firefox). W obu przypadkach uyto tej samej strony,
zawierajcej nastpujcy fragment kodu:
<style type="text/css">
#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
Cz III Kontrolowanie prezentacji za pomoc CSS
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 zwróci uwag, e w przypadku wykonywania funkcji
getStyleVal() w przegldarce
Firefox zwraca ona warto bezwzgldn wyraon w pikselach. Ze wzgldu na sposób
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 zwróci 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 dwóch przedstawionych wczeniej rozwiza
do manipulowania stylami? Wytumaczenie jest proste — obie pozwalaj jedynie na
odczyt wartoci stylów. Wartoci stylów mona podawa bezporednio, w sposób przed-
stawiony na pocztku tego podrozdziau.
Rozdzia 36. Dynamiczny HTML i CSS
565
Uyteczne operacje z uyciem CSS
Przykady przedstawione we wczeniejszej czci rozdziau pokazay, w jaki sposób
mona operowa na waciwociach zwizanych z postaci czcionki. Cho s to ca-
kiem 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 przykadów, które moesz wyko-
rzysta jako punkt startowy do dalszych, wasnych eksperymentów.
Ukrywanie i wywietlanie tekstu
Dziki wykorzystaniu kaskadowych arkuszy stylów i JavaScriptu bez wikszych pro-
blemów mona ukrywa i wywietla teksty oraz inne elementy stron. Rozwizanie takie
moe by wykorzystane w przerónych 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 bezpo-
rednio po wywietleniu strony. Jest bardziej prawdopodobne, e bdzie chcia selek-
tywnie wywietla odpowiedzi tylko na te pytania, które go interesuj. Dziki zastoso-
waniu waciwoci CSS
display
napisanie skryptu zapewniajcego takie moliwoci
funkcjonalne nie nastrcza adnych problemów.
Przeanalizuj poniszy kod strony, w którym 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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ukrywanie i wywietlanie tekstu</title>
<style type="text/css">
/* Pocztkowo ukrywamy wszystkie odpowiedzi */
.hideseek { display: none; }
/* Róne 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
Cz III Kontrolowanie prezentacji za pomoc CSS
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>
<script type="text/javascript">
// Naprzemiennie ukrywamy i wywietlamy element
function hideseek(id) {
obj = document.getElementById(id);
// Jeli styl nie jest okrelony, to moemy zaoy,
// e element nie by jeszcze modyfikowany i jest niewidoczny
Rozdzia 36. Dynamiczny HTML i CSS
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 móc
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 metrów). Nie przyno niczego wicej
(a w szczególnoci nie próbuj uywa dwóch komputerów)!
</p>
</div>
</body>
</html>
Powyszy przykad wykorzystuje funkcj JavaScript, która 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 przerónych
celach. Wystarczy ukry element, który pocztkowo ma by niewidoczny (wykorzy-
stujc 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 obrazków
Innym czsto spotykanym zastosowaniem moliwoci CSS do tworzenia ciekawych
efektów wizualnych jest powikszanie obrazków, które pocztkowo s wywietlane
w postaci miniaturek. Technika ta jest powszechnie wykorzystywana we wszelkiego typu
galeriach internetowych lub w innych witrynach, na których wywietlanie obrazków w pe-
nej 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, który odpowiednio modyfikuje waciwoci CSS danego elementu.
568
Cz III Kontrolowanie prezentacji za pomoc CSS
W prezentowanym przykadzie skrypt operuje na waciwoci
display
miniatury oraz
penowymiarowego obrazka. Poniej przedstawiony zosta kod przykadowej strony WWW:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Powikszanie obrazków</title>
<style type="text/css">
.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>
<script type="text/javascript">
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
dylematów i rozterek, bez wtpliwoci i koniecznoci dokonywania wyborów.
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,
zarówno 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>
Rozdzia 36. Dynamiczny HTML i CSS
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 której wywoywana jest funk-
cja
PicZoom()
. Dziki temu funkcja ta zostanie wywoana w momencie umieszczenia
wskanika myszy na miniaturce. Dziaanie funkcji
PicZoom()
polega na zamianie warto-
ci waciwoci
display
elementów
<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 prze-
sunie go poza obrazek, zostanie zgoszone zdarzenie
onMouseOut
, a w efekcie ponownie
zostanie wywoana funkcja
PicZoom()
, która 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 rysun-
ku 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 sposobów. Jeden z nich polega na umieszczeniu wszystkich
obrazków na jednym duym i przesuwanie go w taki sposób, 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 uzyski-
walimy zamierzony efekt wizualny, stosujc kod JavaScript do modyfikowania waciwo-
ci CSS. Jak na razie nie skorzystalimy z pseudoklas CSS dostpnych w elementach
czy, które pozwalaj na uzyskanie podobnych efektów.
570
Cz III Kontrolowanie prezentacji za pomoc CSS
Rysunek 36.8. Po umieszczeniu wska nika myszy na miniaturce, zamiast niej w przegldarce
jest wywietlany obrazek w penych wymiarach
Pseudoklasy elementów
<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, które 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
elementów 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 dyna-
micznie modyfikowane menu tworzone przy uyciu kodu JavaScript. Efekty jego dziaania
zostay przedstawione na rysunku 36.9.
Rozdzia 36. Dynamiczny HTML i CSS
571
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Menu wykorzystujce pseudoklasy</title>
<style type="text/css">
.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 gówna</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
Cz III Kontrolowanie prezentacji za pomoc CSS
Naley zauway , e cho technika polegajca na zastosowaniu pseudoklas w celu uzyska-
nia ciekawych efektów wizualnych jest bardzo popularna, to jednak nie jest ona zgodna
z zasad separacji dziaa od prezentacji. Dlatego te znacznie lepszym rozwizaniem
jest tworzenie podobnych efektów 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 znaczników czy, a zatem by odpowiednio formatowa cza
w dokumencie, naley korzysta z innych znaczników.
Podsumowanie
W tym rozdziale przedstawione zostay technologie DHTML i CSS. Dowiedziae si,
jak uywa JavaScriptu, by modyfikowa style CSS elementów i uzyskiwa ciekawe
efekty wizualne, oraz jak tworzy takie efekty przy uyciu pseudoklas CSS. W nastpnym
rozdziale zamieszczone zostay informacje dotyczce stosowania kaskadowych arkuszy
stylów do okrelania postaci stron przeznaczonych do wydruku. W kolejnych rozdzia-
ach, od 38. do 41., przedstawione zostay bardziej specjalistyczne zagadnienia zwizane
ze stosowaniem kaskadowych arkuszy stylów.
Wyszukiwarka
Podobne podstrony:
HTML XHTML i CSS Biblia Wydanie V hxcbi5
HTML XHTML i CSS Biblia Wydanie V hxcbi5
HTML XHTML i CSS Biblia Wydanie V hxcbi5
HTML, XHTML i CSS Biblia Wydanie V
HTML XHTML i CSS Biblia Wydanie IV hxcbi4
HTML, XHTML i CSS Biblia Wydanie V
HTML XHTML i CSS Biblia Wydanie V
HTML XHTML i CSS Biblia Wydanie V 2
HTML XHTML i CSS Biblia Wydanie V
html, xhtml i css biblia helion UJ4IXAMWV6CBHRXSIBUKLUYXZASBBYAQMBA3XRI
Po prostu HTML, XHTML i CSS Wydanie VI
więcej podobnych podstron