CSS3 The Missing Manual, 3rd Edition

Tytuł oryginału: CSS3: The Missing Manual, 3rd Edition Tłumaczenie: Łukasz Piwko ISBN: 978-83-246-7320-9 © 2013 Helion S.A. Authorized Polish translat...

15 downloads 1096 Views 25MB Size

Tytuł oryginału: CSS3: The Missing Manual, 3rd Edition Tłumaczenie: Łukasz Piwko ISBN: 978-83-246-7320-9 © 2013 Helion S.A. Authorized Polish translation of the English edition of CSS3: The Missing Manual, 3rd Edition, ISBN 9781449325947 © 2013 Sawyer McFarland Media, Inc. This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: [email protected] WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/css3n3_ebook Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/css3n3.zip Printed in Poland.

 Poleć książkę na Facebook.com

 Księgarnia internetowa

 Kup w wersji papierowej

 Lubię to! » Nasza społeczność

 Oceń książkę

Spis treści Nieoficjalna czołówka ...................................................................................... 15 Wstęp ................................................................................................................. 19

Cześć I. Podstawy CSS ................................................................... 31 Rozdział 1. Przystosowanie kodu HTML do pracy z CSS ................................. 33 HTML kiedyś i teraz ................................................................................. 33 HTML kiedyś — aby dobrze wyglądało .................................................... 33 HTML teraz — szkielet dla CSS .............................................................. 35 Pisanie HTML-a z myślą o CSS ................................................................. 35 Pamiętaj o strukturze ............................................................................. 36 Dwa nowe znaczniki HTML do nauczenia .............................................. 36 Pamiętaj o układzie strony ..................................................................... 40 O czym trzeba zapomnieć ....................................................................... 41 Podstawowe wskazówki ......................................................................... 43 Znaczenie deklaracji typu dokumentu ....................................................... 45 Aktualizowanie Internet Explorera ............................................................ 47

Rozdział 2. Tworzenie stylów i arkuszy stylów ............................................. 49 Anatomia stylu ......................................................................................... 49 Zrozumieć arkusze stylów ......................................................................... 52 Styl wewnętrzny czy zewnętrzny ............................................................. 52 Wewnętrzne arkusze stylów ...................................................................... 53 Style zewnętrzne ....................................................................................... 54 Dołączanie arkusza stylów przy użyciu znacznika HTML ....................... 55 Dołączanie arkuszy stylów za pomocą kodu CSS .................................... 56 Kurs: tworzenie pierwszego stylu ............................................................... 57 Tworzenie stylu śródliniowego ............................................................... 57 Tworzenie wewnętrznych arkuszy stylów ............................................... 58 Tworzenie zewnętrznego arkusza stylów ................................................ 60

Rozdział 3. Selektory, czyli do czego odnoszą się style ..................................67 Selektory znaczników — style dla całej strony .............................................67 Selektor klasy — precyzyjna kontrola .........................................................69 Selektor ID — unikalne elementy strony ....................................................72 Nadawanie stylów grupom znaczników .....................................................72 Grupowanie selektorów ..........................................................................73 Selektor uniwersalny ..............................................................................74 Stylizowanie znaczników zagnieżdżonych ..................................................74 Drzewo rodzinne HTML ........................................................................75 Tworzenie selektorów potomka ..............................................................76 Tworzenie modułów ...............................................................................78 Pseudoklasy i pseudoelementy ...................................................................79 Style odnośników ...................................................................................79 Stylizowanie fragmentów akapitu ...........................................................80 Więcej pseudoklas i pseudoelementów ....................................................80 Selektory atrybutu .....................................................................................83 Selektor dziecka .....................................................................................85 Selektory dziecka z uwzględnieniem typu elementu ................................88 Selektor brata ............................................................................................89 Selektor :not() ............................................................................................90 Kurs: selektory ...........................................................................................92 Tworzenie selektora grupowego ..............................................................94 Tworzenie i stosowanie selektora klasy ...................................................95 Tworzenie selektora potomka .................................................................97 Tworzenie i stosowanie selektora identyfikatora .....................................98 Ostatni szlif ......................................................................................... 100

Rozdział 4. Oszczędzanie czasu dzięki dziedziczeniu ..................................103 Czym jest dziedziczenie? ......................................................................... 103 Jak dziedziczenie upraszcza arkusze stylów .............................................. 104 Granice dziedziczenia .............................................................................. 104 Kurs: dziedziczenie .................................................................................. 107 Prosty przykład: dziedziczenie jednopoziomowe ................................... 107 Wykorzystanie dziedziczenia do zmiany stylu całej strony ..................... 109 Kiedy dziedziczenie nie działa ............................................................... 111

Rozdział 5. Zarządzanie wieloma stylami — kaskada .................................. 113 Kaskadowość stylów ................................................................................ 114 Style dziedziczone mogą się kumulować ............................................... 114 Najbliższy przodek bierze górę .............................................................. 115 Górę bierze styl bezpośredni ................................................................. 116 Jeden znacznik, wiele stylów ................................................................. 116 Precyzja: który styl weźmie górę ............................................................... 118 Remis: wygrywa ostatni ........................................................................ 119

4

SPIS TREŚCI

Kontrolowanie kaskady ........................................................................... 120 Zmienianie precyzji ............................................................................. 121 Wybiórcze przesłanianie ....................................................................... 122 Jak uniknąć wojny na precyzję .............................................................. 123 Resetowanie stylów .............................................................................. 125 Kurs: kaskadowość w akcji ...................................................................... 127 Resetowanie stylów i definiowanie nowych ........................................... 127 Tworzenie stylu mieszanego ................................................................ 129 Rozwiązywanie konfliktów ................................................................... 130

Cześć II. Stosowanie CSS ............................................................. 133 Rozdział 6. Formatowanie tekstu .................................................................. 135 Czcionki ................................................................................................. 135 Wybór czcionki .................................................................................... 137 Stosowanie czcionek sieciowych .............................................................. 140 Typy plików fontów ............................................................................. 141 Kwestie prawne dotyczące czcionek ...................................................... 142 Gdzie szukać czcionek sieciowych ........................................................ 142 Generowanie różnych formatów czcionek ............................................. 143 Dyrektywa @font-face .......................................................................... 145 Tworzenie stylów przy użyciu czcionek sieciowych ............................... 147 Używanie wariantu pogrubionego i kursywy ......................................... 148 Usługa Google Fonts ............................................................................ 153 Znajdowanie i wybieranie czcionek ...................................................... 154 Korzystanie z usługi Google Fonts ........................................................ 157 Kolorowanie tekstu ................................................................................. 159 Notacja szesnastkowa .......................................................................... 160 Systemy HSL i HSLA ........................................................................... 162 Zmiana rozmiaru pisma .......................................................................... 163 Stosowanie pikseli ................................................................................ 163 Stosowanie słów kluczowych, procentów i jednostki em ....................... 163 Formatowanie słów i liter ........................................................................ 167 Pogrubienie i kursywa .......................................................................... 167 Zamiana tekstu na wielkie litery .......................................................... 168 Dekorowanie tekstu ............................................................................. 169 Odstęp między wyrazami i literami ...................................................... 170 Dodawanie cieni do tekstu ................................................................... 171 Formatowanie całych akapitów ............................................................... 172 Zmienianie odstępu między wierszami ................................................. 172 Wyrównywanie tekstu .......................................................................... 174 Wcinanie pierwszego wiersza i usuwanie marginesów ........................... 174 Formatowanie pierwszej litery lub pierwszego wiersza akapitu .............. 177 Stylizowanie list ...................................................................................... 178 Typy list .............................................................................................. 178 Pozycjonowanie punktorów i numerów ................................................ 179 Punktory graficzne ............................................................................... 181 SPIS TREŚCI

