HTML, XHTML i CSS. - pdf.helion.plpdf.helion.pl/hxcbi5/hxcbi5-36.pdf · w tym celu zestaw...

Idź do

• Spis treści• Przykładowy rozdział

• Katalog online

• Dodaj do koszyka

• Zamów cennik

• Zamów informacjeo nowościach

• Fragmenty książekonline

Helion SAul. Kościuszki 1c44-100 Gliwicetel. 32 230 98 63e-mail: [email protected]© Helion 1991–2010

Katalog książek

Twój koszyk

Cennik i informacje

Czytelnia

Kontakt

• Zamów drukowanykatalog

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

http://helion.pl

http://helion.pl/zamow_katalog.htm

http://helion.pl/katalog.htm

http://helion.pl/zakupy/add.cgi?id=hxcbi5

http://helion.pl/emaile.cgi

http://helion.pl/cennik.htm

http://helion.pl/online.htm

mailto:[email protected]

http://helion.pl/ksiazki/hxcbi5.htm

http://www.amazon.com/exec/obidos/ASIN/0470523964/helion-20

Spis tre�ciO autorze ......................................................................................................... 21

Wprowadzenie ................................................................................................. 23

Cz�� I Tworzenie tre�ci z wykorzystaniem j�zyka HTML ........... 33

Rozdzia� 1. Czym jest j�zyk znaczników? ........................................................ 35Co tu robimy? .....................................................................................................................................35Przedstawienie hipertekstu ..................................................................................................................36Przedstawienie instrukcji znacznikowych ...........................................................................................37Przedstawienie j�zyka znaczników .....................................................................................................38Podsumowanie ....................................................................................................................................40

Rozdzia� 2. Warto�ci i jednostki w HTML-u ...................................................... 41Podstawowa posta zapisu atrybutów .................................................................................................41Wspólne atrybuty ................................................................................................................................44

Identyfikacja znaczników — identyfikatory i klasy ......................................................................44Teksty i komentarze ............................................................................................................................45

Komentarze ...................................................................................................................................45Sekcje CDATA .............................................................................................................................46

Jednolite identyfikatory zasobów ........................................................................................................47Opcje j�zyka i ustawienia mi�dzynarodowe .......................................................................................47

Kod j�zyka ....................................................................................................................................48Kierunek tekstu .............................................................................................................................48

Podsumowanie ....................................................................................................................................48

Rozdzia� 3. Co jest umieszczane w dokumentach HTML? ................................ 49Okre�lanie typu dokumentu ................................................................................................................50Ogólna struktura dokumentu — HTML, nag�ówek i tre� ..................................................................50

Znacznik <html> ...........................................................................................................................51Znacznik <head> ..........................................................................................................................51Znacznik <body> ..........................................................................................................................52

Definicje stylów ..................................................................................................................................52Elementy blokowe — oznaczenia definiuj�ce akapity oraz inne bloki tre�ci ......................................53

Sformatowane akapity ..................................................................................................................54Nag�ówki ......................................................................................................................................54Cytaty ...........................................................................................................................................56Elementy list .................................................................................................................................57

8 HTML, XHTML i CSS. Biblia

Tekst preformatowany ..................................................................................................................58Sekcje strony .................................................................................................................................59

Elementy wewn�trzwierszowe — oznaczenia znaków .......................................................................61Podstawowe znaczniki wewn�trzwierszowe .................................................................................61Fragmenty tekstu ..........................................................................................................................62

Znaki specjalne (symbole znakowe) ...................................................................................................63Elementy organizacyjne ......................................................................................................................64

Tabele ...........................................................................................................................................64Formularze ....................................................................................................................................65

�cza do innych stron .........................................................................................................................67Obrazy .................................................................................................................................................68Komentarze .........................................................................................................................................69Skrypty ................................................................................................................................................69Po��czenie wszystkich elementów ......................................................................................................70Podsumowanie ....................................................................................................................................71

Rozdzia� 4. Elementy nag�ówka ........................................................................ 73Okre�lanie tytu�u dokumentu ..............................................................................................................73Podawanie informacji u�ywanych przez wyszukiwarki ......................................................................74Okre�lanie domy�lnej �cie�ki ..............................................................................................................75Sekcje skryptów ..................................................................................................................................77Sekcje stylów ......................................................................................................................................77Okre�lanie profili ................................................................................................................................77Kolor i obraz t�a ..................................................................................................................................78

Okre�lanie koloru t�a dokumentu ..................................................................................................78Okre�lanie obrazu t�a dokumentu .................................................................................................79

Podsumowanie ....................................................................................................................................80

Rozdzia� 5. Podstawy okre�lania struktury tekstów ...................................... 81Formatowanie akapitów ......................................................................................................................81Podzia� wiersza ...................................................................................................................................83Sekcje ..................................................................................................................................................84Poziome linie ......................................................................................................................................88Cytaty blokowe ...................................................................................................................................89Tekst preformatowany ........................................................................................................................90Podsumowanie ....................................................................................................................................91

Rozdzia� 6. Tekst ............................................................................................... 93Metody formatowania tekstu ...............................................................................................................93

Znacznik <font> ...........................................................................................................................94Akcentowanie i inne znaczniki dotycz�ce tekstu ..........................................................................94Formatowanie tekstu przy u�yciu CSS .........................................................................................94

Pogrubienie i kursywa .........................................................................................................................97Stosowanie uwypuklenia zamiast kursywy .........................................................................................97Czcionka o sta�ej szeroko�ci ...............................................................................................................98Indeksy — górny i dolny ....................................................................................................................98Skróty ..................................................................................................................................................99Oznaczanie zmian w dokumencie — wstawianie i usuwanie tekstu ...................................................99Grupowanie elementów tekstowych znacznikiem <span> ................................................................100Podsumowanie ..................................................................................................................................101

Spis tre�ci 9

Rozdzia� 7. Listy .............................................................................................. 103Omówienie list ..................................................................................................................................103Listy uporz�dkowane (numerowane) ................................................................................................104Listy nieuporz�dkowane (punktowane) ............................................................................................108Listy definicji ....................................................................................................................................112Listy zagnie�d�one ............................................................................................................................114Podsumowanie ..................................................................................................................................115

Rozdzia� 8. ��cza ............................................................................................. 117Czym s� ��cza? ..................................................................................................................................118�cza do stron WWW .......................................................................................................................119�cza wzgl�dne i bezwzgl�dne .........................................................................................................120Docelowe okna ��czy ........................................................................................................................122Tekst podpowiedzi ��cza ...................................................................................................................123Skróty klawiaturowe i kolejno� uaktywniania ��czy .......................................................................123

Skróty klawiaturowe ...................................................................................................................124Kolejno� uaktywniania ��czy ....................................................................................................125

Tworzenie kotwic ..............................................................................................................................125Dobór kolorów ��czy .........................................................................................................................126Parametry dokumentu docelowego ...................................................................................................128Znacznik <link> ................................................................................................................................129Podsumowanie ..................................................................................................................................130

Rozdzia� 9. Tabele ........................................................................................... 131Cz��ci sk�adowe tabeli HTML ..........................................................................................................131Szeroko� i wyrównanie tabeli ..........................................................................................................133Odst�py i otoczenie komórek ............................................................................................................137Obramowanie i kraw�dzie ................................................................................................................138

Obramowanie tabeli ....................................................................................................................138Kraw�dzie tabeli .........................................................................................................................140

Wiersze .............................................................................................................................................140Komórki ............................................................................................................................................142Podpis tabeli ......................................................................................................................................144Grupowanie wierszy — nag�ówek, tre� i stopka tabeli ....................................................................146Kolor t�a ............................................................................................................................................148Komórki rozci�gaj�ce si� na kilka wierszy lub kolumn ....................................................................149Grupowanie kolumn ..........................................................................................................................153Zastosowanie tabel do formatowania stron .......................................................................................154

