CSS3. Nieoficjalny podręcznik. Wydanie III - ebook

Kaskadowe arkusze stylów (ang. Cascading Style Sheets, CSS) odmieniły świat stron internetowych. Pozwoliły oddzielić treść strony od jej wyglądu. Od tej chwili życie projektantów stało się zdecydowanie prostsze. Praca nad zmianą wyglądu strony przestały przyprawiać o zawrót głowy, a szybkie przygotowanie kilku wersji na konkretne urządzenia stało się realne. Ostatnia wersja CSS3 wprowadza kolejne nowości, które zapewnią optymalne wykorzystanie potencjału stron WWW.

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!

Nieoficjalna czołówka (15)

Wstęp (19)

CZEŚĆ I. PODSTAWY CSS (31)

Rozdział 1. Przystosowanie kodu HTML do pracy z CSS (33)

• HTML kiedyś i teraz (33)
  
  • HTML kiedyś - aby dobrze wyglądało (33)
  • HTML teraz - szkielet dla CSS (35)
• Pisanie HTML-a z myślą o CSS (35)
  
  • 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 <img> (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 <div> (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)

Skorowidz (571)