5

Kurs: formatowanie tekstu ....................................................................... 181 Ustawienia strony ................................................................................ 182 Formatowanie nagłówków i akapitów ................................................... 185 Formatowanie list ................................................................................ 188 Dostrajanie za pomocą klas .................................................................. 189 Wykańczanie projektu .......................................................................... 191

Rozdział 7. Marginesy, dopełnienie i obramowanie .....................................195 Istota modelu polowego ........................................................................... 195 Marginesy i dopełnienie ........................................................................... 197 Zapis skrótowy marginesów i dopełnienia ............................................. 198 Konflikty marginesów .......................................................................... 199 Likwidowanie odstępu za pomocą marginesów ujemnych ..................... 200 Elementy śródliniowe, blokowe i inne ................................................... 202 Obramowanie .......................................................................................... 203 Skrócony zapis właściwości obramowania ............................................. 204 Formatowanie poszczególnych krawędzi ............................................... 205 Kolorowanie tła ....................................................................................... 206 Zaokrąglanie rogów ................................................................................. 207 Cienie elementów .................................................................................... 210 Określanie wysokości i szerokości ............................................................ 212 Obliczanie rzeczywistych wymiarów pól ............................................... 213 Przedefiniowywanie wymiarów pól ....................................................... 214 Kontrolowanie wycieków za pomocą własności overflow ....................... 216 Określanie minimalnej szerokości i wysokości ...................................... 218 Elementy pływające ................................................................................. 219 Tła i obramowanie a elementy pływające .............................................. 221 Pływaków nie wpuszczamy ................................................................... 222 Kurs: marginesy, tła i obramowanie ......................................................... 224 Ustawianie tła i marginesów ................................................................. 224 Ustawianie odstępów wokół znaczników .............................................. 227 Tworzenie paska bocznego ................................................................... 230 O krok dalej .......................................................................................... 233

Rozdział 8. Umieszczanie grafiki na stronach WWW .................................. 235 CSS i znacznik ............................................................................ 235 Obrazy tła ................................................................................................ 236 Kontrola sposobu powtarzania obrazu w tle .............................................. 239 Pozycjonowanie obrazu tła ....................................................................... 242 Słowa kluczowe .................................................................................... 242 Dokładne wartości ................................................................................ 244 Procenty ............................................................................................... 244 Ustalanie położenia obrazu na sztywno ................................................. 246 Definiowanie początku i końca tła ........................................................ 246 Skalowanie obrazów tła ........................................................................ 248 Własność zbiorcza background ................................................................ 249 Ustawianie wielu obrazów w tle jednego elementu ................................... 251

6

SPIS TREŚCI

Stosowanie gradientów w tle .................................................................... 254 Gradienty liniowe ................................................................................ 254 Powtarzanie gradientów liniowych ....................................................... 258 Gradienty promieniste ......................................................................... 260 Powtarzalne gradienty promieniste ....................................................... 262 Tworzenie gradientów przy użyciu narzędzia ColorZilla .......................... 262 Kurs: uatrakcyjnianie grafik ..................................................................... 265 Definiowanie obramowania obrazu ...................................................... 265 Tworzenie galerii fotografii ................................................................... 268 Dodawanie cieni .................................................................................. 271 Kurs: używanie obrazów tła ..................................................................... 273 Umieszczanie obrazu w tle strony ........................................................ 273 Zastępowanie obramowania grafiką ..................................................... 275 Używanie grafiki w listach punktowanych ............................................ 276 Uatrakcyjnianie paska bocznego ........................................................... 278

Rozdział 9. Upiększanie systemu nawigacji ..................................................281 Wybieranie odnośników do stylizacji ....................................................... 281 Poznaj stany odnośników ..................................................................... 281 Wybieranie określonych odnośników ................................................... 283 Stylizowanie odnośników ........................................................................ 284 Podkreślanie odnośników ..................................................................... 285 Tworzenie przycisku ............................................................................ 286 Używanie grafiki .................................................................................. 289 Tworzenie pasków nawigacji ................................................................... 290 Używanie list nienumerowanych ......................................................... 291 Pionowe paski nawigacji ....................................................................... 292 Poziome paski nawigacji ...................................................................... 293 Wczytywanie grafik tła odnośników z wyprzedzeniem ............................. 299 Stylizowanie wybranych rodzajów odnośników ........................................ 301 Odnośniki do innych witryn ................................................................. 301 Odnośniki do adresów e-mail ............................................................... 302 Łącza do różnych typów plików ............................................................ 302 Kurs: stylizowanie odnośników ............................................................... 303 Podstawy formatowania odnośników ................................................... 303 Dodawanie obrazu tła do odnośnika ..................................................... 305 Wyróżnianie różnych rodzajów odnośników ......................................... 306 Kurs: tworzenie paska nawigacji .............................................................. 308 Dodawanie efektu rollover i tworzenie odnośników „Jesteś tutaj” .......... 311 Z pionowego w poziomy ....................................................................... 314

Rozdział 10. Przekształcenia, przejścia i animacje CSS ................................. 317 Przekształcenia ....................................................................................... 317 Obracanie ............................................................................................ 318 Skalowanie .......................................................................................... 319 Przesuwanie ......................................................................................... 321 Zniekształcanie .................................................................................... 322 SPIS TREŚCI

7

Stosowanie wielu przekształceń naraz ................................................... 324 Punkt początkowy przekształcenia ........................................................ 324 Przejścia .................................................................................................. 326 Tworzenie przejść ................................................................................. 327 Kontrola czasu wykonywania animacji ................................................. 328 Opóźnianie początku przejścia .............................................................. 331 Własność zbiorcza przejść ..................................................................... 332 Animacje ................................................................................................ 333 Definiowanie klatek kluczowych .......................................................... 334 Przypisywanie animacji do elementów .................................................. 337 Kontrola przebiegu animacji ................................................................. 339 Kończenie animacji .............................................................................. 340 Własność zbiorcza do definiowania animacji ......................................... 342 Wstrzymywanie wykonywania animacji ............................................... 343 Animacje i pseudoklasa :hover .............................................................. 344 Kurs ........................................................................................................ 344 Dodawanie animacji ............................................................................. 346

Rozdział 11. Formatowanie tabel i formularzy ..............................................351 Właściwy sposób używania tabel .............................................................. 351 Stylizowanie tabel .................................................................................... 353 Dodawanie dopełnienia ........................................................................ 354 Ustawianie wyrównania w pionie i w poziomie ..................................... 354 Tworzenie obramowania ...................................................................... 356 Stylizowanie wierszy i kolumn .............................................................. 357 Stylizowanie formularzy .......................................................................... 359 Elementy HTML formularzy ................................................................ 361 Rozmieszczanie elementów formularza za pomocą CSS ........................ 362 Kurs: stylizowanie tabeli .......................................................................... 364 Kurs: stylizowanie formularza .................................................................. 369

Cześć III. Tworzenie układu strony za pomocą CSS .................. 375 Rozdział 12. Wprowadzenie do układów stron .............................................377 Typy układów stron WWW ...................................................................... 377 Jak działa układ w CSS? ........................................................................... 380 Znacznik

.................................................................................. 380 Elementy sekcyjne HTML5 .................................................................. 382 Techniki rozmieszczania elementów na stronie .................................... 383 Strategie planowania układu .................................................................... 384 Zacznij od treści ................................................................................... 384 Przede wszystkim mobilność ................................................................ 384 Rozpocznij od nakreślenia szkicu .......................................................... 385 Zidentyfikuj pola treści ......................................................................... 386 Płyń z prądem ....................................................................................... 387 Pamiętaj o obrazach w tle ..................................................................... 387

8

SPIS TREŚCI

Fragmenty układanki ........................................................................... 388 Rozmieszczanie elementów warstwowo ............................................... 388 Pamiętaj o marginesach i dopełnieniu .................................................. 388

Rozdział 13. Tworzenie układów opartych na elementach pływających .... 389 Stosowanie elementów pływających w układach ...................................... 392 Używanie właściwości float dla wszystkich kolumn .............................. 393 Elementy pływające wewnątrz elementów pływających ......................... 395 Rozwiązywanie problemów z elementami pływającymi ............................ 395 Czyszczenie i obejmowanie elementów pływających ............................. 397 Tworzenie kolumn o pełnej wysokości ................................................. 401 Zapobieganie upadaniu elementów pływających ................................... 407 Zastosowanie własności box-sizing ...................................................... 409 Kurs: układy wielokolumnowe ................................................................ 410 Strukturyzowanie HTML-a .................................................................. 411 Tworzenie stylów układu ..................................................................... 412 Dodawanie kolejnej kolumny ............................................................... 413 Dodawanie wolnej przestrzeni .............................................................. 415 Ustawianie stałej szerokości ................................................................. 417 Mieszanie układu płynnego ze stałym ................................................... 418

Rozdział 14. Projektowanie elastycznych witryn (RWD) ............................. 423 Podstawy techniki RWD ......................................................................... 423 Przystosowywanie strony do techniki RWD ............................................. 425 Zapytania o media ................................................................................... 427 Strategie użycia zapytań o media .......................................................... 427 Definiowanie stopni układu ................................................................. 429 Od czego zacząć ................................................................................... 430 Tworzenie zapytań o media .................................................................. 431 Zapytania o media wewnątrz arkuszy stylów ........................................ 432 Podstawowa struktura arkusza stylów .................................................. 433 Najpierw urządzenia przenośne ............................................................ 434 Elastyczne siatki ..................................................................................... 434 Jak ważna jest kolejność elementów w kodzie HTML ........................... 436 Resetowanie modelu polowego ............................................................. 436 Zamienianie układu sztywnego w elastyczną siatkę .............................. 437 Płynne obrazy .......................................................................................... 439 Wady stosowania płynnych obrazów ..................................................... 441 Filmy i animacje Flash ......................................................................... 442 Kurs stosowania techniki RWD ............................................................... 443 Zmiana kolejności elementów HTML .................................................. 443 Płynne obrazy ....................................................................................... 446 Definiowanie stylów dla tabletów ......................................................... 448 Definiowanie stylów dla telefonów ....................................................... 450

SPIS TREŚCI

9

Rozdział 15. Pozycjonowanie elementów na stronie WWW ....................... 455 Jak działają właściwości pozycjonujące? ................................................... 456 Ustawianie wartości pozycjonujących ................................................... 458 Gdy pozycjonowanie bezwzględne jest względne ................................... 461 Kiedy (i gdzie) używać pozycjonowania względnego? ............................. 462 Stos elementów .................................................................................... 464 Ukrywanie fragmentów strony .............................................................. 466 Użyteczne strategie pozycjonowania ........................................................ 469 Pozycjonowanie wewnątrz elementu ..................................................... 469 Wyłamywanie elementu poza blok ........................................................ 470 Użycie stałego pozycjonowania do tworzenia ramek za pomocą stylów CSS ... 471 Kurs: pozycjonowanie elementów strony ................................................. 473 Wzbogacanie banera strony .................................................................. 474 Dodawanie podpisu do zdjęcia .............................................................. 477

Cześć IV. Zaawansowany CSS .....................................................481 Rozdział 16. CSS dla strony przeznaczonej do wydruku .............................. 483 Jak działają arkusze stylów dla mediów? ................................................... 483 Jak dodawać arkusze stylów przeznaczone dla mediów? ........................... 485 Określanie typu medium dla zewnętrznego arkusza stylów ................... 486 Określanie typu medium w arkuszu stylów ........................................... 486 Tworzenie stylów dla wydruku ....................................................................... 487 Używanie deklaracji !important do przesłonięcia stylów ekranowych ......... 488 Zmiana stylów tekstu ........................................................................... 488 Stylizowanie tła dla wydruków .............................................................. 490 Ukrywanie niepotrzebnych obszarów strony ......................................... 491 Wstawianie podziałów stron w wydrukach ............................................ 493 Kurs: tworzenie arkusza stylów przeznaczonego dla wydruków ................. 494 Usuwanie niepotrzebnych elementów strony ........................................ 494 Dostosowywanie układu ....................................................................... 496 Zmiana formatowania tekstu ............................................................... 498 Wyświetlanie URL ............................................................................... 499

Rozdział 17. Dobre nawyki w CSS ...................................................................501 Wstawianie komentarzy .......................................................................... 501 Porządkowanie stylów i arkuszy stylów .................................................... 502 Jasno nazywaj style ............................................................................... 503 Używanie kilku klas dla zaoszczędzenia czasu ...................................... 504 Grupuj style, aby utrzymać porządek w plikach ..................................... 506 Korzystanie z wielu arkuszy stylów ....................................................... 507 Usuwanie przeszkadzających stylów przeglądarki .................................... 509 Wykorzystanie selektorów potomka ........................................................ 513 Dzielenie stron na sekcje ...................................................................... 514 Zidentyfikuj treść właściwą dokumentu ................................................ 515 Dostarczanie kodu CSS tylko dla Internet Explorera ................................. 518 Komentarze warunkowe dla różnych wersji Internet Explorera .............. 520

10

SPIS TREŚCI