Podstawy formatowania z wykorzystaniem tabel .......................................................................155Przyk�ady stron dost�pnych w internecie ....................................................................................158Strony p�ywaj�ce ........................................................................................................................158Niestandardowe po��czenie grafiki i tekstu ................................................................................163Menu nawigacyjne i bloki dokumentów .....................................................................................166Dokumenty wielokolumnowe .....................................................................................................167

Podsumowanie ..................................................................................................................................169

Rozdzia� 10. Ramki ........................................................................................... 171Omówienie ramek .............................................................................................................................171Zbiory ramek i zawarto� ramek .......................................................................................................172

Tworzenie zbioru ramek .............................................................................................................173Marginesy, obramowania i paski przewijania ramek ..................................................................176Modyfikacja rozmiaru ramek ......................................................................................................179


Odsy�acze do ramek ..........................................................................................................................179Zagnie�d�one zbiory ramek ..............................................................................................................182Ramki p�ywaj�ce ...............................................................................................................................183Podsumowanie ..................................................................................................................................186

Rozdzia� 11. Formularze .................................................................................. 187Podstawowe informacje o formularzach ...........................................................................................188Wstawianie formularzy .....................................................................................................................191

Metoda GET ...............................................................................................................................191Metoda POST .............................................................................................................................192Dodatkowe atrybuty znacznika <form> ......................................................................................192

Etykiety pól .......................................................................................................................................193Pola tekstowe ....................................................................................................................................193Pola hase� ..........................................................................................................................................194Przyciski opcji ...................................................................................................................................194Pola wyboru ......................................................................................................................................195Listy wyboru .....................................................................................................................................195Obszary tekstowe ..............................................................................................................................197Pola ukryte ........................................................................................................................................199Przyciski ...........................................................................................................................................199Rysunki .............................................................................................................................................200Pola plików .......................................................................................................................................201Przyciski przesy�ania danych i czyszczenia pól ................................................................................202Kolejno� uaktywniania kontrolek i skróty klawiaturowe ................................................................203Uniemo�liwienie wprowadzania zmian ............................................................................................203Grupy pól i ich opis ...........................................................................................................................205Stosowanie zdarze� do obs�ugi formularzy .......................................................................................206Skrypty formularzy i us�ugi skryptowe .............................................................................................210

Pobranie programu obs�ugi formularza .......................................................................................210Wykorzystanie us�ug skryptowych .............................................................................................211

Podsumowanie ..................................................................................................................................211

Rozdzia� 12. Kolory i rysunki ........................................................................... 213Podstawowe informacje o kolorach ..................................................................................................213Inne sposoby okre�lania kolorów ......................................................................................................214Ewolucja kolorów u�ywanych na stronach WWW ...........................................................................215Stosowanie odpowiednich metod okre�lania kolorów ......................................................................221Formaty graficzne stosowane w dokumentach WWW .....................................................................223

Kompresja obrazu .......................................................................................................................223Opcje kompresji ..........................................................................................................................224Format GIF .................................................................................................................................225Format JPEG ...............................................................................................................................225Format PNG ................................................................................................................................226

Przygotowanie plików graficznych ...................................................................................................226Najwa�niejsze funkcje ................................................................................................................227Progresywne obrazy JPEG i rysunki GIF z przeplotem ..............................................................228Wykorzystanie efektu przezroczysto�ci ......................................................................................228Animacje .....................................................................................................................................229

Wstawianie rysunków .......................................................................................................................230Rozmieszczanie rysunków ................................................................................................................232

Spis tre�ci 11

Opis wy�wietlany w przegl�darkach tekstowych ..............................................................................235Wymiary i skalowanie rysunków ......................................................................................................236Obramowanie rysunków ...................................................................................................................238Mapy obrazu .....................................................................................................................................239

Definiowanie mapy obrazu .........................................................................................................240Definiowanie obszarów aktywnych ............................................................................................240Po��czenie poszczególnych rozwi�za� .......................................................................................243

Podsumowanie ..................................................................................................................................244

Rozdzia� 13. Obiekty multimedialne ............................................................... 245Animowane obrazy ...........................................................................................................................246Formaty animacji i klipów wideo, pluginy oraz odtwarzacze ...........................................................248

Popularne formaty i odtwarzacze ................................................................................................250Windows Media Player ...............................................................................................................251

Osadzanie multimediów przy u�yciu znacznika <object> ................................................................251Osadzanie odtwarzacza Windows Media Player przy u�yciu znacznika <object> ...........................255Osadzanie klipów wideo z serwisu YouTube ...................................................................................256Umieszczanie plików d�wi�kowych na stronach WWW ..................................................................260Tworzenie plików multimedialnych ..................................................................................................261Podsumowanie zagadnie� wykorzystania multimediów na stronach WWW ....................................261Podsumowanie ..................................................................................................................................262

Rozdzia� 14. Znaki specjalne ........................................................................... 263Kodowanie znaków ...........................................................................................................................263Znaki specjalne .................................................................................................................................264Znaki spacji i my�lników ..................................................................................................................265Symbol praw autorskich i znaku towarowego ...................................................................................266Symbole walut ..................................................................................................................................267Rzeczywiste znaki cudzys�owu .........................................................................................................267Strza�ki ..............................................................................................................................................268Znaki zawieraj�ce symbole akcentu ..................................................................................................269Litery alfabetu greckiego i symbole matematyczne ..........................................................................271Inne u�yteczne symbole ....................................................................................................................274Podsumowanie ..................................................................................................................................276

Rozdzia� 15. Projektowanie stron WWW dla obcokrajowców ...................... 277Projektowanie serwisów wieloj�zycznych i zasady lokalizacji serwisów .........................................277T�umaczenie strony internetowej ......................................................................................................279Standard Unicode ..............................................................................................................................279

Basic Latin (podstawowy �aci�ski, U+0000 – U+007F) .............................................................284Kodowanie polskich znaków diakrytycznych .............................................................................290

Podsumowanie ..................................................................................................................................290

Rozdzia� 16. Skrypty ........................................................................................ 293Skrypty serwerowe i skrypty klienckie .............................................................................................293

Skrypty klienckie ........................................................................................................................293Skrypty serwerowe .....................................................................................................................294

Okre�lanie domy�lnego j�zyka skryptowego ....................................................................................294Do��czanie skryptów .........................................................................................................................295Wywo�ywanie zewn�trznych skryptów .............................................................................................296


Wywo�ywanie skryptów za pomoc� zdarze� ....................................................................................297Ukrywanie skryptów przed starszymi przegl�darkami ......................................................................301Podsumowanie ..................................................................................................................................301

Rozdzia� 17. Dynamiczny HTML ....................................................................... 303Do czego s�u�y dynamiczny HTML? ................................................................................................303Jak dzia�a DHTML? ..........................................................................................................................304Obiektowy model dokumentu ...........................................................................................................305

Historia DOM .............................................................................................................................305Opis obiektowego modelu dokumentu ........................................................................................306W�a�ciwo�ci i metody w�z�ów DOM .........................................................................................308Poruszanie si� po drzewie DOM i modyfikacja w�z�ów .............................................................309

Obiektowy model dokumentu j�zyka JavaScript ..............................................................................312Obiekt window ...........................................................................................................................313Obiekt document .........................................................................................................................315Obiekt form .................................................................................................................................316Obiekt location ...........................................................................................................................316Obiekt history .............................................................................................................................317Obiekt this ..................................................................................................................................317

Stosowanie procedur obs�ugi zdarze� ...............................................................................................318Dost�p do elementów przy wykorzystaniu ich identyfikatorów .......................................................319Zagadnienia zgodno�ci z ró�nymi przegl�darkami ...........................................................................320

