IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

Utopia HTML. Projektowanie

w CSS bez uycia tabel
Autor: Dan Shafer
Tumaczenie: Renata Wjcicka
ISBN: 83-7361-965-8
Tytu oryginau: HTML Utopia:
Designing Without Tables Using CSS
Format: B5, stron: 424

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

Internet powsta jako medium komunikacyjne umoliwiajce wymian danych pomidzy

orodkami badawczymi. Nikt wwczas nie przewidywa ogromnej szybkoci, z jak si
rozwinie, i popularnoci, jak zdobdzie. Strony WWW byy proste, zawieray gwnie
tekst, a wywietlanie ich w innych urzdzeniach ni komputery stacjonarne kojarzone
byo raczej z powieciami science-fiction. Dzi internet to potny zbir informacji
i miliony stron WWW. Jego uytkownicy uywaj rnych przegldarek, rnych
systemw operacyjnych i rnych urzdze do przegldania jego zasobw.
Taka sytuacja wywoaa konieczno ustanowienia standardw, w oparciu o ktre
tworzone s strony WWW. Trzeba byo take wypracowa mechanizmy pozwalajce
atwo zmienia sposb formatowania stron, aby dostosowa je do wymaga oraz
moliwoci przegldarek i urzdze.
Czytajc ksik Utopia HTML. Projektowanie w CSS bez uycia tabel, poznasz
CSS (kaskadowe arkusze stylw) technologi, ktra umoliwia niemal dowolne
formatowanie kadego dokumentu HTML. Dowiesz si, jak definiowa style CSS
i jak stosowa je w procesie tworzenia stron WWW. Nauczysz si projektowa strony,
w ktrych zmiana wygldu nie bdzie wymaga przekonstruowania kodu HTML,
a jedynie modyfikacji kilku linijek w arkuszu stylw. Poznasz rwnie niestandardowe
zastosowania kaskadowych arkuszy stylw.
Podstawowe wiadomoci o CSS
Style lokalne i globalne
Mechanizmy dziedziczenia
Selektory i pseudoklasy
Rozmieszczanie elementw strony za pomoc stylw
Przypisywanie kolorw
Efekty tekstowe
Walidacja dokumentw CSS
Ksika zawiera rwnie zestawienie wszystkich atrybutw CSS, ktre mona stosowa
przy definiowaniu stylw.

Spis treci
O autorze ....................................................................................... 13
Wstp ............................................................................................ 15

Cz I

Wprowadzenie do CSS ...................................................19

Rozdzia 1. Startujemy ..................................................................................... 21

CSS w kontekcie ........................................................................................................... 21
Podstawowy cel CSS ...................................................................................................... 22
Dlaczego wikszo tabel jest za? ................................................................................. 23
Tabele oznaczaj dugi czas adowania strony ......................................................... 23
Uycie pustych obrazkw nas spowalnia .............................................................. 24
Utrzymywanie tabel na stronie jest koszmarem ....................................................... 24
Kiedy uycie tabel jest waciwe? ............................................................................ 25
Czym w rzeczywistoci jest CSS? .................................................................................. 25
Elementy regu CSS ....................................................................................................... 26
Rodzaje regu CSS ......................................................................................................... 29
Ktre waciwoci s zalene od regu CSS? ........................................................... 29
Na ktre elementy ma wpyw CSS? ......................................................................... 29
Gdzie definiuje si style CSS? ................................................................................. 30
Dlaczego naley si tym przejmowa? ........................................................................... 32
Podsumowanie ............................................................................................................... 35

Rozdzia 2. CSS na pierwszym planie ................................................................ 37

Do czego nadaje si CSS? .............................................................................................. 37
Kolor a CSS ............................................................................................................. 38
Czcionki a CSS ........................................................................................................ 40
Animacje pseudoklas a CSS ..................................................................................... 41
Obrazki a CSS .......................................................................................................... 43
Wiele arkuszy stylw, uytkownicy a CSS .............................................................. 45
Czego CSS sam nie moe zrobi? .................................................................................. 45
CSS a dostp do strony ................................................................................................... 47
CSS a cigle zmieniajcy si wiat przegldarek ........................................................... 51
Dostosowywanie starszych przegldarek ................................................................. 53
Postpowanie w przypadku nieprawidowo dziaajcych przegldarek ................... 55
Podsumowanie ............................................................................................................... 56

Utopia HTML. Projektowanie w CSS bez uycia tabel

Rozdzia 3. Zagbiamy si ............................................................................... 57

Zastosowanie regu CSS w dokumentach HTML .......................................................... 57
Uycie skrtowych waciwoci ..................................................................................... 58
Jak w CSS dziaa dziedziczenie? .................................................................................... 59
Selektory a struktura regu CSS ...................................................................................... 60
Selektor uniwersalny ................................................................................................ 62
Selektor elementu ..................................................................................................... 62
Selektor klasy ........................................................................................................... 62
Selektor identyfikatora ............................................................................................. 63
Selektor pseudoelementu ......................................................................................... 64
Selektor pseudoklasy ................................................................................................ 65
Selektor potomka ..................................................................................................... 66
Selektor dziecka ....................................................................................................... 66
Selektor braci ........................................................................................................... 67
Selektory atrybutw ................................................................................................. 67
Grupowanie selektorw ........................................................................................... 68
Wyraanie wielkoci ...................................................................................................... 69
Wartoci absolutne ................................................................................................... 70
Wartoci wzgldne ................................................................................................... 71
Komentarze CSS ............................................................................................................ 73
Podsumowanie ............................................................................................................... 73

Cz II

Ukad strony w CSS ......................................................75

Rozdzia 4. Projektowanie serwisu w CSS ......................................................... 77

Zalety tworzenia strony w CSS ...................................................................................... 78
Zwikszona kontrola skadni .................................................................................... 78
Scentralizowana informacja o rozmieszczeniu elementw na stronie ...................... 79
Znaczniki semantyczne ............................................................................................ 79
Dostpno ............................................................................................................... 81
Zgodno ze standardami ......................................................................................... 82
Przykady zwieczonego sukcesem zastosowania CSS .................................................. 83
Przykadowa witryna: Footbag Freaks ........................................................................... 84
Podsumowanie ............................................................................................................... 85

Rozdzia 5. Budowanie szkieletu strony ............................................................. 87

Wyliczanie typw szablonw ......................................................................................... 87
Ile ukadw stron? .................................................................................................... 88
Ile elementw projektu? ........................................................................................... 88
Pozycjonowanie w CSS i wielokolumnowe ukady stron .............................................. 90
Pudekowy schemat CSS .......................................................................................... 90
Waciwo display ...................................................................................................... 106
Pozycjonowanie w CSS i wielokolumnowe ukady stron ............................................ 106
Wartoci absolutne, relatywne i pozycjonujce ...................................................... 107
Podstawowy, trjkolumnowy ukad strony ............................................................ 110
Dodanie nagwka strony ....................................................................................... 112
Podsumowanie ............................................................................................................. 114

Rozdzia 6. Wszystko na swoim miejscu .......................................................... 115

Pozycjonowanie blokw strony .................................................................................... 115
Jednostki miar oraz sposoby ich wyznaczania maj wpyw na projekt witryny ..... 115
Waciwo float .................................................................................................... 116
Waciwo clear .................................................................................................... 118

Spis treci

7
Wartoci absolutne a relatywne wysokoci i szerokoci .............................................. 121
Waciwo z-index oraz nachodzca na siebie zawarto ........................................... 128
Ukad strony CSS w praktyce: Footbag Freaks ............................................................ 132
Podsumowanie ............................................................................................................. 138

Cz III Nadawanie stylw tekstowi

oraz innej zawartoci w CSS ........................................139
Rozdzia 7. Dodawanie kolorw z palety .......................................................... 141
Kto sprawuje tutaj nadzr? ........................................................................................... 141
Kolory w CSS .............................................................................................................. 142
Jak si okrela kolory? ........................................................................................... 143
Selekcja kolorw i ich kombinacje ........................................................................ 145
Ustawienie kolorw sekcji body ............................................................................ 146
Przezroczysto, kolor a ustawienia uytkownika .................................................. 147
Ciekawe zastosowania kolorw .................................................................................... 148
Ostrzeenia oraz uwagi .......................................................................................... 148
Kolorowanie dodatkowych wierszy tabeli z danymi .............................................. 150
Podsumowanie ............................................................................................................. 153

Rozdzia 8. Zgodno czcionek ....................................................................... 155

Jak CSS radzi sobie z czcionkami? .............................................................................. 155
Waciwo font-family ............................................................................................... 156
Waciwo font-size .................................................................................................... 156
Rozmiary w HTML a rozmiary w CSS .................................................................. 158
Rnorodno przegldarek oraz platform ............................................................. 158
Relatywne wzgldem czego? ................................................................................. 159
Inne waciwoci czcionek ........................................................................................... 160
Waciwo font-style ............................................................................................ 160
Waciwo font-variant ......................................................................................... 160
Waciwo font-weight ......................................................................................... 160
Skrtowa waciwo font ............................................................................................ 161
Standardowe i niestandardowe rodziny czcionek ......................................................... 163
Okrelanie list czcionek ......................................................................................... 165
Uycie standardowych i oglnodostpnych czcionek ............................................ 166
Podsumowanie ............................................................................................................. 168

Rozdzia 9. Efekty tekstowe oraz kaskadowo ............................................... 169

Zastosowanie elementu span ........................................................................................ 170
Justowanie tekstu jako technika projektowania strony ................................................. 171
Wyrwnywanie tekstu w CSS a w HTML ............................................................. 171
Przejcie ze skompresowanego do przestronnego sposobu projektowania ............ 172
Rozpoczynanie linii akapitem ...................................................................................... 176
Odstpy poziome i pionowe ......................................................................................... 178
Waciwo line-height .......................................................................................... 178
Waciwoci letter-spacing oraz word-spacing ...................................................... 180
Ozdabianie tekstu ......................................................................................................... 184
Cieniowanie tekstu bez uycia elementw graficznych ............................................... 186
Nadawanie stylw hiperczom .................................................................................... 188
Nadawanie stylw CSS listom ..................................................................................... 190
Waciwo list-style-type ..................................................................................... 190
Waciwo list-style-position ................................................................................ 194
Waciwo list-style-image ................................................................................... 195