Dodatki ........................................................................................ 521 Dodatek A. Zestawienie właściwości CSS .................................................... 523 Wartości CSS .......................................................................................... 523 Kolory .................................................................................................. 523 Długości i rozmiary .............................................................................. 525 Słowa kluczowe .................................................................................... 526 Adresy URL ......................................................................................... 527 Właściwości tekstu .................................................................................. 527 color (dziedziczona) .............................................................................. 528 font (dziedziczona) ............................................................................... 528 font-family (dziedziczona) .................................................................... 528 font-size (dziedziczona) ........................................................................ 529 font-style (dziedziczona) ....................................................................... 529 font-variant (dziedziczona) ................................................................... 529 font-weight (dziedziczona) .................................................................... 530 letter-spacing (dziedziczona) ................................................................. 530 line-height (dziedziczona) ..................................................................... 530 text-align (dziedziczona) ....................................................................... 530 text-decoration ..................................................................................... 530 text-indent (dziedziczona) .................................................................... 531 text-shadow (dziedziczona) ................................................................... 531 text-transform (dziedziczona) ............................................................... 531 vertical-align ........................................................................................ 532 white-space .......................................................................................... 532 word-spacing (dziedziczona) ................................................................. 532 Właściwości list ...................................................................................... 533 list-style (dziedziczona) ........................................................................ 533 list-style-image (dziedziczona) .............................................................. 533 list-style-position (dziedziczona) .......................................................... 533 list-style-type (dziedziczona) ................................................................ 534 Dopełnienie, obramowania i marginesy ................................................... 534 box-shadow .......................................................................................... 534 border .................................................................................................. 534 border-radius ....................................................................................... 535 border-top, border-right, border-bottom, border-left .............................. 535 border-color ......................................................................................... 535 border-top-color, border-right-color, border-bottom-color, border-left-color ............................................... 536 border-style .......................................................................................... 536 border-top-style, border-right-style, border-bottom-style, border-left-style ................................................ 536 border-width ........................................................................................ 537 border-top-width, border-right-width, border-bottom-width, border-left-width ............................................. 537 box-sizing ............................................................................................ 537 outline-color ........................................................................................ 538 outline-style ......................................................................................... 538 SPIS TREŚCI

11

outline-width ....................................................................................... 538 padding ................................................................................................ 538 padding-top .......................................................................................... 539 padding-right ........................................................................................ 539 padding-bottom .................................................................................... 539 padding-left .......................................................................................... 539 margin ................................................................................................. 539 margin-top ........................................................................................... 540 margin-right ......................................................................................... 540 margin-bottom ..................................................................................... 540 margin-left ........................................................................................... 540 Tła .......................................................................................................... 540 background .......................................................................................... 541 background-attachment ....................................................................... 541 background-clip .................................................................................... 541 background-color .................................................................................. 542 background-image ................................................................................ 542 background-origin ................................................................................ 542 background-position ............................................................................. 543 background-repeat ................................................................................ 543 background-size ................................................................................... 544 Właściwości układu strony ...................................................................... 544 bottom ................................................................................................. 544 clear ..................................................................................................... 544 clip ....................................................................................................... 545 display .................................................................................................. 545 float ..................................................................................................... 546 height ................................................................................................... 546 left ....................................................................................................... 547 max-height ........................................................................................... 547 max-width ............................................................................................ 547 min-height ........................................................................................... 548 min-width ............................................................................................ 548 overflow ............................................................................................... 548 position ................................................................................................ 549 right ..................................................................................................... 549 top ....................................................................................................... 549 visibility ............................................................................................... 550 width ................................................................................................... 550 z-index ................................................................................................. 551 Własności animacji, przekształceń i przejść ............................................. 551 @keyframes ......................................................................................... 551 animation ............................................................................................ 552 animation-name .................................................................................. 552 animation-duration .............................................................................. 553 animation-timing-function .................................................................. 553 animation-delay ................................................................................... 553 animation-iteration-count .................................................................... 553 animation-direction ............................................................................. 554

12

SPIS TREŚCI

animation-fill-mode ............................................................................. 554 animation-play-state ............................................................................ 554 transform ............................................................................................. 554 transform-origin .................................................................................. 555 transition ............................................................................................. 555 transition-property ............................................................................... 555 transition-duration .............................................................................. 556 transition-timing-function ................................................................... 556 transition-delay .................................................................................... 556 Właściwości tabel .................................................................................... 556 border-collapse ..................................................................................... 557 border-spacing ..................................................................................... 557 caption-side ......................................................................................... 557 empty-cells .......................................................................................... 558 table-layout .......................................................................................... 558 Pozostałe właściwości .............................................................................. 558 content ................................................................................................. 558 cursor ................................................................................................... 559 opacity ................................................................................................. 559 orphans („sieroty”) ............................................................................... 560 page-break-after ................................................................................... 560 page-break-before ................................................................................. 560 page-break-inside ................................................................................. 561 widows ................................................................................................ 561

Dodatek B. Zasoby CSS ................................................................................... 563 Podręczniki ............................................................................................. 563 World Wide Web Consortium (W3C) ................................................... 563 Książki ................................................................................................. 564 Inne źródła online ................................................................................ 564 Pomoc dotycząca CSS .............................................................................. 564 Fora dyskusyjne ................................................................................... 564 Porady, sztuczki i wskazówki ............................................................... 565 Nawigacja z CSS ..................................................................................... 565 Kursy ................................................................................................... 565 Przykłady ............................................................................................. 566 Układy oparte na CSS .............................................................................. 566 Informacje o modelu polowym ............................................................. 566 Przykłady układów ............................................................................... 567 Inne zasoby z układami ........................................................................ 567 Witryny pokazowe ................................................................................... 568 Książki na temat CSS .............................................................................. 568 Edytory CSS ............................................................................................ 568 Windows i Macintosh .......................................................................... 569 Tylko Windows .................................................................................... 569 Tylko Macintosh ................................................................................. 569

Skorowidz ........................................................................................................ 571 SPIS TREŚCI

13

14

SPIS TREŚCI

Nieoficjalna czołówka O autorze David Sawyer McFarland jest prezesem firmy Sawyer McFarland Media, Inc., która zajmuje się programowaniem sieciowym i szkoleniami. Siedziba firmy znajduje się w Portland w stanie Oregon. Tworzeniem stron internetowych zajmuje się od 1995 roku, kiedy to zaprojektował pierwszą w życiu stronę będącą internetowym magazynem dla profesjonalistów z branży komunikacyjnej. Pracował jako webmaster w University of California w Berkeley i Berkeley Multimedia Research Center, a także sprawował pieczę nad przebudową strony Macworld.com przy użyciu CSS. Poza tworzeniem stron internetowych David zajmuje się także pisaniem książek oraz jest instruktorem i trenerem. Uczył projektowania stron w UC Berkeley Graduate School of Journalism, The Center for Electronic Art, The Academy of Art College, Ex’Pressions Center for New Media i Portland State University. Ma na swoim koncie artykuły dla „Practical Web Design”, magazynu „Macworld” i CreativePro.com. David jest również autorem książek JavaScript. Nieoficjalny podręcznik oraz Dreamweaver: The Missing Manual. Komentarze na temat tej książki można przesyłać na adres [email protected] (osoby szukające pomocy w sprawach technicznych powinny jednak skorzystać z listy źródeł przedstawionej w dodatku B).

O zespole redakcyjnym