Wykrywanie u�ywanej przegl�darki ...........................................................................................320Wykrywanie obiektów ................................................................................................................321

Przyk�ady rozwi�za� DHTML ..........................................................................................................321Automatyzacja formularzy — obs�uga pól wyboru ..........................................................................322

Tworzenie efektów podmiany przy wykorzystaniu JavaScriptu .................................................323Rozwijane menu .........................................................................................................................324

Podsumowanie ..................................................................................................................................327

Rozdzia� 18. Przysz�o�� j�zyka HTML — HTML 5 ............................................. 329Wi�ksze mo�liwo�ci publikowania i okre�lania uk�adu ....................................................................329Dost�pne multimedia ........................................................................................................................331Zmiany — elementy i atrybuty .........................................................................................................332

Nowe elementy ...........................................................................................................................333Nowe atrybuty w elementach ......................................................................................................333Nowe typy pól formularzy (elementu input) ...............................................................................334Nowe globalne atrybuty ..............................................................................................................335Elementy uznane za przedawnione .............................................................................................335Przedawnione atrybuty ...............................................................................................................336

Podsumowanie ..................................................................................................................................337

Cz�� II Narz�dzia oraz inne wersje j�zyka HTML ...................... 339

Rozdzia� 19. Programy do projektowania stron internetowych ................. 341Edytory tekstowe ..............................................................................................................................342

Proste edytory tekstowe ..............................................................................................................342Inteligentne edytory tekstowe .....................................................................................................342Edytory HTML ...........................................................................................................................343

Spis tre�ci 13

Edytory HTML pracuj�ce w trybie WYSIWYG ...............................................................................345NetObjects Fusion ......................................................................................................................345Dreamweaver firmy Macromedia ...............................................................................................346Dodatki do przegl�darki Firefox .................................................................................................347

Inne narz�dzia ...................................................................................................................................349Programy graficzne .....................................................................................................................349Flash firmy Adobe ......................................................................................................................351

Podsumowanie ..................................................................................................................................352

Rozdzia� 20. Publikacja witryn ........................................................................ 353Wprowadzenie do FTP ......................................................................................................................353Programy klienty FTP .......................................................................................................................354Popularne klienty FTP ......................................................................................................................356Podstawowe zasady organizacji plików w obr�bie witryny WWW ..................................................358Podsumowanie ..................................................................................................................................359

Rozdzia� 21. Wprowadzenie do j�zyka XML ................................................... 361Podstawy j�zyka XML ......................................................................................................................362Sk�adnia j�zyka XML .......................................................................................................................363

Deklaracje XML i DOCTYPE ....................................................................................................364Elementy .....................................................................................................................................364Atrybuty ......................................................................................................................................366Komentarze .................................................................................................................................367Dane nieprzetwarzane .................................................................................................................367Sta�e tekstowe .............................................................................................................................367Przestrzenie nazw .......................................................................................................................368Arkusze stylów ...........................................................................................................................369

Definicje typu dokumentu (DTD) .....................................................................................................369U�ycie elementów w definicji typu dokumentu ..........................................................................371Definiowanie atrybutów w DTD .................................................................................................373Definiowanie i u�ycie sta�ych tekstowych w definicji DTD .......................................................374U�ycie danych typu PCDATA i CDATA w definicji typu .........................................................375

Schematy XML .................................................................................................................................375U�ycie schematów ............................................................................................................................376Zastosowanie dokumentów XML .....................................................................................................378

Przekszta�cenia XSLT .................................................................................................................379Edycja kodu XML ......................................................................................................................379Analiza kodu XML .....................................................................................................................379

Podsumowanie ..................................................................................................................................380

Rozdzia� 22. Tworzenie stron dla urz�dze przeno�nych ............................ 381Ewolucja internetu mobilnego ..........................................................................................................381

Mroczne pocz�tki internetu mobilnego .......................................................................................382Organizacja Open Mobile Alliance i nowe standardy .................................................................383Podsumowanie ............................................................................................................................383

J�zyk XHTML Basic 1.1 ..................................................................................................................384Deklaracja doctype XHTML Basic 1.1 .......................................................................................384Elementy j�zyka XHTML Basic 1.1 ...........................................................................................384Zagadnienia wymagaj�ce szczególnej uwagi ..............................................................................385

Narz�dzia do tworzenia stron dla urz�dze� przeno�nych ..................................................................388Podsumowanie ..................................................................................................................................389


Rozdzia� 23. Porz�dkowanie i walidacja dokumentów ................................. 391Porz�dkowanie kodu HTML .............................................................................................................391

HTML Tidy ................................................................................................................................394Pobieranie narz�dzia HTML Tidy ..............................................................................................394Uruchamianie narz�dzia HTML Tidy .........................................................................................394

Sprawdzanie poprawno�ci kodu ........................................................................................................397Okre�lanie poprawnego typu dokumentu ....................................................................................397Narz�dzia do weryfikacji poprawno�ci kodu ..............................................................................397Jak weryfikowa dokumenty? .....................................................................................................397

Dodatkowe testy i walidacja .............................................................................................................399Testowanie kodu w ró�nych przegl�darkach ..............................................................................399Testowanie w ró�nych rozdzielczo�ciach ekranu .......................................................................400

Podsumowanie ..................................................................................................................................400

Rozdzia� 24. Sztuczki i triki w j�zyku HTML .................................................... 401Wst�pne wczytywanie rysunków ......................................................................................................401Kontrolowanie podzia�u tekstu w komórkach tabeli .........................................................................403Paski tytu�u o zmiennej szeroko�ci ...................................................................................................404Symulowanie gazetowego uk�adu kolumn ........................................................................................406Do��czanie rozmiaru rysunków w celu przyspieszenia ich wczytywania .........................................408Zabezpieczenia adresów e-mail ........................................................................................................409Automatyzacja formularzy ................................................................................................................411

Operacje na obiektach formularzy ..............................................................................................411Weryfikacja warto�ci pól ............................................................................................................413

Modyfikowanie �rodowiska przegl�darki .........................................................................................416Koncepcja ...................................................................................................................................416Implementacja ............................................................................................................................416Zastosowane funkcje JavaScript .................................................................................................421

Podsumowanie ..................................................................................................................................422

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

Rozdzia� 25. Wprowadzenie do kaskadowych arkuszy stylów ..................... 425Przeznaczenie CSS ............................................................................................................................425Style i HTML ....................................................................................................................................4261., 2. i 3. poziom CSS .......................................................................................................................428Definiowanie stylów .........................................................................................................................429Kaskada stylów .................................................................................................................................430Podsumowanie ..................................................................................................................................432

Rozdzia� 26. Tworzenie regu� stylów ............................................................. 433Zapis definicji stylów ........................................................................................................................433Przedstawienie selektorów ................................................................................................................435

Dopasowywanie elementów wed�ug typu ...................................................................................435Korzystanie z selektora uniwersalnego .......................................................................................435Dopasowywanie elementów wed�ug klasy .................................................................................436Dopasowywanie elementów przy u�yciu identyfikatora .............................................................437Dopasowywanie elementów, które zawieraj� okre�lony atrybut ................................................437Korzystanie z elementów dzieci, potomków oraz elementów przystaj�cych ..............................438

Omówienie dziedziczenia .................................................................................................................440

Spis tre�ci 15

Pseudoklasy i ich stosowanie ............................................................................................................441Definiowanie stylów ��czy ..........................................................................................................441Pseudoklasa :first-child ...............................................................................................................442Pseudoklasa :lang ........................................................................................................................442

Pseudoelementy ................................................................................................................................443Stosowanie stylów dla pierwszego wiersza tekstu w elemencie .................................................443Stosowanie stylów dla pierwszej litery elementu ........................................................................444Definiowanie przed danym tekstem i po nim ..............................................................................445

