HTML, XHTML i CSS.
Idz do
Praktyczne projekty.
" Spis treści
Wydanie II
" Przykładowy rozdział
" Skorowidz
Autor: WÅ‚odzimierz Gajda
ISBN: 978-83-246-3049-3
Katalog książek Format: 158×235, stron: 512
" Katalog online
Zostań świetnym webmasterem!
" Zamów drukowany
" Podstawy i rozróżnienia, czyli czym różni się HTML od XHTML i co to jest CSS
katalog
" Standardy i zasady, czyli o czym pamiętać przy projektowaniu strony internetowej
" Czcionki i układy stron, czyli jak stworzyć znakomity projekt i szablon strony WWW
Twój koszyk
O projektowaniu stron internetowych napisano zapewne grube tysiące książek. Ta dziedzina
zmienia się jednak na tyle szybko, a profesjonalnych projektantów, mających dużą wiedzę
i obdarzonych umiejętnością jej przekazania, jest na tyle mało, że warto skorzystać z ich
" Dodaj do koszyka
doświadczeń. Zwłaszcza, jeśli niezbędne wiadomości podane są w formie praktycznych
przykładów, a dotyczą tak istotnych kwestii, jak używanie języków HTML i XHTML oraz
Cennik i informacje
kaskadowych arkuszy stylów, zgodność stron z obowiązującymi standardami, komponowanie
układu serwisu WWW i tworzenie jego zawartości.
" Zamów informacje Drugie wydanie książki HTML, XHTML i CSS. Praktyczne projekty pozwoli Ci od podszewki poznać
o nowościach tajniki projektowania naprawdę przemyślanych stron internetowych, uwzględniających potrzeby
ich użytkowników. Dowiesz się, jak zachować poprawność składniową XHTML i CSS. Poznasz
" Zamów cennik
semantykÄ™ kodu XHTML i opanujesz metodologiÄ™ pracy zgodnej ze standardami. Zrozumiesz,
dlaczego ważne jest zapewnienie dostępności Twoich stron dla osób niepełnosprawnych i co
Czytelnia
zrobić, by wyszukiwarki mogły bez trudu przeanalizować oraz zaklasyfikować zawartość serwisu.
Nauczysz się wybierać czcionki, tło, projektować wygodny interfejs i poszczególne fragmenty
strony, a także zapisywać szczególnie udane projekty w formie szablonów.
" Fragmenty książek
online " Składnia i poprawność języka XHTML
" Znaki diakrytyczne i oznaczanie języka dokumentu
" Praca w trybie standardów
" Podstawowe elementy XHTML
" Kaskadowe arkusze stylów składnia i właściwości
" Klasy i identyfikatory, rodzaje czcionek
" Wszystkie atrybuty CSS 2.1 dotyczÄ…ce czcionek i tekstu
" Elementy blokowe, liniowe i pływające
" Obszar zajmowany przez element i metody pozycjonowania elementów blokowych
" Układy stałej szerokości, płynne i hybrydowe
" Tekst, listy, tabele, odsyłacze i pozostałe elementy XHTML
Kontakt
" Właściwości CSS dotyczące tła i przyciski rollover w CSS
" Struktura funkcjonalna witryny, kolejność elementów w kodzie XHTML i atrybuty XHTML
" Formularze i powiązania dokumentów
Helion SA
" Element meta dodatkowe informacje na temat strony WWW
ul. Kościuszki 1c
44-100 Gliwice
" Dostępność strony WWW
tel. 32 230 98 63
" Semantyczny XHTML
e-mail: helion@helion.pl
Wykorzystaj swoją kreatywność, tworząc zachwycające strony WWW!
© Helion 1991 2011
Spis tre ci
Cz I Elementarz ...................................................................... 11
Rozdzia 1. Wprowadzenie ................................................................................................13
Dla kogo jest ta ksi ka? ................................................................................................................... 13
Jak czyta t ksi k ? ........................................................................................................................ 14
Warsztat pracy ................................................................................................................................... 14
Firefox ............................................................................................................................................... 16
Testowanie stron WWW ................................................................................................................... 16
Edycja kodu XHTML ....................................................................................................................... 17
Rozdzia 2. Sk adnia j zyka XHTML ...................................................................................21
Znaczniki i elementy ......................................................................................................................... 21
Wszystkie elementy j zyka XHTML ................................................................................................ 22
Elementy puste i niepuste .................................................................................................................. 22
Znaczniki wymagane i opcjonalne oraz elementy puste .................................................................... 23
Wielko liter w nazwach znaczników .............................................................................................. 24
Bia e znaki wewn trz znaczników .................................................................................................... 24
Bia e znaki w tre ci elementów ......................................................................................................... 25
Zagnie d anie elementów ................................................................................................................. 25
Znaki specjalne ................................................................................................................................. 26
Atrybuty znaczników ........................................................................................................................ 28
Bia e znaki w warto ciach atrybutów ................................................................................................ 30
Atrybuty logiczne, wyliczeniowe i inne ............................................................................................ 30
Komentarze w XHTML .................................................................................................................... 32
Struktura dokumentu HTML ............................................................................................................. 33
Pierwsza strona WWW ..................................................................................................................... 34
Rozdzia 3. Znaki diakrytyczne i oznaczanie j zyka dokumentu ..........................................37
Polskie znaki diakrytyczne ................................................................................................................ 37
Metody kodowania polskich znaków diakrytycznych ....................................................................... 37
Fizyczne kodowanie pliku ................................................................................................................. 38
Element meta ustalaj cy kodowanie dokumentu XHTML ................................................................ 39
Pangramy .......................................................................................................................................... 40
Atrybuty lang oraz xml:lang .............................................................................................................. 41
Szablony pustych polskich stron WWW ........................................................................................... 42
Znaki diakrytyczne w postaci encji ................................................................................................... 42
Kodowanie stron zawieraj cych teksty w kilku j zykach ................................................................. 43
Jakiego kodowania u ywa ? ............................................................................................................. 47
B dne wy wietlanie polskich znaków diakrytycznych .................................................................... 47
wiczenia .......................................................................................................................................... 48
4 Spis tre ci
Rozdzia 4. XHTML poprawny sk adniowo ..........................................................................53
Czy poprawno sk adniowa jest wa na? .......................................................................................... 53
Obecny stan internetu ........................................................................................................................ 54
Metody sprawdzania poprawno ci sk adniowej ................................................................................ 54
Rozdzia 5. Praca w trybie standardów ..............................................................................61
Quirks mode i standard mode dwa tryby pracy przegl darek internetowych ............................... 61
Problemy z trybami pracy ................................................................................................................. 62
Które przegl darki maj tryb standardów? ........................................................................................ 62
Jak sprawdzi tryb pracy przegl darki? ............................................................................................. 63
W jaki sposób przegl darka wybiera tryb pracy? .............................................................................. 65
B dne wy wietlanie witryny wynikaj ce z prze czenia trybu pracy przegl darki .......................... 66
Stosuj DOCTYPE j zyka XHTML 1.0 strict .................................................................................... 69
Rozdzia 6. Podstawowe elementy XHTML ........................................................................71
Akapit ................................................................................................................................................ 71
Dzielenie wyrazów ............................................................................................................................ 76
Zakaz amania wiersza ...................................................................................................................... 77
Z amanie wiersza .............................................................................................................................. 78
Znaki interpunkcyjne ........................................................................................................................ 80
Nag ówki ........................................................................................................................................... 80
Wyró nianie tekstu ............................................................................................................................ 83
Tekst preformatowany ...................................................................................................................... 85
Indeksy dolny i górny ........................................................................................................................ 86
Linia pozioma ................................................................................................................................... 87
Popularne znaki specjalne ................................................................................................................. 88
Zestawienie ....................................................................................................................................... 88
Rozdzia 7. Kaskadowe arkusze stylów .............................................................................91
Struktura a wygl d dokumentów HTML ........................................................................................... 91
Do czanie stylów do dokumentu ..................................................................................................... 91
Style zewn trzne ......................................................................................................................... 91
Style wewn trzne ........................................................................................................................ 92
Atrybut style ............................................................................................................................... 93
Domy lny j zyk stylów ..................................................................................................................... 94
Ujmowanie stylów wewn trznych w komentarz ............................................................................... 95
Rozdzia 8. Sk adnia kaskadowych arkuszy stylów ............................................................97
Terminologia ..................................................................................................................................... 97
Wielko liter w selektorach ............................................................................................................. 98
Wielko liter w nazwach i warto ciach w a ciwo ci ....................................................................... 99
Bia e znaki ........................................................................................................................................ 99
Komentarze ..................................................................................................................................... 100
Formatowanie kodu CSS ................................................................................................................. 100
Rozdzia 9. Przyk adowe w a ciwo ci CSS .......................................................................103
Czcionki .......................................................................................................................................... 103
Wysoko wiersza tekstu ................................................................................................................ 104
Wyrównanie poziome tekstu ........................................................................................................... 105
Marginesy ....................................................................................................................................... 105
Kolory ............................................................................................................................................. 106
Obramowanie .................................................................................................................................. 108
XHTML struktura, CSS wygl d ............................................................................................ 109
Zestawienie sumaryczne ................................................................................................................. 109
Rozdzia 10. Klasy i identyfikatory ..................................................................................111
Atrybut class ................................................................................................................................... 111
Selektory dotycz ce klas ................................................................................................................. 112
Spis tre ci 5
Stosowanie klas ............................................................................................................................... 112
Atrybut id ........................................................................................................................................ 113
Selektory dotycz ce identyfikatorów .............................................................................................. 113
Stosowanie identyfikatorów ............................................................................................................ 114
Walka z classitis: selektory potomne .............................................................................................. 115
Rozdzia 11. Projekty .....................................................................................................119
Cz II Czcionki na stronach WWW ........................................... 127
Rozdzia 12. Rodzaje czcionek ........................................................................................129
Czcionki szeryfowe i bezszeryfowe ................................................................................................ 129
Czcionki proporcjonalne i nieproporcjonalne ................................................................................. 130
Inne podzia y czcionek .................................................................................................................... 131
Testowanie czcionek ....................................................................................................................... 133
Rozdzia 13. Czcionki dla webmastera ............................................................................135
Core fonts for the Web .................................................................................................................... 138
Czcionki dost pne na ró nych platformach ..................................................................................... 138
Definiowanie kroju czcionki ........................................................................................................... 139
Osadzanie czcionek na stronach WWW .......................................................................................... 141
Google Fonts ................................................................................................................................... 143
Rozdzia 14. Wszystkie w a ciwo ci CSS 2.1 dotycz ce czcionek i tekstu .......................145
font-family ...................................................................................................................................... 145
font-size ........................................................................................................................................... 146
font-style ......................................................................................................................................... 148
font-weight ...................................................................................................................................... 148
font-variant ...................................................................................................................................... 148
font .................................................................................................................................................. 148
text-align ......................................................................................................................................... 149
text-decoration ................................................................................................................................ 149
text-indent ....................................................................................................................................... 149
text-transform .................................................................................................................................. 150
word-spacing ................................................................................................................................... 150
letter-spacing ................................................................................................................................... 150
white-space ..................................................................................................................................... 150
line-height ....................................................................................................................................... 151
Rozdzia 15. Projekty .....................................................................................................153
Cz III Uk ad strony ................................................................ 159
Rozdzia 16. Elementy blokowe i liniowe .........................................................................161
Elementy blokowe i liniowe definicja sk adniowa ..................................................................... 161
Elementy blokowe i liniowe definicja prezentacyjna ................................................................. 165
Który ze sposobów definiowania elementów blokowych i liniowych jest lepszy i dlaczego? ........ 167
Elementy ogólne div i span ............................................................................................................. 168
U ywanie elementów div i span w po czeniu z klasami i identyfikatorami .................................. 169
Typowy przyk ad u ycia elementów div ......................................................................................... 170
Domy lny format wizualny elementów blokowych i liniowych ..................................................... 171
Rozdzia 17. Obszar zajmowany przez element .................................................................175
W a ciwo display ......................................................................................................................... 179
Wy rodkowanie elementu blokowego ............................................................................................ 180
czenie marginesów pionowych ................................................................................................... 183
Wymiary minimalne i maksymalne ................................................................................................. 184
6 Spis tre ci
Rozdzia 18. Elementy p ywaj ce ....................................................................................187
W a ciwo float ............................................................................................................................. 187
Uk ady kolumnowe ......................................................................................................................... 190
Znikaj ce t o pojemnika .................................................................................................................. 192
Czyszczenie elementów p ywaj cych ............................................................................................. 193
Rozdzia 19. Zaawansowane metody pozycjonowania elementów blokowych ....................195
W a ciwo position ........................................................................................................................ 195
Pozycjonowanie statyczne ............................................................................................................... 197
Pozycjonowanie wzgl dne .............................................................................................................. 198
Pozycjonowanie bezwzgl dne ......................................................................................................... 200
Pozycjonowanie trwa e ................................................................................................................... 201
Pozycjonowanie kontekstowe ......................................................................................................... 202
W a ciwo ci left, right, top oraz bottom .......................................................................................... 205
Warstwy i ich kolejno .................................................................................................................. 210
Przycinanie ...................................................................................................................................... 212
Rozdzia 20. Uk ady o sta ej szeroko ci ..........................................................................215
Dobieranie szeroko ci uk adu ......................................................................................................... 215
Uk ady przylegaj ce do okna przegl darki ..................................................................................... 217
Rozdzia 21. Uk ady p ynne .............................................................................................227
Rozdzia 22. Uk ady hybrydowe .......................................................................................231
Uk ady dwukolumnowe .................................................................................................................. 231
Uk ad trójkolumnowy ..................................................................................................................... 235
Rozdzia 23. Projekty .....................................................................................................239
Cz IV Elementy XHTML ......................................................... 247
Rozdzia 24. Tekst .........................................................................................................249
Elementy frazowe ............................................................................................................................ 249
Trudne wybory ................................................................................................................................ 251
Cytaty .............................................................................................................................................. 252
Tekst na stronach WWW podsumowanie ................................................................................... 253
Rozdzia 25. Listy ...........................................................................................................255
Wypunktowanie .............................................................................................................................. 255
Numerowanie .................................................................................................................................. 256
Lista definicji .................................................................................................................................. 256
Zagnie d anie list ............................................................................................................................ 257
W a ciwo ci CSS list ...................................................................................................................... 259
Rozdzia 26. Element img ...............................................................................................263
Pliki graficzne ................................................................................................................................. 264
Sk adnia elementu img .................................................................................................................... 264
Wymiary obrazów ........................................................................................................................... 265
Obrazy nieprostok tne ..................................................................................................................... 268
Animacje ......................................................................................................................................... 270
Op ywanie ....................................................................................................................................... 271
Dlaczego elementy p ywaj ce nie generuj wysoko ci? ................................................................. 273
Osadzanie obrazów w kodzie XHTML ........................................................................................... 275
Rozdzia 27. Tabele ........................................................................................................279
Obramowanie i czenie obramowania ............................................................................................ 280
Podstawowe formatowanie komórek i ca ych tabel ........................................................................ 281
Nag ówki kolumn i nag ówki wierszy ............................................................................................. 283
Podpis i opis tabeli .......................................................................................................................... 285
Spis tre ci 7
Tabele regularne i nieregularne ....................................................................................................... 286
Nag ówek, stopka i tre tabeli ........................................................................................................ 288
Kolumny tabeli ................................................................................................................................ 290
Tabele XHTML podsumowanie ................................................................................................. 294
Rozdzia 28. Odsy acze ...................................................................................................297
Spis tre ci w postaci listy numerowanej b d wypunktowanej ....................................................... 298
Style CSS witryny z hiper czami ................................................................................................... 299
Atrybut title ..................................................................................................................................... 300
Odsy acze do ró nych typów plików .............................................................................................. 300
Odsy acze wskazuj ce strony w internecie ..................................................................................... 301
Odsy acze wewn trzne .................................................................................................................... 301
Obrazy jako odsy acze .................................................................................................................... 303
Style CSS odsy aczy ....................................................................................................................... 304
Otwieranie nowych okien ................................................................................................................ 305
Mapa odsy aczy ............................................................................................................................... 306
Rozdzia 29. Pozosta e elementy XHTML .........................................................................309
Oznaczanie zmian w dokumencie ................................................................................................... 309
Element object ................................................................................................................................. 310
Osadzanie na stronie WWW filmów z serwisu YouTube ......................................................... 311
Osadzanie na stronie WWW apletów pisanych w j zyku Java ................................................. 313
Bazowy adres URL ......................................................................................................................... 314
Rozdzia 30. Projekty .....................................................................................................317
Cz V T a ................................................................................ 339
Rozdzia 31. W a ciwo ci CSS dotycz ce t a ...................................................................341
Rozdzia 32. FIR wymiana obrazów na teksty ..............................................................351
Efekt FIR wykonany przy u yciu display: none .............................................................................. 353
Efekt FIR wykonany przy u yciu text-indent .................................................................................. 353
Efekt FIR wykorzystuj cy kolejno warstw .................................................................................. 354
Rozdzia 33. Udawane kolumny ......................................................................................359
Rozdzia 34. Przyciski rollover w CSS .............................................................................367
Wymiana obrazu t a ........................................................................................................................ 367
Przycisk z etykiet tekstow ............................................................................................................ 368
Przyciski pozycjonowane kontekstowo ........................................................................................... 369
Rozdzia 35. Kafelkowanie ..............................................................................................381
Etap pierwszy: pokrojenie szablonu na oddzielne pliki ............................................................ 388
Etap drugi: sklejenie oddzielnych plików w jeden plik sprite.png ............................................ 389
Rozdzia 36. Projekty .....................................................................................................393
Cz VI Zagadnienia zaawansowane ......................................... 405
Rozdzia 37. Struktura funkcjonalna witryny ....................................................................407
Rozdzia 38. Uzupe nienie wiadomo ci na temat CSS ......................................................411
Selektory ......................................................................................................................................... 411
Pseudoklasy ..................................................................................................................................... 414
Importowanie stylów ....................................................................................................................... 418
Dziedziczenie .................................................................................................................................. 419
Style do druku ................................................................................................................................. 419
Style alternatywne ........................................................................................................................... 422
8 Spis tre ci
Rozdzia 39. Kolejno elementów w kodzie XHTML ........................................................423
Zmiana kolejno ci kolumn pionowych ........................................................................................... 424
Zmiana kolejno ci poziomych pasów ............................................................................................. 427
Zmiana kolejno ci kolumn oraz poziomych pasów ......................................................................... 428
Rozdzia 40. Atrybuty XHTML .........................................................................................431
Atrybuty zasadnicze ........................................................................................................................ 431
Atrybuty j zykowe .......................................................................................................................... 431
Zdarzenia ......................................................................................................................................... 432
Atrybuty ogólne .............................................................................................................................. 433
Atrybuty dotycz ce aktywnego punktu ........................................................................................... 433
Rozdzia 41. Formularze .................................................................................................435
Atrybuty formularza ........................................................................................................................ 436
Kontrolki formularza ....................................................................................................................... 437
Atrybuty ogólne kontrolek formularza ............................................................................................ 438
Zdarzenia dotycz ce kontrolek ........................................................................................................ 439
Elementy input ................................................................................................................................ 439
Przyciski zatwierdzaj ce i resetuj ce formularz .............................................................................. 440
Wiersz wprowadzania danych ......................................................................................................... 441
Pole has a ........................................................................................................................................ 441
Pola wyboru .................................................................................................................................... 441
Wykluczaj ce pola wyboru ............................................................................................................. 442
Kontrolki ukryte .............................................................................................................................. 443
Przyciski .......................................................................................................................................... 443
Kontrolka wyboru pliku .................................................................................................................. 443
Obraz ............................................................................................................................................... 444
Element button ................................................................................................................................ 444
Listy ................................................................................................................................................ 445
Pole tekstowe .................................................................................................................................. 447
Grupowanie i podpisywanie kontrolek formularza ......................................................................... 447
Podsumowanie ................................................................................................................................ 448
Rozdzia 42. Powi zania dokumentów .............................................................................449
Element link .................................................................................................................................... 449
Kana y RSS i Atom ......................................................................................................................... 451
Nast pny, poprzedni oraz spis tre ci ............................................................................................... 455
Ikona witryny WWW ...................................................................................................................... 457
Twórcy witryny WWW ................................................................................................................... 460
Plik robots.txt .................................................................................................................................. 460
Plik sitemap.xml .............................................................................................................................. 461
Rozdzia 43. Element meta dodatkowe informacje na temat strony WWW ...................463
Sk adnia elementu meta .................................................................................................................. 464
Znaczenie elementu meta ................................................................................................................ 464
Dwa rodzaje elementów meta ......................................................................................................... 464
Jakie metainformacje umieszcza w witrynach? ............................................................................. 465
Kodowanie znaków ................................................................................................................... 465
J zyki, w jakich przygotowano dokument ................................................................................ 465
Autor, prawa autorskie i firma .................................................................................................. 466
S owa kluczowe i opis ............................................................................................................... 466
Roboty ....................................................................................................................................... 467
Data powstania i wa no ci dokumentu ..................................................................................... 467
Przechowywanie stron WWW przez po redników ................................................................... 468
Skrypty i style domy lny j zyk ............................................................................................ 468
Metainformacje w kilku j zykach ............................................................................................. 468
Przekierowania .......................................................................................................................... 469
Ró no ci ................................................................................................................................... 469
Spis tre ci 9
Rozdzia 44. Dost pno strony WWW ............................................................................471
Kilka prostych zasad ....................................................................................................................... 471
Tre umieszczaj jako pierwsz ................................................................................................ 471
Etykietuj kontrolki formularzy .................................................................................................. 472
Pami taj o atrybutach alt ........................................................................................................... 472
Definiuj tytu y hiper czy ......................................................................................................... 472
Twórz czytelne tabele ............................................................................................................... 472
Nie otwieraj nowych okien ....................................................................................................... 473
Nie u ywaj przekierowa meta refresh ..................................................................................... 473
Definiuj powi zania mi dzy poszczególnymi podstronami witryny ......................................... 473
Stosuj atrybut lang .................................................................................................................... 473
Definiuj skróty i skrótowce ....................................................................................................... 473
Rozdzia 45. HTML czy XHTML? ......................................................................................475
XHTML zgodny z HTML ............................................................................................................... 475
Wielko liter ............................................................................................................................ 475
Elementy puste i niepuste ......................................................................................................... 476
Znaczniki opcjonalne ................................................................................................................ 477
Cudzys ów otaczaj cy warto ci atrybutów ............................................................................... 477
Minimalizacja atrybutów logicznych ........................................................................................ 478
Identyfikator fragmentu ............................................................................................................ 478
Style i skrypty ........................................................................................................................... 478
Encje ......................................................................................................................................... 479
Dokumenty HTML/XHTML w sieci WWW .................................................................................. 479
Content-type .............................................................................................................................. 479
Czy to HTML, czy XHTML? ................................................................................................... 481
Jak przegl darka traktuje dokument HTML, a jak XHTML? ................................................... 481
Po czym przegl darka rozpoznaje j zyk dokumentu? ............................................................... 482
Nag ówek Content-type dokumentu HTML oraz XHTML ....................................................... 482
Problemy z Internet Explorerem ............................................................................................... 482
Strona XHTML wysy ana jako application/xhtml+xml .................................................................. 483
Zmiana nag ówków wysy anych przez serwer Apache ............................................................. 483
Wysy anie nag ówka HTTP w PHP .......................................................................................... 483
Cztery proste zasady ....................................................................................................................... 483
HTML czy XHTML? ...................................................................................................................... 484
Rozdzia 46. Semantyczny XHTML ..................................................................................485
Witryna WWW widziana oczami cz owieka i robota ..................................................................... 485
Semantyczna sie ............................................................................................................................ 486
Semantyka kodu XHTML ............................................................................................................... 486
Semantyka przez ma e s .................................................................................................................. 487
Kto ma racj , czyli o braku specyfikacji semantyki XHTML ......................................................... 488
Praktyczne rozwi zania popularnych problemów ........................................................................... 488
Menu witryny ............................................................................................................................ 488
Nawigacja: jeste tutaj .............................................................................................................. 488
Ilustracja ................................................................................................................................... 489
Listing ....................................................................................................................................... 489
Z o enia ........................................................................................................................................... 489
Z o enie: dialog ........................................................................................................................ 490
Bibliografia ............................................................................................................................... 490
Problemy semantyczne XHTML i CSS ........................................................................................... 491
Czy strong jest bardziej semantyczny ni b? ................................................................................... 494
Elementy em oraz span ................................................................................................................... 495
Drzewo elementów .......................................................................................................................... 496
Element czysto prezentacyjny ......................................................................................................... 497
10 Spis tre ci
Czy wszystkie elementy tekstowe s równowa ne? ........................................................................ 497
Czy klasa wzbogaca semantyk elementu? ..................................................................................... 498
Czy XHTML jest bardziej semantyczny ni HTML? ..................................................................... 499
Praktyczne porady dotycz ce semantyki ......................................................................................... 499
Skorowidz ......................................................................................................................501
Rozdzia 7. Kaskadowe arkusze stylów 91
Rozdzia 7.
Kaskadowe arkusze stylów
Struktura a wygl d dokumentów HTML
Wygl d witryn WWW zale y od dwóch czynników: kodu strony napisanego w j zyku XHTML oraz for-
matu nadawanego przez przegl dark ró nym elementom XHTML. Struktur i zawarto dokumentu
opisujemy, korzystaj c z elementów XHTML: m.in. akapitów (p), nag ówków (h1, h2), tabel (table, tr,
td, th), sekcji (div) itd. Natomiast format elementów definiujemy w j zyku CSS (ang. Cascading Style
Sheets kaskadowe arkusze stylów).
Tworz c witryn WWW, musimy wi c opisa :
struktur i zawarto strony (j zyk XHTML),
format elementów (j zyk CSS).
W przypadku braku stylów przegl darka zastosuje style domy lne, które zazwyczaj s do ubogie.
Oddzielaj c definicj formatu elementów od samej zawarto ci strony, otrzymamy dokument, którego format
jest niezale ny od zawarto ci. G ówn korzy ci takiego rozwi zania jest to, e wygl d dokumentu mo-
emy modyfikowa , nie zmieniaj c jego tre ci (czyli kodu XHTML).
Do czanie stylów do dokumentu
Style CSS mo emy do czy do dokumentu XHTML na trzy sposoby:
jako style zewn trzne,
jako style wewn trzne,
stosuj c atrybut style.
W pierwszym przypadku style s zapisane w osobnym pliku. W drugim przypadku style znajduj si
w nag ówku strony WWW, a wi c pomi dzy znacznikami oraz . W trzecim przypadku
style pojawiaj si przy konkretnych elementach XHTML w tre ci strony, czyli pomi dzy znacznikami
oraz .
Style zewn trzne
W pierwszej metodzie style zapisujemy w osobnym pliku. Plik ze stylami ma zazwyczaj rozszerzenie
.css. Tak zdefiniowane style do czamy do dokumentu XHTML, umieszczaj c w nag ówku strony ele-
ment link:
92 Cz I Elementarz
NOTH
Style zewn trzne
Ctrl+B+Z, Ctrl+B+S
Po aktywacji skrótu Ctrl+B+Z naci nij przycisk F8. U atwi Ci on wstawienie nazwy pliku CSS.
Witryna sk ada si wi c z dwóch plików: dokumentu XHTML oraz dokumentu CSS. Listing 7.1 przed-
stawia przyk adowy plik index.html, za listing 7.2 ilustruje zawarto pliku style.css. W kodzie XHTML
pojawia si element link z atrybutem href. Warto ci atrybutu href jest nazwa pliku ze stylami (w przy-
k adzie: style.css).
Listing 7.1. Kod XHTML strony WWW stosuj cej style zewn trzne (plik index.html)
Style zewn trzne WITAJ Listing 7.2. Style CSS (plik style.css)
h1 {
margin: 20px;
background: blue;
color: white;
border: 4px solid black;
text-align: center;
}
Zalet takiego rozwi zania jest to, e w jednym miejscu mo esz modyfikowa wygl d wszystkich pod-
stron witryny. Co wi cej, tak wykonana witryna b dzie zajmowa a mniej miejsca i zu yje mniej transfe-
ru. Style zostan pobrane z serwera jeden jedyny raz. Kosztem do czenia stylów do witryny jest jedynie
element link dodany na ka dej podstronie.
Ponadto style zawarte w zewn trznym pliku mog zawiera dowolne znaki, tak e <, > czy &, nie powoduj c
adnych komplikacji1.
Jest to najlepsza metoda formatowania wygl du witryny. Nale y j stosowa w odniesieniu do wi kszo ci
witryn przeznaczonych do publikacji w internecie.
Style wewn trzne
Style wewn trzne umieszczamy w nag ówku strony WWW, wykorzystuj c element style:
NOTH
Style wewn trzne Ctrl+B+W
1
Specyfikacja XHTML 1.0. punkt C.4.
Rozdzia 7. Kaskadowe arkusze stylów 93
Listing 7.3 przedstawia kod przyk adowej strony WWW, która stosuje style wewn trzne. W nag ówku witry-
ny pojawia si element style, zawieraj cy definicj stylu nag ówka h1. W tre ci witryny, pomi dzy znacz-
nikami oraz , wyst puje element h1, którego wygl d zostanie zmieniony zgodnie ze sty-
lami podanymi wewn trz elementu style. Przyk ad ten sk ada si z jednego pliku: index.html.
Listing 7.3. Style wewn trzne
Style wewn trzne WITAJ Zalet tego rozwi zania jest to, e w jednym miejscu pojawiaj si style i kod XHTML. Je li wykonasz na ta-
kiej witrynie operacj podgl du ród a2, to ujrzysz i kod XHTML, i style CSS3. Ponadto tak wykonana witry-
na b dzie poprawnie wygl da a (tj. b dzie ozdobiona stylami), gdy zostanie otworzona wewn trz
aplikacji. Na przyk ad je li spakujesz kilka tak wykonanych stron, po czym otworzysz spakowane archi-
wum programem archiwizuj cym, to witryna b dzie poprawnie wygl da a po otworzeniu z wn trza archiwum
(bez wypakowywania).
Wad tego rozwi zania jest jego rozmiar: ka da podstrona projektu b dzie zawiera a komplet stylów.
Ponadto je li zechcesz wykona zmian , która obejmie wszystkie podstrony witryny, to b dziesz musia
zmieni style w ka dym pliku z osobna.
W praktyce style wewn trzne stosuj w odniesieniu do dokumentów, które s pojedynczymi plikami (np.
opisy programów umieszczane w spakowanych archiwach).
Atrybut style
Trzecia metoda definiowania stylów wykorzystuje atrybut style. Atrybut ten mo e towarzyszy nie-
mal ka demu elementowi XHTML. Zmiana formatu akapitu ma posta :
Witaj
Atrybut style mo e by przydatny w specyficznych okoliczno ciach. Na przyk ad wtedy, gdy nie masz
uprawnie do modyfikowania plików CSS na serwerze, a mo esz modyfikowa fragment pliku XHTML. Sy-
tuacja taka mo e pojawi si na przyk ad w systemie CMS. U ytkownik nie ma prawa modyfikowa adnych
plików (ani XHTML, ani CSS), ale mo e w systemie umieszcza wpisy zawieraj ce oprócz kodu
XHTML tak e atrybut style.
2
Opcja Widok/ ród o w przegl darce.
3
Usprawnia to m.in. prowadzenie wicze z j zyków XHTML oraz CSS. Nauczyciel przygotowuje przyk ad i umieszcza
go w sieci. Uczniowie po wykonaniu operacji podgl du ród a ujrz kompletny kod XHTML oraz CSS.
94 Cz I Elementarz
W przypadku, kiedy masz dost p do pliku CSS witryny, rozwi zanie takie nie ma sensu. Niektórzy twierdz
nawet, e atrybut style jest porównywalny z dawno wycofanym elementem font4.
U ycie atrybutu style w odniesieniu do elementu h1 pokazuje listing 7.4.
Listing 7.4. Atrybut style
Atrybut style WITAJ Rysunek 7.1 przedstawia wygl d opisanej witryny. Trzy podane przyk ady, pierwszy ze stylami zewn trz-
nymi, drugi stosuj cy style wewn trzne i trzeci wykorzystuj cy atrybut style, maj identyczny wygl d.
Rysunek 7.1.
Wygl d witryny, której
kod jest widoczny
na listingach 7.1,
7.2, 7.3 i 7.4
Domy lny j zyk stylów
W chwili obecnej style dokumentów XHTML s opisywane wy cznie w j zyku CSS. Jest to j zyk do-
my lny stosowany przez wszystkie przegl darki.
O j zyku stylów mówi atrybut type="text/css" zawarty w elementach link (style zewn trzne):
oraz style (style wewn trzne):
Warto text/css ustala, e style s zapisane w j zyku CSS.
Korzystaj c z atrybutu style, nie wskazujemy w aden sposób, w jakim j zyku opisano style:
Witaj
4
Henri Sivonen nazywa atrybut style znacznikiem
w przebraniu (ang. The style attribute is in disguise.).J2ME Praktyczne projekty Wydanie II j2mep2 HTML XHTML i CSS Biblia Wydanie IV hxcbi4 Po prostu HTML, XHTML i CSS Wydanie VI HTML XHTML i CSS Biblia Wydanie V hxcbi5 html, xhtml i css biblia helion Alfabet zarzadzania projektami Wydanie II alzap2 Zarzadzanie projektami Wydanie II zazpr2 Projektowanie zorientowane obiektowo Wzorce projektowe Wydanie II więcej podobnych podstron