O zespole redakcyjnym Nan Barber (redaktor) zajmuje się serią Missing Manual od poprzedniego stulecia. Mieszka z mężem i iMakiem w Massachusetts. E-mail: [email protected] Holly Bauer (redaktor produkcyjny) mieszka w Ye Olde Cambridge w Massachusetts. Lubi gotować, majsterkować i fascynuje się sztuką projektowania wnętrz z lat 50. Adres e-mail: [email protected] Nancy Reinhardt (korektor) mieszka w Midwest. Lubi spędzać wolne dni nad jeziorem, gdzie może pływać łodzią, kąpać się oraz pochłaniać książki. Drugim zajęciem Reinhardt oprócz pracy redakcyjnej jest pisanie romansów. Jej prace można znaleźć pod adresem www.nanreinhardt.com. Adres e-mail: [email protected] Nancy A. Guenther (indekser) utworzyła indeks do tej książki jako pracownik międzynarodowej firmy Potomac Indexing, LLC (www.potomacindexing.com). Jako indekser pracuje na pełny etat od 1983 roku i specjalizuje się w tematyce oprogramowania komputerowego, amerykanistyce i biznesie. Ma swoją witrynę internetową pod adresem www.guenther.bizland.com. Daniel J. Quinn (redaktor techniczny) jest wolnym strzelcem i tworzy strony internetowe dla DQuinn.net. Od pięciu lat pracuje na stanowisku starszego inżyniera ds. interfejsów użytkownika w zdobywającej nagrody agencji interaktywnej Genuine Interactive. Jego specjalnością są WordPress i opracowywanie strategii dotyczącej publikacji treści dla takich marek, jak na przykład Sam Adams, MassMutual i Children’s Hospital Boston. Obecnie pracuje jako webmaster w dziale komunikacji elektronicznej Uniwersytetu Harvarda. Regularnie współpracuje z zespołem lokalnych projektantów. Adres e-mail: [email protected] Jason Arnold (redaktor techniczny) mieszka w Santa Rosa w Kalifornii. Ma żonę i trzy córki. Pracuje w Healdsburg District Hospital jako technik telemetrii i uczy dzieci Kenpo Karate. Aktualnie jest w trakcie studiów pielęgniarskich w Santa Rosa Junior College. W wolnym czasie ćwiczy Kenpo Karate z córkami i szuka dodatkowych zajęć, aby móc wykorzystać swoje umiejętności techniczne.

16

CSS3. NIEOFICJALNY PODRĘCZNIK

Podziękowania

Podziękowania Szczere podziękowania dla wszystkich tych, którzy pomogli mi w napisaniu tej książki, w tym dla moich studentów, którzy zawsze pomagają mi spojrzeć na różne zagadnienia oczami początkującego. Dziękuję redaktorom technicznym — Danielowi Quinnowi i Jasonowi Arnoldowi, którzy uchronili mnie przed popełnieniem wielu żenujących błędów, oraz Zoe Gillenwater za cenne porady do pierwszego wydania tej książki. Od nas wszystkich należą się wyrazy uznania wielu projektantom stron internetowych, którzy przetarli szlaki, kreatywnie wykorzystując CSS i dzieląc się swoimi spostrzeżeniami z całą społecznością. Dziękuję również Davidowi Pogue’owi, którego niesłabnący entuzjazm i wytrwałość są dla mnie inspiracją, Nan Barber za poprawienie mojego tekstu, mojej żonie Scholle za motywowanie mnie do ukończenia tej książki, synowi Grahamowi, który twierdzi, że pisanie tej książki poszłoby mi o wiele szybciej, gdybym pisał tylko: „Bla, bla, bla, buuu”, mojej cudownej córce Kate, której uśmiech zawsze jest dla mnie zastrzykiem energii. Dziękuję również rodzinie: mamie, Dougowi, Mary, Davidowi, Marissie, Tessie, Phyllis, Les, Del, Patricii oraz Mike’owi. — David Sawyer McFarland

NIEOFICJALNA CZOŁÓWKA

17

Seria Nieoficjalny podręcznik

Seria Nieoficjalny podręcznik Książki z serii Nieoficjalny podręcznik to dowcipne i doskonałe przewodniki po produktach komputerowych, które nie mają oficjalnych podręczników (czyli prawie wszystkich). Każdy zawiera ręcznie sporządzony indeks i odniesienia do konkretnych stron (nie tylko rozdziałów). Poniżej znajduje się lista ostatnio wydanych i planowanych książek z tej serii: Access 2007 PL. Nieoficjalny podręcznik, Matthew MacDonald, Excel. Nieoficjalny podręcznik, Matthew MacDonald, Excel 2007 PL. Nieoficjalny podręcznik, Matthew MacDonald, Flash CS3/CS3 PL Professional. Nieoficjalny podręcznik, E.A. Vander Veer i Chris Grover, Fotografia cyfrowa. Nieoficjalny podręcznik, Chris Grover i Barbara Brundage, HTML5. Nieoficjalny podręcznik, Matthew MacDonald, iPhone 3GS. Nieoficjalny podręcznik. Wydanie III, David Pogue, JavaScript i jQuery. Nieoficjalny podręcznik, David Sawyer McFarland, Komputery PC. Nieoficjalny podręcznik, Andy Rathbone, Microsoft Project 2007 PL. Nieoficjalny podręcznik, Bonnie Biafore, Mózg. Nieoficjalny podręcznik, Matthew MacDonald, Office 2007 PL. Nieoficjalny podręcznik, Chris Grover, Matthew MacDonald i E.A. Vander Veer, Office 2010 PL. Nieoficjalny podręcznik, Nancy Conner, Matthew MacDonald, Photoshop CS6/CS6 PL. Nieoficjalny podręcznik, Lesa Snider, PowerPoint 2007 PL. Nieoficjalny podręcznik, E.A. Vander Veer, Sieci domowe. Nieoficjalny podręcznik, Scott Lowe, Tworzenie stron WWW. Nieoficjalny podręcznik. Wydanie II, Matthew MacDonald, Windows Vista PL. Nieoficjalny podręcznik, David Pogue, Windows XP Home Edition. Nieoficjalny podręcznik, David Pogue, Windows XP Pro. Nieoficjalny podręcznik, David Pogue, Craig Zacker i Linda Zacker, Word 2007 PL. Nieoficjalny podręcznik, Chris Grover.

18

CSS3. NIEOFICJALNY PODRĘCZNIK

Wstęp

K

askadowe arkusze stylów (ang. Cascading Style Sheets — CSS) umożliwiają kreatywne kontrolowanie układu i wyglądu stron internetowych. Dzięki tej technice można udekorować tekst wpadającymi w oko nagłówkami, zmodyfikowanymi początkami akapitów i krawędziami, jakie spotyka się w kolorowych czasopismach. Ponadto można precyzyjnie sterować położeniem obrazków, tworzyć kolumny i banery oraz wyróżniać odnośniki tekstowe za pomocą dynamicznych efektów typu rollover. Można nawet sprawić, aby elementy powoli pojawiały się lub zanikały, przesuwać elementy po stronie oraz tworzyć przyciski powoli zmieniające kolor, gdy najedzie się na nie kursorem. Technologia dająca takie możliwości musi być bardzo skomplikowana, nieprawdaż? Przeciwnie! Technologia CSS powstała w celu uproszczenia procesu stylizowania stron internetowych. Na kilku następnych stronach znajduje się opis podstaw CSS. W rozdziale 1. zabieramy się do pracy i tworzymy pierwszą stronę internetową.