Wyra�enia skrótowe ..........................................................................................................................446Podsumowanie ..................................................................................................................................448

Rozdzia� 27. Warto�ci i jednostki w j�zyku CSS ............................................. 449Ogólne zasady podawania warto�ci w�a�ciwo�ci ..............................................................................449Jednostki warto�ci w�a�ciwo�ci .........................................................................................................451

Warto�ci w postaci s�ów kluczowych .........................................................................................452Standardowe jednostki miar ........................................................................................................452Miary rozdzielczo�ci ekranu .......................................................................................................453Miary wzgl�dne ..........................................................................................................................454Funkcje zwi�zane z kolorami i adresami URL ...........................................................................455Jednostki d�wi�kowe ..................................................................................................................456

Podsumowanie ..................................................................................................................................457

Rozdzia� 28. Dziedziczenie i kaskadowanie w j�zyku CSS ............................. 459Dziedziczenie ....................................................................................................................................459Kaskadowanie ...................................................................................................................................461Specyficzno� selektorów .................................................................................................................463Podsumowanie ..................................................................................................................................464

Rozdzia� 29. W�a�ciwo�ci czcionek ................................................................. 465Wprowadzenie do czcionek ..............................................................................................................465Rodzaje czcionek ..............................................................................................................................466Okre�lanie rozmiaru czcionki ...........................................................................................................468Okre�lanie stylu czcionki ..................................................................................................................469Interlinie ............................................................................................................................................470Zagnie�d�anie czcionek w dokumencie ............................................................................................470Podsumowanie ..................................................................................................................................472

Rozdzia� 30. Formatowanie tekstu ................................................................ 473Wyrównywanie tekstu .......................................................................................................................473

Kontrolowanie wyrównania poziomego .....................................................................................474Kontrolowanie wyrównania pionowego .....................................................................................476

Tworzenie wci�cia w tek�cie ............................................................................................................479Kontrolowanie znaków niewidocznych w tek�cie .............................................................................479

Obiekty przestawne ....................................................................................................................479W�a�ciwo� white-space .............................................................................................................481

Kontrolowanie odst�pów mi�dzy literami i s�owami ........................................................................483Definiowanie wielkich liter ...............................................................................................................484Dekorowanie tekstu ..........................................................................................................................486Tekst generowany automatycznie .....................................................................................................487Definiowanie stylów tabeli ...............................................................................................................487


Kontrolowanie atrybutów tabeli ........................................................................................................488Obramowanie tabeli ....................................................................................................................488Odst�py w ramce tabeli ...............................................................................................................489Pojedyncze obramowanie ...........................................................................................................491Obramowania wokó� pustych komórek ......................................................................................492

Uk�ad graficzny tabeli .......................................................................................................................493Wyrównywanie i pozycjonowanie podpisów ....................................................................................493Podsumowanie ..................................................................................................................................495

Rozdzia� 31. Formatowanie list ...................................................................... 497Ogólne informacje o listach ..............................................................................................................497CSS — ka�dy element pasuje ...........................................................................................................498W�a�ciwo� list-style-type ................................................................................................................499Pozycjonowanie markerów ...............................................................................................................501Punktory rysunkowe .........................................................................................................................501Podsumowanie ..................................................................................................................................502

Rozdzia� 32. Obramowania, odst�py i marginesy ......................................... 503Omówienie modelu formatowania pojemnika ..................................................................................503Dodawanie odst�pu do elementu .......................................................................................................506Dodawanie obramowania ..................................................................................................................507

Szeroko� obramowania .............................................................................................................507Styl obramowania .......................................................................................................................508Kolor ramki .................................................................................................................................510Najwi�kszy skrót: w�a�ciwo� border .........................................................................................510Dodatkowe w�a�ciwo�ci obramowa� ..........................................................................................511

Definiowanie marginesów elementu .................................................................................................511Wykorzystywanie dynamicznego obramowania ...............................................................................513Podsumowanie ..................................................................................................................................514

Rozdzia� 33. Kolory i t�o .................................................................................. 515Kolory elementów .............................................................................................................................515

Kolor pierwszoplanowy ..............................................................................................................515Kolory t�a ....................................................................................................................................516

Obrazy t�a ..........................................................................................................................................519Powtarzanie i przewijanie obrazów t�a .......................................................................................522Okre�lanie pozycji obrazów t�a ...................................................................................................523Skrótowa w�a�ciwo� background ..............................................................................................525

Podsumowanie ..................................................................................................................................525

Rozdzia� 34. Definiowanie uk�adów stron ..................................................... 527Omówienie pozycjonowania elementów ...........................................................................................527

Pozycjonowanie statyczne ..........................................................................................................528Pozycjonowanie wzgl�dne ..........................................................................................................529Pozycjonowanie bezwzgl�dne ....................................................................................................529Pozycjonowanie sta�e ..................................................................................................................530

Okre�lanie pozycji elementu .............................................................................................................532Elementy dryfuj�ce do lewej lub prawej strony ................................................................................534Definiowanie szeroko�ci i wysoko�ci elementu ................................................................................537

Dok�adne definiowanie rozmiarów .............................................................................................537Definiowanie rozmiaru maksymalnego oraz minimalnego .........................................................538Kontrola przepe�nienia elementu ................................................................................................539

Spis tre�ci 17

Uk�adanie elementów na stosie .........................................................................................................540Kontrolowanie widoczno�ci elementu ..............................................................................................544Podsumowanie ..................................................................................................................................546

Rozdzia� 35. Pseudoelementy i wygenerowane tre�ci ................................. 547W�a�ciwo� content ..........................................................................................................................547Pseudoelementy ................................................................................................................................549

Stosowanie stylów dla pierwszego wiersza tekstu w elemencie .................................................550Stosowanie stylów dla pierwszej litery elementu ........................................................................550Pseudoelementy :before i :after ..................................................................................................552

Definiowanie znaków cudzys�owu ....................................................................................................553Automatyczne numerowanie elementów ..........................................................................................553

Obiekt counter ............................................................................................................................554Zmienianie warto�ci obiektu counter ..........................................................................................554Przyk�ad zastosowania liczników: numery rozdzia�ów i podrozdzia�ów ....................................555W�asne numerowanie list ............................................................................................................556

Podsumowanie ..................................................................................................................................558

Rozdzia� 36. Dynamiczny HTML i CSS ............................................................... 559Korzystanie z w�a�ciwo�ci CSS w kodzie JavaScript .......................................................................559U�yteczne operacje z u�yciem CSS ..................................................................................................565

Ukrywanie i wy�wietlanie tekstu ................................................................................................565Powi�kszanie obrazków ..............................................................................................................567Podmieniane menu ......................................................................................................................569

Podsumowanie ..................................................................................................................................572

Rozdzia� 37. Typy mediów i definiowanie stron do druku ........................... 573Typy mediów obs�ugiwane przez CSS ..............................................................................................574

Okre�lanie typu mediów .............................................................................................................574Przygotowywanie dokumentu do drukowania ..................................................................................577

Model formatowania pojemnika strony ......................................................................................577Definiowanie rozmiaru strony ....................................................................................................577W�a�ciwo�ci page-break .............................................................................................................580Zarz�dzanie wdowami i sierotami ..............................................................................................583Przygotowanie dokumentu do drukowania dwustronnego ..........................................................584

Tworzenie dokumentów dla ró�nych mediów ..................................................................................585Dokument do prezentacji w internecie ........................................................................................585Ponowne formatowanie strony ...................................................................................................589

Podsumowanie ..................................................................................................................................590