Utopia HTML. Projektowanie w CSS bez uycia tabel

Kaskadowo i dziedziczenie ....................................................................................... 196
Podstawowe zasady kaskadowoci ........................................................................ 196
Kolejno wystpowania ........................................................................................ 197
Szczegowo ....................................................................................................... 199
Pochodzenie ........................................................................................................... 200
Priorytet ................................................................................................................. 201
Podsumowanie ............................................................................................................. 201

Rozdzia 10. Dodawanie obrazkw do strony ..................................................... 203

Wyrwnanie rysunkw i tekstu .................................................................................... 203
Pokrycie obrazkw tekstem ................................................................................... 205
Przycinanie zawartoci HTML ..................................................................................... 208
Podsumowanie ............................................................................................................. 210

Cz IV Niestandardowe zastosowania CSS ..............................211

Rozdzia 11. Zwikszanie komfortu pracy uytkownika ...................................... 213
Podstawowe nadawanie stylw licie w CSS ............................................................... 214
Wzbogacanie wygldu menu ........................................................................................ 217
Tworzenie podmenu ..................................................................................................... 218
Modyfikowanie kursora myszy .................................................................................... 221
Uycie nieruchomego obrazka jako ta ......................................................................... 222
Podsumowanie ............................................................................................................. 224

Rozdzia 12. Walidacja i zgodno z poprzednimi wersjami ................................ 227

Walidacja dokumentu CSS ........................................................................................... 227
Dostosowywanie do zgodnoci z poprzednimi wersjami ............................................. 231
Ktre przegldarki nie chciay si dostosowa? ..................................................... 231
Reguy postpowania z niestandardowymi przegldarkami ................................... 232
Dostosowywanie Netscape 4.x ............................................................................... 236
Dalsze udziwnienia: przeczanie midzy elementami DOCTYPE ............................. 238
Podsumowanie ............................................................................................................. 239

Dodatki ......................................................................................241
Dodatek A Rozmaitoci ................................................................................. 243
@-reguy ...................................................................................................................... 243
Dwikowe arkusze stylw .......................................................................................... 246
CSS a JavaScript .......................................................................................................... 248

Dodatek B Indeks kolorw ............................................................................. 251

Dodatek C Spis waciwoci CSS ................................................................... 257
azimuth ......................................................................................................................... 257
background ................................................................................................................... 258
background-attachment ................................................................................................ 259
background-color ......................................................................................................... 260
background-image ........................................................................................................ 261
background-position ..................................................................................................... 262
background-position-x, background-position-y ............................................................ 264
background-repeat ........................................................................................................ 265
behaviour ...................................................................................................................... 266
border ........................................................................................................................... 267
border-bottom, border-left, border-right, border-top .................................................... 267
border-bottom-color, border-left-color, border-right-color, border-top-color .............. 268

Spis treci

9
border-bottom-style, border-left-style, border-right-style, border-top-style ................. 269
border-bottom-width, border-left-width, border-right-width, border-top-width ........... 270
border-collapse ............................................................................................................. 271
border-color .................................................................................................................. 272
border-spacing .............................................................................................................. 273
border-style .................................................................................................................. 273
border-width ................................................................................................................. 275
bottom .......................................................................................................................... 276
caption-side .................................................................................................................. 277
clear .............................................................................................................................. 278
clip ................................................................................................................................ 279
color ............................................................................................................................. 280
content .......................................................................................................................... 281
counter-increment ......................................................................................................... 283
counter-reset ................................................................................................................. 284
cue ................................................................................................................................ 286
cue-after, cue-before ..................................................................................................... 286
cursor ............................................................................................................................ 287
direction ....................................................................................................................... 289
display .......................................................................................................................... 291
elevation ....................................................................................................................... 294
empty-cells ................................................................................................................... 295
filter .............................................................................................................................. 295
float .............................................................................................................................. 297
font ............................................................................................................................... 298
font-family .................................................................................................................... 299
font-size ........................................................................................................................ 301
font-size-adjust ............................................................................................................. 303
font-stretch ................................................................................................................... 305
font-style ...................................................................................................................... 306
font-variant ................................................................................................................... 307
font-weight ................................................................................................................... 308
height ............................................................................................................................ 309
ime-mode ...................................................................................................................... 310
layout-flow ................................................................................................................... 311
layout-grid .................................................................................................................... 312
layout-grid-char ............................................................................................................ 313
layout-grid-line ............................................................................................................. 314
layout-grid-mode .......................................................................................................... 315
layout-grid-type ............................................................................................................ 316
layer-background-color ................................................................................................ 317
layer-background-image ............................................................................................... 318
left ................................................................................................................................ 319
letter-spacing ................................................................................................................ 320
line-break ...................................................................................................................... 321
line-height .................................................................................................................... 322
list-style ........................................................................................................................ 323
list-style-image ............................................................................................................. 325
list-style-position .......................................................................................................... 326
list-style-type ................................................................................................................ 327
margin .......................................................................................................................... 329
margin-bottom, margin-left, margin-right, margin-top ................................................. 330
marker-offset ................................................................................................................ 331
marks ............................................................................................................................ 333

10

Utopia HTML. Projektowanie w CSS bez uycia tabel

