Ta książka należy do cenionej serii „Nieoficjalny podręcznik”. W trakcie lektury dowiesz się, jak przygotować poprawny arkusz stylów i dołączyć go do strony. Poznasz najlepsze techniki formatowania konkretnych elementów kodu HTML. Ponadto przekonasz się, że można szybko i wygodnie zaprojektować profesjonalną stronę WWW. Znajdziesz tu również opis nowości HTML-a w wersji 5 oraz nauczysz się korzystać z innych czcionek niż Arial czy Verdana.

Dzięki CSS3 wiele operacji, które do tej pory sprawiały kłopoty lub wymagały korzystania z elementów graficznych, uda Ci się wykonać za pomocą zaledwie paru linijek kodu. Zaokrąglone rogi, obracanie elementów, gradienty to tylko niektóre z nich. Książka ta jest obowiązkową lekturą dla każdego projektanta i webmastera chcącego być na bieżąco z nowinkami ze świata stron WWW.

Poznaj sekrety CSS3!

• Formatowanie stron
• Wykorzystanie niestandardowych czcionek
• Obracanie elementów
• Animacje

Najlepszy przewodnik po CSS3 dla webmasterów.

Rozdziały:

CZEŚĆ I. PODSTAWY CSS (31)

• HTML kiedyś - aby dobrze wyglądało (33)
• 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)
• 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)
• 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)
• 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)
  • 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)
  • 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)

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)

DODATKI (521)

Dodatek A. Zestawienie właściwości CSS (523)

• Wartości CSS (523)
  • Kolory (523)
  • Długości i rozmiary (525)
  • Słowa kluczowe (526)
  • Adresy URL (527)
• Właściwości tekstu (527)
  • color (dziedziczona) (528)
  • font (dziedziczona) (528)
  • font-family (dziedziczona) (528)
  • font-size (dziedziczona) (529)
  • font-style (dziedziczona) (529)
  • font-variant (dziedziczona) (529)
  • font-weight (dziedziczona) (530)
  • letter-spacing (dziedziczona) (530)
  • line-height (dziedziczona) (530)
  • text-align (dziedziczona) (530)
  • text-decoration (530)
  • text-indent (dziedziczona) (531)
  • text-shadow (dziedziczona) (531)
  • text-transform (dziedziczona) (531)
  • vertical-align (532)
  • white-space (532)
  • word-spacing (dziedziczona) (532)
• Właściwości list (533)
  • list-style (dziedziczona) (533)
  • list-style-image (dziedziczona) (533)
  • list-style-position (dziedziczona) (533)
  • list-style-type (dziedziczona) (534)
• Dopełnienie, obramowania i marginesy (534)
  • box-shadow (534)
  • border (534)
  • border-radius (535)
  • border-top, border-right, border-bottom, border-left (535)
  • border-color (535)
  • border-top-color, border-right-color, border-bottom-color, border-left-color (536)
  • border-style (536)
  • border-top-style, border-right-style, border-bottom-style, border-left-style (536)
  • border-width (537)
  • border-top-width, border-right-width, border-bottom-width, border-left-width (537)
  • box-sizing (537)
  • outline-color (538)
  • outline-style (538)
  • outline-width (538)
  • padding (538)
  • padding-top (539)
  • padding-right (539)
  • padding-bottom (539)
  • padding-left (539)
  • margin (539)
  • margin-top (540)
  • margin-right (540)
  • margin-bottom (540)
  • margin-left (540)
• Tła (540)
  • background (541)
  • background-attachment (541)
  • background-clip (541)
  • background-color (542)
  • background-image (542)
  • background-origin (542)
  • background-position (543)
  • background-repeat (543)
  • background-size (544)
• Właściwości układu strony (544)
  • bottom (544)
  • clear (544)
  • clip (545)
  • display (545)
  • float (546)
  • height (546)
  • left (547)
  • max-height (547)
  • max-width (547)
  • min-height (548)
  • min-width (548)
  • overflow (548)
  • position (549)
  • right (549)
  • top (549)
  • visibility (550)
  • width (550)
  • z-index (551)
• Własności animacji, przekształceń i przejść (551)
  • @keyframes (551)
  • animation (552)
  • animation-name (552)
  • animation-duration (553)
  • animation-timing-function (553)
  • animation-delay (553)
  • animation-iteration-count (553)
  • animation-direction (554)
  • animation-fill-mode (554)
  • animation-play-state (554)
  • transform (554)
  • transform-origin (555)
  • transition (555)
  • transition-property (555)
  • transition-duration (556)
  • transition-timing-function (556)
  • transition-delay (556)
• Właściwości tabel (556)
  • border-collapse (557)
  • border-spacing (557)
  • caption-side (557)
  • empty-cells (558)
  • table-layout (558)
• Pozostałe właściwości (558)
  • content (558)
  • cursor (559)
  • opacity (559)
  • orphans ("sieroty") (560)
  • page-break-after (560)
  • page-break-before (560)
  • page-break-inside (561)
  • widows (561)

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)