You are previewing CSS3. Nieoficjalny podręcznik. Wydanie III.
O'Reilly logo
CSS3. Nieoficjalny podręcznik. Wydanie III

Book Description

Ta książka należy do cenionej serii „Nieoficjalny podręcznik”. W trakcie lektury dowiesz się, jak przygotować poprawny arkusz stylów i się, jak przygotować 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.

Table of Contents

  1. Nieoficjalna czołówka
    1. O autorze
    2. O zespole redakcyjnym
    3. Podziękowania
    4. Seria Nieoficjalny podręcznik
  2. Wstęp
    1. Jak działa CSS
    2. Zalety korzystania z CSS
    3. Co trzeba wiedzieć
    4. HTML — szkielet dokumentu
      1. Typy dokumentu
    5. Jak działają znaczniki HTML
    6. XHTML
    7. HTML5 — znów wszystko kręci się na nowo
    8. Programy do pracy z CSS
      1. Programy darmowe
      2. Programy komercyjne
    9. O tej książce
      1. Struktura książki
    10. Podstawy
      1. O/tych/ukośnikach
    11. Zasoby internetowe
      1. Działające przykłady
      2. Errata
  3. I. Podstawy CSS
    1. 1. Przystosowanie kodu HTML do pracy z CSS
      1. HTML kiedyś i teraz
        1. HTML kiedyś — aby dobrze wyglądało
        2. HTML teraz — szkielet dla CSS
      2. Pisanie HTML-a z myślą o CSS
        1. Pamiętaj o strukturze
        2. Dwa nowe znaczniki HTML do nauczenia
          1. Elementy <div> i <span>
          2. Dodatkowe elementy HTML5
        3. Pamiętaj o układzie strony
        4. O czym trzeba zapomnieć
        5. Podstawowe wskazówki
      3. Znaczenie deklaracji typu dokumentu
      4. Aktualizowanie Internet Explorera
    2. 2. Tworzenie stylów i arkuszy stylów
      1. Anatomia stylu
      2. Zrozumieć arkusze stylów
        1. Styl wewnętrzny czy zewnętrzny
      3. Wewnętrzne arkusze stylów
      4. Style zewnętrzne
        1. Dołączanie arkusza stylów przy użyciu znacznika HTML
        2. Dołączanie arkuszy stylów za pomocą kodu CSS
      5. Kurs: tworzenie pierwszego stylu
        1. Tworzenie stylu śródliniowego
        2. Tworzenie wewnętrznych arkuszy stylów
        3. Tworzenie zewnętrznego arkusza stylów
    3. 3. Selektory, czyli do czego odnoszą się style
      1. Selektory znaczników — style dla całej strony
      2. Selektor klasy — precyzyjna kontrola
      3. Selektor ID — unikalne elementy strony
      4. Nadawanie stylów grupom znaczników
        1. Grupowanie selektorów
        2. Selektor uniwersalny
      5. Stylizowanie znaczników zagnieżdżonych
        1. Drzewo rodzinne HTML
        2. Tworzenie selektorów potomka
        3. Tworzenie modułów
      6. Pseudoklasy i pseudoelementy
        1. Style odnośników
        2. Stylizowanie fragmentów akapitu
        3. Więcej pseudoklas i pseudoelementów
          1. Pseudoklasa :focus
          2. Pseudoelement :before
          3. Pseudoelement :after
          4. Pseudoelement ::selection
      7. Selektory atrybutu
        1. Selektor dziecka
          1. Pseudoklasa :first-child
          2. Pseudoelement :last-child
          3. Pseudoklasa :nth-child
        2. Selektory dziecka z uwzględnieniem typu elementu
          1. Pseudoklasa :first-of-type
          2. Pseudoklasa :last-of-type
          3. Pseudoklasa :nth-of-type
      8. Selektor brata
      9. Selektor :not()
      10. Kurs: selektory
        1. Tworzenie selektora grupowego
        2. Tworzenie i stosowanie selektora klasy
        3. Tworzenie selektora potomka
        4. Tworzenie i stosowanie selektora identyfikatora
        5. Ostatni szlif
    4. 4. Oszczędzanie czasu dzięki dziedziczeniu
      1. Czym jest dziedziczenie?
      2. Jak dziedziczenie upraszcza arkusze stylów
      3. Granice dziedziczenia
      4. Kurs: dziedziczenie
        1. Prosty przykład: dziedziczenie jednopoziomowe
        2. Wykorzystanie dziedziczenia do zmiany stylu całej strony
        3. Kiedy dziedziczenie nie działa
    5. 5. Zarządzanie wieloma stylami — kaskada
      1. Kaskadowość stylów
        1. Style dziedziczone mogą się kumulować
        2. Najbliższy przodek bierze górę
        3. Górę bierze styl bezpośredni
        4. Jeden znacznik, wiele stylów
      2. Precyzja: który styl weźmie górę
        1. Remis: wygrywa ostatni
      3. Kontrolowanie kaskady
        1. Zmienianie precyzji
        2. Wybiórcze przesłanianie
        3. Jak uniknąć wojny na precyzję
        4. Resetowanie stylów
      4. Kurs: kaskadowość w akcji
        1. Resetowanie stylów i definiowanie nowych
        2. Tworzenie stylu mieszanego
        3. Rozwiązywanie konfliktów
  4. II. Stosowanie CSS
    1. 6. Formatowanie tekstu
      1. Czcionki
        1. Wybór czcionki
          1. Czcionki szeryfowe
          2. Czcionki bezszeryfowe
          3. Czcionki nieproporcjonalne i zabawne
          4. Inne czcionki, które warto znać
      2. Stosowanie czcionek sieciowych
        1. Typy plików fontów
        2. Kwestie prawne dotyczące czcionek
        3. Gdzie szukać czcionek sieciowych
        4. Generowanie różnych formatów czcionek
        5. Dyrektywa @font-face
        6. Tworzenie stylów przy użyciu czcionek sieciowych
        7. Używanie wariantu pogrubionego i kursywy
          1. Łatwy sposób dodawania wariantów czcionek do stron
          2. Definiowanie wariantów czcionek zgodnie z przeglądarką Internet Explorer 8
        8. Usługa Google Fonts
        9. Znajdowanie i wybieranie czcionek
        10. Korzystanie z usługi Google Fonts
      3. Kolorowanie tekstu
        1. Notacja szesnastkowa
          1. System RGB
          2. System RGBA
        2. Systemy HSL i HSLA
      4. Zmiana rozmiaru pisma
        1. Stosowanie pikseli
        2. Stosowanie słów kluczowych, procentów i jednostki em
          1. Słowa kluczowe
          2. Wartości procentowe
          3. Jednostka em
      5. Formatowanie słów i liter
        1. Pogrubienie i kursywa
        2. Zamiana tekstu na wielkie litery
          1. Kapitaliki
        3. Dekorowanie tekstu
        4. Odstęp między wyrazami i literami
        5. Dodawanie cieni do tekstu
      6. Formatowanie całych akapitów
        1. Zmienianie odstępu między wierszami
          1. Odstęp między wierszami w pikselach, jednostkach em lub procentach
          2. Odstęp między wierszami w liczbach
        2. Wyrównywanie tekstu
        3. Wcinanie pierwszego wiersza i usuwanie marginesów
          1. Wcięcie pierwszego wiersza
          2. Kontrolowanie marginesów między akapitami
        4. Formatowanie pierwszej litery lub pierwszego wiersza akapitu
      7. Stylizowanie list
        1. Typy list
        2. Pozycjonowanie punktorów i numerów
        3. Punktory graficzne
      8. Kurs: formatowanie tekstu
        1. Ustawienia strony
        2. Formatowanie nagłówków i akapitów
        3. Formatowanie list
        4. Dostrajanie za pomocą klas
        5. Wykańczanie projektu
    2. 7. Marginesy, dopełnienie i obramowanie
      1. Istota modelu polowego
      2. Marginesy i dopełnienie
        1. Zapis skrótowy marginesów i dopełnienia
        2. Konflikty marginesów
        3. Likwidowanie odstępu za pomocą marginesów ujemnych
        4. Elementy śródliniowe, blokowe i inne
      3. Obramowanie
        1. Skrócony zapis właściwości obramowania
        2. Formatowanie poszczególnych krawędzi
      4. Kolorowanie tła
      5. Zaokrąglanie rogów
      6. Cienie elementów
      7. Określanie wysokości i szerokości
        1. Obliczanie rzeczywistych wymiarów pól
        2. Przedefiniowywanie wymiarów pól
        3. Kontrolowanie wycieków za pomocą własności overflow
        4. Określanie minimalnej szerokości i wysokości
      8. Elementy pływające
        1. Tła i obramowanie a elementy pływające
        2. Pływaków nie wpuszczamy
      9. Kurs: marginesy, tła i obramowanie
        1. Ustawianie tła i marginesów
        2. Ustawianie odstępów wokół znaczników
        3. Tworzenie paska bocznego
        4. O krok dalej
    3. 8. Umieszczanie grafiki na stronach WWW
      1. CSS i znacznik <img>
      2. Obrazy tła
      3. Kontrola sposobu powtarzania obrazu w tle
      4. Pozycjonowanie obrazu tła
        1. Słowa kluczowe
        2. Dokładne wartości
        3. Procenty
        4. Ustalanie położenia obrazu na sztywno
        5. Definiowanie początku i końca tła
        6. Skalowanie obrazów tła
      5. Własność zbiorcza background
      6. Ustawianie wielu obrazów w tle jednego elementu
      7. Stosowanie gradientów w tle
        1. Gradienty liniowe
          1. Stopniowanie gradientu
          2. Przedrostki i Internet Explorer
        2. Powtarzanie gradientów liniowych
        3. Gradienty promieniste
        4. Powtarzalne gradienty promieniste
      8. Tworzenie gradientów przy użyciu narzędzia ColorZilla
      9. Kurs: uatrakcyjnianie grafik
        1. Definiowanie obramowania obrazu
        2. Tworzenie galerii fotografii
        3. Dodawanie cieni
      10. Kurs: używanie obrazów tła
        1. Umieszczanie obrazu w tle strony
        2. Zastępowanie obramowania grafiką
        3. Używanie grafiki w listach punktowanych
        4. Uatrakcyjnianie paska bocznego
          1. Wyświetlenie zwoju w przeglądarce Internet Explorer 8
    4. 9. Upiększanie systemu nawigacji
      1. Wybieranie odnośników do stylizacji
        1. Poznaj stany odnośników
        2. Wybieranie określonych odnośników
          1. Grupowanie odnośników za pomocą selektorów potomków
      2. Stylizowanie odnośników
        1. Podkreślanie odnośników
        2. Tworzenie przycisku
        3. Używanie grafiki
      3. Tworzenie pasków nawigacji
        1. Używanie list nienumerowanych
        2. Pionowe paski nawigacji
        3. Poziome paski nawigacji
          1. Wykorzystanie deklaracji display: inline-block
          2. Użycie właściwości float dla poziomych pasków nawigacji
      4. Wczytywanie grafik tła odnośników z wyprzedzeniem
      5. Stylizowanie wybranych rodzajów odnośników
        1. Odnośniki do innych witryn
        2. Odnośniki do adresów e-mail
        3. Łącza do różnych typów plików
      6. Kurs: stylizowanie odnośników
        1. Podstawy formatowania odnośników
        2. Dodawanie obrazu tła do odnośnika
        3. Wyróżnianie różnych rodzajów odnośników
      7. Kurs: tworzenie paska nawigacji
        1. Dodawanie efektu rollover i tworzenie odnośników „Jesteś tutaj”
        2. Z pionowego w poziomy
    5. 10. Przekształcenia, przejścia i animacje CSS
      1. Przekształcenia
        1. Obracanie
        2. Skalowanie
        3. Przesuwanie
        4. Zniekształcanie
        5. Stosowanie wielu przekształceń naraz
        6. Punkt początkowy przekształcenia
      2. Przejścia
        1. Tworzenie przejść
        2. Kontrola czasu wykonywania animacji
        3. Opóźnianie początku przejścia
        4. Własność zbiorcza przejść
      3. Animacje
        1. Definiowanie klatek kluczowych
        2. Przypisywanie animacji do elementów
        3. Kontrola przebiegu animacji
        4. Kończenie animacji
        5. Własność zbiorcza do definiowania animacji
        6. Wstrzymywanie wykonywania animacji
        7. Animacje i pseudoklasa :hover
      4. Kurs
        1. Dodawanie animacji
    6. 11. Formatowanie tabel i formularzy
      1. Właściwy sposób używania tabel
      2. Stylizowanie tabel
        1. Dodawanie dopełnienia
        2. Ustawianie wyrównania w pionie i w poziomie
        3. Tworzenie obramowania
        4. Stylizowanie wierszy i kolumn
      3. Stylizowanie formularzy
        1. Elementy HTML formularzy
        2. Rozmieszczanie elementów formularza za pomocą CSS
      4. Kurs: stylizowanie tabeli
      5. Kurs: stylizowanie formularza
  5. III. Tworzenie układu strony za pomocą CSS
    1. 12. Wprowadzenie do układów stron
      1. Typy układów stron WWW
      2. Jak działa układ w CSS?
        1. Znacznik <div>
        2. Elementy sekcyjne HTML5
        3. Techniki rozmieszczania elementów na stronie
      3. Strategie planowania układu
        1. Zacznij od treści
        2. Przede wszystkim mobilność
        3. Rozpocznij od nakreślenia szkicu
        4. Zidentyfikuj pola treści
        5. Płyń z prądem
        6. Pamiętaj o obrazach w tle
        7. Fragmenty układanki
        8. Rozmieszczanie elementów warstwowo
        9. Pamiętaj o marginesach i dopełnieniu
    2. 13. Tworzenie układów opartych na elementach pływających
      1. Stosowanie elementów pływających w układach
        1. Używanie właściwości float dla wszystkich kolumn
        2. Elementy pływające wewnątrz elementów pływających
      2. Rozwiązywanie problemów z elementami pływającymi
        1. Czyszczenie i obejmowanie elementów pływających
        2. Tworzenie kolumn o pełnej wysokości
        3. Zapobieganie upadaniu elementów pływających
        4. Zastosowanie własności box-sizing
      3. Kurs: układy wielokolumnowe
        1. Strukturyzowanie HTML-a
        2. Tworzenie stylów układu
        3. Dodawanie kolejnej kolumny
        4. Dodawanie wolnej przestrzeni
        5. Ustawianie stałej szerokości
        6. Mieszanie układu płynnego ze stałym
    3. 14. Projektowanie elastycznych witryn (RWD)
      1. Podstawy techniki RWD
      2. Przystosowywanie strony do techniki RWD
      3. Zapytania o media
        1. Strategie użycia zapytań o media
        2. Definiowanie stopni układu
        3. Od czego zacząć
        4. Tworzenie zapytań o media
        5. Zapytania o media wewnątrz arkuszy stylów
        6. Podstawowa struktura arkusza stylów
        7. Najpierw urządzenia przenośne
      4. Elastyczne siatki
        1. Jak ważna jest kolejność elementów w kodzie HTML
        2. Resetowanie modelu polowego
        3. Zamienianie układu sztywnego w elastyczną siatkę
      5. Płynne obrazy
        1. Wady stosowania płynnych obrazów
        2. Filmy i animacje Flash
      6. Kurs stosowania techniki RWD
        1. Zmiana kolejności elementów HTML
        2. Płynne obrazy
        3. Definiowanie stylów dla tabletów
        4. Definiowanie stylów dla telefonów
    4. 15. Pozycjonowanie elementów na stronie WWW
      1. Jak działają właściwości pozycjonujące?
        1. Ustawianie wartości pozycjonujących
        2. Gdy pozycjonowanie bezwzględne jest względne
        3. Kiedy (i gdzie) używać pozycjonowania względnego?
        4. Stos elementów
        5. Ukrywanie fragmentów strony
      2. Użyteczne strategie pozycjonowania
        1. Pozycjonowanie wewnątrz elementu
        2. Wyłamywanie elementu poza blok
        3. Użycie stałego pozycjonowania do tworzenia ramek za pomocą stylów CSS
      3. Kurs: pozycjonowanie elementów strony
        1. Wzbogacanie banera strony
        2. Dodawanie podpisu do zdjęcia
  6. IV. Zaawansowany CSS
    1. 16. CSS dla strony przeznaczonej do wydruku
      1. Jak działają arkusze stylów dla mediów?
      2. Jak dodawać arkusze stylów przeznaczone dla mediów?
        1. Określanie typu medium dla zewnętrznego arkusza stylów
        2. Określanie typu medium w arkuszu stylów
      3. Tworzenie stylów dla wydruku
        1. Używanie deklaracji !important do przesłonięcia stylów ekranowych
        2. Zmiana stylów tekstu
        3. Stylizowanie tła dla wydruków
          1. Usuwanie elementów tła
          2. Pozostawianie elementów tła
        4. Ukrywanie niepotrzebnych obszarów strony
        5. Wstawianie podziałów stron w wydrukach
      4. Kurs: tworzenie arkusza stylów przeznaczonego dla wydruków
        1. Usuwanie niepotrzebnych elementów strony
        2. Dostosowywanie układu
        3. Zmiana formatowania tekstu
        4. Wyświetlanie URL
    2. 17. Dobre nawyki w CSS
      1. Wstawianie komentarzy
      2. Porządkowanie stylów i arkuszy stylów
        1. Jasno nazywaj style
          1. Nazywaj style według celu, a nie wyglądu
          2. Nie używaj nazw opartych na pozycjach
          3. Unikaj zagadkowych nazw
        2. Używanie kilku klas dla zaoszczędzenia czasu
        3. Grupuj style, aby utrzymać porządek w plikach
          1. Oddzielanie grup za pomocą komentarzy
        4. Korzystanie z wielu arkuszy stylów
      3. Usuwanie przeszkadzających stylów przeglądarki
      4. Wykorzystanie selektorów potomka
        1. Dzielenie stron na sekcje
        2. Zidentyfikuj treść właściwą dokumentu
      5. Dostarczanie kodu CSS tylko dla Internet Explorera
        1. Komentarze warunkowe dla różnych wersji Internet Explorera
  7. V. Dodatki
    1. A. Zestawienie właściwości CSS
      1. Wartości CSS
        1. Kolory
          1. Słowa kluczowe
          2. Wartości RGB
        2. Długości i rozmiary
          1. Piksele
          2. Jednostki em
          3. Procenty
        3. Słowa kluczowe
        4. Adresy URL
      2. Właściwości tekstu
        1. color (dziedziczona)
        2. font (dziedziczona)
        3. font-family (dziedziczona)
        4. font-size (dziedziczona)
        5. font-style (dziedziczona)
        6. font-variant (dziedziczona)
        7. font-weight (dziedziczona)
        8. letter-spacing (dziedziczona)
        9. line-height (dziedziczona)
        10. text-align (dziedziczona)
        11. text-decoration
        12. text-indent (dziedziczona)
        13. text-shadow (dziedziczona)
        14. text-transform (dziedziczona)
        15. vertical-align
        16. white-space
        17. word-spacing (dziedziczona)
      3. Właściwości list
        1. list-style (dziedziczona)
        2. list-style-image (dziedziczona)
        3. list-style-position (dziedziczona)
        4. list-style-type (dziedziczona)
      4. Dopełnienie, obramowania i marginesy
        1. box-shadow
        2. border
        3. border-radius
        4. border-top, border-right, border-bottom, border-left
        5. border-color
        6. border-top-color, border-right-color, border-bottom-color, border-left-color
        7. border-style
        8. border-top-style, border-right-style, border-bottom-style, border-left-style
        9. border-width
        10. border-top-width, border-right-width, border-bottom-width, border-left-width
        11. box-sizing
        12. outline-color
        13. outline-style
        14. outline-width
        15. padding
        16. padding-top
        17. padding-right
        18. padding-bottom
        19. padding-left
        20. margin
        21. margin-top
        22. margin-right
        23. margin-bottom
        24. margin-left
      5. Tła
        1. background
        2. background-attachment
        3. background-clip
        4. background-color
        5. background-image
        6. background-origin
        7. background-position
        8. background-repeat
        9. background-size
      6. Właściwości układu strony
        1. bottom
        2. clear
        3. clip
        4. display
        5. float
        6. height
        7. left
        8. max-height
        9. max-width
        10. min-height
        11. min-width
        12. overflow
        13. position
        14. right
        15. top
        16. visibility
        17. width
        18. z-index
      7. Własności animacji, przekształceń i przejść
        1. @keyframes
        2. animation
        3. animation-name
        4. animation-duration
        5. animation-timing-function
        6. animation-delay
        7. animation-iteration-count
        8. animation-direction
        9. animation-fill-mode
        10. animation-play-state
        11. transform
        12. transform-origin
        13. transition
        14. transition-property
        15. transition-duration
        16. transition-timing-function
        17. transition-delay
      8. Właściwości tabel
        1. border-collapse
        2. border-spacing
        3. caption-side
        4. empty-cells
        5. table-layout
      9. Pozostałe właściwości
        1. content
        2. cursor
        3. opacity
        4. orphans („sieroty”)
        5. page-break-after
        6. page-break-before
        7. page-break-inside
        8. widows
    2. B. Zasoby CSS
      1. Podręczniki
        1. World Wide Web Consortium (W3C)
        2. Książki
        3. Inne źródła online
      2. Pomoc dotycząca CSS
        1. Fora dyskusyjne
        2. Porady, sztuczki i wskazówki
      3. Nawigacja z CSS
        1. Kursy
        2. Przykłady
      4. Układy oparte na CSS
        1. Informacje o modelu polowym
        2. Przykłady układów
        3. Inne zasoby z układami
      5. Witryny pokazowe
      6. Książki na temat CSS
      7. Edytory CSS
        1. Windows i Macintosh
        2. Tylko Windows
        3. Tylko Macintosh
  8. Indeks
  9. Copyright