Rozdzia� 38. Przysz�o�� CSS — CSS 3 ............................................................... 591Po prostu lepsze ................................................................................................................................592Modularno� .....................................................................................................................................592Stosowanie w�a�ciwo�ci CSS 3 ju� dzi� ............................................................................................594Wi�ksza kontrola nad wybieranymi elementami ...............................................................................595Zaokr�glone wierzcho�ki elementów raz jeszcze ..............................................................................596Podsumowanie ..................................................................................................................................597


Cz�� IV Dodatkowe narz�dzia CSS ............................................. 599

Rozdzia� 39. Style interfejsu u�ytkownika .................................................... 601Modyfikacje wygl�du wska�nika myszy ..........................................................................................601Kolory interfejsu u�ytkownika ..........................................................................................................603Czcionki interfejsu u�ytkownika .......................................................................................................606Podsumowanie ..................................................................................................................................607

Rozdzia� 40. Testowanie i walidacja kodu CSS ............................................... 609Sprawdzanie sk�adni w czasie tworzenia stylów ...............................................................................609S�owo o formatowaniu ......................................................................................................................611Walidacja kodu CSS .........................................................................................................................612Dodatki do przegl�darki Firefox s�u��ce do edycji CSS ...................................................................613Podsumowanie ..................................................................................................................................614

Rozdzia� 41. Sztuczki i triki w j�zyku CSS ....................................................... 615Wysuni�cie .......................................................................................................................................615Rozszerzaj�ce si� przyciski ...............................................................................................................617Wyró�nione cytaty ............................................................................................................................620Menu w formie zak�adek ...................................................................................................................622

Elementy z zaokr�glonymi wierzcho�kami .................................................................................624Elementy p�ywaj�ce ....................................................................................................................627Tekst otaczaj�cy inne elementy ..................................................................................................630

Podsumowanie ..................................................................................................................................634

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

Dodatek A Krótki przegl�d elementów j�zyka HTML .................................... 637Lista elementów ................................................................................................................................638

<a> ..............................................................................................................................................638<abbr> ........................................................................................................................................639<acronym> ..................................................................................................................................639<address> ....................................................................................................................................640<area> (rzadko stosowany) .........................................................................................................641<b> .............................................................................................................................................641<base> ........................................................................................................................................642<bdo> ..........................................................................................................................................642<big> ..........................................................................................................................................643<blockquote> ..............................................................................................................................643<body> ........................................................................................................................................644<br> ............................................................................................................................................645<button> .....................................................................................................................................645<caption> ....................................................................................................................................646<cite> ..........................................................................................................................................647<code> ........................................................................................................................................647<col> ...........................................................................................................................................648<colgroup> .................................................................................................................................648<dd> ............................................................................................................................................649<del> ...........................................................................................................................................649<dfn> ..........................................................................................................................................650<div> ..........................................................................................................................................650

Spis tre�ci 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


Atrybuty zdarze� ...............................................................................................................................683Zdarzenia standardowe ...............................................................................................................683Inne zdarzenia .............................................................................................................................683

Inne cz�sto spotykane atrybuty .........................................................................................................684Atrybuty podstawowe .................................................................................................................684Atrybuty umi�dzynarodawiania ..................................................................................................684Kody cz�sto u�ywanych kolorów ...............................................................................................684

Dodatek B Krótki przegl�d znaków specjalnych j�zyka HTML ..................... 685

Dodatek C Krótki przegl�d w�a�ciwo�ci j�zyka CSS ...................................... 695Lista w�a�ciwo�ci ..............................................................................................................................696

Lista w�a�ciwo�ci — zestawienie ...............................................................................................696T�o ..............................................................................................................................................698Listy ............................................................................................................................................700Wygenerowane dane ...................................................................................................................702Czcionki i tekst ...........................................................................................................................703Kierunek tekstu ...........................................................................................................................707Bloki ...........................................................................................................................................708Okre�lanie pozycji elementów ....................................................................................................711Obramowania ..............................................................................................................................713Tabele .........................................................................................................................................716Druk ............................................................................................................................................717Ró�ne ..........................................................................................................................................718

Dodatek D Krótki przegl�d selektorów j�zyka CSS ....................................... 721Podstawowe selektory elementów ....................................................................................................722Selektory potomków .........................................................................................................................722Selektory dzieci .................................................................................................................................722Selektory pierwszego brata ...............................................................................................................723Selektory klas ....................................................................................................................................723Selektory identyfikatorów .................................................................................................................723Selektory atrybutów ..........................................................................................................................724

Dodatek E Krótki przegl�d pseudoelementów i pseudoklas ....................... 725Pseudoelementy ................................................................................................................................726Pseudoklasy ......................................................................................................................................726

Skorowidz ...................................................................................................... 729

Rozdzia� 36.Dynamiczny HTML i CSS

W tym rozdziale:

� Korzystanie z w�a�ciwo�ci CSS w kodzie JavaScript

� U�yteczne operacje z u�yciem CSS

Kaskadowe arkusze stylów mog� by pot��nym narz�dziem umo�liwiaj�cym tworzenie�adnie sformatowanych stron WWW. W tym rozdziale opisano, w jaki sposób w ró�nychprzegl�darkach mo�na manipulowa warto�ciami w�a�ciwo�ci CSS, by nada dokumen-tom HTML dynamiczny charakter. Dowiesz si� z niego, w jaki sposób mo�na uzyskiwadost�p do w�a�ciwo�ci CSS oraz jak operowa nimi w skryptach, aby wykonywa takieoperacje jak zmiana koloru tekstu. Jak si� oka�e, mo�na zmieni warto� ka�dej w�a�ci-wo�ci CSS.

Jak si� przekonasz, niektóre przegl�darki (mamy tu na my�li g�ównie program InternetExplorer) udost�pniaj� mo�liwo� tworzenia dynamicznych efektów wizualnych, takichjak cienie i rozmycia, z wykorzystaniem sk�adni zbli�onej do CSS.

Korzystanie z w�a�ciwo�ci CSSw kodzie JavaScript

Przegl�darki fundacji Mozilla (Firefox) oraz Internet Explorer zapewniaj� mo�liwo�dost�pu do w�a�ciwo�ci CSS poziomu 1. w kodzie JavaScript, za po�rednictwem obiek-towego modelu dokumentu (DOM). Niestety, pomi�dzy DOM stosowanym w przegl�-darkach Firefox oraz Internet Explorer wyst�puj� pewne ró�nice. W obu tych rozwi�za-niach zosta�y cz��ciowo zaimplementowane mo�liwo�ci standardu CSS2, jednak nie s�to te same mo�liwo�ci, przez co wykorzystuj�cy je skrypt, który dzia�a w jednej z tychprzegl�darek, mo�e nie dzia�a w drugiej. Nale�y zwróci uwag�, �e silnik Gecko (u�y-wany do przetwarzania i wy�wietlania stron WWW w przegl�darkach Mozilli) obs�u-guje wszystkie w�a�ciwo�ci standardu CSS poziomu 2.

Ogólnie rzecz bior�c, z w�a�ciwo�ci CSS korzysta si� w standardowy sposób — ichwarto�ci s� odczytywane w sposób typowy dla w�a�ciwo�ci i ustawiane przy u�yciumetod. Aby odwo�a si� do w�a�ciwo�ci CSS w kodzie JavaScript, nale�y po prostu podajej nazw�, o ile tylko nie zawiera ona ��cznika. W przypadku nazw kilkucz�onowych znak

560 Cz�� III � Kontrolowanie prezentacji za pomoc� CSS

��cznika nale�y usun�, a znak znajduj�cy si� bezpo�rednio za nim nale�y zapisa wielk�liter�. Wszystkie pozosta�e znaki nazwy w�a�ciwo�ci s� zapisywane ma�ymi literami. Naprzyk�ad w�a�ciwo�:font-size

staje si� w kodzie JavaScript:fontSize

