CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedyczny. Wydanie IV - ebook

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!

 

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
  • Dziwne dekoracje 239
• 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
  • Zawijanie tekstu 252
• 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
  • Wypływanie 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
  • Prosty przykład 541
• 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
  • Podsiatki 675
• 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
  • Mieszanie w izolacji 899
• 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
  • Style wydruków 935
• Podsumowanie 948

A. Właściwości animowane 949

B. Zestawienie właściwości 957

C. Tabela odpowiedników kolorów 967

Skorowidz 973