HTML, XHTML i CSS Biblia Wydanie V

background image
background image

Idź do

• Spis treści
• Przykładowy rozdział

• Katalog online

• Dodaj do koszyka

• Zamów cennik

• Zamów informacje

o nowościach

• Fragmenty książek

online

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

• Zamów drukowany

katalog

HTML, XHTML i CSS.
Biblia. Wydanie V

Autor: Steven M. Schafer
Tłumaczenie: Piotr Rajca
ISBN: 978-83-246-2742-4
Tytuł oryginału:

HTML, XHTML, and CSS Bible

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

background image

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

background image

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

background image

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

background image

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

background image

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

background image

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

background image

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

background image

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

background image

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

background image

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

background image

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

background image

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

background image

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

background image

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

background image

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

background image

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>

background image

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

background image

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

background image

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.

background image

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.

background image

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; }

background image

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

background image

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.

background image

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>

background image

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.

background image

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.

background image

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

background image

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 IV hxcbi4
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 V
HTML XHTML i CSS Biblia Wydanie V 2
HTML XHTML i CSS Biblia Wydanie V
HTML XHTML i CSS Biblia Wydanie V hxcbi5
html, xhtml i css biblia helion UJ4IXAMWV6CBHRXSIBUKLUYXZASBBYAQMBA3XRI
Po prostu HTML, XHTML i CSS Wydanie VI

więcej podobnych podstron