Jak działa CSS CSS to nie HTML. HTML służy jako szkielet dokumentu, organizując informacje w nagłówki, akapity, listy wypunktowane itd. CSS to odrębny język, który przy współpracy z przeglądarką pomaga sprawić, aby dokument w HTML-u wyglądał dobrze. Przykładowo dzięki HTML-owi można dowolne wyrażenie przeistoczyć w nagłówek najwyższego poziomu, wskazując, że reprezentuje on treść reszty dokumentu. Jednak do sformatowania tego nagłówka — powiedzmy, aby był pisany dużymi, czerwonymi i pogrubionymi literami i znajdował się w odległości 50 pikseli od lewej krawędzi okna — należałoby użyć CSS. W arkuszach stylów takie zasady formatowania nazywają się stylami — regułami opisującymi wygląd wybranych części stron internetowych. Arkusz stylów to zbiór takich reguł.

Zalety korzystania z CSS

Style mogą być przeznaczone do pracy z obrazkami. Na przykład mogą wyrównać obrazek do prawej krawędzi strony, sprawić, że będzie otoczony kolorową obwódką, i zastosować pięćdziesięciopikselowy margines pomiędzy nim a otaczającym go tekstem. Mając utworzony styl, można go zastosować do tekstu, obrazków, nagłówków lub innych elementów strony. Za pomocą stylów można na przykład bez problemu zmienić rozmiar, krój i kolor czcionki w wybranym akapicie tekstu. Style można także stosować do konkretnych grup znaczników HTML, dzięki czemu można sprawić, aby wszystkie nagłówki pierwszego poziomu (znacznik

) w witrynie wyglądały tak samo bez względu na to, gdzie się znajdują.

Zalety korzystania z CSS Przed powstaniem CSS projektanci stron internetowych musieli ograniczać się do opcji układu i stylów dostępnych w HTML-u. Każdy, kto surfował po sieci w 1995 roku, bez problemu zrozumie tutaj nacisk na słowo ograniczać. Jak się niebawem przekonamy, język HTML nadal stanowi podstawę wszystkich stron globalnej sieci, ale nie jest narzędziem projektanckim. Oczywiście język ten oferuje pewne podstawowe możliwości formatowania tekstu, obrazków, tabel i innych elementów strony, a cierpliwy i skrupulatny webmaster może za jego tylko pomocą napisać bardzo dobrze wyglądającą stronę. Jednak w efekcie powstaje zazwyczaj wolno działająca strona, oparta na niezwykle niezgrabnym kodzie, której zachowanie trudno przewidzieć. Dla kontrastu poniższa lista zawiera spis zalet CSS:  Arkusze stylów oferują znacznie więcej opcji formatowania niż HTML. Dzięki

CSS akapity można formatować w taki sam sposób jak w książkach czy gazetach (np. pierwszy wiersz wcięty i brak odstępu pomiędzy akapitami) i kontrolować odstępy między wierszami (ang. leading).  Ustawiając za pomocą CSS obrazek w tle strony, trzeba podjąć decyzję, czy

i w jaki sposób ma się on powtarzać. Przy użyciu samego HTML-a nie jest to w ogóle możliwe.  Ponadto style CSS zajmują znacznie mniej miejsca niż dostępne w HTML-u

opcje formatujące, takie jak nielubiany przez nikogo znacznik . Zazwyczaj dzięki zastosowaniu CSS w przypadku stron z dużą ilością tekstu można zaoszczędzić wiele kilobajtów. Dzięki temu strony będą się ładowały szybciej i wyglądały lepiej.  Arkusze stylów ułatwiają także aktualizowanie witryn internetowych. Wszyst-

kie style można zebrać w jednym pliku zewnętrznym i dołączyć go do każdej strony. Zmiana jednego ze stylów jest natychmiast widoczna na wszystkich stronach, w których został on użyty. Wygląd całej witryny można zmienić, edytując tylko jeden plik.

20

CSS3. NIEOFICJALNY PODRĘCZNIK

HTML — szkielet dokumentu

Co trzeba wiedzieć Zakładam, że osoba czytająca tę książkę posiada pewną wiedzę na temat języka HTML (i może miała już styczność z CSS), ma na swoim koncie jedną lub dwie witryny (a przynajmniej strony) oraz zna znaczniki takie, jak ,

,

, itd., które tworzą Hypertext Markup Language (HTML). CSS bez HTML-a jest bezużyteczny, a więc aby móc przejść dalej, trzeba umieć tworzyć proste strony przy użyciu HTML-a. Dla osób, które kiedyś używały HTML-a, ale czują, że ich wiedza jest nieco przestarzała, przeznaczone są poniższe podrozdziały, które stanowią krótkie przypomnienie wiadomości dotyczących tego języka. Wskazówka: Osobom dopiero zaczynającym uczyć się HTML-a polecam następujące darmowe źródła dostępne w internecie: HTML Dog (www.htmldog.com/guides/htmlbeginner/) i W3Schools (dwww.w3schools.com/html/). Fanom drukowanych stron polecam lekturę książek Tworzenie stron WWW. Nieoficjalny podręcznik. Wydanie III lub Head First HTML with CSS & XHTML. Edycja polska (Wydawnictwo Helion, Gliwice).

HTML — szkielet dokumentu HTML korzysta z prostych poleceń zwanych znacznikami, za pomocą których definiuje różne części strony WWW. Na przykład poniższy kod HTML stanowi prostą stronę: <meta charset="UTF-8"> Jestem tytułem tej strony internetowej.

Jestem treścią tej strony.



Może nie jest to ekscytujący przykład, ale strona ta zawiera wszystkie podstawowe elementy. Na samym początku dokumentu znajduje się deklaracja typu dokumentu, po której następują znacznik (w nawiasach trójkątnych), nagłówek i treść główna. Dokument kończy znacznik zamykający .

Typy dokumentu Wszystkie strony internetowe zaczynają się od deklaracji typu dokumentu, czyli wiersza kodu określającego, której wersji języka HTML użyliśmy do budowy strony. Przez wiele lat używano dwóch typów dokumentu: HTML 4.01 i XHTML 1.0. Każdy z nich występuje w dwóch rodzajach: strict i transitional. Poniżej przedstawiona jest deklaracja typu dokumentu HTML 4.01 transitional (pozostałe wymienione typy są podobne):

WSTĘP

21

Jak działają znaczniki HTML



Uwaga: Przykłady wszystkich typów dokumentów można znaleźć na stronie www.webstandards.org/ learn/reference/templates.

Jednak w przedstawionym wcześniej przykładzie strony HTML została użyta o wiele bardziej zwięzła deklaracja typu dokumentu:

