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
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ę: 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ę
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