max-height, min-height ................................................................................................ 334
max-width, min-width .................................................................................................. 335
-moz-border-radius ....................................................................................................... 336
-moz-border-radius-bottomleft, -moz-border-radius-bottomright,
-mozborder-radius-topleft, -moz-border-radius-topright ............................................ 337
-moz-opacity ................................................................................................................ 338
orphans ......................................................................................................................... 339
outline ........................................................................................................................... 340
outline-color ................................................................................................................. 341
outline-style .................................................................................................................. 342
outline-width ................................................................................................................ 343
overflow ....................................................................................................................... 344
overflow-x, overflow-y ................................................................................................ 345
padding ......................................................................................................................... 346
padding-bottom, padding-left, padding-right, padding-top ........................................... 348
page .............................................................................................................................. 349
page-break-after ........................................................................................................... 350
page-break-before ......................................................................................................... 351
page-break-inside ......................................................................................................... 352
pause ............................................................................................................................. 353
pause-after, pause-before .............................................................................................. 354
pitch .............................................................................................................................. 355
pitch-range .................................................................................................................... 356
play-during ................................................................................................................... 357
position ......................................................................................................................... 358
quotes ........................................................................................................................... 359
richness ......................................................................................................................... 361
right .............................................................................................................................. 362
ruby-align ..................................................................................................................... 363
ruby-overhang .............................................................................................................. 364
ruby-position ................................................................................................................ 365
scrollbar-base-color ...................................................................................................... 366
scrollbar-element-color ................................................................................................ 367
size ............................................................................................................................... 369
speak ............................................................................................................................. 370
speak-header ................................................................................................................. 370
speak-numeral .............................................................................................................. 371
speak-punctuation ......................................................................................................... 372
speech-rate .................................................................................................................... 373
stress ............................................................................................................................. 374
table-layout ................................................................................................................... 375
text-align ...................................................................................................................... 375
text-align-last ................................................................................................................ 377
text-autospace ............................................................................................................... 378
text-decoration .............................................................................................................. 379
text-indent .................................................................................................................... 380
text-justify .................................................................................................................... 381
text-kashida-space ........................................................................................................ 382
text-overflow ................................................................................................................ 383
text-shadow .................................................................................................................. 384
text-transform ............................................................................................................... 385
text-underline-position ................................................................................................. 386
top ................................................................................................................................ 387
unicode-bidi .................................................................................................................. 388

Spis treci

11
vertical-align ................................................................................................................ 390
visibility ....................................................................................................................... 392
voice-family ................................................................................................................. 393
volume .......................................................................................................................... 394
white-space ................................................................................................................... 395
widows ......................................................................................................................... 396
width ............................................................................................................................. 397
word-break ................................................................................................................... 398
word-spacing ................................................................................................................ 399
word-wrap .................................................................................................................... 400
writing-mode ................................................................................................................ 401
z-index .......................................................................................................................... 402
zoom ............................................................................................................................. 403

Zalecane rda ............................................................................ 405

Skorowidz ..................................................................................... 411

Rozdzia 4.

Projektowanie
serwisu w CSS
Rozwj kadego serwisu rozpoczyna si od jego zaprojektowania. To, co bdzie zawarte
w serwisie, wymylasz sam bd otrzymujesz idee od klienta. Jeli jeste projektantem
przyzwyczajonym do szczegowego sporzdzania dokumentacji, projektowanie moe
obj rwnie stworzenie takiego dokumentu. Bdzie to wymaga uwzgldnienia przypadkw (ang. case), czyli moliwych zachowa odwiedzajcego stron. Trzeba bdzie
rwnie wzi pod uwag oficjalne specyfikacje oraz zalecenia, a take list przegldarek oraz platform umoliwiajcych dostp do strony.
Na tym etapie zwykle buduje si seri prototypw powstaych z projektw na papierze.
Nastpnie z prototypowania wzorw w programie graficznym przechodzi si do stworzenia w peni funkcjonalnej strony HTML. Jeli posiadasz pewne dowiadczenie w projektowaniu stron, z atwoci przeskoczysz z projektu konceptualnego do kodowania
w HTML, odzwierciedlajcego Twj pomys na ekranie.
Rezygnujc z tabel na rzecz CSS, poznasz zupenie nowe zasady projektowania, na
podstawie ktrych bdziesz budowa swoje pierwsze prototypy. W kolejnych rozdziaach tej ksiki omwi wszystkie te zasady, tak by zyska pewne wyobraenie
o ograniczeniach CSS i mg puci wodze fantazji.
W ludzkiej naturze ley pewna niech do zmian. Gdy zapoznasz si z rzeczami, ktrych CSS nie potrafi dokona, zamiast ochoty na poznawanie nowego, wspaniaego
wiata CSS, gdzie ukad setek stron moe zalee od jednej reguy, odczujesz pokus
powrotu do topornego projektowania przy uyciu tabel. Bd stara si nakoni Ci
do porzucenia starych przyzwyczaje, przedstawiajc kilka gwnych zalet konstruowania stron przy uyciu CSS. Poka rwnie par witryn internetowych, ktre,
podjwszy stanowcze kroki, zbieraj teraz owoce rozplanowywania w CSS.

Cz II Ukad strony w CSS

78

Zalety tworzenia strony w CSS