Jest to nowy typ dokumentów w języku HTML5. Język ten ma z założenia być łatwiejszy w użyciu i prostszy od poprzednich wersji. W tej książce używany jest typ dokumentu HTML5. Jest on obsługiwany przez wszystkie popularne przeglądarki (nawet starego Internet Explorera 6). Ponieważ HTML5 jest przyszłością internetu, nie ma sensu używać innych typów dokumentów. Uwaga: To, że typ dokumentu HTML5 jest rozpoznawany przez wszystkie przeglądarki, nie znaczy, że aplikacje rozpoznają także wszystkie elementy tego języka. Na przykład Internet Explorer do wersji 8 nie rozpoznaje nowych elementów języka HTML5. Aby móc definiować style dla tych elementów w starych wersjach przeglądarki IE, trzeba użyć JavaScriptu. Więcej na ten temat dowiesz się z rozdziału 1. To, jakiego typu dokumentu użyjesz, nie jest tak ważne jak to, aby wpisać jakąś deklarację. Bez niej Twoje strony w każdej przeglądarce mogą wyglądać inaczej, ponieważ przeglądarki różnie interpretują CSS, gdy nie wiedzą, do jakiego typu dokumentu się odnosi. Każdy typ dokumentu ma zdefiniowane zasady dotyczące pisania kodu HTML. Na przykład w HTML 4.01 znacznik złamania wiersza wygląda tak:


Natomiast w XHTML ten sam znacznik ma następującą postać:


Język HTML5 ma tę zaletę, że można w nim używać obu tych wersji.

Jak działają znaczniki HTML W prostym przykładzie kodu HTML przedstawionym w sekcji „HTML — szkielet dokumentu”, podobnie jak na każdej stronie napisanej w HTML-u, większość poleceń występuje w parach otaczających fragment tekstu lub inne polecenia. Umieszczone w nawiasach trójkątnych znaczniki są instrukcjami dla przeglądarki, informującymi ją, w jaki sposób ma prezentować stronę. Jak sama nazwa wskazuje, język HTML to przecież język znakowania hipertekstowego (ang. Hypertext Markup Language). Znacznik początkowy (otwierający) każdej pary informuje przeglądarkę o tym, gdzie rozpoczyna się instrukcja, a znacznik zamykający informuje o jej końcu. W znaczniku zamykającym zawsze znajduje się ukośnik (/) —bezpośrednio po symbolu nawiasu (<).

22

CSS3. NIEOFICJALNY PODRĘCZNIK

Jak działają znaczniki HTML

Każda strona internetowa musi zawierać przynajmniej cztery poniższe elementy:  Pierwszy wiersz kodu strony internetowej zawiera deklarację typu dokumentu,

której opis znajduje się w poprzednim podrozdziale.  Znacznik pojawia się raz na samym początku strony i po raz drugi (z uko-

śnikiem) na końcu. Informuje on przeglądarkę, że treści zawarte w tym dokumencie prezentowane są za pomocą języka HTML, a nie jakiegoś innego. Cała treść strony, włącznie z pozostałymi znacznikami, znajduje się pomiędzy otwierającym a zamykającym znacznikiem . Gdyby stronę internetową porównać do drzewa, to jego pniem byłby znacznik . Z tego pnia wychodzą dwie główne gałęzie reprezentujące dwie główne części strony: nagłówek (ang. head) i treść (ang. body).  Nagłówek zawiera tytuł strony (np. Sprzedaż wysyłkowa ołówków Izzy).

Może także zawierać inne, niewidoczne informacje oraz opis strony wykorzystywany przez wyszukiwarki i przeglądarki. Nagłówek umieszcza się w elemencie . Ponadto w nagłówku mogą znaleźć się informacje wykorzystywane przez przeglądarki do wyświetlania stron i dodawania interaktywności. W tym miejscu umieszcza się na przykład kaskadowe arkusze stylów (takie, o których jest mowa w tej książce) albo łącza do zawierających je plików.  Treść strony internetowej otoczona jest znacznikami elementu i zawiera

wszystkie informacje, które pojawiają się w oknie przeglądarki — nagłówki, tekst, obrazki itd. W elemencie używane są powszechnie następujące elementy:  Znacznik informujący przeglądarkę o początku akapitu tekstu to

(otwie-

rający), zakończenie akapitu oznaczane jest z kolei znacznikiem

(zamykającym).  Znacznik kładzie nacisk na zawarty w nim tekst. Tekst znajdujący się

pomiędzy tym znacznikiem a jego zamykającym odpowiednikiem
będzie wytłuszczony. Fragment kodu HTML Uwaga! nakazuje przeglądarce, aby mocno wyróżniła słowo Uwaga!.  Znacznik , czyli kotwica (ang. anchor), służy do tworzenia łączy hipertek-

stowych. Kliknięcie takiego łącza może spowodować przejście na dowolną stronę w internecie. Miejsce to określa się, umieszczając odpowiedni adres wewnątrz znacznika
. Przykładowo można stworzyć takie łącze Kliknij tutaj!. Przeglądarka wie, że jeśli odwiedzający stronę kliknie słowa Kliknij tutaj!, to powinien zostać przeniesiony do strony Missing Manual. href w prezentowanym przykładzie to atrybut, a adres sieciowy, czyli URL (ang. Uniform Resource Locator), jest jego wartością.

WSTĘP

23

HTML5 — znów wszystko kręci się na nowo

XHTML Jak każda technologia, język HTML ewoluuje. Mimo że standardowy HTML bardzo dobrze nadawał się do realizowania postawionych przed nim celów, to zawsze był nieco niedbały. Między innymi pozwala na stosowanie małych, wielkich i mieszanych liter w nazwach znaczników (zarówno , jak i są poprawne) i niezamykanie znaczników (dzięki czemu, aby utworzyć akapit, wystarczy użyć tylko znacznika otwierającego

— bez jego zamykającego odpowiednika

). Mimo iż taka elastyczność może znacznie ułatwić pisanie strony, to jednak utrudnia ona życie przeglądarkom internetowym, smartfonom i wszystkim innym urządzeniom, za pomocą których można przeglądać strony internetowe. Ponadto HTML nie jest zgodny z jednym z najpopularniejszych języków internetowych o nazwie XML (ang. Extensible Markup Language). Aby nadążyć za rozwojem technologii, w 2000 roku opublikowano poprawioną wersję języka HTML — o nazwie XHTML. Obecnie w internecie można znaleźć wiele stron napisanych w tym języku, który w istocie jest HTML-em przestrzegającym zasad XML-a. Początkowo XHTML był uważany za przyszłość internetu, ale ostatecznie zastąpiono go językiem HTML5. Chociaż przeglądarki nadal rozpoznają XHTML (i pewnie będą to robić jeszcze długo), w tej książce nie jest on opisywany.

