Utopia HTML. Projektowanie w CSS bez u┐ycia tabel.pdf

(440 KB) Pobierz
Utopia HTML. Projektowanie w CSS bez użycia tabel
IDZ DO
PRZYK£ADOW Y ROZDZIA£
Utopia HTML. Projektowanie
w CSS bez u¿ycia tabel
SPIS TREŒCI
KATALOG KSI¥¯EK
Autor: Dan Shafer
T³umaczenie: Renata Wójcicka
ISBN: 83-7361-965-8
Tytu³ orygina³ u: HTML Utopia:
Format: B5, stron: 424
KATALOG ONLINE
ZAMÓW DRUKOWANY KATALOG
TWÓJ KOSZYK
DODAJ DO KOSZYKA
Internet powsta³ jako medium komunikacyjne umo¿liwiaj¹ce wymianê danych pomiêdzy
oœrodkami badawczymi. Nikt wówczas nie przewidywa³ ogromnej szybkoœci, z jak¹ siê
rozwinie, i popularnoœci, jak¹ zdobêdzie. Strony WWW by³y proste, zawiera³y g³ównie
tekst, a wyœwietlanie ich w innych urz¹dzeniach ni¿ komputery stacjonarne kojarzone
by³o raczej z powieœciami science-fiction. Dziœ internet to potê¿ny zbiór informacji
i miliony stron WWW. Jego u¿ytkownicy u¿ywaj¹ ró¿nych przegl¹darek, ró¿nych
systemów operacyjnych i ró¿nych urz¹dzeñ do przegl¹dania jego zasobów.
Taka sytuacja wywo³a³a koniecznoœæ ustanowienia standardów, w oparciu o które
tworzone s¹ strony WWW. Trzeba by³o tak¿e wypracowaæ mechanizmy pozwalaj¹ce
³atwo zmieniaæ sposób formatowania stron, aby dostosowaæ je do wymagañ oraz
mo¿liwoœci przegl¹darek i urz¹dzeñ.
Czytaj¹c ksi¹¿kê „Utopia HTML. Projektowanie w CSS bez u¿ycia tabel”, poznasz
CSS (kaskadowe arkusze stylów) — technologiê, która umo¿liwia niemal dowolne
formatowanie ka¿dego dokumentu HTML. Dowiesz siê, jak definiowaæ style CSS
i jak stosowaæ je w procesie tworzenia stron WWW. Nauczysz siê projektowaæ strony,
w których zmiana wygl¹du nie bêdzie wymagaæ przekonstruowania kodu HTML,
a jedynie modyfikacji kilku linijek w arkuszu stylów. Poznasz równie¿ niestandardowe
zastosowania kaskadowych arkuszy stylów.
Podstawowe wiadomoœci o CSS
Style lokalne i globalne
Mechanizmy dziedziczenia
Selektory i pseudoklasy
Rozmieszczanie elementów strony za pomoc¹ stylów
Przypisywanie kolorów
Efekty tekstowe
Walidacja dokumentów CSS
Ksi¹¿ka zawiera równie¿ zestawienie wszystkich atrybutów CSS, które mo¿na stosowaæ
przy definiowaniu stylów.
CENNIK I INFORMACJE
ZAMÓW INFORMACJE
ONOWOŒCIACH
ZAMÓW CENNIK
CZYTELNIA
FRAGMENTY KSI¥¯EK ONLINE
Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl
119562326.001.png 119562326.002.png 119562326.003.png 119562326.004.png
Spis treści
O autorze ....................................................................................... 13
Wstęp ............................................................................................ 15
Część I Wprowadzenie do CSS ...................................................19
Rozdział 1. Startujemy ..................................................................................... 21
CSS w kontekście ........................................................................................................... 21
Podstawowy cel CSS ...................................................................................................... 22
Dlaczego większość tabel jest zła? ................................................................................. 23
Tabele oznaczają długi czas ładowania strony ......................................................... 23
Użycie „pustych obrazków” nas spowalnia .............................................................. 24
Utrzymywanie tabel na stronie jest koszmarem ....................................................... 24
Kiedy użycie tabel jest właściwe? ............................................................................ 25
Czym w rzeczywistości jest CSS? .................................................................................. 25
Elementy reguł CSS ....................................................................................................... 26
Rodzaje reguł CSS ......................................................................................................... 29
Które właściwości są zależne od reguł CSS? ........................................................... 29
Na które elementy ma wpływ CSS? ......................................................................... 29
Gdzie definiuje się style CSS? ................................................................................. 30
Dlaczego należy się tym przejmować? ........................................................................... 32
Podsumowanie ............................................................................................................... 35
Rozdział 2. CSS na pierwszym planie ................................................................ 37
Do czego nadaje się CSS? .............................................................................................. 37
Kolor a CSS ............................................................................................................. 38
Czcionki a CSS ........................................................................................................ 40
Animacje pseudoklas a CSS ..................................................................................... 41
Obrazki a CSS .......................................................................................................... 43
Wiele arkuszy stylów, użytkownicy a CSS .............................................................. 45
Czego CSS sam nie może zrobić? .................................................................................. 45
CSS a dostęp do strony ................................................................................................... 47
CSS a ciągle zmieniający się świat przeglądarek ........................................................... 51
Dostosowywanie starszych przeglądarek ................................................................. 53
Postępowanie w przypadku nieprawidłowo działających przeglądarek ................... 55
Podsumowanie ............................................................................................................... 56
6
Utopia HTML. Projektowanie w CSS bez użycia tabel
Rozdział 3. Zagłębiamy się ............................................................................... 57
Zastosowanie reguł CSS w dokumentach HTML .......................................................... 57
Użycie skrótowych właściwości ..................................................................................... 58
Jak w CSS działa dziedziczenie? .................................................................................... 59
Selektory a struktura reguł CSS ...................................................................................... 60
Selektor uniwersalny ................................................................................................ 62
Selektor elementu ..................................................................................................... 62
Selektor klasy ........................................................................................................... 62
Selektor identyfikatora ............................................................................................. 63
Selektor pseudoelementu ......................................................................................... 64
Selektor pseudoklasy ................................................................................................ 65
Selektor potomka ..................................................................................................... 66
Selektor dziecka ....................................................................................................... 66
Selektor braci ........................................................................................................... 67
Selektory atrybutów ................................................................................................. 67
Grupowanie selektorów ........................................................................................... 68
Wyrażanie wielkości ...................................................................................................... 69
Wartości absolutne ................................................................................................... 70
Wartości względne ................................................................................................... 71
Komentarze CSS ............................................................................................................ 73
Podsumowanie ............................................................................................................... 73
Część II Układ strony w CSS ......................................................75
Rozdział 4. Projektowanie serwisu w CSS ......................................................... 77
Zalety tworzenia strony w CSS ...................................................................................... 78
Zwiększona kontrola składni .................................................................................... 78
Scentralizowana informacja o rozmieszczeniu elementów na stronie ...................... 79
Znaczniki semantyczne ............................................................................................ 79
Dostępność ............................................................................................................... 81
Zgodność ze standardami ......................................................................................... 82
Przykłady zwieńczonego sukcesem zastosowania CSS .................................................. 83
Przykładowa witryna: Footbag Freaks ........................................................................... 84
Podsumowanie ............................................................................................................... 85
Rozdział 5. Budowanie szkieletu strony ............................................................. 87
Wyliczanie typów szablonów ......................................................................................... 87
Ile układów stron? .................................................................................................... 88
Ile elementów projektu? ........................................................................................... 88
Pozycjonowanie w CSS i wielokolumnowe układy stron .............................................. 90
Pudełkowy schemat CSS .......................................................................................... 90
Właściwość display ...................................................................................................... 106
Pozycjonowanie w CSS i wielokolumnowe układy stron ............................................ 106
Wartości absolutne, relatywne i pozycjonujące ...................................................... 107
Podstawowy, trójkolumnowy układ strony ............................................................ 110
Dodanie nagłówka strony ....................................................................................... 112
Podsumowanie ............................................................................................................. 114
Rozdział 6. Wszystko na swoim miejscu .......................................................... 115
Pozycjonowanie bloków strony .................................................................................... 115
Jednostki miar oraz sposoby ich wyznaczania mają wpływ na projekt witryny ..... 115
Właściwość float .................................................................................................... 116
Właściwość clear .................................................................................................... 118
Spis treści
7
Wartości absolutne a relatywne wysokości i szerokości .............................................. 121
Właściwość z-index oraz nachodząca na siebie zawartość ........................................... 128
Układ strony CSS w praktyce: Footbag Freaks ............................................................ 132
Podsumowanie ............................................................................................................. 138
Część III Nadawanie stylów tekstowi
oraz innej zawartości w CSS ........................................139
Rozdział 7. Dodawanie kolorów z palety .......................................................... 141
Kto sprawuje tutaj nadzór? ........................................................................................... 141
Kolory w CSS .............................................................................................................. 142
Jak się określa kolory? ........................................................................................... 143
Selekcja kolorów i ich kombinacje ........................................................................ 145
Ustawienie kolorów sekcji body ............................................................................ 146
Przezroczystość, kolor a ustawienia użytkownika .................................................. 147
Ciekawe zastosowania kolorów .................................................................................... 148
Ostrzeżenia oraz uwagi .......................................................................................... 148
Kolorowanie dodatkowych wierszy tabeli z danymi .............................................. 150
Podsumowanie ............................................................................................................. 153
Rozdział 8. Zgodność czcionek ....................................................................... 155
Jak CSS radzi sobie z czcionkami? .............................................................................. 155
Właściwość font-family ............................................................................................... 156
Właściwość font-size .................................................................................................... 156
Rozmiary w HTML a rozmiary w CSS .................................................................. 158
Różnorodność przeglądarek oraz platform ............................................................. 158
Relatywne względem czego? ................................................................................. 159
Inne właściwości czcionek ........................................................................................... 160
Właściwość font-style ............................................................................................ 160
Właściwość font-variant ......................................................................................... 160
Właściwość font-weight ......................................................................................... 160
Skrótowa właściwość font ............................................................................................ 161
Standardowe i niestandardowe rodziny czcionek ......................................................... 163
Określanie list czcionek ......................................................................................... 165
Użycie standardowych i ogólnodostępnych czcionek ............................................ 166
Podsumowanie ............................................................................................................. 168
Rozdział 9. Efekty tekstowe oraz kaskadowość ............................................... 169
Zastosowanie elementu span ........................................................................................ 170
Justowanie tekstu jako technika projektowania strony ................................................. 171
Wyrównywanie tekstu w CSS a w HTML ............................................................. 171
Przejście ze skompresowanego do przestronnego sposobu projektowania ............ 172
Rozpoczynanie linii akapitem ...................................................................................... 176
Odstępy poziome i pionowe ......................................................................................... 178
Właściwość line-height .......................................................................................... 178
Właściwości letter-spacing oraz word-spacing ...................................................... 180
Ozdabianie tekstu ......................................................................................................... 184
Cieniowanie tekstu bez użycia elementów graficznych ............................................... 186
Nadawanie stylów hiperłączom .................................................................................... 188
Nadawanie stylów CSS listom ..................................................................................... 190
Właściwość list-style-type ..................................................................................... 190
Właściwość list-style-position ................................................................................ 194
Właściwość list-style-image ................................................................................... 195
8
Utopia HTML. Projektowanie w CSS bez użycia tabel
Kaskadowość i dziedziczenie ....................................................................................... 196
Podstawowe zasady kaskadowości ........................................................................ 196
Kolejność występowania ........................................................................................ 197
Szczegółowość ....................................................................................................... 199
Pochodzenie ........................................................................................................... 200
Priorytet ................................................................................................................. 201
Podsumowanie ............................................................................................................. 201
Rozdział 10. Dodawanie obrazków do strony ..................................................... 203
Wyrównanie rysunków i tekstu .................................................................................... 203
Pokrycie obrazków tekstem ................................................................................... 205
Przycinanie zawartości HTML ..................................................................................... 208
Podsumowanie ............................................................................................................. 210
Część IV Niestandardowe zastosowania CSS ..............................211
Rozdział 11. Zwiększanie komfortu pracy użytkownika ...................................... 213
Podstawowe nadawanie stylów liście w CSS ............................................................... 214
Wzbogacanie wyglądu menu ........................................................................................ 217
Tworzenie podmenu ..................................................................................................... 218
Modyfikowanie kursora myszy .................................................................................... 221
Użycie nieruchomego obrazka jako tła ......................................................................... 222
Podsumowanie ............................................................................................................. 224
Rozdział 12. Walidacja i zgodność z poprzednimi wersjami ................................ 227
Walidacja dokumentu CSS ........................................................................................... 227
Dostosowywanie do zgodności z poprzednimi wersjami ............................................. 231
Które przeglądarki nie chciały się dostosować? ..................................................... 231
Reguły postępowania z niestandardowymi przeglądarkami ................................... 232
Dostosowywanie Netscape 4.x ............................................................................... 236
Dalsze udziwnienia: przełączanie między elementami DOCTYPE ............................. 238
Podsumowanie ............................................................................................................. 239
Dodatki ......................................................................................241
Dodatek A Rozmaitości ................................................................................. 243
@-reguły ...................................................................................................................... 243
Dźwiękowe arkusze stylów .......................................................................................... 246
CSS a JavaScript .......................................................................................................... 248
Dodatek B Indeks kolorów ............................................................................. 251
Dodatek C Spis właściwości CSS ................................................................... 257
azimuth ......................................................................................................................... 257
background ................................................................................................................... 258
background-attachment ................................................................................................ 259
background-color ......................................................................................................... 260
background-image ........................................................................................................ 261
background-position ..................................................................................................... 262
background-position-x, background-position-y ............................................................ 264
background-repeat ........................................................................................................ 265
behaviour ...................................................................................................................... 266
border ........................................................................................................................... 267
border-bottom, border-left, border-right, border-top .................................................... 267
border-bottom-color, border-left-color, border-right-color, border-top-color .............. 268
Zgłoś jeśli naruszono regulamin