W poprzednich rozdziaach omwiem kilka charakterystycznych cech oraz powodw
stosowania regu CSS przy tworzeniu ukadu strony. W tej sekcji zbior w jednym
miejscu wszystkie argumenty za. Nie tylko mam nadziej na przekonanie Ci o zaletach uywania CSS, lecz take chc przedstawi par sposobw na nakonienie innych do zaakceptowania tej technologii.
W wiecie bezwzgldnej konkurencji, pracujc na umow-zlecenie, czsto bdziesz
musia przedstawi powody, dla ktrych lepiej ni inni projektanci nadawaby si do
wykonania okrelonego projektu. Jeli tworzenie witryn w CSS naley do Twojego
arsenau programistycznego, z pewnoci bdzie to Twoim duym atutem. Wiele z zalet
projektowania w CSS wykracza daleko poza atwo pniejszego rozwijania strony
i przekada si na dodatkowe korzyci dla klienta. Niech on o tym si dowie moe
stanie si to decydujcym powodem wygrania kontraktu.

Zwikszona kontrola skadni

Na pierwszy rzut oka kluczow zalet CSS oraz gwnym powodem, dla ktrego
projektanci witryn rozpoczynaj prac z t technologi, jest moliwo kontroli wielu
aspektw wygldu strony, ktrych nie da si zwyczajnie okrela w czystym HTML.
Przykadem moe by moda na usuwanie podkrelenia z hiperczy oraz zaznaczanie
ich za pomoc innych stylw (np. kolorowania tekstu, pogrubiania czcionki oraz podkrelenia czy w momencie najechania na nie mysz). Kompletny spis waciwoci
stylw, ktre mog by kontrolowane przez CSS, znajduje si w dodatku C.
Oprcz pokanej liczby takich waciwoci, CSS pozwala na zastosowanie ich do wikszego zakresu elementw HTML. W czystym HTML, jeli zechce si uy obramowania
wok pewnego obszaru, trzeba bdzie stworzy tabel, gdy jedynie ona posiada odpowiedni do tego atrybut. CSS nie tylko umoliwia wiksz kontrol nad wygldem
obramowania (moliwoci jest wiele: obramowanie moe by jednolite (ang. solid),
wzorzyste (ang. embossed), nakrapiane (ang. dotted), przerywane (ang. dashed), grube
bd cienkie, czerwone lub zielone, itd.), lecz take pozwala na dodawanie obramowania do dowolnie wybranego elementu, a nie tylko tablicy. Celem CSS jest zaoferowanie projektantowi jak najszerszego wachlarza moliwoci. Tak wic ide przywiecajc CSS jest umoliwienie zastosowania regu stylw wszdzie tam, gdzie ma
to rzeczywisty sens.
CSS posiada wicej waciwoci stylw, ktre mog si odnosi do wikszej liczby
elementw, ni HTML kiedykolwiek pozwala. Gdyby mia wybra pomidzy CSS
a HTML jako rodkiem na okrelenie wygldu strony, CSS zwyciyby bez najmniejszych wtpliwoci. Mimo to powszechnie stosuje si HTML do projektowania ukadu
strony, a do CSS ucieka si tylko w szczeglnych przypadkach, gdy HTML nie potrafi
sobie z pewnymi rzeczami poradzi. Podczas gdy wizualny efekt jest porwnywalny,
traci si po drodze mnstwo zalet CSS.

Rozdzia 4. Projektowanie serwisu w CSS

79

Scentralizowana informacja
o rozmieszczeniu elementw na stronie
Jak ju to nakreliem wczeniej, najlepsz metod na uycie CSS przy projektowaniu
stron WWW jest doczenie jednego lub wicej plikw .css zawierajcych odpowiednie reguy stylw za pomoc znacznika <link>. W ten sposb wygld strony jest wyranie oddzielony od jej treci i znajduje si jednym miejscu.
Ide przywiecajc takiemu postpowaniu jest umoliwienie zmiany treci strony
bez koniecznoci modyfikowania jej wygldu i odwrotnie. Przy tradycyjnym projektowaniu stron, gdzie znaczniki HTML oraz atrybuty su do okrelenia sposobu wywietlania caoci w przegldarce, kod tych dwch aspektw jest przemieszany. Jeli
zatem ktokolwiek chciaby zmodyfikowa jeden z nich, automatycznie musiaby si
zna na obu. Inaczej ryzykowaby popsucie czego na stronie. W tym sensie mwimy
o powizaniu treci i wygldu witryny.
Fakt podzielenia kodu na czci suce do rnych celw jest znany w programistycznym wiecie (ang. decoupling). Gdy oprawa graficzna serwisu jest niezalena od
jego treci, projektant witryny atwo modyfikuje jej wygld poprzez edytowanie plikw
.css, natomiast osoba zajmujca si treci dodaje zawarto do plikw .html.
Taki podzia kodu przeciwdziaa take jego powielaniu. W projektowaniu opartym na
znacznikach HTML, jeli tytu znajdujcy si na grze kadego artykuu ma by wywietlany powikszon, czerwon czcionk, naley umieci znacznik <font> wewntrz odpowiedniego znacznika <h1> na kadej stronie serwisu. Gdy uywa si wzoru
w CSS, mona w jednym miejscu okreli waciwoci czcionki dla znacznikw h1,
co znaczco oszczdza czas pisania kodu. W momencie zmiany wygldu tego typu
nagwkw naley jedynie dokona pewnej modyfikacji pliku CSS nie ma potrzeby sprawdzania kadego dokumentu HTML z osobna. Na pewno oszczdza to czas
i nerwy. Powysze rnice zilustrowano na rysunku 4.1.
Jeli przyjrzysz si uwanie rysunkowi 4.1, spostrzeesz, e oprcz zalet organizacyjnych opisanych wyej, istnieje dodatkowy atut przegldarka ma mniej kodu do
pobrania. W przypadku witryn mocno oboonych kodem lub skadajcych si z setek
stron, ograniczenie czasu adowania si strony moe bardzo pozytywnie wpyn na
ocen uytkownika i na koszty pocze.

