CZĘŚĆ 1 Bezbolesny wstęp do CSS... 1 1 HTML i CSS: skupmy się na podobieństwach... 3 Krótka historia HTML i CSS... 5 Udokumentowane początki HTML...5 Odziedziczone po HTML ograniczenia... 5 Obejścia i rozszerzenia...7 CSS rozwija się obok HTML... 8 Dlaczego CSS wygląda na trudny?... 9 Powody uczenia się CSS... 9 Przegląd terminów HTML oraz struktury strony...11 Projekt 1-1: Tworzymy stronę testową (próbkę) w HTML...14 HTML i CSS: skupiamy się na podobieństwach...17 Podstawowa terminologia CSS...17 Podstawowa składnia CSS...19 Dołączanie arkuszy stylów...20 Projekt 1-2: Tworzenie arkuszy stylów...22 Sprawdzian...24 2 Rozumienie i używanie selektorów...27 Jak działają selektory...28 Rodzaje selektorów...28 Pojmowanie selektorów typu...29 Rozumienie selektorów potomka...29 Rozumienie selektorów atrybutów...31 Rozumienie pseudo-klas i pseudo-elementów...32 Projekt 2-1: Tworzymy bezstylową stronę WWW...33 Praca z selektorami typu...37 Lista selektorów typu...37 Podstawowa składnia selektora typu...38 Praca z selektorami potomka...40 Rozumienie drzewa dokumentu HTML...40 Używanie selektorów potomnych (kontekstowych)...42 Projekt 2-2: Zastosowanie selektorów typu i selektorów potomka...44 Praca z selektorami atrybutów...47 Selektory klasy...47 Selektory ID...48 Praca z pseudo-klasami i pseudo-elementami...51 Rozumienie pseudo-klas oraz pseudo-elementów...51 Rozpoznawanie pseudo-klas i pseudo-elementów...53 Projekt 2-3: Zastosuj selektory klasy, id, oraz "pseudo" do konstytucja.htm...54 Sprawdzian...59 3 Przeglądanie własności CSS...61 Rozumienie własności i ich funkcji...62 Rozumienie własności...62 Pięć kategorii własności...63 Projekt 3-1: Konstruujemy ćwiczebną stronę HTML...70 Praca z własnościami...74 Sterowanie układem tekstu przy pomocy własności tekstu...74 Modyfikowanie czcionek przy pomocy własności czcionek...78 Dodaj kolor z pomocą własności koloru i tła...80 Pozycjonowanie elementów przy pomocy własności ramki...83 Sterowanie wyświetlaniem przy pomocy własności klasyfikacji...86 Projekt 3-2: Dodajmy więcej stylów do "Wypraw Freda"...88 Sprawdzian...93
4 Stosowanie wartości...95 Rozumienie wartości i ich znaczenia...96 Różne rodzaje wartości...98 Wartości specyficzne...98 Wartości URL...100 Wartości procentowe...101 Wartości koloru...102 Jednostki miar...102 Jednostki bezwzględne a jednostki względne...105 Upraszczanie wartości kolorów...106 Rozumienie addytywnego mieszania kolorów...106 Łatwe mieszanie kolorów...108 Alternatywne wartości kolorów...110 Upraszczanie jednostek miar...112 Projekt 4-1: Tworzenie tabeli kolorów...112 Sprawdzian...119 5 Rozumienie kaskady i dziedziczenia...121 Rozumienie dziedziczenia...122 Jak działa dziedziczenie...122 Własności nie dziedziczone...125 Wymuszanie dziedziczenia...126 Określanie specyficzności...127 Jak rozumieć specyficzność...127 Jak obliczyć specyficzność...128 Jak używać specyficzności...129 Deklaracja!important...129 Rozumienie deklaracji!important...130 Jak używać!important...131 Rozumienie kaskady...133 Konkurujące arkusze stylów...134 Sortowanie arkuszy stylów...135 Projekt 5-1: Eksperymenty ze sprzecznymi stylami oraz!important...137 Sprawdzian...143 CZĘŚĆ 2 Poznajemy skrzynkę narzędziową dla CSS...145 6 Praca z własnościami czcionek...147 CSS i zgodność z przeglądarkami...148 Używaj "bezpiecznych" własności i wartości...150 Testuj swoje strony...151 Twórz alternatywne arkusze stylów...151 Od maszynopisu do publikacji na biurku...152 Web, <font> oraz HTML...153 Problem z elementem <font> z HTML...154 Zalety własności czcionek w CSS...154 Własności czcionek w CSS1...155 Własność font-family...155 Własność font-size...158 Własność font-style...163 Własność font-variant...164 Własność font-weight...166 Skrót - własność font...171 Własności czcionki w CSS 2...172 Własność font-stretch...172 Własność font-size-adjust...173 Projekt 6-1: Zastosowanie własności czcionki...173
7 Praca z własnościami tekstu...181 Jak działają własności czcionki...182 Jak działają własności tekstu...182 Własności tekstu w CSS...183 Projekt 7-1: Eksperymentuj z własnościami tekstu...184 Praca z własnościami tekstu...188 Własność word-spacing...188 Własność letter-spacing...189 Własność text-decoration...190 Własność vertical-align...193 Własność text-align...196 Własność text-transform...197 Własność text-indent...198 Własność line-height...201 Własność text-shadow (CSS 2)...203 Projekt 7-2: Tworzymy wzornik czcionek...204 Sprawdzian...210 8 Stosowanie własności koloru i tła...211 Dodawanie obrazów i kolorów...212 CSS pokonuje ograniczenia HTML...213 Własność color...214 Własność background-color...216 Własność background-image...218 Projekt 8-1: Dodawania kolorów i obrazu w tle...221 Sterowanie położeniem obrazu i przypisaniem...224 Własność background-repeat...224 Własność background-attachment...228 Własność background-position...229 Własność background (skrót)...233 Projekt 8-2: Zastosowanie własności tła...234 Sprawdzian...239 9 Używanie własności ramki...241 Rozumienie modelu opartego na ramkach...242 Tabele HTML i model oparty na ramkach...242 Podstawa modelu opartego na ramkach...244 Projekt 9-1: Praca z modelem opartym na ramkach...249 Własności ramki...251 Własności marginesu...251 Własności wypełnienia...256 Własności krawędzi...259 Projekt 9-2: Zabawa z własnościami ramki...267 Sprawdzian...270 10 Stosowanie własności opisowych...271 Rozumienie własności opisowych...272 Własności opisowe i HTML...272 Własności opisowe a XML...273 Własności opisowe oraz zgodność przeglądarek...274 Własność display...276 Własność display w CSS 1: kontrola zachowania się elementu...276 Własność display w CSS 2: wartości związane z nagłówkiem...278 Wartości odnoszące się do tabel...281 Projekt 10-1: Eksperymentujemy z display...283
Inne własności opisowe...287 Własność white-space...287 Własność list-style-type...290 Własność list-style-image...294 Własność list-style-position...295 Własność list-style...296 Projekt 10-2: Tworzenie zagnieżdżonej listy...298 Sprawdzian...302 CZĘŚĆ 3 Projektowanie w CSS...303 11 Model wizualny...305 Rozumienie modelu wizualnego...306 Generacja ramki...306 Rozmiary ramki...311 Własności width oraz height...315 Własności min-width oraz max-width (CSS 2)...317 Własności min-height oraz max-height (CSS 2)...317 Prosta makieta za pomocą float oraz clear...318 Własność float...318 Własność clear...322 Projekt 11-1: Tworzymy prosty układ strony (makietę) za pomocą float i clear...323 Pozycjonowanie elementów (CSS 1)...327 Schematy pozycjonowania...327 Własność position...331 Własności top, right, bottom oraz left...331 Projekt 11-2: Zabawa z blokami...332 Sprawdzian...337 12 Wizualne efekty CSS...339 Rozumienie overflow i clip...340 Własność overflow...340 Własność clip...346 Kontrolowanie widoczności i warstw...351 Własność visibility...351 Własność z-index...354 Rozumienie dynamicznego HTML...356 Projekt 12-1: Tworzymy dynamiczną stronę Web...359 Sprawdzian...366 13 CSS i projektowanie witryny...367 Rozumienie dobrego projektowania Web...368 Planowanie witryny Web...368 Projektowanie witryny Web...369 Projekt 13-1: Planujemy witrynę Web...375 Projektowanie za pomocą arkuszy stylów...376 Tworzenie "chudych" arkuszy stylów...376 Tworzenie "przejrzystych" arkuszy stylów...378 Projekt 13-2: eksperymentujemy z układami strony w CSS...380 Tworzenie stron "odpornych na upadki"...385 Dobrze uformowane dokumenty HTML...385 Poprawne dokumenty HTML...387 Poprawny CSS...389 Projektowanie dla zgodności z różnymi przeglądarkami...390 Opcje zgodności...390 Sprawdzian...395
14 Zaawansowany CSS...397 Rozumienie CSS 2...398 Kategorie własności CSS 1...398 Modele CSS 2 oraz kategorie własności...399 Zaawansowany CSS i początkujący...400 Rozumienie zaawansowanych selektorów...401 Selektor uniwersalny...402 Zaawansowany selektor potomka...402 Selektory atrybutów (attribute selectors)...405 Pseudo-klasy i pseudo-elementy...406 Projekt 14-1: Eksperymentujemy z zaawansowanymi selektorami...410 Własności zaawansowane...414 Akustyczne arkusze stylów...414 Własności interfejsu użytkownika...415 Media stronicowane...416 Własności specyfikacji czcionki...417 Zasoby CSS 2...418 Sprawdzian...420 CZĘŚĆ 3 Dodatki...421 A Odpowiedzi do sprawdzianów...423 Rozdział 1: HTML i CSS: skupmy się na podobieństwach...424 Rozdział 2: Rozumienie i używanie selektorów...424 Rozdział 3: Przeglądanie własności CSS...425 Rozdział 4: Stosowanie wartości...425 Rozdział 5: Rozumienie kaskady i dziedziczenia...426 Rozdział 6: Praca z własnościami czcionek...427 Rozdział 7: Praca z własnościami tekstu...428 Rozdział 8: Stosowanie własności koloru i tła...428 Rozdział 9: Używanie własności ramki...429 Rozdział 10: Stosowanie własności opisowych...430 Rozdział 11: Model wizualny...431 Rozdział 12: Wizualne efekty CSS...432 Rozdział 13: CSS i projektowanie witryny...432 Rozdział 14: Zaawansowany CSS...433 B CSS 1 Ściągawka...435 Selektory HTML...436 Selektory pseudo-klas...436 Selektory pseudo-elementów...437 Własności czcionki...437 Własności tekstu...437 Własności marginesu...438 Własności wypełnienia...438 Własności stylu krawędzi...439 Własności szerokości krawędzi...439 Własności kolorów krawędzi...440 Własności krawędzi...440 Własności koloru i tła...441 Własności opisowe...441 Własności pozycjonowania i efektów wizualnych...442