Tak uzyskan� nazw� w�a�ciwo�ci dodaje si� do nazwy (lub identyfikatora) obiektu zawie-raj�cego kolekcj� stylów. Na przyk�ad, aby odwo�a si� do w�a�ciwo�ci font-size obiektuo nazwie bigText, nale�y u�y nast�puj�cego wyra�enia:bigText.style.fontSize

Powy�sze wyra�enie mo�e zosta u�yte tak�e do okre�lenia nowej warto�ci w�a�ciwo-�ci. Na przyk�ad poni�sza instrukcja przypisuje w�a�ciwo�ci font-size obiektu bigTextwarto� xx-large:bigText.style.fontSize = "xx-large";

Przeanalizuj kod poni�szego przyk�adu. Kiedy klikniemy wy�wietlony na stronie akapittekstu, procedura obs�ugi zdarze� onClick wywo�a funkcj� SuperSizeMe(), która z koleiprzypisuje w�a�ciwo�ci font-size akapitu warto� xx-large (przez co tekst akapitu zostajepowi�kszony). Pocz�tkowy wygl�d strony zosta� przedstawiony na rysunku 36.1, natomiastrysunek 36.2 przedstawia t� sam� stron� po klikni�ciu akapitu.

Rysunek 36.1.Pocz�tkowo,przed klikni�ciem,tekst jest wy�wietlonyczcionk� o �redniejwielko�ci (medium)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>

Rozdzia� 36. � Dynamiczny HTML i CSS 561

Rysunek 36.2.Po klikni�ciu wielko��czcionki zostajezmieniona na bardzodu�� (xx-large)

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Powi�kszanie 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 po�wi�ci troch� czasu na to, by dobrze przeanalizowa i zrozumie, jakdzia�a powy�szy przyk�ad. Mo�na s�dzi, �e kolekcja style zapewnia dost�p do stylów


przypisanych danemu elementowi, niezale�nie od tego, sk�d one pochodz�. Okazuje si� jed-nak, �e tak nie jest. Kolekcja style zapewnia mo�liwo� odwo�ywania si� i operowaniana atrybucie style umieszczonym w znaczniku obiektu. Oznacza to, �e wykonanie poni�-szego fragmentu kodu JavaScript bezpo�rednio po wy�wietleniu naszej przyk�adowej stronyw przegl�darce spowodowa�oby wy�wietlenie okienka informacyjnego z napisem „null”:alert(document.getElementById("bigText").style.fontSize);

W�a�ciwo� style.fontSize ma warto� null, poniewa� w elemencie bigText nie zosta�okre�lony atrybut style. W jaki sposób zatem dzia�a powy�szy przyk�ad, skoro nie zmie-nia on warto�ci medium atrybutu font-size okre�lonego w arkuszu stylów umieszczonymw elemencie <style> w sekcji nag�ówka strony? Odpowied� jest prosta — wcale niemusi on zmienia warto�ci w�a�ciwo�ci okre�lonych w elemencie <style>, zmienia onwarto�ci przechowywane w atrybucie style elementu. Warto�ci te maj� bowiem wy�szypriorytet ni� w�a�ciwo�ci zdefiniowane w arkuszach stylów w sekcji nag�ówka strony.

Oczywi�cie, gdyby warto�ci przechowywane w atrybucie style zosta�y podane, to mo�naby odczyta ich warto�ci przy u�yciu atrybutu style.

Aby odczyta w�a�ciwo�ci podane w sekcji <style>, nale�y u�y jednej z dwóch metod:jedna z nich dzia�a w przegl�darkach Internet Explorer, a druga w przegl�darkach Fire-fox. W pierwszym przypadku korzystamy z udost�pnianej przez Internet Explorera w�a-�ciwo�ci currentStyle; z kolei w przegl�darce Firefox obiekt window udost�pnia metod�getComputedStyle.

Korzystanie z w�a�ciwo�ci currentStyle w Internet Explorerze jest wyj�tkowo proste —wystarczy odszuka interesuj�cy element strony, u�ywaj�c w tym celu jego identyfika-tora, a nast�pnie skorzysta z w�a�ciwo�ci, by pobra warto� odpowiedniego stylu. Poka-zano to na poni�szym przyk�adzie:obj = document.getElementById(id);value = obj.currentStyle['fontSize'];

Nale�y zwróci uwag�, �e nazwa stylu jest zapisana bez ��cznika, zatem ma ona postafontSize, a nie font-size.

W przegl�darce Firefox nale�y wykona dodatkowy, po�redni krok, gdy� wywo�aniemetody getComputedStyle() zwraca kolekcj�, z której dopiero mo�na odczyta intere-suj�c� nas warto� stylu. Ten etap po�redni wymaga u�ycia metody getPropertyValue().Ca�y proces wygl�da nast�puj�co:obj = document.getElementById(id);objstyles = window.getComputedStyle(obj,null);value = objstyles.getProperty('font-size');

Warto zauwa�y, �e w tym rozwi�zaniu stosowane s� standardowe nazwy w�a�ciwo�ciCSS, a nie ich przekszta�cone wersje bez ��czników. Niemniej jednak w obu przedstawio-nych przypadkach efekt b�dzie taki sam — w zmiennej value zostanie zapisana warto�w�a�ciwo�ci font-size.

Dzi�ki wykorzystaniu niezbyt skomplikowanego kodu okre�laj�cego rodzaj u�ywanejprzegl�darki istnieje mo�liwo� po��czenia obu przedstawionych wcze�niej rozwi�za�


i zaimplementowania ich w postaci jednej funkcji. Poni�szy listing przedstawia kod funk-cji, która zwraca warto� stylu na podstawie przekazanej w wywo�aniu nazwy elementuoraz nazwy w�a�ciwo�ci CSS (przy czym u�ywana jest tu prawid�owa nazwa w�a�ciwo�ci,a nie nazwa zapisywana bez ��cznika):

// Funkcja zwraca warto�� w�a�ciwo�ci CSS o nazwie propName// odczytanej z elementu okre�lonego przy u�yciu identyfikatora id