Znaczniki semantyczne
Gdy uywa si plikw .css do oddzielenia zawartoci witryny od jej treci, mona zaobserwowa ciekawe rzeczy. Poniewa CSS zapewnia cakowit kontrol nad wygldem
poszczeglnych skadnikw strony, zaczyna si uywa znacznikw do oznaczenia
struktury i znaczenia elementw na stronie. Kod HTML pozbawiony informacji dotyczcych wygldu i formy prezentacji strony staje si czystym nonikiem semantycznych treci.

Cz II Ukad strony w CSS

80
Rysunek 4.1.
CSS centralizuje
kod projektu

Istnieje kilka powodw utrzymywania takiego stanu rzeczy. Jednym z nich jest atwo
dokonywania zmian w zawartoci witryny. Najprostsz metod na zlokalizowanie
strony uywajcej CSS jest spojrzenie w jej rdo opcja ta dostpna jest w kadej
przegldarce. Jeli jeste w stanie okreli zawarto strony w przecigu 10 sekund,
cakiem prawdopodobne jest, e nie masz do czynienia z ukadem strony bazujcym
na tabelach ani z adnym innym niesemantycznym kodem HTML.
Uycie semantycznych znacznikw HTML znaczco wpywa na mechanizmy wyszukiwania stosowane przez wyszukiwarki internetowe. Im mniej jest znacznikw opisujcych wygld strony, tym bardziej jest prawdopodobne, e zwikszy si gsto
wystpowania na stronie danego sowa kluczowego, ktra to warto jest istotnym
czynnikiem determinujcym popularno strony.
Jak zobaczymy pniej, CSS pozwala na pozycjonowanie elementu wewntrz okna
przegldarki w oderwaniu od jego miejsca w dokumencie HTML. Jeli zatem posiadasz na stronie formularz sucy do zamawiania prenumeraty listy dystrybucyjnej
bd inny obszerny fragment kodu HTML, niewnoszcy wiele do samej treci dokumentu, moesz swobodnie przenie cz kodu na koniec dokumentu, a nastpnie
uy CSS do ustawienia formularza na grze okna przegldarki.
Znacznik <link>1 oferuje moliwoci coraz czciej wspierane przez wspczesne
przegldarki. Pozwala mianowicie ograniczy stosowanie doczonych regu stylw
tylko do przegldarek i ekranw okrelonego typu. Przykadowo, mgby doczy
do strony trzy pliki .css jeden definiowaby wygld strony wywietlanej na ekranie
1

A dokadniej atrybut media.

Rozdzia 4. Projektowanie serwisu w CSS

81

komputera, drugi odnosiby si do drukowanej strony, natomiast trzeci miaby zastosowanie w przypadku telefonw komrkowych. Tylko poprzez uycie znacznikw
semantycznych oraz poprzez pozwolenie na to, aby CSS zaj si sposobem wywietlania strony, mona uzyska takie dostosowanie zawartoci do rnych okolicznoci.
Na koniec naley wspomnie o rzeczy nie mniej wanej, a mianowicie o zwikszonej
dostpnoci do witryn uywajcych znacznikw semantycznych. Zajmiemy si tym
bardziej szczegowo w nastpnej sekcji.