HTML5 — znów wszystko kręci się na nowo Gdy konsorcjum W3C — grupa opracowująca specyfikacje wielu technologii — opublikowało XHTML jako pierwszy krok do przestawienia internetu na XML, społeczność internetowa okrzyknęła to posunięcie wielkim wydarzeniem. Teraz wiemy już, że było w tym sporo przesady. Okazało się, że trudności związane z przestawieniem się na XML uniemożliwiły producentom przeglądarek respektowanie wytycznych W3C. Dlatego po pewnym czasie konsorcjum zlikwidowało grupę roboczą ds. XHTML i rozpoczęło pracę nad HTML5 — nową i rozszerzoną wersją HTML-a. Dzięki wsparciu ze strony wszystkich najważniejszych producentów przeglądarek HTML5 jest teraz kolejnym wielkim wydarzeniem. Niektóre przeglądarki, na przykład Google Chrome i Firefox, rozpoznają już część nowych elementów HTML; używają ich nawet niektóre media, takie jak „Time”, „Newsweek” czy CNN. HTML5 nie jest całkiem nową technologią. W odróżnieniu od XHTML-a, który miał zrewolucjonizować sposób tworzenia stron internetowych, HTML5 nie zmienia sposobu działania sieci. Większość podstawowych zasad języka HTML pozostała niezmieniona. Dodano tylko pewną liczbę nowych elementów odpowiadających dzisiejszym wymaganiom webmasterów. Na przykład w elemencie HTML5
można umieszczać treść nagłówkową stron internetowych, a więc na przykład logo i łącza nawigacyjne po serwisie. Nowy element
do tworzenia kolumn tekstu i precyzyjnego rozmieszczania obrazków i tekstu na stronie. Niestety, jako że znacznik ten miał za zadanie prezentować dane tabelaryczne, takie jak wyniki analizy danych, rozkłady jazdy pociągów itd., projektanci musieli wykazać się nie lada pomysłowością, aby wykorzystać go w różnych nietypowych zastosowaniach. Czasami dla osiągnięcia dobrego efektu zagnieżdżano tabele jedne w drugich na wielu poziomach. W międzyczasie producenci różnych przeglądarek zaczęli wprowadzać do użytku nowe znaczniki i atrybuty przeznaczone specjalnie do upiększania stron. Znacznik na przykład pozwala na określenie koloru czcionki, kroju pisma i rozmiaru w siedmiostopniowej skali (dla porównania liczba ta jest mniejsza od osiągalnej w programie Microsoft Word o około 100). Kiedy nie było już sposobu osiągnięcia jakiegoś efektu, projektanci często jako ostatnią deskę ratunku wykorzystywali obrazki. Na przykład stosowano pojedyncze obrazy dużych rozmiarów jako tło strony albo cięto je na mniejsze kawałki i wstawiano do tabel, w ten sposób odtwarzając pierwotny obraz. Mimo że wszystkie wymienione techniki — twórcze wykorzystanie znaczników, użycie atrybutów przeznaczonych do osiągania określonych efektów projektowych i częste posługiwanie się grafiką — umożliwiają kontrolowanie wyglądu strony, to powodują one również powstawanie znacznych ilości dodatkowego kodu HTML (i kolejnych zmarszczek na czole).

HTML teraz — szkielet dla CSS Bez względu na treść udostępnianą na stronie — czy jest to kalendarz sezonu wędkarskiego, wskazówki na temat tego, jak dojechać do najbliższego sklepu, czy też zdjęcia z ostatnich urodzin dziecka — o tym, czy wygląda ona profesjonalnie, czy amatorsko, świadczy jej projekt. Dobry projekt zwiększa siłę komunikatu przekazywanego za pośrednictwem strony, pomaga odwiedzającym znaleźć potrzebne informacje i decyduje o tym, jak cały świat ją postrzega. Z tych właśnie powodów projektanci stron internetowych tak się gimnastykowali, aby ich strony dobrze wyglądały. Przejmując obowiązki projektowe, CSS pozwala HTML-owi skupić się na tym, do czego został stworzony, czyli na strukturyzowaniu treści. Używanie HTML-a do kontrolowania wyglądu tekstu i innych elementów stron internetowych jest przestarzałą techniką. Nie przejmuj się, jeśli nagłówek

jest zbyt duży lub odstępy w listach wypunktowanych są niewłaściwe. Tym można zająć się później przy użyciu CSS. HTML należy traktować jako sposób na nadanie struktury treści, która ma zostać zaprezentowana w internecie. HTML-a używaj do organizowania treści, a CSS do nadawania jej wspaniałego wyglądu.

Pisanie HTML-a z myślą o CSS Początkujący projektanci stron WWW mogą potrzebować pewnych wskazówek wprowadzających do HTML-a (i zastępujących wynalezione w dobrych intencjach, ROZDZIAŁ 1.  PRZYSTOSOWANIE KODU HTML DO PRACY Z CSS

35

Pisanie HTML-a z myślą o CSS

ale przestarzałe techniki związane z tym językiem). Osoby mające już pewne doświadczenie w tworzeniu stron internetowych mogły wyrobić w sobie kilka złych nawyków, o których najlepiej byłoby zapomnieć. Reszta tego rozdziału poświęcona jest opisowi nawyków pisania kodu HTML, dzięki którym mama będzie z nas dumna (i które pomogą nam maksymalnie wykorzystać możliwości CSS).

Pamiętaj o strukturze HTML nadaje tekstowi znaczenie poprzez jego logiczny podział i identyfikację ról, jakie określone jego fragmenty odgrywają na stronie. Na przykład znacznik

oznacza najważniejsze wprowadzenie do treści strony. Pozostałe nagłówki pozwalają na podzielenie treści na inne, mniej ważne, ale powiązane ze sobą sekcje. Strona powinna mieć logiczną strukturę, podobnie jak ta książka. Każdy jej rozdział ma tytuł (

) i kilka podrozdziałów (

), które z kolei zawierają jeszcze mniejsze podrozdziały. Spróbujmy sobie wyobrazić, jak trudno by się czytało tę książkę, gdyby wszystkie słowa znajdowały się po prostu w jednym długim akapicie. Uwaga: Kurs języka HTML znajdziesz na stronie www.w3schools.com/html/html_intro.asp. Natomiast pod adresem http://reference.sitepoint.com/html znajduje się poręczna lista wszystkich elementów HTML.

W HTML-u dostępnych jest wiele znaczników służących do oznaczania treści w celu identyfikacji jej roli na stronie. Do najczęściej używanych należą znacznik

oznaczający akapit i

— służącego do wyświetlania podpisu ilustracji. Wskazówka: Czasami trudno jest zdecydować, którego elementu HTML5 powinno się użyć, na przykład
czy
. W serwisie HTML5 Doctor znajduje się przydatny dokument PDF zawie-

rający schemat ułatwiający wybór odpowiedniego elementu (http://html5doctor.com/downloads/ h5d-sectioning-flowchart.pdf).

W HTML5 jest więcej nowych elementów, z których część to tylko bardziej opisowe odpowiedniki elementu
. W tej książce do porządkowania treści używane są zarówno elementy
, jak i nowe elementy HTML5. Wadą nowego języka jest brak jego obsługi przez przeglądarkę Internet Explorer do wersji 8, przez co trzeba stosować różne sztuczki (patrz ramka poniżej). WARSZTAT NAPRAWCZY

Jak zmusić IE 8 do obsługi elementów HTML5 W języku HTML5 dodano sporo nowych elementów, od typowo semantycznych znaczników, takich jak