CZĘŚĆ 1 Bezbolesny wstęp do CSS

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