Dostpno
Gdyby mia kiedy okazj by wiadkiem przegldania stron WWW przez osoby
majce problemy ze wzrokiem, polecam to dowiadczenie. Alternatywnie, moesz uy
oprogramowania czytajcego zawarto ekranu. Wycz monitor i sprawd na wasnej
skrze, jak to jest by osob majc saby wzrok, prbujc porusza si w internecie.
Witryny czsto korzystajce z tabel, rysunkw oraz innych niesemantycznych elementw HTML s bardzo niewygodne przy odczytywaniu na gos zawartoci strony.
Nie jest takie znw niespotykane wrd wspczesnych serwisw, e zaadowanie strony
do momentu wywietlenia waciwej zawartoci zajmuje okoo 30 sekund. Skoro ju
teraz nie brzmi to dobrze, pomyl, e musiaby wysuchiwa takich niepotrzebnych
informacji za kadym razem, gdy nowa strona zostaaby zaadowana.
Znaczniki semantyczne pozwalaj na niemal cakowite pozbycie si tej kakofonii dwikw, gdy kady znacznik dokumentu posiada dziki nim pewne znaczenie strukturalne,
istotne w tym przypadku dla uytkownika (a waciwie suchacza). Przegldarki odczytujce zawarto strony na gos ignoruj graficzne waciwoci elementw interfejsu, tote niewidomy uytkownik nie powinien by zmuszany do ich odsuchiwania.
W witrynie uywajcej znacznikw semantycznych osoba z uszkodzonym wzrokiem
nie musiaaby zachodzi w gow, czy pogrubienie tekstu miao jakie specjalne znaczenie, czy tylko pewien walor estetyczny. Elementy wywietlone pogrubion czcionk
dla celw estetycznych posiadayby odpowiedni regu zdefiniowan wewntrz definicji CSS, wic przegldarka czytajca na gos pominaby t cech. Elementy, ktre
miayby si odznacza na tle innych pod wzgldem semantycznym, wyrnione byyby
znacznikami <strong> oraz <em>, czyli tekst byby pogrubiony i wywietlony kursyw.
Istniej osobne poradniki na temat tego, jak naley tworzy serwisy bardziej dostpne dla
uytkownikw niepenosprawnych. Wytyczne dotyczce dostpu do sieci przez osoby
niepenosprawne, czyli inaczej WCAG (ang. Web Content Accessibility Guidelines)2,
s pozycj polecan wszystkim projektantom witryn. W zaleceniach3 omwiona jest
idea unikania znacznikw prezentacyjnych na rzecz znacznikw semantycznych.

http://www.w3.org/TR/WCAG10/

http://www.w3.org/TR/WCAG10/#g1-structure-presentation

Cz II Ukad strony w CSS

82

