CSS służy do opisywania sposobu prezentowania treści internetowych wyświetlanych na ekranach, na potrzeby druku czy syntezatorów mowy. Jest obsługiwany przez wszystkie przeglądarki i urządzenia takie jak smartfony, komputery, gry wideo, telewizory, zegarki, kioski multimedialne czy konsole samochodowe. CSS pozwala zwiększyć wygodę użytkownika, przyspieszyć proces projektowania, uniknąć potencjalnych błędów, a także urozmaicić i ożywić aplikacje. Język ten wciąż się rozwija i od wielu lat stanowi niezbędny element warsztatu każdego profesjonalnego projektanta stron internetowych.
Ta książka to kompleksowy i zaktualizowany przewodnik po implementacji CSS. Zawiera obszerną analizę najnowszych specyfikacji CSS. Przedstawiono tu szereg istotnych zagadnień i wyrafinowanych technik stylizowania stron oraz poprawiania dostępności treści - wykorzystanie tych sposobów pomaga zaoszczędzić czas i wysiłek. Ta publikacja została napisana z myślą o profesjonalnych projektantach stron, niemniej jednak bardzo przyda się osobom, które zaczynają naukę CSS i chcą od razu wykorzystywać jego najlepsze cechy. Znalazł się tu szczegółowy opis wszystkich funkcji CSS powszechnie obsługiwanych przez przeglądarki, włączając w to również te funkcje, które w czasie pisania tej książki były przygotowywane do wprowadzenia.
Wybrane zagadnienia:
- Selektory, specyficzność i kaskada
- Właściwości tekstu, dopełnienia, marginesy, tła i gradienty
- Układy, w tym flexbox i grid
- Przekształcenia 2D i 3D, przejścia i animacje
- Filtry: mieszanie, przycinanie i maskowanie
- Media i zapytania o ich właściwości
CSS. Poznaj i stosuj najnowsze specyfikacje!
Rozdziały:
Przedmowa 19
1. CSS i dokumenty 27
- Krótka historia stylu (w internecie) 27
- Elementy 28
- Elementy zastępowane oraz niezastępowane 29
- Sposoby wyświetlania elementów 29
- Łączenie CSS i HTML 33
- Znacznik link 33
- Element style 38
- Dyrektywa @import 38
- Odwołania przez HTTP 39
- Style wewnętrzne 40
- Zawartość arkusza stylów 41
- Znaczniki 41
- Struktura reguł 41
- Prefiksy przeglądarek 42
- Obsługa białych znaków 42
- Komentarze CSS 44
- Zapytania o media 45
- Zastosowanie 45
- Proste zapytania o media 45
- Typy mediów 46
- Deskryptory mediów 46
- Deskryptory cech mediów i typy wartości 48
- Zapytania o właściwości 49
- Podsumowanie 52
2. Selektory 53
- Podstawowe reguły tworzenia stylów 53
- Selektory elementów 54
- Deklaracje oraz słowa kluczowe 55
- Grupowanie 57
- Grupowanie selektorów 57
- Grupowanie deklaracji 59
- Grupowanie wszystkiego 60
- Nowe elementy w starych przeglądarkach 61
- Selektory klas oraz identyfikatorów 62
- Selektory klas 62
- Wiele klas 64
- Selektory identyfikatorów 66
- Wybór pomiędzy klasą a identyfikatorem 66
- Selektory atrybutów 67
- Proste wybieranie atrybutów 68
- Wybieranie według dokładnej wartości atrybutu 69
- Wybieranie oparte na częściowej wartości atrybutu 71
- Identyfikator braku wrażliwości na wielkość znaków 75
- Wykorzystywanie struktury dokumentu 76
- Omówienie relacji pomiędzy elementami rodzica i dziecka 76
- Selektory kontekstowe 78
- Wybieranie elementów dzieci 81
- Wybieranie przylegających elementów rodzeństwa 82
- Wybieranie następnych elementów rodzeństwa 83
- Selektory pseudoklas 84
- Łączenie pseudoklas 85
- Pseudoklasy strukturalne 85
- Pseudoklasy dynamiczne 97
- Pseudoklasy obsługujące stan interfejsu 102
- Pseudoklasa :target 107
- Pseudoklasa :lang 108
- Pseudoklasa negacji 109
- Selektory pseudoelementów 112
- Podsumowanie 115
3. Specyficzność i kaskada 117
- Specyficzność 117
- Deklaracje oraz specyficzność 119
- Specyficzność selektora uniwersalnego 120
- Specyficzność selektorów identyfikatorów oraz atrybutów 120
- Specyficzność liniowych stylów wewnętrznych 121
- Ważność 121
- Dziedziczenie 122
- Kaskada 125
- Sortowanie według wagi oraz pochodzenia 126
- Sortowanie według specyficzności 127
- Sortowanie według kolejności 127
- Wskazówki prezentacyjne niezwiązane z CSS 130
- Podsumowanie 130
4. Wartości oraz jednostki 131
- Słowa kluczowe, łańcuchy znaków i inne wartości tekstowe 131
- Słowa kluczowe 131
- Łańcuchy znaków 134
- Adresy URL 135
- Obrazy 136
- Identyfikatory 136
- Wartości liczbowe i procentowe 137
- Wartości całkowite 137
- Wartości liczbowe 137
- Wartości procentowe 138
- Wartości ułamkowe 138
- Odległości 138
- Bezwzględne jednostki długości 138
- Jednostki rozdzielczości 141
- Względne jednostki długości 142
- Wartości obliczeniowe 147
- Wartości atrybutów 148
- Kolory 149
- Kolory nazwane 149
- Kolory RGB i RGBa 150
- Kolory HSL i HSLa 154
- Słowa kluczowe dotyczące kolorów 157
- Kąty 157
- Czas i częstotliwość 158
- Położenie 159
- Właściwości niestandardowe 160
5. Fonty 163
- Rodziny fontów 163
- Posługiwanie się rodzinami gatunkowymi 164
- Określanie rodziny fontów 165
- Zastosowanie deklaracji @font-face 168
- Wymagane deskryptory 168
- Inne deskryptory fontów 173
- Łączenie deskryptorów 176
- Grubość znaków 178
- Jak działają wagi fontów 179
- Pogrubianie 182
- Wagi lżejsze 184
- Deskryptor font-weight 184
- Rozmiar tekstu 185
- Rozmiary bezwzględne 186
- Rozmiary względne 188
- Wartości procentowe a rozmiary 188
- Rozmiar tekstu a dziedziczenie 189
- Używanie jednostek długości 192
- Automatyczne korygowanie wielkości znaków 193
- Style znaków 195
- Deskryptor font-style 197
- Rozciąganie znaków 198
- Deskryptor font-stretch 200
- Kerning znaków 201
- Warianty fontów 201
- Wartości ze specyfikacji Level 3 203
- Cechy fontów 204
- Deskryptor font-feature-settings 205
- Generowanie odmian znaków 206
- Właściwość font 207
- Uwzględnianie wysokości wiersza 209
- Poprawne wykorzystywanie skrótów 210
- Wykorzystywanie fontów systemowych 210
- Dobieranie fontów 211
- Podsumowanie 213
6. Właściwości tekstu 215
- Wcięcia oraz wyrównanie w linii 215
- Wcięcia tekstu 216
- Wyrównywanie tekstu 218
- Wyrównywanie ostatniego wiersza 222
- Wyrównywanie elementów liniowych w pionie 223
- Wysokość wiersza 223
- Wyrównanie tekstu w pionie 227
- Odstępy pomiędzy słowami oraz literami 232
- Odstępy między słowami 233
- Odstępy między literami 234
- Odstępy a wyrównanie 235
- Transformacja tekstu 236
- Dekoracja tekstu 238
- Właściwość text-rendering 241
- Cień tekstu 242
- Obsługa białych znaków 244
- Ustalanie wielkości tabulatorów 246
- Zawijanie wierszy i dzielenie słów 247
- Tryby pisania 253
- Ustawianie trybów pisania 253
- Zmiana orientacji tekstu 256
- Określanie kierunku 257
- Podsumowanie 259
7. Podstawowe formatowanie wizualne 261
- Podstawowe pojemniki 261
- Krótka powtórka 262
- Blok zawierający element 263
- Zmiana sposobu wyświetlania elementu 264
- Zamiana ról 265
- Elementy blokowe 267
- Formatowanie w poziomie 268
- Właściwości poziome 270
- Wykorzystywanie wartości auto 271
- Więcej niż jedna wartość auto 272
- Marginesy ujemne 273
- Wartości procentowe 275
- Elementy zastępowane 276
- Formatowanie w pionie 277
- Właściwości pionowe 278
- Wartości procentowe w pionie 279
- Wysokość automatyczna 280
- Składanie marginesów w pionie 281
- Marginesy ujemne a składanie 283
- Pozycje listy 285
- Liniowe elementy wewnętrzne 287
- Układ wierszy 287
- Podstawowe pojęcia i koncepcje 289
- Formatowanie wewnętrzne 291
- Niezastępowane elementy liniowe 292
- Budowanie pojemników 292
- Wyrównanie w pionie 294
- Zarządzanie wysokością wiersza 296
- Skalowanie wysokości wiersza 298
- Dodawanie właściwości pojemników 299
- Zmiana sposobu łamania wierszy 302
- Glify a obszar zawartości elementu 303
- Zastępowane elementy liniowe 303
- Dodawanie właściwości pojemnika 304
- Elementy zastępowane a linia bazowa 306
- Elementy liniowo-blokowe 308
- Wartości flow 310
- Deklaracja display: contents 311
- Inne wartości właściwości display 312
- Wartości wyliczone 312
- Podsumowanie 313
8. Dopełnienie, obramowanie, kontury i marginesy 315
- Podstawowe pojemniki elementów 315
- Szerokość oraz wysokość 316
- Dopełnienie 318
- Replikowanie wartości 320
- Dopełnienie jednostronne 321
- Dopełnienie a wartości procentowe 323
- Dopełnienie a elementy liniowe 325
- Dopełnienie elementów zastępowanych 326
- Obramowanie 327
- Obramowanie ze stylem 328
- Szerokości obramowania 332
- Kolory obramowania 335
- Skrótowe właściwości obramowania 337
- Obramowanie globalne 339
- Obramowanie i elementy liniowe 340
- Zaokrąglanie rogów obramowań 341
- Obramowania obrazkowe 348
- Kontury 364
- Style konturów 364
- Szerokość konturu 365
- Kolor konturu 366
- Różnice dotyczące konturów 367
- Marginesy 369
- Marginesy i wartości długości 370
- Marginesy i wartości procentowe 371
- Właściwości marginesów jednostronnych 372
- Składanie marginesów 372
- Marginesy ujemne 374
- Marginesy a elementy liniowe 375
- Podsumowanie 377
9. Kolory, tła i gradienty 379
- Kolory 379
- Kolory pierwszego planu 379
- Oddziaływanie na obramowanie 381
- Oddziaływanie na elementy formularzy 382
- Dziedziczenie koloru 383
- Tło 384
- Kolor tła 384
- Przycinanie tła 387
- Obrazy w tle 390
- Położenie tła 394
- Zmiana obszaru pozycjonowania tła 403
- Powielanie tła (albo brak powielania) 406
- Mocowanie 415
- Skalowanie obrazów w tle 419
- A teraz... wszystko naraz 426
- Wiele teł 429
- Gradienty 434
- Gradienty liniowe 435
- Gradienty kołowe 448
- Przetwarzanie obrazów gradientów 459
- Gradienty cykliczne 461
- Cienie pojemników 465
- Podsumowanie 468
10. Elementy pływające i kształty 469
- Pływanie 469
- Elementy pływające 470
- Pływanie - szczegóły 472
- Rzeczywiste zachowanie 478
- Pływanie, zawartość i nakładanie się 483
- Właściwość clear 484
- Kształty elementów pływających 488
- Tworzenie kształtu 488
- Kształtowanie na podstawie przezroczystości obrazu 499
- Dodawanie marginesu kształtu 500
- Podsumowanie 502
11. Pozycjonowanie 503
- Podstawowe koncepcje 503
- Typy pozycjonowania 503
- Blok zawierający 504
- Właściwości przesunięcia 505
- Szerokość oraz wysokość 508
- Ustawianie szerokości oraz wysokości 508
- Ograniczanie szerokości oraz wysokości 509
- Wypływanie oraz przycinanie zawartości 511
- Widoczność elementu 513
- Pozycjonowanie bezwzględne 514
- Bloki zawierające elementy a elementy pozycjonowane bezwzględnie 514
- Rozmieszczenie i rozmiar elementów pozycjonowanych bezwzględnie 517
- Automatyczne krawędzie 518
- Rozmieszczenie oraz rozmiar elementów niezastępowanych 520
- Rozmieszczenie oraz rozmiar elementów zastępowanych 524
- Rozmieszczenie elementów na osi Z 526
- Pozycjonowanie typu fixed 530
- Pozycjonowanie względne 531
- Pozycjonowanie typu sticky 533
- Podsumowanie 537
12. Model Flexible Box 539
- Podstawy modelu flexbox 539
- Pojemniki flex 545
- Właściwość flex-direction 545
- Inne kierunki pisania 549
- Zawijanie linii flex 551
- Definiowanie elastycznego układu treści 553
- Właściwość flex-wrap - ciąg dalszy 559
- Układanie obiektów flex 560
- Pojemnik flex 561
- Wyrównywanie treści 561
- Przykłady działania właściwości justify-content 567
- Wyrównywanie obiektów 568
- Wyrównanie do początku, do końca i do środka 573
- Wyrównanie do linii bazowej 574
- Uwagi dodatkowe 575
- Właściwość align-self 576
- Wyrównywanie treści 577
- Wartości space-between, space-around i space-evenly 581
- Obiekty flex 582
- Czym są obiekty flex? 582
- Cechy obiektów flex 584
- Szerokości minimalne 585
- Właściwości obiektów flex 587
- Właściwość flex 587
- Właściwość flex-grow 588
- Współczynniki wzrostu a właściwość flex 591
- Właściwość flex-shrink 594
- Proporcjonalne zwężanie obiektów na podstawie ich szerokości oraz współczynnika kurczenia 598
- Różne bazy flex 599
- Responsywna zmiana wielkości 601
- Właściwość flex-basis 604
- Słowo kluczowe content 604
- Automatyczna baza flex 606
- Wartości domyślne 607
- Jednostki długości 608
- Baza zerowa 612
- Skrótowa właściwość flex 613
- Typowe wartości właściwości flex 613
- Właściwość order 618
- Raz jeszcze o nawigacji zakładkowej 620
13. Układ siatkowy 623
- Tworzenie pojemnika siatki 623
- Podstawowa terminologia związana z siatkami 626
- Rozmieszczanie linii siatki 628
- Tory siatek o stałej szerokości 629
- Elastyczne tory siatek 633
- Dopasowywanie zawartości torów 640
- Powtarzanie linii siatki 642
- Obszary siatki 646
- Dołączanie obiektów do siatki 652
- Zastosowanie linii kolumn i rzędów 652
- Skrótowe właściwości rzędów i kolumn 656
- Siatka niejawna 659
- Obsługa błędów 661
- Zastosowanie obszarów 662
- Nakładanie się obiektów siatki 665
- Przepływ siatki 666
- Automatyczne linie siatki 671
- Skrótowa właściwość grid 673
- Tworzenie odstępów w siatkach 676
- Odstępy (przerwy) między torami 676
- Obiekty siatki a model pudełkowy 678
- Wyrównywanie i siatki 682
- Wyrównywanie i justowanie pojedynczych obiektów 683
- Wyrównywanie i justowanie wszystkich obiektów 685
- Warstwy i kolejność 687
- Podsumowanie 690
14. Układ tabelaryczny 691
- Formatowanie tabel 691
- Tworzenie wyglądu tabeli 691
- Wartości wyświetlania tabeli 693
- Anonimowe obiekty tabeli 697
- Warstwy tabeli 701
- Podpisy 702
- Obramowanie komórek tabeli 704
- Oddzielone obramowanie komórek tabeli 704
- Składanie obramowania komórek tabeli 707
- Rozmiar tabeli 712
- Szerokość 712
- Wysokość 718
- Wyrównanie 719
- Podsumowanie 721
15. Listy oraz zawartość generowana 723
- Listy 723
- Typy list 724
- Obrazkowe znaki wypunktowania 726
- Pozycja znaku wypunktowania listy 729
- Style listy w skrócie 730
- Układ listy 731
- Zawartość generowana 733
- Wstawianie zawartości generowanej 734
- Określanie zawartości 736
- Liczniki 741
- Definiowanie wzorców numerowania 747
- Stałe wzorce numerowania 749
- Cykliczne wzorce numerowania 751
- Symboliczne wzorce numerowania 754
- Alfabetyczne wzorce numerowania 757
- Liczbowe systemy numerowania 758
- Addytywne systemy numerowania 761
- Rozszerzanie wzorców numerowania 763
- Wymawianie wzorców numeracji 764
- Podsumowanie 766
16. Przekształcenia 767
- Układy współrzędnych 767
- Przekształcanie 771
- Funkcje przekształceń 774
- Więcej właściwości przekształceń 788
- Przesuwanie punktu początkowego 788
- Wybieranie stylu 3D 791
- Zmiana perspektywy 794
- Tylne ścianki 797
- Podsumowanie 799
17. Przejścia 801
- Przejścia CSS 801
- Właściwości przejść 802
- Ograniczanie rodzaju przejść do konkretnych właściwości 806
- Ustalanie czasu trwania przejścia 812
- Zmiana tempa przejść 814
- Opóźnianie przejść 819
- Skrótowa właściwość transition 822
- Na odwrót: przejście do początku 824
- Animowane właściwości i wartości 828
- Na czym polega interpolacja wartości właściwości? 829
- Wyjścia awaryjne: przejścia to tylko ozdobniki 832
- Drukowanie przejść 832
18. Animacje 835
- Definiowanie klatek kluczowych 836
- Konfigurowanie animacji na klatkach kluczowych 837
- Nadawanie nazwy animacji 837
- Selektory klatek kluczowych 838
- Pomijanie wartości from i to 839
- Powtarzanie właściwości klatek kluczowych 840
- Właściwości dające się animować 841
- Nieanimowane właściwości, które nie są ignorowane 842
- Zastosowanie skryptów w animacjach @keyframes 842
- Animowanie elementów 843
- Nazywanie animacji 844
- Definiowanie długości animacji 846
- Deklarowanie iteracji animacji 847
- Ustalanie kierunku animacji 849
- Opóźnianie animacji 850
- Zdarzenia związane z animacjami 852
- Zmiana wewnętrznego tempa animacji 860
- Ustawianie stanu odtwarzania animacji 871
- Tryby uzupełniania animacji 872
- I wszystko razem... 874
- Animacje, specyficzność i kolejność 877
- Specyficzność i dyrektywa !important 877
- Kolejność animacji 878
- Iterowanie animacji i reguła display: none 878
- Animacja i wątek UI 879
- Epilepsja i zaburzenia przedsionkowe 879
- Zdarzenia animacji a prefiksy 880
- Zdarzenie animationstart 880
- Zdarzenie animationend 881
- Zdarzenie animationiteration 881
- Drukowanie animacji 881
19. Filtry, mieszanie, przycinanie i maskowanie 883
- Filtry CSS 883
- Filtry podstawowe 884
- Filtrowanie kolorów 886
- Jasność, kontrast i nasycenie 887
- Filtry SVG 888
- Nakładanie i mieszanie 889
- Mieszanie elementów 890
- Przyciemnianie, rozjaśnianie, różnica i wykluczanie 891
- Mnożenie, ekran i nakładka 892
- Ostre i miękkie światło 893
- Rozjaśnianie i ściemnianie 894
- Barwa, nasycenie, jasność i kolor 895
- Mieszanie tła 896
- Przycinanie i maskowanie 900
- Przycinanie 900
- Kształty przycinające 902
- Pojemniki przycinające 902
- Reguły wypełniania kształtów przycinających 905
- Maski 906
- Definiowanie maski 907
- Zmiana trybu działania maski 909
- Skalowanie i powtarzanie masek 911
- Pozycjonowanie masek 912
- Przycinanie i łączenie masek 914
- Zbierzmy wszystko w całość... 917
- Rodzaje masek 919
- Maskowanie w obramowaniach obrazkowych 919
- Dopasowywanie i pozycjonowanie obiektu 920
20. Style zależne od medium 925
- Definiowanie stylów zależnych od medium 925
- Podstawowe zapytania o media 925
- Złożone zapytania o media 927
- Media stronicowe 934
- Podsumowanie 948
A. Właściwości animowane 949
B. Zestawienie właściwości 957
C. Tabela odpowiedników kolorów 967
