CSS od podszewki.pdf

(2487 KB) Pobierz
Tytuł oryginału: CSS in Depth
Tłumaczenie: Piotr Pilch
Projekt okładki: Studio Gravite / Olsztyn
Obarek, Pokoński, Pazdrijowski, Zaprucki
Materiały graficzne na okładce zostały wykorzystane za zgodą Shutterstock Images LLC.
ISBN: 978-83-283-4446-4
Original edition copyright © 2018 by Manning Publications Co.
All rights reserved.
Polish edition copyright © 2019 by HELION SA.
All rights reserved.
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording or by any information storage retrieval system,
without permission from the Publisher.
Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej
publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną,
fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje
naruszenie praw autorskich niniejszej publikacji.
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich
właścicieli.
Autor oraz Helion SA dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne
i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym
ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Helion SA nie ponoszą również żadnej
odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.
Helion SA
ul. Kościuszki 1c, 44-100 Gliwice
tel. 32 231 22 19, 32 230 98 63
e-mail:
helion@helion.pl
WWW:
http://helion.pl
(księgarnia internetowa, katalog książek)
Dodatkowe materiały do książki można znaleźć pod adresem:
ftp://ftp.helion.pl/przyklady/cssodp.zip
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/cssodp
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Printed in Poland.
•
Kup książkę
•
Poleć książkę
•
Oceń książkę
•
Księgarnia internetowa
•
Lubię to! » Nasza społeczność
Spis treści
Słowo wstępne
Przedmowa
Podziękowania
O książce
O autorze
11
13
15
17
21
C
ZĘŚĆ
I. P
RZEGLĄD PODSTAWOWYCH POJĘĆ
............................................ 23
Rozdział 1. Kaskada, specyficzność i dziedziczenie
1.1.
Kaskada
1.1.1.
Źródło
arkusza stylów
1.1.2.
Specyficzność
1.1.3.
Kolejność
źródłowa
1.1.4.
Dwie praktyczne zasady
1.2. Dziedziczenie
1.3. Wartości specjalne
1.3.1.
Użycie słowa kluczowego inherit
1.3.2.
Użycie słowa kluczowego initial
1.4. Właściwości skrócone
1.4.1.
Uważaj na właściwości skrócone przesłaniające „po cichu” inne style
1.4.2.
Kolejność wartości skróconych
Podsumowanie
25
26
29
31
36
39
40
42
42
43
44
45
46
48
Rozdział 2. Użycie jednostek względnych
2.1.
Siła jednostek względnych
2.1.1.
Walka o projekt „idealny co do piksela”
2.1.2.
Koniec projektów internetowych „idealnych co do piksela”
Jednostki em i rem
2.2.1.
Użycie wartości z jednostką em do definiowania rozmiaru czcionki
2.2.2.
Użycie jednostki rem do określania rozmiaru czcionki
Nie myśl w kategoriach pikseli
2.3.1.
Ustawianie rozsądnego domyślnego rozmiaru czcionki
2.3.2.
Zapewnianie elastyczności panelu
2.3.3.
Zmiana wielkości pojedynczego komponentu
Jednostki względne obszaru roboczego
2.4.1.
Użycie jednostki vw do określenia rozmiaru czcionki
2.4.2.
Użycie funkcji calc() do określenia rozmiaru czcionki
Liczby bezjednostkowe i właściwość line-height
49
50
50
50
52
53
57
59
60
62
63
65
67
67
68
2.2.
2.3.
2.4.
2.5.
Kup książkę
Poleć książkę
6
2.6.
S
PIS TREŚCI
Właściwości niestandardowe (inaczej — zmienne CSS)
2.6.1.
Dynamiczne zmienianie właściwości niestandardowych
2.6.2.
Zmiana właściwości niestandardowych za pomocą kodu JavaScript
2.6.3.
Eksperymentowanie z właściwościami niestandardowymi
Podsumowanie
70
72
74
75
76
Rozdział 3. Opanowanie modelu pudełkowego
3.1.
Trudności związane z szerokością elementów
3.1.1.
Unikanie liczb magicznych
3.1.2.
Dostosowywanie modelu pudełkowego
3.1.3.
Użycie metody uniwersalnego określania wymiarów dla wartości border-box
3.1.4.
Dodawanie przerwy między kolumnami
3.2. Trudności związane z wysokością elementu
3.2.1.
Kontrolowanie zachowania przepełnienia
3.2.2.
Stosowanie alternatywnych rozwiązań dla określania wysokości
na podstawie wartości procentowej
3.2.3.
Użycie właściwości min-height i max-height
3.2.4.
Środkowanie
zawartości w pionie
3.3. Marginesy ujemne
3.4. Załamywanie marginesów
3.4.1.
Załamywanie między tekstem
3.4.2.
Załamywanie wielu marginesów
3.4.3.
Załamywanie poza obrębem kontenera
3.5. Określanie odstępów dla elementów w obrębie kontenera
3.5.1.
Uwzględnienie zmieniającej się zawartości
3.5.2.
Tworzenie bardziej ogólnego rozwiązania: selektor „sowy po lobotomii”
Podsumowanie
77
78
81
81
83
84
86
86
87
92
92
94
95
95
96
97
99
101
102
105
C
ZĘŚĆ
II. O
PANOWANIE UKŁADU
..............................................................107
Rozdział 4. Użycie elementów pływających
4.1.
4.2.
Przeznaczenie elementów pływających
Załamywanie kontenera i technika clearfix
4.2.1.
Załamywanie kontenera
4.2.2.
Objaśnienie techniki clearfix
4.3. Nieoczekiwane „chwytanie elementu pływającego”
4.4. Obiekty mediów i konteksty formatowania bloku
4.4.1.
Ustanawianie kontekstu formatowania bloku
4.4.2.
Użycie kontekstu formatowania bloku na potrzeby układów obiektów
mediów
4.5. Systemy siatki
4.5.1.
System siatki
4.5.2.
Budowanie systemu siatki
4.5.3.
Dodawanie przerw
Podsumowanie
109
110
115
115
118
120
123
124
126
127
128
128
133
136
Kup książkę
Poleć książkę
S
PIS TREŚCI
7
Rozdział 5. Flexbox
Zasady modułu Flexbox
5.1.1.
Budowanie podstawowego menu opartego na module Flexbox
5.1.2.
Dodawanie wypełnienia i odstępów
5.2. Wymiary elementów elastycznych
5.2.1.
Użycie właściwości flex-basis
5.2.2.
Użycie właściwości flex-grow
5.2.3.
Użycie właściwości flex-shrink
5.2.4.
Kilka praktycznych zastosowań
5.3. Kierunek kontenera elastycznego
5.3.1.
Zmiana kierunku kontenera elastycznego
5.3.2.
Określanie stylów formularza logowania
5.4. Wyrównanie, odstępy i inne szczegóły
5.4.1.
Właściwości kontenera elastycznego
5.4.2.
Właściwości elementów elastycznych
5.4.3.
Użycie właściwości wyrównywania
5.5. Kilka rzeczy, których musisz być
świadomy
5.5.1.
Flexbugs
5.5.2.
Układ pełnej strony
Podsumowanie
5.1.
139
140
143
145
147
149
150
151
152
153
155
156
158
161
163
164
165
165
166
166
Rozdział 6. Układ siatki
6.1.
Układ witryny internetowej
6.1.1.
Budowanie podstawowej siatki
6.2. Anatomia siatki
6.2.1.
Numerowanie linii siatki
6.2.2.
Korzystanie jednoczesne z modułu Flexbox
6.3. Techniki alternatywne
6.3.1.
Nazwane linie siatki
6.3.2.
Nadawanie nazw obszarom siatki
6.4. Siatka jawna i niejawna
6.4.1.
Zapewnianie różnorodności
6.4.2.
Dostosowywanie elementów siatki w celu wypełnienia
ścieżki
siatki
6.5. Zapytania dotyczące właściwości
6.6. Wyrównanie
Podsumowanie
Pozycjonowanie ustalone
7.1.1.
Tworzenie modalnego okna dialogowego z pozycjonowaniem
ustalonym
7.1.2.
Kontrolowanie wielkości pozycjonowanych elementów
Pozycjonowanie bezwzględne
7.2.1.
Pozycjonowanie bezwzględne przycisku Zamknij
7.2.2.
Pozycjonowanie pseudoelementu
Pozycjonowanie względne
7.3.1.
Tworzenie menu rozwijanego
7.3.2.
Tworzenie trójkąta w standardzie CSS
169
170
171
173
178
180
183
183
185
187
191
194
196
200
202
Rozdział 7. Pozycjonowanie i konteksty stosu
7.1.
203
204
204
208
208
209
210
211
212
215
7.2.
7.3.
Kup książkę
Poleć książkę

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin