CSS_Nieoficjalny_podrecznik_cssnp.pdf

(619 KB) Pobierz
CSS. Nieoficjalny
podrêcznik
Autor: David Sawyer McFarland
T³umaczenie: £ukasz Piwko, Marcin Rogó¿
ISBN: 978-83-246-1117-1
Tytu³ orygina³u:
CSS: The Missing Manual
Format: B5, stron: 488
Wszystko o projektowaniu stron internetowych przy u¿yciu CSS
Jak przygotowaæ atrakcyjn¹ stron¹ internetow¹?
Jak szybko zmieniæ styl witryny?
Jak zapewniæ poprawn¹ obs³ugê stylów CSS we wszystkich przegl¹darkach?
Obecnie w internecie coraz wiêksze znaczenie ma forma. Witryny musz¹ swoim
wygl¹dem sprawiaæ, ¿e chce siê na nich pozostaæ – w przeciwnym wypadku
u¿ytkownicy wybior¹ jedn¹ spoœród niezliczonych konkurencyjnych stron. Doskona³ym
narzêdziem do nadawania atrakcyjnego i spójnego stylu witrynom s¹ arkusze CSS,
które pozwalaj¹ dowolnie definiowaæ wszystkie elementy stron internetowych
i b³yskawicznie zmieniaæ ich wygl¹d. S¹ przy tym ³atwe do nauczenia siê
oraz stosowania i pozwalaj¹ na uzyskiwanie ciekawych efektów wizualnych.
„CSS.
Nieoficjalny podrêcznik” to wszechstronny przegl¹d mo¿liwoœci i zastosowañ
tej technologii. Dziêki tej ksi¹¿ce dowiesz siê, jak przygotowaæ poprawny arkusz stylów
i do³¹czyæ go do strony, oraz poznasz sposoby formatowania elementów kodu HTML.
Nauczysz siê projektowaæ profesjonalne i wygodne w u¿yciu strony WWW oraz menu
do nawigacji po witrynach. Przeczytasz tak¿e o tym, jak przygotowywaæ strony
do wydruku, zapewniaæ poprawne wyœwietlanie stylów we wszystkich przegl¹darkach
i dbaæ o wiele innych szczegó³ów, które zapewni¹ Twoim witrynom wiernych
u¿ytkowników.
Pisanie kodu HTML pod k¹tem stylów CSS
Budowa stylów i arkuszy CSS
Dziedziczenie i kaskadowoœæ stylów
Do³¹czanie stylów CSS do stron WWW
Formatowanie elementów stron WWW
Tworzenie atrakcyjnych menu
Zarz¹dzanie uk³adem stron za pomoc¹ stylów CSS
Przygotowywanie stron do wydruku
Obs³uga stylów CSS w ró¿nych przegl¹darkach
Wydawnictwo Helion
ul. Koœciuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl
Wykorzystaj pe³niê mo¿liwoœci CSS i spraw, ¿e u¿ytkownicy
zakochaj¹ siê w Twoich witrynach od pierwszego wejrzenia
Spis treści
Nieoficjalna czołówka ........................................................................................ 11
Wstęp ..................................................................................................................15
Część I Podstawy CSS .................................................................... 27
Rozdział 1. Przystosowanie kodu HTML do pracy z CSS ................................. 29
HTML kiedyś i teraz ................................................................................ 29
HTML kiedyś — aby dobrze wyglądało ................................................. 30
HTML teraz — szkielet dla CSS ........................................................... 31
Pisanie HTML-a z myślą o CSS ................................................................ 32
Pamiętaj o strukturze .......................................................................... 32
Dwa nowe znaczniki HTML do nauczenia .......................................... 33
O czym trzeba zapomnieć ................................................................... 34
Podstawowe wskazówki ...................................................................... 37
Znaczenie deklaracji typu dokumentu ...................................................... 38
Rozdział 2. Tworzenie stylów i arkuszy stylów ...............................................41
Anatomia stylu ........................................................................................ 41
Zrozumieć arkusze stylów ........................................................................ 44
Styl wewnętrzny czy zewnętrzny ......................................................... 44
Wewnętrzne arkusze stylów ..................................................................... 45
Style zewnętrzne ...................................................................................... 46
Dołączanie arkusza stylów przy użyciu znacznika HTML .................... 47
Dołączanie arkuszy stylów za pomocą kodu CSS ................................. 48
Kurs: tworzenie pierwszego stylu .............................................................. 49
Tworzenie stylu wpisanego ................................................................. 50
Tworzenie wewnętrznych arkuszy stylów ............................................ 51
Tworzenie zewnętrznego arkusza stylów ............................................. 53
Rozdział 3. Podstawy selektorów — do czego odnoszą się style ...................57
Selektory znaczników — style dla całej strony ........................................... 57
Selektory klas — precyzyjna kontrola ........................................................ 59
Selektor ID — unikalne elementy strony ................................................... 62
Stylizowanie znaczników zagnieżdżonych ................................................. 63
Drzewo rodzinne HTML ..................................................................... 64
Tworzenie selektorów potomka ........................................................... 65
Nadawanie stylów grupom znaczników .................................................... 67
Grupowanie selektorów ....................................................................... 67
Selektor uniwersalny ........................................................................... 68
Pseudoklasy i pseudoelementy .................................................................. 68
Style odnośników ................................................................................ 69
Więcej pseudoklas i pseudoelementów ................................................. 69
Zaawansowane selektory .......................................................................... 72
Selektor dziecka .................................................................................. 73
Selektor brata ...................................................................................... 74
Selektor atrybutu ................................................................................. 75
Kurs: Selektory ......................................................................................... 76
Tworzenie selektora grupowego ........................................................... 78
Tworzenie i stosowanie selektora klasy ................................................ 79
Tworzenie i stosowanie selektora identyfikatora .................................. 81
Tworzenie selektora potomka .............................................................. 82
Rozdział 4. Oszczędzanie czasu dzięki dziedziczeniu .................................... 85
Czym jest dziedziczenie? .......................................................................... 85
Jak dziedziczenie upraszcza arkusze stylów ............................................... 87
Granice dziedziczenia ............................................................................... 87
Kurs: dziedziczenie ................................................................................... 89
Prosty przykład: dziedziczenie jednopoziomowe .................................. 89
Wykorzystanie dziedziczenia do zmiany stylu całej strony ................... 90
Kiedy dziedziczenie nie działa .............................................................. 92
Rozdział 5. Zarządzanie wieloma stylami: kaskada ........................................95
Kaskadowość stylów ................................................................................. 96
Style dziedziczone mogą się grupować .................................................. 96
Najbliższy przodek bierze górę ............................................................. 97
Górę bierze styl bezpośredni ................................................................ 98
Jeden znacznik wiele stylów ................................................................. 98
Precyzja: który styl weźmie górę .............................................................. 100
Remis: wygrywa ostatni ..................................................................... 101
Kontrolowanie kaskady .......................................................................... 103
Zmienianie precyzji ........................................................................... 103
Wybiórcze przesłanianie .................................................................... 103
4
CSS. NIEOFICJALNY PODR
Ę
CZNIK
Kurs: Kaskadowość w akcji ..................................................................... 105
Tworzenie stylu mieszanego ............................................................. 105
Łączenie
kaskady i dziedziczenia ....................................................... 107
Rozwiązywanie konfliktów ................................................................ 108
Część II Stosowanie CSS ................................................................111
Rozdział 6. Formatowanie tekstu ................................................................... 113
Formatowanie tekstu ............................................................................. 113
Wybór kroju czcionki ........................................................................ 115
Kolorowanie tekstu ........................................................................... 117
Zmiana rozmiaru pisma ......................................................................... 118
Stosowanie pikseli ............................................................................ 118
Stosowanie słów kluczowych, procentów i jednostki em .................... 119
Formatowanie słów i liter ....................................................................... 122
Pogrubienie i kursywa ....................................................................... 123
Zamiana tekstu na wielkie litery ....................................................... 123
Dekorowanie tekstu .......................................................................... 124
Odstęp między wyrazami i literami ................................................... 125
Formatowanie całych akapitów .............................................................. 127
Zmienianie odstępu między wierszami ............................................. 127
Wyrównywanie tekstu ....................................................................... 128
Wcinanie pierwszego wiersza i usuwanie marginesów ....................... 130
Formatowanie pierwszej litery lub pierwszego wiersza akapitu ........... 131
Stylizowanie list ..................................................................................... 132
Typy list ........................................................................................... 133
Pozycjonowanie punktorów i numerów ............................................. 134
Punktory graficzne ............................................................................ 135
Kurs: formatowanie tekstu ..................................................................... 137
Ustawienia strony ............................................................................. 137
Formatowanie nagłówków i akapitów ................................................ 139
Formatowanie list ............................................................................. 141
Wykańczanie projektu ...................................................................... 142
Rozdział 7. Marginesy, dopełnienie i obramowanie ......................................145
Istota modelu blokowego ........................................................................ 145
Marginesy i dopełnienie ......................................................................... 147
Zapis skrótowy marginesów i dopełnienia ......................................... 148
Konflikty marginesów ....................................................................... 149
Likwidowanie odstępu za pomocą marginesów ujemnych .................. 150
Prezentacja elementów
śródliniowych
i blokowych ............................ 152
SPIS TRE
Ś
CI
5
Ramki .................................................................................................... 153
Skrócony zapis właściwości ramek ..................................................... 155
Formatowanie poszczególnych krawędzi ............................................ 155
Kolorowanie tła ...................................................................................... 157
Określanie wysokości i szerokości ........................................................... 157
Obliczanie rzeczywistych wymiarów bloku ........................................ 158
„Kontrolowanie wycieków” za pomocą właściwości overflow .............. 160
Naprawianie modelu blokowego w IE 5 .............................................. 162
Umieszczaj treść na elementach pływających .......................................... 165
Tła i ramki a elementy pływające ....................................................... 167
Wstrzymać pływanie ......................................................................... 168
Kurs: marginesy, tła i ramki .................................................................... 170
Ustawianie marginesów .................................................................... 170
Ustawianie odstępów wokół znaczników ........................................... 172
Wyróżnianie tekstu za pomocą teł i ramek ......................................... 172
Tworzenie paska bocznego ................................................................ 175
Naprawianie błędów przeglądarki ...................................................... 178
O krok dalej ...................................................................................... 180
Rozdział 8. Umieszczanie grafiki na stronach WWW .................................... 181
CSS i znacznik <img> ........................................................................... 181
Obrazy tła ............................................................................................... 182
Sterowanie powtarzaniem ...................................................................... 186
Pozycjonowanie obrazu tła ...................................................................... 188
Słowa kluczowe ................................................................................. 188
Dokładne wartości ............................................................................ 190
Procenty ............................................................................................ 190
Umieszczanie obrazu na sztywno ...................................................... 192
Skrócona właściwość background ........................................................... 194
Kurs: Tworzenie galerii zdjęć .................................................................. 195
Tworzenie ramki obrazu .................................................................... 195
Dodawanie podpisu ........................................................................... 197
Tworzenie galerii fotografii ................................................................ 200
Dodawanie cieni ................................................................................ 204
Kurs: Używanie obrazów tła .................................................................... 207
Umieszczanie obrazu w tle strony ...................................................... 207
Zastępowanie ramek grafiką .............................................................. 211
Używanie grafiki w listach punktowanych ......................................... 212
Zaokrąglanie rogów paska bocznego .................................................. 214
Tworzenie zewnętrznego arkusza stylów ........................................... 217
6
CSS. NIEOFICJALNY PODR
Ę
CZNIK
Zgłoś jeśli naruszono regulamin