function getStyleVal (id, propName) { // Czy w ogóle mo�emy cokolwiek zrobi� [czy uda si� nam // pobra� obiekt elementu przy u�yciu metody getElementById()]? if (obj = document.getElementById(id)) { // Czy dost�pna jest w�a�ciwo�� currentStyle (IE)? if (obj.currentStyle) { // Konwertujemy nazw� w�a�ciwo�ci na format u�ywany 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 dost�pna metoda getComputedStyle (Mozilla)? if (window.getComputedStyle) { compStyle = window.getComputedStyle(obj,null); return compStyle.getPropertyValue(propName); } } // Koniec instrukcji if (obj == document.getElementById(id))

// Nie uda�o si� odszuka� elementu — zwracamy pusty �acuch znaków return "";}

Zwró uwag�, �e w pierwszej kolejno�ci funkcja sprawdza, czy u�ywana przegl�darkaudost�pnia metod� document.getElementById() (wszystkie nowoczesne przegl�darki j�udost�pniaj�). Je�li metoda ta nie jest dost�pna, funkcja ko�czy dzia�anie, zwracaj�c pusty�a�cuch znaków. Nast�pnie funkcja sprawdza, z jakiego sposobu odczytu warto�ci stylumo�e skorzysta — tego stosowanego w przegl�darkach Internet Explorer czy tego z prze-gl�darek Mozilli. Korzystaj�c z jednego z tych dwóch sposobów, funkcja odczytuje war-to� podanej w�a�ciwo�ci stylu i zwraca j�. Dodatkowo, w razie potrzeby, funkcja konwer-tuje nazw� w�a�ciwo�ci na format stosowany w przegl�darkach IE. Praktyczne wynikiwykorzystania tej funkcji zosta�y przedstawione na rysunkach: 36.3 (w Internet Explo-rerze) oraz 36.4 (w przegl�darce Firefox). W obu przypadkach u�yto tej samej strony,zawieraj�cej nast�puj�cy fragment kodu: <style type="text/css"> #bigText { font-size: medium; } </style>...<p id="bigText" onClick="alert(getStyleVal('bigText','font-size'));">Loremipsum dolor sit amet, consecterur adipisicing elit, ...

Po klikni�ciu tekstu wy�wietlonego na stronie zostanie wy�wietlone informacyjne okienkodialogowe, a w nim informacje o warto�ci w�a�ciwo�ci font-size we wskazanym akapicie.


Rysunek 36.3. Funkcja getStyleVal() zosta�a tu zastosowana do wy�wietlenia warto�ci w�a�ciwo�cifont-size w przegl�darce Internet Explorer

Rysunek 36.4. Funkcja getStyleVal() zosta�a tu zastosowana do wy�wietlenia warto�ciw�a�ciwo�ci font-size w przegl�darce Firefox

Warto zwróci� uwag�, �e w przypadku wykonywania funkcji getStyleVal() w przegl�darceFirefox zwraca ona warto�� bezwzgl�dn� wyra�on� w pikselach. Ze wzgl�du na sposóbdzia�ania tej funkcji mo�e si� okaza�, �e zwracane przez ni� warto�ci b�d� zapisanew innym formacie ni� ten, jakiego u�yto do okre�lania danej w�a�ciwo�ci stylu. Na przyk�ad,mimo �e kolor jakiego� elementu okre�lisz w stylu przy u�yciu warto�ci szesnastkowej#FFA500, funkcja zwróci nazw� koloru — orange. Albo, jak w zaprezentowanym wcze�niejprzyk�adzie, zamiast wielko�ci wzgl�dnych (medium) — bezwzgl�dne warto�ci wyra�onew pikselach.

A zatem dlaczego nie mo�na by u�ywa dwóch przedstawionych wcze�niej rozwi�za�do manipulowania stylami? Wyt�umaczenie jest proste — obie pozwalaj� jedynie naodczyt warto�ci stylów. Warto�ci stylów mo�na podawa bezpo�rednio, w sposób przed-stawiony na pocz�tku tego podrozdzia�u.


U�yteczne operacje z u�yciem CSSPrzyk�ady przedstawione we wcze�niejszej cz��ci rozdzia�u pokaza�y, w jaki sposóbmo�na operowa na w�a�ciwo�ciach zwi�zanych z postaci� czcionki. Cho s� to ca�-kiem przydatne operacje, to jednak bardziej z�o�one manipulacje w�a�ciwo�ciami CSSz poziomu kodu JavaScript mog� pozwoli nam tworzy jeszcze bardziej atrakcyjneefekty wizualne. W tej cz��ci rozdzia�u znajdziesz kilka przyk�adów, które mo�esz wyko-rzysta jako punkt startowy do dalszych, w�asnych eksperymentów.

Ukrywanie i wy�wietlanie tekstu

Dzi�ki wykorzystaniu kaskadowych arkuszy stylów i JavaScriptu bez wi�kszych pro-blemów mo�na ukrywa i wy�wietla teksty oraz inne elementy stron. Rozwi�zanie takiemo�e by wykorzystane w przeró�nych sytuacjach, takich jak tworzenie rozwijanegomenu b�d� ukrywanie fragmentu strony do momentu, gdy u�ytkownik zdecyduje si� gowy�wietli. Na przyk�ad przeanalizujmy stron� zawieraj�c� list� pyta� i odpowiedzi.Mo�na s�dzi, �e u�ytkownik nie b�dzie chcia� ogl�da ca�ej listy odpowiedzi, ju� bezpo-�rednio po wy�wietleniu strony. Jest bardziej prawdopodobne, �e b�dzie chcia� selek-tywnie wy�wietla odpowiedzi tylko na te pytania, które go interesuj�. Dzi�ki zastoso-waniu w�a�ciwo�ci CSS display napisanie skryptu zapewniaj�cego takie mo�liwo�cifunkcjonalne nie nastr�cza �adnych problemów.

Przeanalizuj poni�szy kod strony, w którym odpowiedzi na pytania s� pocz�tkowo ukryte,a przegl�darka wy�wietli je dopiero po klikni�ciu du�ej litery „P” lub tekstu pytania.Rysunek 36.5 przedstawia stron� bezpo�rednio po wy�wietleniu (z ukryt� odpowiedzi�),natomiast rysunek 36.6 — stron� po wy�wietleniu 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 wy�wietlanie tekstu</title> <style type="text/css">

/* Pocz�tkowo ukrywamy wszystkie odpowiedzi */ .hideseek { display: none; }

/* Ró�ne stany widoczno�ci 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; }


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

Rysunek 36.6. Odpowied jest wy�wietlana po klikni�ciu du�ej litery P (b�d dowolnego innegofragmentu pytania). Ponowne klikni�cie powoduje ukrycie odpowiedzi

.Atext { margin-left: 20px; margin-top: 0; padding-top: 0; }

</style>

<script type="text/javascript">

// Naprzemiennie ukrywamy i wy�wietlamy element function hideseek(id) { obj = document.getElementById(id); // Je�li styl nie jest okre�lony, to mo�emy za�o�y�, // �e element nie by� jeszcze modyfikowany i jest niewidoczny


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 urz�dze 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 nast�puj�cej (minimalnej) konfiguracji: Pentium 4 z co najmniej 2 GB pami�ci RAM i wysokiej jako�ci kart� graficzn�; do tego monitor LCD (nie wi�kszy ni� 19 cali), klawiatur�, myszk� i kabel sieciowy (o minimalnej d�ugo�ci 2 metrów). Nie przyno� niczego wi�cej (a w szczególno�ci nie próbuj u�ywa� dwóch komputerów)! </p> </div></body></html>

Powy�szy przyk�ad wykorzystuje funkcj� JavaScript, która odczytuje bie��c� warto�w�a�ciwo�ci display i ustawia j� na warto� przeciwn�, co powoduje naprzemiennewy�wietlanie i ukrywanie elementu. Funkcja ta jest wywo�ywana przez procedur� obs�ugizdarze� onClick, zdefiniowan� w elemencie <div> zawieraj�cym pytanie. W wywo�aniufunkcji umieszczony jest identyfikator elementu <div> zawieraj�cego odpowied�, dzi�kiczemu wie ona, na jakim elemencie ma operowa.

Jak ju� wcze�niej wspomniano, takie rozwi�zanie mo�e by stosowane w przeró�nychcelach. Wystarczy ukry element, który pocz�tkowo ma by niewidoczny (wykorzy-stuj�c do tego celu w�a�ciwo� display z warto�ci� none), a nast�pnie wy�wietla goprzy u�yciu funkcji wywo�ywanej po klikni�ciu przycisku lub zaj�ciu jakiegokolwiekinnego zdarzenia.

Powi�kszanie obrazków

Innym cz�sto spotykanym zastosowaniem mo�liwo�ci CSS do tworzenia ciekawychefektów wizualnych jest powi�kszanie obrazków, które pocz�tkowo s� wy�wietlanew postaci miniaturek. Technika ta jest powszechnie wykorzystywana we wszelkiego typugaleriach internetowych lub w innych witrynach, na których wy�wietlanie obrazków w pe�-nej wielko�ci jest po��dane, lecz kosztowne.

Prezentowana tu technika jest podobna do rozwi�zania przedstawionego w poprzednimpunkcie rozdzia�u — tak�e w tym przypadku generowane przez u�ytkownika zdarzeniewywo�uje skrypt, który odpowiednio modyfikuje w�a�ciwo�ci CSS danego elementu.


W prezentowanym przyk�adzie skrypt operuje na w�a�ciwo�ci display miniatury orazpe�nowymiarowego obrazka. Poni�ej przedstawiony zosta� kod przyk�adowej 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>Powi�kszanie 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 m�odzieczych zabaw z mymi bra�mi i siostrami. Czasy pozbawione zmartwie i wype�nione niekocz�cymi si� igraszkami, gonitwami, skokami, wyimaginowanymi polowaniami na wielkie, t�uste myszy. Czasy, kiedy frasunkiem, a i to niewielkim, by�o znalezienie matki i posilenie si� wcze�niej ni� pozosta�e rodzestwo. Z rozrzewnieniem wspominam ten czas, czas bez dylematów i rozterek, bez w�tpliwo�ci i konieczno�ci dokonywania wyborów. A teraz? Có�... teraz musz� wybra�, co jest dla mnie wa�niejsze: czy duma i pozornie nieskr�powana wolno�� nie do koca dzikiego drapie�nika, walcz�cego o egzystencj� na obrze�ach miejskiej d�ungli, czy te� syta i bezproblemowa egzystencja domowego kiciusia... </p></div></body></html>

Aby u�atwi formatowanie strony i zapewni wi�ksz� elastyczno�, wszystkie obrazki,zarówno miniaturka, jak i obrazek pe�nowymiarowy, zosta�y umieszczone w elementach<div>. W�a�ciwo� display elementu <div> zawieraj�cego miniaturk� ma pocz�tkowowarto� block, co sprawia, �e element ten jest widoczny. Natomiast w elemencie <div>


zawieraj�cym pe�nowymiarowy obrazek w�a�ciwo� display ma pocz�tkowo warto� none,a zatem element ten jest pocz�tkowo ukryty. W elemencie img prezentuj�cym miniaturk�zdefiniowano procedur� obs�ugi zdarze� onMouseOver, w której wywo�ywana jest funk-cja PicZoom(). Dzi�ki temu funkcja ta zostanie wywo�ana w momencie umieszczeniawska�nika myszy na miniaturce. Dzia�anie funkcji PicZoom() polega na zamianie warto-�ci w�a�ciwo�ci display elementów <div> zawieraj�cych obrazki; innymi s�owy, pojawisi� pe�nowymiarowy obrazek, a miniaturka zniknie. Wska�nik myszy pozostanie w tymsamym po�o�eniu — w obszarze pe�nowymiarowego zdj�cia. Kiedy u�ytkownik prze-sunie go poza obrazek, zostanie zg�oszone zdarzenie onMouseOut, a w efekcie ponowniezostanie wywo�ana funkcja PicZoom(), która tym razem ukryje pe�nowymiarowy obrazeki wy�wietli miniaturk�.

Dzia�anie tej strony zosta�o zilustrowane na rysunkach 36.7 oraz 36.8. Pierwszy z nichprzedstawia stron� w jej pocz�tkowej postaci, z widoczn� miniaturk�; natomiast na rysun-ku 36.8 widoczna jest strona po wy�wietleniu obrazka pe�nowymiarowego.

Rysunek 36.7. Pocz�tkowo, po wy�wietleniu strony, widoczna jest miniaturka, natomiastpe�nowymiarowy obrazek jest ukryty

Podobnie jak w pozosta�ych przyk�adach przedstawionych w tym rozdziale, podobnyefekt mo�na uzyska� na wiele sposobów. Jeden z nich polega na umieszczeniu wszystkichobrazków na jednym du�ym i przesuwanie go w taki sposób, by w danym momencieby� widoczny jego odpowiedni fragment. Inne rozwi�zanie polega na modyfikowaniuatrybutu src znacznika <img> tak, by wy�wietlany by� w nim odpowiedni obrazek. Istniejetak�e bardziej z�o�ona technika, bazuj�ca na wykorzystaniu warstw i odpowiednichmodyfikacjach w�a�ciwo�ci z-index wybranego elementu. Nic nie stoi na przeszkodzie,by� wymy�li� tak�e swoje w�asne rozwi�zanie.

Podmieniane menu

We wszystkich przyk�adach przedstawionych we wcze�niejszej cz��ci rozdzia�u uzyski-wali�my zamierzony efekt wizualny, stosuj�c kod JavaScript do modyfikowania w�a�ciwo-�ci CSS. Jak na razie nie skorzystali�my z pseudoklas CSS dost�pnych w elementach��czy, które pozwalaj� na uzyskanie podobnych efektów.


Rysunek 36.8. Po umieszczeniu wskanika myszy na miniaturce, zamiast niej w przegl�darcejest wy�wietlany obrazek w pe�nych wymiarach

Pseudoklasy elementów <a> przedstawione zosta�y 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 zosta�y odwiedzone.

:visited Formatuje elementy wybrane przez selektor jako odwiedzone ��cza.

:hover Formatuje elementy wybrane przez selektor w momencie umieszczenia na nich wska�nikamyszy.

:active Formatuje elementy wybrane przez selektor jako aktywne ��cza.

Pseudoklasy wymienione w tabeli 36.1 s� zazwyczaj stosowane do okre�lania wygl�duelementów traktowanych jak dynamiczne ��cza. Na przyk�ad, korzystaj�c z pseudoklasy:hover, mo�na dynamicznie zmienia wygl�d elementu w momencie umieszczenia nadnim wska�nika myszy — czyli dok�adnie tak samo, jak zachowuj� si� ��cza.

Na przyk�ad przedstawiony poni�ej dokument HTML wykorzystuje pseudoklas� :hover,by zmienia wygl�d ��czy po wskazaniu ich mysz�. Uzyskany efekt przypomina dyna-micznie modyfikowane menu tworzone przy u�yciu kodu JavaScript. Efekty jego dzia�aniazosta�y przedstawione na rysunku 36.9.


<!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 wykorzystuj�ce 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">Us�ugi</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 tymprzypadku wskazany element menu jest pod�wietlany


Nale�y zauwa�y, �e cho technika polegaj�ca na zastosowaniu pseudoklas w celu uzyska-nia ciekawych efektów wizualnych jest bardzo popularna, to jednak nie jest ona zgodnaz zasad� separacji dzia�a� od prezentacji. Dlatego te� znacznie lepszym rozwi�zaniemjest tworzenie podobnych efektów przy wykorzystaniu kodu JavaScript.

Zwró� uwag�, �e opisana tu technika mo�e by� stosowana w po��czeniu niemalze wszystkimi elementami HTML. Jednak pseudoklas mo�na u�ywa� wy��czniedo formatowania znaczników ��czy, a zatem by odpowiednio formatowa� ��czaw dokumencie, nale�y korzysta� z innych znaczników.

PodsumowanieW tym rozdziale przedstawione zosta�y technologie DHTML i CSS. Dowiedzia�e� si�,jak u�ywa JavaScriptu, by modyfikowa style CSS elementów i uzyskiwa ciekaweefekty wizualne, oraz jak tworzy takie efekty przy u�yciu pseudoklas CSS. W nast�pnymrozdziale zamieszczone zosta�y informacje dotycz�ce stosowania kaskadowych arkuszystylów do okre�lania postaci stron przeznaczonych do wydruku. W kolejnych rozdzia-�ach, od 38. do 41., przedstawione zosta�y bardziej specjalistyczne zagadnienia zwi�zaneze stosowaniem kaskadowych arkuszy stylów.

HTML, XHTML i CSS. - pdf.helion.plpdf.helion.pl/hxcbi5/hxcbi5-36.pdf · w tym celu zestaw...

Documents

Transcript of HTML, XHTML i CSS. - pdf.helion.plpdf.helion.pl/hxcbi5/hxcbi5-36.pdf · w tym celu zestaw...