Zgodno ze standardami
WCAG nie jest jedyn specyfikacj popierajc ide podziau kodu strony na cz
prezentacji (CSS) oraz cz zawartoci (HTML). W rzeczywistoci ostatnie standardy
HTML4 byy tworzone wanie w tym duchu.
Konsorcjum World Wide Web5 (W3C) jest organizacj odpowiedzialn za publikowanie zalece (a waciwie standardw) odnoszcych si do sieci. Poniej znajduje si
kilka zalece zwizanych z semantycznymi znacznikami oraz z CSS:
HTML 4 (http://www.w3.org/TR/html4)
Ostatnia wersja dokumentu oznacza wszystkie niesemantyczne znaczniki i ich
atrybuty jako niezalecane6. Znacznik <font>7, na przykad, jest w tym standardzie
jasno wyszczeglniony jako przestarzay. Oto komentarz do tych niezalecanych
elementw8:
Oglnie rzecz biorc, autorzy stron powinni uywa zamiast znacznikw HTML
arkuszy stylw do formatowania i nadawania odpowiedniego ksztatu elementom.
XHTML 1.0 (http://www.w3.org/TR/xhtml1/)
XHTML, jako HTML 4 przetransformowane do dokumentw XML, pozwala
na uywanie znacznikw oraz atrybutw, jednoczenie wykorzystujc
funkcjonalno XML (mieszanie jzykw znacznikw, tworzenie wasnych itd.).
To zalecenie zawiera te same znaczniki oraz niezalecane elementy co HTML 4.
Wytyczne dotyczce dostpu do sieci (Web Content Accessibility Guidelines 1.0)
(http://www.w3.org/TR/WCAG10/)
Tak jak to zostao opisane w sekcji Dostpno, WCAG gorco zaleca
uywanie CSS oraz znacznikw semantycznych do tworzenia projektw
stron usprawniajcych dostpno. Zalecenie to mwi samo za siebie:
Naduywanie znacznikw do osignicia pewnych efektw wizualnych
(przykadowo, tabel do budowania ukadu strony, a nagwkw
do zwikszenia rozmiaru czcionki) utrudnia uytkownikom korzystajcym
ze specjalistycznego oprogramowania poruszanie si po stronie. Co wicej,
uniemoliwione jest poprawne wywietlenie strony na innych urzdzeniach,
gdy rezygnuje si ze znacznikw strukturalnych na rzecz znacznikw
prezentacji przy przekazywaniu treci.
4

http://www.w3.org/MarkUp/#recommendations

http://www.w3.org/

Element niezalecany jest oznaczony jako ten do usunicia ze specyfikacji, w zwizku z czym nie
powinien by duej uywany. Dokument, ktry ma by zgodny ze standardami, nie powinien
stosowa tego typu elementw.

http://www.w3.org/TR/html4/present/graphics.html#h-15.2.2

http://www.w3.org/TR/html4/conform.html#deprecated

Rozdzia 4. Projektowanie serwisu w CSS

83

Zdaniem wielu projektantw stron, cise przestrzeganie standardw jest praktycznie

niemoliwe. Celem niniejszej ksiki jest udowodnienie, e nie jest to do koca prawda.
Wspczesne przegldarki dziaaj znacznie lepiej, gdy przestrzega si standardw. Cho
bdy oraz problemy ze zgodnoci nadal istniej, nie s one mniej rozwizywalne ni
bdy, z ktrymi spotyka si projektant bazujcy na kodzie niezgodnym ze standardami.

Przykady zwieczonego sukcesem

zastosowania CSS
Ponisze witryny mog posuy za doskonay przykad na to, co mona osign,
budujc ukad strony wycznie na CSS.
SitePoint (http://www.sitepoint.com/)
Wiem, wiem, reklamowanie serwisu swoich wydawcw nie wydaje si by
odpowiedni rzecz, jednak chopaki nie tylko wykonali kawa dobrej roboty
zamieniajc cay ukad strony bazujcy na tabelach na jego odpowiednik
w CSS, lecz take znaczco zwikszyli przy tej okazji funkcjonalno serwisu.
Mimo e na pierwszy rzut oka dobr kolorw moe si wyda nieco ubogi,
taki odchudzony wygld strony pozwala na jej szybkie adowanie, nawet
w przypadku obszernej treci i bogactwa opcji nawigacji.
A List Apart (http://www.alistapart.com/)
Od momentu jej powstania, witryna cznie z list dystrybucyjn staa si
jednym z gwnych rde informacji na temat projektowania stron przy
uyciu CSS. Serwis jest utrzymany w duchu minimalistycznym, jednak
udowadnia, e prosty nie znaczy nudny ani nieciekawy.
Netscape DevEdge (http://devedge.netscape.com/)
DevEdge jest serwisem Netscape przeznaczonym dla projektantw rozwijajcych
witryny internetowe. Poniewa Netscape w wersji 6. oraz 7. by ju oparty
na mechanizmie zgodnym z obowizujcymi standardami, nie pozostao nic
innego jak przerobi witryn tak, by moga penymi garmi czerpa z tej
technologii. W serwisie znajduje si nawet artyku9 powicony temu
przeprojektowaniu.
ESPN (http://www.espn.com/)
Pierwsza czoowa, komercyjna witryna internetowa zbudowana na podstawie
technik CSS. Jest z pewnoci krokiem milowym przy projektowaniu witryn.

http://devedge.netscape.com/viewsource/2003/devedge-redesign/

Cz II Ukad strony w CSS

84

Klienci czsto bd pytali o inne serwisy, ktre zostay zaprojektowane w tej

samej technologii i odniosy spektakularny sukces.
Do tej pory wszystkie najlepsze przykady projektw w CSS byy albo witrynami
stworzonymi przez profesjonalnych projektantw dla innych twrcw witryn,
albo domowymi serwisami mogcymi ponie pewne ryzyko niedocigni,
gdy nie musiay na siebie zarabia.
W serwisie Netscape DevEdge10 znajduje si wyczerpujcy wywiad z jednym
z projektantw tej witryny.
Fast Company Magazine (http://www.fastcompany.com/)
Jest to wersja online popularnego magazynu. Witryna zostaa przebudowana
przy uyciu CSS. Aktualna wersja serwisu nie rni si znaczco od tej
poprzedniej, jednak dziki CSS strony aduj si o wiele szybciej.

Przykadowa witryna: Footbag Freaks

W pozostaej czci ksiki, gdzie tylko to bdzie moliwe, bd odnosi si do przykadu witryny stworzonej specjalnie na potrzeby tej ksiki. T fikcyjn witryn, nazwan
Footbag Freaks, bdzie mona pobra ze strony: http://www.footbagfreaks.com/. Kod
rdowy jest rwnie gotowy do pobrania ze strony ksiki11. Na rysunku 4.2 wida
gwn stron serwisu.
Witryna w peni wykorzystuje CSS zarwno do tworzenia ukadu strony, jak i do
nadawania stylw fragmentom tekstu oraz innym elementom na stronie. Kod HTML
jest cakowicie semantyczny. Stron zaprojektowano i przetestowano pod nastpujcymi przegldarkami:
Internet Explorer 5 lub w wersji wyszej pod Macintosh i Windows,
Opera 6 lub w wersji wyszej,
Mozilla 1.0 i wersje pniejsze oraz przegldarki podobnego typu,

cznie z Netscape 6 i wersjami pniejszymi oraz Camino.

Witryna jest zgodna z nastpujcymi zaleceniami W3C:
XHTML 1.0 (dokadna kompatybilno),
WCAG 1.0 (ocena pod wzgldem dostpnoci do strony),
CSS 2.0.

10

http://devedge.netscape.com/viewsource/2003/espn-interview/01/

11

http://www.sitepoint.com/books/

Rozdzia 4. Projektowanie serwisu w CSS

85

Rysunek 4.2. Strona gwna witryny Footbag Freaks

Podsumowanie
W tym rozdziale podaem kilka najistotniejszych zalet, ktre CSS ma do zaoferowania
przy projektowaniu witryn internetowych. S nimi przede wszystkim:
zwikszona kontrola skadni,
scentralizowana informacja o rozmieszczeniu elementw na stronie,
znaczniki semantyczne,
dostpno,
zgodno ze standardami.

Po zaprezentowaniu paru witryn, w ktrych uycie CSS doprowadzio do powstania

ciekawych efektw i zakoczyo si sukcesem, wprowadziem nasz wasn, stworzon jedynie na potrzeby tej ksiki witryn Footbag Freaks. W pozostaej czci ksiki zajmiemy si szerokim zakresem funkcjonalnoci oraz technik CSS pozwalajcych
na zbudowanie takiego wanie serwisu.
Rozdzia 5. rozpoczyna si od zbudowania szkieletu strony, a nastpnie przechodzi do
zapenienia go odpowiedni treci, przy uyciu jedynie technik CSS.