Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00240 006737 18968878 na godz. na dobę w sumie
CSS od podszewki - książka
CSS od podszewki - książka
Autor: Liczba stron: 480
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-4446-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook (-35%), audiobook).

W ostatnich latach CSS bardzo się rozwinął. Mimo że istnieje od kilku dekad, wciąż jest ważnym elementem warsztatu profesjonalnych projektantów stron internetowych. Co prawda przyswojenie podstaw CSS nie jest specjalnie trudne, ale osiągnięcie prawdziwej biegłości w korzystaniu z tego języka wymaga stałego uczenia się i ciągłych ćwiczeń. Trzeba dobrze zrozumieć wszystkie części kodu CSS, a także sposób, w jaki są do siebie dopasowane. Wysiłek włożony w doskonałe opanowanie języka szybko się zwróci: CSS pozwala zwiększyć wygodę użytkownika, przyspieszyć proces projektowania, uniknąć potencjalnych błędów, a także urozmaicić i ożywić aplikację.

Ta książka jest kompleksowym przewodnikiem po języku CSS dla osób na różnych poziomach biegłości w stosowaniu kaskadowych arkuszy stylów. Zawiera kluczowe informacje o podstawach języka, dzięki czemu będzie nieocenioną pomocą dla początkujących. Szczegółowo opisano tu również nowości i ulepszenia, które pojawiły się w języku na przestrzeni ostatnich kilku lat. Zaprezentowano także kwestie istotne dla zaawansowanych projektantów, takie jak organizacja kodu w sposób umożliwiający wielokrotne wykorzystywanie czy budowanie niezmiernie przydatnej w pracy zespołowej biblioteki wzorców. Sporo miejsca poświęcono technikom uzyskiwania efektów decydujących o atrakcyjnym i niepowtarzalnym wyglądzie aplikacji.

W tej książce między innymi:

CSS. Każda aplikacja może wyglądać pięknie!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

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ść Słowo wstępne Przedmowa Podziękowania O książce O autorze Spis treści 11 13 15 17 21 1.1.1. 1.1.2. 1.1.3. 1.1.4. 1.3.1. 1.3.2. 1.4.1. 1.4.2. Użycie słowa kluczowego inherit Użycie słowa kluczowego initial Źródło arkusza stylów Specyficzność Kolejność źródłowa Dwie praktyczne zasady Uważaj na właściwości skrócone przesłaniające „po cichu” inne style Kolejność wartości skróconych CZĘŚĆ I. PRZEGLĄD PODSTAWOWYCH POJĘĆ ............................................ 23 Rozdział 1. Kaskada, specyficzność i dziedziczenie 25 26 29 31 36 39 40 42 42 43 44 45 46 48 49 50 50 50 52 53 57 59 60 62 63 65 67 67 68 Siła jednostek względnych 2.1.1. Walka o projekt „idealny co do piksela” 2.1.2. Jednostki em i rem 2.2.1. 2.2.2. Użycie wartości z jednostką em do definiowania rozmiaru czcionki Użycie jednostki rem do określania rozmiaru czcionki Ustawianie rozsądnego domyślnego rozmiaru czcionki Zapewnianie elastyczności panelu Zmiana wielkości pojedynczego komponentu 2.3.1. 2.3.2. 2.3.3. Jednostki względne obszaru roboczego 2.4.1. 2.4.2. Użycie jednostki vw do określenia rozmiaru czcionki Użycie funkcji calc() do określenia rozmiaru czcionki Rozdział 2. Użycie jednostek względnych Koniec projektów internetowych „idealnych co do piksela” 2.5. Liczby bezjednostkowe i właściwość line-height 2.3. Nie myśl w kategoriach pikseli 1.1. Kaskada 1.2. Dziedziczenie 1.3. Wartości specjalne 1.4. Właściwości skrócone Podsumowanie 2.1. 2.2. 2.4. Poleć książkęKup książkę 6 SPIS TREŚCI 2.6. Właściwości niestandardowe (inaczej — zmienne CSS) 2.6.1. 2.6.2. 2.6.3. Dynamiczne zmienianie właściwości niestandardowych Zmiana właściwości niestandardowych za pomocą kodu JavaScript Eksperymentowanie z właściwościami niestandardowymi Podsumowanie Rozdział 3. Opanowanie modelu pudełkowego 3.1. 3.2. Unikanie liczb magicznych Dostosowywanie modelu pudełkowego Użycie metody uniwersalnego określania wymiarów dla wartości border-box Dodawanie przerwy między kolumnami Trudności związane z szerokością elementów 3.1.1. 3.1.2. 3.1.3. 3.1.4. Trudności związane z wysokością elementu 3.2.1. 3.2.2. Kontrolowanie zachowania przepełnienia Stosowanie alternatywnych rozwiązań dla określania wysokości na podstawie wartości procentowej Użycie właściwości min-height i max-height Środkowanie zawartości w pionie 3.2.3. 3.2.4. 3.3. Marginesy ujemne 3.4. Załamywanie marginesów 3.4.1. 3.4.2. 3.4.3. Załamywanie między tekstem Załamywanie wielu marginesów Załamywanie poza obrębem kontenera 3.5. Określanie odstępów dla elementów w obrębie kontenera 3.5.1. 3.5.2. Uwzględnienie zmieniającej się zawartości Tworzenie bardziej ogólnego rozwiązania: selektor „sowy po lobotomii” Podsumowanie 70 72 74 75 76 77 78 81 81 83 84 86 86 87 92 92 94 95 95 96 97 99 101 102 105 4.1. 4.2. CZĘŚĆ II. OPANOWANIE UKŁADU..............................................................107 Rozdział 4. Użycie elementów pływających 109 110 Przeznaczenie elementów pływających 115 Załamywanie kontenera i technika clearfix 115 4.2.1. 4.2.2. 118 120 123 124 4.3. Nieoczekiwane „chwytanie elementu pływającego” 4.4. Obiekty mediów i konteksty formatowania bloku Załamywanie kontenera Objaśnienie techniki clearfix Ustanawianie kontekstu formatowania bloku Użycie kontekstu formatowania bloku na potrzeby układów obiektów mediów 4.4.1. 4.4.2. 4.5. Systemy siatki 4.5.1. 4.5.2. 4.5.3. System siatki Budowanie systemu siatki Dodawanie przerw Podsumowanie 126 127 128 128 133 136 Poleć książkęKup książkę SPIS TREŚCI 7 Rozdział 5. Flexbox 5.1. Zasady modułu Flexbox 5.1.1. 5.1.2. Budowanie podstawowego menu opartego na module Flexbox Dodawanie wypełnienia i odstępów 5.2. Wymiary elementów elastycznych 5.2.1. 5.2.2. 5.2.3. 5.2.4. 5.3.1. 5.3.2. Użycie właściwości flex-basis Użycie właściwości flex-grow Użycie właściwości flex-shrink Kilka praktycznych zastosowań 5.3. Kierunek kontenera elastycznego Zmiana kierunku kontenera elastycznego 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. 5.5.2. Podsumowanie Flexbugs Układ pełnej strony Rozdział 6. Układ siatki 6.1. Układ witryny internetowej 6.1.1. Budowanie podstawowej siatki 6.2. Anatomia siatki Numerowanie linii siatki Korzystanie jednoczesne z modułu Flexbox 6.2.1. 6.2.2. Techniki alternatywne 6.3.1. 6.3.2. Siatka jawna i niejawna 6.4.1. 6.4.2. Zapytania dotyczące właściwości Nazwane linie siatki Nadawanie nazw obszarom siatki Zapewnianie różnorodności Dostosowywanie elementów siatki w celu wypełnienia ścieżki siatki 139 140 143 145 147 149 150 151 152 153 155 156 158 161 163 164 165 165 166 166 169 170 171 173 178 180 183 183 185 187 191 194 196 200 202 203 204 204 208 208 209 210 211 212 215 6.3. 6.4. 7.1. 7.2. 7.3. 6.5. 6.6. Wyrównanie Podsumowanie Rozdział 7. Pozycjonowanie i konteksty stosu Tworzenie modalnego okna dialogowego z pozycjonowaniem ustalonym Kontrolowanie wielkości pozycjonowanych elementów Pozycjonowanie ustalone 7.1.1. 7.1.2. Pozycjonowanie bezwzględne 7.2.1. 7.2.2. Pozycjonowanie względne 7.3.1. 7.3.2. Pozycjonowanie bezwzględne przycisku Zamknij Pozycjonowanie pseudoelementu Tworzenie menu rozwijanego Tworzenie trójkąta w standardzie CSS Poleć książkęKup książkę 8 SPIS TREŚCI 7.4. Konteksty stosu i właściwość z-index Proces renderowania i kolejność na stosie 7.4.1. 7.4.2. Modyfikowanie kolejności na stosie za pomocą właściwości z-index 7.4.3. Pozycjonowanie sticky Konteksty stosu 7.5. Podsumowanie Rozdział 8. Projekt elastyczny 8.1. Najpierw urządzenia przenośne 8.2. Tworzenie menu dla urządzeń przenośnych Dodawanie metaznacznika obszaru roboczego 8.1.1. 8.1.2. Zapytania dotyczące mediów 8.2.1. 8.2.2. 8.2.3. Typy zapytania dotyczącego mediów Dodawanie punktów zmian do strony Dodawanie kolumn elastycznych 8.3. Układy płynne 8.4. Obrazy elastyczne 8.3.1. 8.3.2. 8.4.1. 8.4.2. Podsumowanie Dodawanie stylów dla punktu zmian powiązanego z dużymi ekranami Obsługa tabel Użycie wielu obrazów pod kątem różnych wielkości obszaru roboczego Zastosowanie atrybutu srcset do udostępniania właściwego obrazu 217 218 220 220 224 227 229 231 237 241 242 244 245 249 252 253 254 256 256 257 258 9.1. 9.2. 9.3.1. 9.3.2. 9.3. Moduły będące częścią większych struktur Rozdzielanie wielu odpowiedzialności między moduły Nadawanie nazw modułom 9.4. Klasy narzędziowe 9.5. Metody związane ze standardem CSS Podsumowanie Style podstawowe: przygotowanie fundamentu Prosty moduł 9.2.1. Warianty modułu 9.2.2. Moduły z wieloma elementami CZĘŚĆ III. UŻYCIE CSS NA DUŻĄ SKALĘ...................................................259 261 Rozdział 9. Modularny kod CSS 263 264 265 269 272 273 277 278 279 281 283 284 285 287 291 293 294 296 298 298 300 306 10.1.1. Konfigurowanie narzędzia KSS 10.1.2. Tworzenie dokumentacji narzędzia KSS 10.1.3. Dokumentowanie wariantów modułu 10.1.4. Tworzenie strony przeglądu 10.1.5. Dokumentowanie modułów wymagających kodu JavaScript 10.1.6. Organizowanie biblioteki wzorców za pomocą sekcji 10.2.1. Użycie metody przepływu zadań „najpierw CSS” 10.2.2. Użycie biblioteki wzorców jako interfejsu API 10.2. Zmiana sposobu tworzenia kodu CSS Rozdział 10. Biblioteki wzorców 10.1. Wprowadzenie do narzędzia KSS Podsumowanie Poleć książkęKup książkę SPIS TREŚCI 9 11.3. Tryby mieszania 11.1. Gradienty 11.2. Cienie 11.1.1. Użycie wielu „przystanków” kolorów 11.1.2. Użycie gradientów promienistych Podsumowanie Rozdział 12. Kontrast, kolor i odstępy 12.1. Kontrast ponad wszystko 12.1.1. Definiowanie wzorców 12.1.2. 12.2. Kolor Implementowanie projektu 11.3.1. Kolorowanie obrazu 11.3.2. Typy trybu mieszania 11.3.3. Dodawanie tekstury do obrazu 11.3.4. Użycie właściwości mix-blend-mode 11.2.1. Definiowanie głębi za pomocą gradientów i cieni 11.2.2. Tworzenie elementów z wykorzystaniem projektowania płaskiego 11.2.3. Tworzenie przycisków o nowocześniejszym wyglądzie CZĘŚĆ IV. ZAGADNIENIA ZAAWANSOWANE.............................................. 307 309 Rozdział 11. Tła, cienie i tryby mieszania 310 313 315 317 318 320 321 322 324 325 326 328 330 331 332 334 335 336 343 347 349 351 351 354 357 359 361 363 364 368 369 370 371 372 374 378 380 381 383 384 12.2.1. Notacje kolorów 12.2.2. Dodawanie nowych kolorów do palety 12.2.3. Uwzględnianie kontrastu w wypadku kolorów czcionek 13.5.1. Użycie biblioteki Font Face Observer 13.5.2. Wariant awaryjny w postaci czcionek systemowych Przygotowanie do użycia właściwości font-display 13.5.3. 13.1. Czcionki dla stron internetowych 13.2. Czcionki firmy Google 13.3. Zasady działania zestawu reguły @font-face 13.3.1. 13.3.2. Wiele wariantów tego samego kroju czcionki Formaty czcionek i warianty zapasowe 13.4. Dostosowywanie odstępów w celu zwiększenia czytelności 13.4.1. Odstępy w obrębie treści głównej 13.4.2. Nagłówki, niewielkie elementy i odstępy 13.5. Budzące postrach zdarzenia FOUT i FOIT 12.3.1. Użycie jednostki em albo jednostki px 12.3.2. Uwzględnianie wysokości wierszy 12.3.3. Określanie odstępów dla elementów liniowych 12.3. Odstępy Podsumowanie Rozdział 13. Typografia Podsumowanie Poleć książkęKup książkę 10 SPIS TREŚCI Rozdział 14. Przejścia 14.1. Z jednego w drugie 14.2. Funkcje synchronizacji czasu 14.2.1. Krzywe Béziera 14.2.2. Kroki 14.3. Właściwości nieumożliwiające użycia animacji 14.3.1. Właściwości, które nie mogą być animowane 14.3.2. Rozjaśnianie i ściemnianie 14.4. Użycie przejścia dla właściwości height o wartości auto Podsumowanie Rozdział 15. Transformacje 15.1. Obracanie, przesuwanie, skalowanie i wypaczanie 15.1.1. 15.1.2. Zmiana źródła transformacji Stosowanie wielu transformacji 15.2. Transformacje związane z ruchem Skalowanie ikony w górę 15.2.1. 15.2.2. Tworzenie „przylatujących” etykiet 15.2.3. Rozkładanie przejść w czasie 15.3. Wydajność animacji 15.3.1. Analiza potoku renderowania 15.4. Transformacje trójwymiarowe (3D) 15.4.1. Kontrolowanie perspektywy 15.4.2. Implementowanie zaawansowanych transformacji 3D Podsumowanie Rozdział 16. Animacje 16.1. Klatki kluczowe 16.2. Animowanie transformacji trójwymiarowych 16.2.1. Budowanie układu bez animacji 16.2.2. Dodawanie animacji do układu 16.3. Opóźnienie animacji i tryb wypełniania 16.4. Przekazywanie znaczenia za pośrednictwem animacji 16.4.1. Reagowanie na interakcję użytkownika 16.4.2. Zwracanie uwagi użytkownika 16.5. Jeszcze jedna rada Podsumowanie Dodatek A. Zestawienie selektorów Dodatek B. Preprocesory Skorowidz 387 388 390 392 394 395 398 399 401 403 405 406 408 409 410 415 418 420 422 422 424 425 428 430 431 432 434 435 440 442 444 445 448 451 452 453 459 473 Poleć książkęKup książkę Kaskada, specyficzność i dziedziczenie W rozdziale omówiono następujące zagadnienia:  Cztery części tworzące kaskadę.  Różnica między kaskadą a dziedziczeniem.  Kontrolowanie tego, jakie style są stosowane dla jakich elementów.  Powszechne nieporozumienia związane z deklaracjami skróconymi. Kaskadowe arkusze stylów CSS (ang. Cascading Style Sheets) nie przypominają wielu rzeczy ze świata projektowania oprogramowania. Mówiąc wprost, nie jest to język pro- gramowania, ale wymaga myślenia abstrakcyjnego. Nie jest to klasyczne narzędzie do projektowania, ale wymaga trochę kreatywności. CSS zapewnia pozornie prostą skład- nię deklaratywną, lecz jeśli miałeś z nią do czynienia w dowolnych dużych projektach, to wiesz, że może osiągnąć utrudniającą pracę złożoność. Gdy musisz dowiedzieć się, jak coś zrobić w wypadku tradycyjnego języka progra- mowania, zwykle możesz określić, czego szukać (formułując na przykład pytanie „Jak znajdę w tablicy elementy typu x?”). W CSS zawężenie problemu do postaci poje- dynczego pytania nie zawsze jest proste. Nawet wtedy gdy to się uda, odpowiedź na pytanie często brzmi: „To zależy”. Najlepszym sposobem na uzyskanie czegoś jest czę- sto uzależnienie tego od konkretnych ograniczeń, a także od tego, jak dokładnie mają być obsługiwane różne skrajne przypadki. Poleć książkęKup książkę 26 ROZDZIAŁ 1. Kaskada, specyficzność i dziedziczenie Choć pomocna jest znajomość kilku „sztuczek” lub przydatnych procedur, z których możesz skorzystać, opanowanie CSS wymaga zrozumienia zasad umożliwiających takie praktyki. Książka ta jest pełna przykładów, ale przede wszystkim prezentuje zasady. W części pierwszej omówiono najpierw najbardziej fundamentalne zasady języka: kaskadę, model pudełkowy oraz szeroką gamę dostępnych typów jednostek. Większo- ści projektantów witryn internetowych znane są kaskada i model pudełkowy. Nie są im obce jednostki pikselowe, a być może słyszeli o tym, że „zamiast nich powinni używać jednostki em”. Prawdę powiedziawszy, z zagadnieniami tymi związanych jest mnóstwo informacji, a pobieżne zaznajomienie się z nimi spowoduje, że nie zrobisz większych postępów. Jeśli w ogóle zamierzasz opanować CSS, musisz najpierw poznać podstawy, i to dogłębnie. Wiem, że jesteś podekscytowany faktem rozpoczęcia poznawania tego, co CSS ma najnowszego i najlepszego do zaoferowania. Jest to ekscytująca sprawa. Najpierw jed- nak powrócimy do podstaw. Dokonam ich szybkiego przeglądu (prawdopodobnie jesteś już z nimi zaznajomiony), a następnie zagłębię się w każde zagadnienie. Moim celem jest wzmocnienie fundamentu, na którym spoczywa reszta elementów języka CSS. W rozdziale zaczniemy od litery C w skrócie CSS, która to litera reprezentuje kaskadę. Dokładnie wyjaśnię, jakie jest jej działanie, po czym przybliżę, w jaki sposób wykorzy- stać ją praktycznie. Dalej zajmiemy się powiązanym z kaskadą zagadnieniem, czyli dzie- dziczeniem. Po wyjaśnieniu tego zagadnienia przejdziemy do właściwości skróconych oraz związanych z nimi powszechnych nieporozumień. Wszystkie te zagadnienia dotyczą stosowania żądanych stylów dla wybranych ele- mentów. Istnieje wiele „pułapek”, w które często wpadają projektanci. Właściwe zrozu- mienie tych pojęć da lepszą kontrolę nad tym, aby kod CSS działał zgodnie z naszymi wymaganiami. Przy odrobinie szczęścia bardziej docenisz też fakt korzystania z CSS, a nawet będzie to sprawiać Ci satysfakcję. 1.1. Kaskada Zasadniczo CSS dotyczy deklarowania reguł: w różnych okolicznościach oczekujemy wystąpienia określonych zdarzeń. Jeśli dana klasa zostanie dodana do danego elementu, mają zostać zastosowane dane style. Jeśli element X jest elementem podrzędnym ele- mentu Y, mają zostać użyte dane style. Przeglądarka korzysta następnie z tych reguł, określa miejsca, w których mają zastosowanie konkretne reguły, a także używa ich do renderowania strony. Gdy przyjrzysz się niewielkim przykładom, proces ten okaże się raczej prosty. Jeśli jednak utworzony arkusz stylów powiększy się albo zwiększy się liczba stron, dla któ- rych jest on stosowany, zaskakująco szybko kod może stać się złożony. W CSS dostęp- nych jest często kilka sposobów osiągnięcia tego samego. Zależnie od tego, jakie rozwią- zanie zastosujesz, możesz uzyskać zupełnie odmienne wyniki, gdy zmienia się struktura stron HTML lub gdy style są stosowane względem różnych stron. Kluczowa część pro- cesu projektowania z użyciem CSS sprowadza się do tworzenia reguł w taki sposób, aby były przewidywalne. Poleć książkęKup książkę 1.1. Kaskada 27 Pierwszym krokiem do tego jest zrozumienie, jak dokładnie przeglądarka korzysta z reguł. Każda reguła sama w sobie może być jasna, ale co się dzieje, gdy dwie reguły powodują konflikt informacji dotyczących sposobu użycia stylu dla elementu? Możesz stwierdzić, że jedna z reguł nie działa zgodnie z oczekiwaniami, ponieważ kolejna reguła powoduje z nią konflikt. By móc przewidywać sposób zachowania reguł, trzeba zrozumieć kaskadę. Aby to zilustrować, zostanie zbudowany prosty nagłówek strony podobny do tego, jaki możesz ujrzeć u góry przedstawionej strony internetowej (rysunek 1.1). Nagłówek zawiera tytuł strony umiejscowiony ponad zestawem turkusowych odnośników nawigacji. Ostatni odnośnik ma kolor pomarańczowy, żeby móc go wyróżnić jako coś w rodzaju specjalnego odnośnika. Rysunek 1.1. Nagłówek strony i odnośniki nawigacji W trakcie tworzenia tego nagłówka strony prawdopodobnie stwierdzisz, że jesteś zazna- jomiony z większością użytego kodu CSS. Dzięki temu możliwe będzie skoncentro- wanie się na aspektach arkuszy stylów CSS, które możesz uważać za oczywiste lub uznawać za tylko częściowo zrozumiałe. Aby zacząć, utwórz dokument HTML i arkusz stylów o nazwie styles.css. Do doku- mentu dodaj kod z listingu 1.1. Listing 1.1. Kod znaczników nagłówka strony !doctype html head link href= styles.css rel= stylesheet type= text/css / /head body header class= page-header h1 id= page-title class= title Wypalacze kawy Wombat /h1 nav ul id= main-nav class= nav li a href= / Strona główna /a /li li a href= /coffees Kawy /a /li li a href= /brewers Kawiarki /a /li li a href= /specials class= featured Promocje /a /li /ul /nav /header /body Lista odnośników nawigacji. Tytuł strony. Wyróżniony odnośnik. UWAGA Repozytorium zawierające wszystkie kody z listingów zamieszczonych w książce jest dostępne do pobrania pod adresem ftp://ftp.helion.pl/przyklady/cssodp.zip. Repozy- torium to uwzględnia cały osadzony kod CSS wraz z powiązanym kodem HTML znajdującym się w zestawie plików HTML. Gdy dwie lub większa liczba reguł dotyczy tego samego elementu na stronie, mogą one powodować wystąpienie deklaracji wywołujących konflikt. Taką sytuację prezentuje listing 1.2. Zawiera on trzy zestawy reguł, z których każdy określa inny styl czcionki Poleć książkęKup książkę 28 ROZDZIAŁ 1. Kaskada, specyficzność i dziedziczenie dla tytułu strony. W tytule nie można jednocześnie używać trzech różnych czcionek. Która z nich zostanie wybrana? Aby się o tym przekonać, do pliku CSS dodaj kod z poniższego listingu. Listing 1.2. Deklaracje wywołujące konflikt h1 { font-family: serif; } #page-title { font-family: sans-serif; } .title { font-family: monospace; } Selektor znacznika (lub typu). Selektor identyfikatora. Selektor klasy. Zestawy reguł z deklaracjami wywołującymi konflikt mogą występować jeden po dru- gim albo mogą być rozrzucone w obrębie arkusza stylów. W każdym wariancie z punktu widzenia użytego kodu HTML wszystkie dotyczą tego samego elementu. Wszystkie trzy zestawy reguł próbują ustawić dla nagłówka inną rodzinę czcionek. Która z nich zwycięży? Aby uzyskać odpowiedź, przeglądarka postępuje zgodnie z zestawem reguł, dlatego wynik jest przewidywalny. W tym wypadku reguły dyktują, że zwycięzcą jest druga deklaracja z selektorem identyfikatora. Tytuł uzyska czcionkę sans-serif (rysunek 1.2). Rysunek 1.2. Selektor identyfikatora zwycięża z innymi zestawami reguł, zapewniając dla tytułu czcionkę sans-serif Kaskada to nazwa reprezentująca taki zestaw reguł. Określa ona sposób rozwiązywania konfliktów, a ponadto stanowi fundamentalną część decydującą o działaniu arkuszy sty- lów CSS. Choć najbardziej doświadczeni projektanci mają ogólną orientację w kwe- stii kaskady, jej elementy są czasami źle rozumiane. Rozłóżmy kaskadę. W momencie wystąpienia konfliktu między deklaracjami w celu określenia różnicy między nimi kaskada bierze pod uwagę następujące trzy kwestie: 1. Pochodzenie arkusza stylów. Miejsce, z którego pochodzą style. Użyte style są stosowane w połączeniu ze stylami domyślnymi przeglądarki. 2. Specyficzność selektorów. Określanie, jakie selektory mają pierwszeństwo wzglę- dem innych. 3. Kolejność źródłowa. Kolejność, w jakiej style są deklarowane w arkuszu stylów. Reguły kaskady są uwzględniane w powyższej kolejności. Na rysunku 1.3 pokazano, jak są one stosowane na wyższym poziomie. Reguły te umożliwiają przeglądarkom przewidywalne działanie przy rozwiązywaniu dowolnej niejednoznaczności w kodzie CSS. Omówmy po kolei każdą z reguł. Poleć książkęKup książkę 1.1. Kaskada 29 Rysunek 1.3. Ogólny diagram kaskady prezentujący pierwszeństwo deklaracji Szybki przegląd terminologii Zależnie od tego, gdzie poznawałeś CSS, możesz nie być zaznajomiony z wszystkimi nazwami różnych elementów składni CSS. Nie będę rozwijać tej kwestii, ale ponieważ terminów tych będę używał w książce, najlepiej, aby ich znaczenie było oczywiste. Poniżej podano wiersz kodu CSS. Nosi on nazwę deklaracji. Składa się ona z właści- wości (color) i wartości (black): color: black; Właściwości nie należy mylić z atrybutami, które są częścią składni języka HTML. Na przy- kład w elemencie a href=”/” href jest to atrybut znacznika a. Grupa deklaracji wewnątrz nawiasów klamrowych nosi nazwę bloku deklaracji. Blok ten jest poprzedzony selektorem (w tym wypadku body): body { color: black; font-family: Helvetica; } Selektor i blok deklaracji są razem określane mianem zestawu reguł. I wreszcie, specyficzne reguły (ang. at-rules) to konstrukcje językowe rozpoczynające się od symbolu @, takie jak reguły @import lub zapytania @media. 1.1.1. Źródło arkusza stylów Arkusze stylów, które dodajesz do strony internetowej, nie są jedynymi, jakie stosuje przeglądarka. Istnieją różne typy lub źródła arkuszy stylów. Twoje style są nazywane stylami autora. Dostępne są też style agenta użytkownika, które są domyślnymi sty- lami przeglądarki. Style te mają niższy priorytet, dlatego zostaną przesłonięte przez użyte style. UWAGA Niektóre przeglądarki pozwalają użytkownikom zdefiniować arkusz stylów użyt- kownika. Jest to traktowane jako trzecie źródło, z priorytetem umiejscowionym między prio- rytetami stylów agenta użytkownika i stylów autora. Style użytkownika są rzadko stosowane i nie masz nad nimi kontroli, dlatego dla uproszczenia z nich zrezygnowałem. Style agenta użytkownika różnią się nieznacznie w poszczególnych przeglądarkach, ale zasadniczo realizują to samo: nagłówki (od h1 do h6 ) i akapity ( p ) uzyskują górny i dolny margines, listy ( ol i ul ) otrzymują lewe wypełnienie, a ponadto ustawiane są kolory odnośników i domyślne rozmiary czcionek. Poleć książkęKup książkę 30 ROZDZIAŁ 1. Kaskada, specyficzność i dziedziczenie STYLE AGENTA UŻYTKOWNIKA Przyjrzyjmy się ponownie przykładowej stronie (rysunek 1.4). Czcionka tytułu to sans- -serif z powodu dodanych stylów. Style agenta użytkownika określają kilka innych rze- czy: lista ma lewe wypełnienie, a także właściwość list-style-type o wartości disc w celu utworzenia punktorów. Odnośniki są niebieskie i podkreślone. Nagłówek i lista mają górny i dolny margines. Rysunek 1.4. Style agenta użytkownika ustawione domyślnie dla nagłówka strony internetowej Po uwzględnieniu stylów agenta użytkownika przeglądarka stosuje Twoje style, czyli style autora. Umożliwia to deklaracjom określonym przez Ciebie przesłonięcie tych ustawionych przez arkusz stylów agenta użytkownika. Jeśli w kodzie HTML dodasz odnośnik do kilku arkuszy stylów, wszystkie one będą mieć to samo źródło, czyli autora. Style agenta użytkownika ustawiają to, czego zwykle wymagasz, dlatego nie wyko- nają niczego zupełnie nieoczekiwanego. Jeśli nie spodoba Ci się to, co zrobią z okre- śloną właściwością, możesz ustawić dla niej własną wartość w arkuszu stylów. Zróbmy to teraz. Możesz przesłonić wybrane style agenta użytkownika, które nie są Ci potrzebne. W efekcie strona będzie wyglądać jak na rysunku 1.5. Rysunek 1.5. Style autora przesłaniają style agenta użytkownika, ponieważ mają wyższy priorytet W listingu 1.3 usunąłem powodujące konflikt deklaracje rodziny czcionek z wcześniej- szego przykładu i dodałem nowe deklaracje w celu ustawienia kolorów, a także przesło- nięcia marginesów agenta użytkownika oraz wypełnienia listy i punktorów. Zmodyfikuj arkusz stylów tak, aby uwzględnić w nim te zmiany. Listing 1.3. Przesłanianie stylów agenta użytkownika Ogranicza marginesy. Usuwa style listy agenta użytkownika. h1 { color: #2f4f4f; margin-bottom: 10px; } #main-nav { margin-top: 10px; list-style: none; padding-left: 0; } #main-nav li { display: inline-block; } #main-nav a { color: white; background-color: #13a4a4; padding: 5px; Sprawia, że pozycje listy pojawiają się obok siebie, a nie jedna na drugiej. Zapewnia odnośnikom nawigacji wygląd przycisków. Poleć książkęKup książkę 1.1. Kaskada 31 border-radius: 2px; text-decoration: none; } Zapewnia odnośnikom nawigacji wygląd przycisków. Jeśli od dawna korzystasz z CSS, prawdopodobnie przesłaniałeś style agenta użytkownika. Podczas wykonywania tego działania używana jest źródłowa część kaskady. Twoje style zawsze będą przesłaniać style agenta użytkownika, ponieważ źródła są różne. UWAGA Możesz zauważyć, że w powyższym kodzie użyłem selektorów identyfikatora. Są powody, dla których należy tego unikać. Później poświęcę temu trochę miejsca. WAŻNE DEKLARACJE W wypadku reguł źródła stylów występuje następujący wyjątek: deklaracje oznaczone jako ważne. Deklaracja może zostać oznaczona jako ważna przez dodanie na jej końcu, ale przed średnikiem, adnotacji !important: color: red !important; Deklaracje oznaczone adnotacją !important są traktowane jako źródło o wyższym prio- rytecie, dlatego ogólna kolejność preferencji źródeł w porządku malejącym jest nastę- pująca: 1. Ważny autor. 2. Autor. 3. Agent użytkownika. Kaskada niezależnie rozwiązuje konflikty dla każdej właściwości każdego elementu strony. Jeśli na przykład dla akapitu ustawisz pogrubioną czcionkę, w dalszym ciągu będą obowiązywać marginesy górny i dolny z arkusza stylów agenta użytkownika (chyba że jawnie dokonasz ich przesłonięcia). Pojęcie źródła stylów zaznaczy swoją obecność przy omawianiu przejść i animacji, ponieważ operacje te wprowadzają do powyższej listy wię- cej źródeł. Adnotacja !important to interesująca ciekawostka związana z CSS, do któ- rej wkrótce powrócimy. 1.1.2. Specyficzność Jeśli nie jest możliwe rozwiązanie konfliktu między deklaracjami na podstawie ich źródła, następnym krokiem podejmowanym przez przeglądarkę jest zapewnienie rozstrzygnię- cia przez sprawdzenie specyficzności deklaracji. Kluczowe jest zrozumienie tego zagad- nienia. Przez długi czas możesz działać, nie rozumiejąc źródła arkuszy stylów, gdyż 99 stylów używanych w witrynie internetowej pochodzi z tego samego źródła. Jeśli jednak nie zrozumiesz specyficzności, ona się odpłaci. Niestety pojęcie to jest często pomijane. Przeglądarka określa specyficzność w ramach dwóch części: w stylach stosowanych liniowo w kodzie HTML oraz w stylach używanych za pomocą selektora. STYLE LINIOWE Jeśli w celu zastosowania stylów korzystasz z atrybutu style języka HTML, deklaracje są uwzględniane tylko względem danego elementu. W rezultacie są to deklaracje „zasię- gowe”, które przesłaniają wszystkie deklaracje zastosowane z utworzonego arkusza Poleć książkęKup książkę 32 ROZDZIAŁ 1. Kaskada, specyficzność i dziedziczenie stylów lub za pomocą znacznika style . Style liniowe nie mają selektora, ponieważ są stosowane bezpośrednio dla elementu, do którego się odwołują. Zależy Ci, aby na stronie wyróżniony odnośnik Promocje w menu nawigacji miał kolor pomarańczowy (rysunek 1.6). Omówię kilka sposobów umożliwiających osiągnięcie tego. Zacznę od stylów liniowych z listingu 1.4. Rysunek 1.6. Zastosowanie stylów liniowych powoduje przesłonięcie stylów użytych za pomocą selektorów Listing 1.4. Style liniowe przesłaniające deklaracje zastosowane gdzie indziej li a href= /specials class= featured style= background-color: orange; Promocje /a /li Styl liniowy zastosowany za pomocą atrybutu style. Aby ujrzeć stronę w przeglądarce, zmodyfikuj jej kod w celu uwzględnienia kodu z powyższego listingu (wkrótce dokonane zmiany zostaną wycofane). Aby w arkuszu stylów przesłonić deklaracje liniowe, konieczne będzie dodanie do deklaracji adnotacji !important, co spowoduje, że stanie się ona źródłem o wyższym prio- rytecie. Jeśli style liniowe oznaczono jako ważne, nic nie może ich przesłonić. Prefero- wane jest wykonanie takiego działania w obrębie utworzonego arkusza stylów. Cofnij dokonaną zmianę, gdyż przyjrzymy się lepszym rozwiązaniom. SPECYFICZNOŚĆ SELEKTORA Druga część specyficzności określana jest przez selektory. Na przykład selektor z dwiema nazwami klasy ma większą specyficzność niż selektor z tylko jedną nazwą klasy. Jeśli jedna deklaracja ustawi kolor tła na pomarańczowy, lecz druga deklaracja, z większą specyficznością, ustawi dla tła kolor turkusowy, przeglądarka użyje tego drugiego koloru. Aby to zilustrować, sprawdźmy, co się stanie, gdy spróbujemy ustawić dla wyróż- nionego odnośnika kolor pomarańczowy za pomocą zwykłego selektora klasy. Zaktu- alizuj ostatnią część arkusza stylów tak, aby uwzględniał kod z listingu 1.5. Listing 1.5. Selektory z różnymi specyficznościami #main-nav a { color: white; background-color: #13a4a4; padding: 5px; border-radius: 2px; text-decoration: none; } .featured { background-color: orange; } Selektor z większą specyficznością. Turkusowy kolor tła. Deklaracja pomarańczowego tła nie przesłoni koloru turkusowego z powodu specyficzności selektora. Poleć książkęKup książkę 1.1. Kaskada 33 To nie działa! Wszystkie odnośniki nadal mają kolor turkusowy. Dlaczego? Pierwszy użyty tutaj selektor jest bardziej specyficzny niż drugi. Pierwszy selektor składa się z identyfikatora i nazwy znacznika, natomiast drugi selektor tworzy nazwa klasy. W tym jednak wypadku chodzi o coś więcej niż tylko o stwierdzenie, który selektor jest dłuższy. Różne typy selektorów też mają odmienne specyficzności. Selektor identyfikatora ma specyficzność większą niż na przykład selektor klasy. Okazuje się, że pojedynczy identyfikator ma większą specyficzność niż selektor z dowolną liczbą klas. Podobnie specyficzność selektora klasy jest większa niż selektora znacznika (nazywanego również selektorem typu). Dokładne reguły specyficzności są następujące:  Jeśli selektor ma więcej identyfikatorów, zwycięża, czyli jest bardziej specyficzny.  W razie remisu wygrywa selektor z największą liczbą klas.  W razie remisu wygrywa selektor z największą liczbą nazw znaczników. Przeanalizuj selektory widoczne w listingu 1.6 (nie dodawaj ich jednak do kodu własnej strony). Selektory zapisano w kolejności zwiększającej się specyficzności. Listing 1.6. Selektory ze zwiększającą się specyficznością Cztery znaczniki. Trzy znaczniki i jedna klasa. Dwie klasy. html body header h1 { color: blue; } body header.page-header h1 { color: orange; } .page-header .title { color: green; } #page-title { color: red; } Jeden identyfikator. W tym wypadku najbardziej specyficzny selektor z jednym identyfikatorem oznaczono , dlatego jego deklaracja koloru czerwonego jest stosowana dla tytułu. Następny liczbą . Selektor pod względem specyficzności selektor z dwiema nazwami klasy ma liczbę ten zostałby użyty, gdyby brakowało selektora identyfikatora ma większą pomimo jego długości: dwie klasy są bardziej specyficzne specyficzność niż selektor jest najmniej specyficzny. Zawiera cztery typy niż jedna klasa. I wreszcie, selektor elementu (czyli nazwy znacznika), lecz nie ma żadnych identyfikatorów lub klas. . Selektor UWAGA Selektory pseudoklas (np. :hover) i selektory atrybutów (np. [type= input ]) mają taką samą specyficzność jak selektor klas. Selektor uniwersalny (*) i kombinatory ( , +, ~) nie mają żadnego wpływu na specyficzność. Jeśli wydaje się, że deklaracja dodana przez Ciebie do kodu CSS nie powoduje żad- nego efektu, często jest to wynikiem przesłonięcia jej przez bardziej specyficzną regułę. Wielokrotnie projektanci tworzą selektory za pomocą identyfikatorów, nie zdając sobie Poleć książkęKup książkę 34 ROZDZIAŁ 1. Kaskada, specyficzność i dziedziczenie sprawy z tego, że powoduje to powstanie większej specyficzności, którą później trudno przesłonić. Jeśli wymagasz przesłonięcia stylu zastosowanego przy użyciu identyfika- tora, musisz skorzystać z innego identyfikatora. Jest to proste zagadnienie, ale jeśli nie zrozumiesz specyficzności, możesz dopro- wadzić się do frustracji, próbując stwierdzić, dlaczego jedna reguła działa, a inna nie. NOTACJA ZWIĄZANA ZE SPECYFICZNOŚCIĄ Typowym sposobem wskazania specyficzności jest zastosowanie postaci liczbowej, w wypadku której często po każdej liczbie wstawiany jest przecinek. Na przykład zapis 1,2,2 wskazuje specyficzność jednego identyfikatora, dwóch klas i dwóch znaczników. Identyfikatory z najwyższym priorytetem są wyszczególniane jako pierwsze. Po nich następują klasy, a później znaczniki. Selektor #page-header #page-title ma dwa identyfikatory i nie ma żadnych klas ani znaczników. Można stwierdzić, że selektor ten ma specyficzność 2,0,0. Selektor ul li z dwoma znacznikami, lecz bez żadnych identyfikatorów i klas, ma specyficzność 0,0,2. W tabeli 1.1 pokazano selektory z listingu 1.6. Tabela 1.1. Różne selektory oraz odpowiadające im specyficzności Selektor Identyfikatory Klasy Znaczniki Notacja html body header h1 body header.page-header h1 .page-header .title #page-title 0 0 0 1 0 1 2 0 4 3 0 0 0,0,4 0,1,3 0,2,0 1,0,0 Określenie, który selektor jest bardziej specyficzny, sprowadza się obecnie do porów- nania liczb. Specyficzność 1,0,0 ma pierwszeństwo względem specyficzności 0,2,2, a nawet w stosunku do specyficzności 0,10,0 (nie polecam jednak zapisywania selekto- rów tak długich jak selektor z 10 klasami), gdyż pierwsza liczba (identyfikatory) ma wyższy priorytet. Sporadycznie używana jest notacja złożona z czterech liczb, gdzie 0 lub 1 to najbar- dziej znacząca cyfra, określająca to, czy deklaracja jest stosowana za pośrednictwem stylów liniowych. W tym wypadku styl liniowy ma specyficzność 1,0,0,0. Spowodo- wałoby to przesłonięcie zastosowanych stylów za pomocą selektorów, które mogłyby zostać wskazane jako mające specyficzność 0,1,2,0 (jeden identyfikator i dwie klasy) lub coś podobnego. KWESTIE ZWIĄZANE ZE SPECYFICZNOŚCIĄ Próba zastosowania przez Ciebie pomarańczowego tła przy użyciu selektora .featured nie udała się. Selektor #main-nav ma identyfikator przesłaniający selektor klasy (specy- ficzności 1,0,1 i 0,1,0). Aby to poprawić, możesz wziąć pod uwagę kilka opcji. Przyj- rzyjmy się paru możliwym rozwiązaniom. Najszybszym z nich jest dodanie adnotacji !important do deklaracji, która ma zostać wyróżniona. Zmodyfikuj deklarację tak, aby uwzględniała kod zamieszczony w listingu 1.7. Poleć książkęKup książkę 1.1. Kaskada 35 Listing 1.7. Możliwe pierwsze rozwiązanie #main-nav a { color: white; background-color: #13a4a4; padding: 5px; border-radius: 2px; text-decoration: none; } .featured { background-color: orange !important; } Zapewnia ważność deklaracji, która w efekcie ma źródło o wyższym priorytecie. Rozwiązanie to się sprawdza, ponieważ adnotacja !important ustanawia dla deklaracji źródło o wyższym priorytecie. Z pewnością jest to łatwe, ale też naiwne rozwiązanie. Na razie może być wystarczające, lecz później może spowodować problemy. Jeśli roz- poczniesz dodawanie adnotacji !important do wielu deklaracji, to, co się stanie, gdy konieczne okaże się wyróżnienie czegoś, co już zostało ustanowione jako ważne? Jeżeli użyjesz tej adnotacji dla kilku deklaracji, będzie mieć miejsce zgodność źródeł, dlatego obowiązywać będą zwykłe reguły specyficzności. Ostatecznie zakończy się to powro- tem do punktu wyjścia. Gdy już rozpoczniesz korzystać z adnotacji !important, praw- dopodobnie będziesz sięgać po nią coraz częściej. Poznajmy lepszy sposób. Zamiast próbować obejść reguły specyficzności selekto- rów, spróbujmy sprawić, aby okazały się przydatne. Co sie stanie, gdy zwiększy się spe- cyficzność danego selektora? Zmodyfikuj w kodzie CSS zestawy reguł tak, aby uwzględniały kod z listingu 1.8. Listing 1.8. Możliwe drugie rozwiązanie Pozostaje specyficzność 1,0,1. #main-nav a { color: white; background-color: #13a4a4; padding: 5px; border-radius: 2px; text-decoration: none; } #main-nav .featured { background-color: orange; } Specyficzność jest zwiększana do 1,1,0. Adnotacja !important nie jest już potrzebna. Rozwiązanie to również się sprawdza. Selektor ma po jednym identyfikatorze i klasie, co zapewnia mu specyficzność 1,1,0, która jest większa niż w wypadku selektora #main-nav a (ze specyficznością 1,0,1), dlatego dla elementu stosowany jest pomarańczowy kolor tła. Możliwe jest jednak zastosowanie jeszcze lepszego rozwiązania. Zamiast zwiększania specyficzności drugiego selektora sprawdźmy, czy możliwe jest zmniejszenie specy- ficzności pierwszego selektora. Element zawiera również klasę ul id= main-nav class= nav . Oznacza to, że możesz zmienić kod CSS tak, aby odwoływał się do ele- mentu za pomocą nazwy jego klasy, a nie jego identyfikatora. W sposób pokazany w lis- tingu 1.9 zmień w selektorach #main-nav na .nav. Poleć książkęKup książkę 36 ROZDZIAŁ 1. Kaskada, specyficzność i dziedziczenie Listing 1.9. Możliwe trzecie rozwiązanie .nav { margin-top: 10px; list-style: none; padding-left: 0; } Zmienia #main-nav na .nav w całym arkuszu stylów. Zmniejsza specyficzność (0,1,1) pierwszego selektora. .nav li { display: inline-block; } .nav a { color: white; background-color: #13a4a4; padding: 5px; border-radius: 2px; text-decoration: none; } .nav .featured { background-color: orange; } Zwiększa specyficzność (0,2,0) drugiego selektora. Zmniejszyłeś specyficzność selektorów. Pomarańczowe tło jest na tyle jasne, żeby prze- słonić turkusowy kolor. Na podstawie przedstawionych przykładów widać, że specyficzność staje się raczej czymś w rodzaju „wyścigu zbrojeń”. Dotyczy to szczególnie dużych projektów. Prze- ważnie, jeśli to możliwe, najlepiej utrzymać niską specyficzność. Dzięki temu, gdy pojawi się potrzeba przesłonięcia czegoś, możliwy będzie wybór. 1.1.3. Kolejność źródłowa Trzecim i ostatnim krokiem analizowania kaskady jest kolejność źródłowa. Jeśli źródło i specyficzność są takie same, pierwszeństwo ma deklaracja pojawiająca się dalej w arku- szu stylów lub występująca w arkuszu, który dołączono później w obrębie strony. Oznacza to, że możesz modyfikować kolejność źródłową w celu określenia stylu wyróżnionego odnośnika. Jeśli utworzysz dwa powodujące konflikt selektory o równej specyficzności, pierwszeństwo będzie mieć ten z nich, który pojawi się jako ostatni. Przyjrzyjmy się czwartej możliwości, zaprezentowanej w listingu 1.10. Listing 1.10. Możliwe czwarte rozwiązanie .nav a { color: white; background-color: #13a4a4; padding: 5px; border-radius: 2px; text-decoration: none; } a.featured { background-color: orange; } Tworzy jednakowe specyficzności (0,1,1). Poleć książkęKup książkę 1.1. Kaskada 37 W tym rozwiązaniu specyficzności są równe. Kolejność źródłowa określa, jaka deklaracja zostanie zastosowana dla odnośnika, co powoduje uzyskanie pomarańczowego, wyróż- nionego przycisku. Rozwiązuje to problem, ale potencjalnie powoduje też nowy problem: choć wyróż- niony przycisk w obrębie deklaracji nav wygląda dobrze, co będzie, gdy zdecydujesz się użyć klasy featured w kolejnym odnośniku gdzieś na stronie poza deklaracją nav? W efekcie uzyskasz dziwną mieszankę stylów: pomarańczowe tło, lecz nie biały kolor tekstu, wypełnienie czy zaokrąglenie odnośników nawigacji (rysunek 1.7). Rysunek 1.7. Klasa featured umieszczona poza deklaracją nav daje dziwne rezultaty Listing 1.11 prezentuje kod znaczników powodujący takie działanie. W tym wypadku pojawia się element, do którego odwołuje się drugi selektor, lecz nie pierwszy, co daje niepożądany wynik. Konieczne będzie zdecydowanie, czy styl pomarańczowego przy- cisku ma funkcjonować poza deklaracją nav. Jeśli tak, niezbędne będzie zapewnienie, że są stosowane również dla niego wszystkie żądane style. Listing 1.11. Kod wyróżnionego odnośnika poza deklaracją nav header class= page-header h1 id= page-title class= title Wypalacze kawy Wombat /h1 nav ul id= main-nav class= nav li a href= / Strona główna /a /li li a href= /coffees Kawy /a /li li a href= /brewers Kawiarki /a /li li a href= /specials class= featured Promocje /a /li /ul /nav /header main p Koniecznie sprawdź a href= /specials class= featured nasze promocje /a . /p /main Dla kodu wyróżnionego odnośnika poza deklaracją nav style zostaną użyte częściowo. Nie mając żadnych innych informacji o Twoich wymaganiach związanych z przykła- dową stroną internetową, skłaniałbym się do pozostania przy trzecim rozwiązaniu (lis- ting 1.9). W idealnej sytuacji w wypadku własnej witryny internetowej będziesz w stanie dobrze zastanowić się nad swoimi wymaganiami. Być może wiesz, że prawdopodobnie będziesz potrzebować wyróżnionego odnośnika w innych miejscach. W takiej sytuacji bardziej właściwe będzie czwarte rozwiązanie (listing 1.10), które zostanie uzupełnione o style obsługujące klasę featured w innym miejscu strony. Jak wcześniej wspomniałem, w CSS bardzo często najlepsza odpowiedź brzmi: „To zależy”. Istnieje wiele ścieżek prowadzących do osiągnięcia tego samego wyniku. Poleć książkęKup książkę 38 ROZDZIAŁ 1. Kaskada, specyficzność i dziedziczenie Warto rozważyć kilka możliwości i pomyśleć o konsekwencjach każdej z nich. Mając do czynienia z problemem dotyczącym stosowania stylów, często zajmuję się nim dwu- etapowo. Po pierwsze, stwierdzam, jakie deklaracje zapewnią właściwy wygląd elementu. Po drugie, zastanawiam się nad możliwymi sposobami określającymi strukturę selekto- rów i wybieram ten, który najlepiej spełnia wymagania. STYLE ODNOŚNIKÓW I KOLEJNOŚĆ ŹRÓDŁOWA Po rozpoczęciu nauki CSS być może stwierdziłeś, że selektory użyte do określenia sty- lów odnośników powinny pojawiać się w konkretnej kolejności. Wynika to stąd, że kolej- ność źródłowa wpływa na kaskadę. Listing 1.12 prezentuje style odnośników na stro- nie we „właściwej” kolejności. Listing 1.12. Style odnośników a:link { color: blue; text-decoration: none; } a:visited { color: purple; } a:hover { text-decoration: underline; } a:active { color: red; } Kaskada jest powodem, dla którego ta kolejność jest istotna: w wypadku tej samej specyficzności późniejsze style przesłaniają te wcześniejsze. Jeśli dwa takie style lub więcej dotyczy jednocześnie jednego elementu, ostatni styl może przesłonić pozostałe. Jeśli użytkownik umieści kursor nad klikniętym odnośnikiem, style związane z operacją umieszczania będą mieć pierwszeństwo. Jeśli zaś użytkownik aktywuje odnośnik (czyli kliknie go) po umieszczeniu nad nim kursora, pierwszeństwo będą mieć style doty- czące aktywowania. Mnemonikiem ułatwiającym zapamiętanie takiej kolejności są anglojęzyczne słowa tworzące kombinację LoVe/HAte (ang. Link, Visited, Hover, Active — odnośnik, odwie- dzony, umieszczenie nad, aktywowanie). Zauważ, że jeśli zmodyfikujesz jeden z selekto- rów tak, aby miał inną specyficzność niż pozostałe, spowoduje to zaburzenie, czego efektem może być uzyskanie nieoczekiwanych wyników. WARTOŚCI KASKADOWE Aby przetworzyć każdą właściwość dla każdego elementu na stronie, przeglądarka postępuje zgodnie z trzema krokami reprezentowanymi przez pochodzenie, specyficz- ność i kolejność źródłową. Deklaracja, która „zwycięża” kaskadę, nazywana jest warto- ścią kaskadową. Dla każdej właściwości każdego elementu istnieje co najwyżej jedna wartość kaskadowa. Określony akapit ( p ) na stronie może mieć marginesy górny i dolny, ale nie może mieć dwóch różnych górnych marginesów lub dwóch różnych Poleć książkęKup książkę 1.1. Kaskada 39 dolnych marginesów. Jeśli kod CSS określa różne wartości dla jednej właściwości, kaskada wybierze tylko jedną podczas renderowania elementu. Będzie to wartość kaskadowa. WARTOŚĆ KASKADOWA — wartość określonej właściwości stosowana dla elementu jako wynik kaskady. Jeśli właściwości nigdy nie określono dla elementu, nie ma on żadnej wartości kaska- dowej dla tej właściwości. Na przykład ten sam akapit może nie mieć określonego obramowania lub wypełnienia. 1.1.4. Dwie praktyczne zasady Jak być może wiesz, w korzystaniu z kaskady obowiązują dwie powszechne i praktyczne zasady. Ponieważ mogą one okazać się pomocne, oto ich przypomnienie: 1. Nie używaj identyfikatorów w selektorze. Nawet jeden identyfikator znacznie zwiększa specyficzność. Gdy niezbędne jest przesłonięcie selektora, a często nie dysponujesz kolejnym sensownym identyfikatorem możliwym do użycia, konieczne okazuje się skopiowanie oryginalnego selektora i dodanie kolejnej klasy w celu odróżnienia go od selektora, który próbujesz przesłonić. 2. Nie używaj adnotacji !important. Przesłonięcie tej adnotacji jest jeszcze trudniej- sze niż identyfikatora. Po zastosowaniu po raz pierwszy owej adnotacji konieczne będzie dodawanie jej za każdym razem, gdy będzie miała zostać przesłonięta ory- ginalna deklaracja. W tej sytuacji w dalszym ciągu niezbędne będzie radzenie sobie ze specyficznością. Te dwie zasady mogą być dobrą wskazówką, ale nie trzymaj się ich przy każdej sposob- ności. Są wyjątki, dla których zasady te mogą być przydatne, lecz nigdy nie stosuj ich jako odruchowej reakcji mającej na celu poradzenie sobie z konfliktem specyficzności. Istotna uwaga dotycząca ważności Gdy tworzysz moduł JavaScript przeznaczony do dystrybucji (np. w postaci pakietu NPM), szczególnie nakłaniam Cię do tego, aby nie stosować stylów w sposób liniowy za pośred- nictwem kodu JavaScript, jeśli można tego uniknąć. W przeciwnym razie projektanci używający Twojego pakietu będą zmuszeni do zaakceptowania bez zmian zastosowa- nych stylów lub sięgnięcia po adnotację !important dla każdej właściwości, którą posta- nowią zmienić. Zamiast tego do pakietu dołącz arkusz stylów. Jeśli utworzony komponent wymaga dyna- micznego wprowadzania zmian stylów, prawie zawsze preferowane jest użycie kodu Java- Script do dodawania klas do elementów i usuwania z nich klas. Użytkownicy mogą wtedy skorzystać z arkusza stylów, a ponadto mają możliwość edytowania go w dowolny żądany sposób bez konieczności borykania się ze specyficznościami. W ciągu kilku ostatnich lat pojawiła się seria praktycznych metod ułatwiających zarzą- dzanie specyficznością selektorów. Przyjrzymy się im szczegółowo w rozdziale 9. Będzie w nim szerzej mowa o radzeniu sobie ze specyficznością. Wspomnę o jednym miejscu, Poleć książkęKup książkę 40 ROZDZIAŁ 1. Kaskada, specyficzność i dziedziczenie w którym poprawne jest użycie adnotacji !important. Na razie jednak, gdy już wiesz, jak działa kaskada, przejdziemy do następnego zagadnienia. 1.2. Dziedziczenie Istnieje jeszcze jeden sposób, w jaki element może otrzymać style. Jest to dziedzicze- nie. Kaskada jest często łączona z pojęciem dziedziczenia. Choć te dwa zagadnienia są ze sobą powiązane, należy zrozumieć każde z osobna. Jeśli element nie ma żadnej wartości kaskadowej w wypadku danej właściwości, może ją dziedziczyć po elemencie nadrzędnym. Powszechne jest stosowanie właści- wości font-family względem elementu body . Wszystkie elementy nadrzędne zawarte w tym elemencie odziedziczą zatem czcionkę zapewnianą przez tę właściwość. Nie musisz jej stosować jawnie dla każdego elementu na stronie. Na rysunku 1.8 pokazano, jak dziedziczenie przebiega w dół drzewa modelu DOM. Rysunek 1.8. Dziedziczone właściwości są przekazywane w dół drzewa modelu DOM od węzłów nadrzędnych do ich węzłów podrzędnych Nie wszystkie jednak właściwości są dziedziczone. Domyślnie objęte są tym tylko nie- które właściwości. Zasadniczo są to właściwości, w wypadku których dziedziczenia będziesz oczekiwać. Są to głównie właściwości powiązane z tekstem: color, font, font-family, font-size, font-weight, font-variant, font-style, line-height, letter-spacing, text-align, text-indent, text-transform, white-space i word-spacing. Dziedziczonych jest też kilka innych właściwości, takich jak właściwości list: list- style, list-style-type, list-style-position i list-style-image. Właściwości obra- mowania tabel border-collapse i border-spacing również są dziedziczone. Zauważ, że działanie tabel w zakresie obramowania kontrolują te dwie właściwości, a nie częściej stosowane właściwości służące do określania obramowań dla elementów niebędących tabelami (nie byłoby wskazane przekazywanie w dół przez element div swojego obramowania każdemu elementowi podrzędnemu). Powyższa lista nie jest komplet- na, ale naprawdę niewiele do tego brakuje. Na swojej stronie możesz wykorzystać dziedziczenie do własnych potrzeb, stosując czcionkę dla elementu body i umożliwiając odziedziczenie reprezentującej jej wartości przez elementy podrzędne tego elementu (rysunek 1.9). Poleć książkęKup książkę 1.2. Dziedziczenie 41 Rysunek 1.9. Zastosowanie właściwości font-family względem elementu body i umożliwienie odziedziczenia tej samej wartości przez wszystkie elementy podrzędne Dodaj kod z listingu 1.13 na początku arkusza stylów w celu uwzględnienia tej zasady dla własnej strony. Listing 1.13. Zastosowanie właściwości font-family dla elementu nadrzędnego body { font-family: sans-serif; } Dziedziczona właściwość będzie stosowana również dla elementów podrzędnych. Dodanie właściwości do elementu body powoduje zastosowanie jej dla całej strony. Możliwe jest jednak odwołanie się do określonego elementu na stronie, który będzie dziedziczyć jedynie względem swoich elementów podrzędnych. Dziedziczenie będzie przechodzić od elementu do elementu do momentu przesłonięcia przez wartość kas- kadową. Używaj narzędzi dla programistów! Skomplikowane zagnieżdżenie wartości dziedziczących i przesłaniających się wzajemnie może szybko okazać się trudne do opanowania. Jeśli nie jesteś jeszcze zaznajomiony z narzędziami dla programistów przeglądarki, nabierz nawyku korzystania z nich. Narzędzia te zapewniają wgląd w to, jakie dokładnie reguły są stosowane względem jakich elementów i dlaczego. Kaskada i dziedziczenie to abstrakcyjne pojęcia: narzędzia dla programistów stanowią najlepszy sposób, jaki jest mi znany, aby się w tym zoriento- wać. Uruchom te narzędzia przez kliknięcie elementu prawym przyciskiem myszy i wy- branie z menu kontekstowego pozycji Zbadaj lub Zbadaj element. Poniżej pokazano przykład tego, co ujrzysz. Poleć książkęKup książkę 42 ROZDZIAŁ 1. Kaskada, specyficzność i dziedziczenie Inspektor stylów prezentuje każdy selektor odwołujący się do badanego elementu, porząd- kując elementy według ich specyficzności. Poniżej tych informacji widoczne są wszystkie dziedziczone właściwości. Od razu można zaznajomić się z całą kaskadą i dziedziczeniem dla elementu. Istnieje wiele drobnych funkcji, które ułatwiają zrozumienie tego, co ma miejsce w wy- padku stylów elementu. Style położone bliżej samej góry przesłaniają te znajdujące się niżej. Przesłonięte style są przekreślone. Po prawej stronie widoczna jest nazwa arkusza stylów oraz numer wiersza dla każdego zestawu reguł, dlatego możesz je znaleźć w kodzie źródłowym. Dzięki temu możesz dowiedzieć się dokładnie, który element odziedziczył które style oraz jakie jest ich źródło. Za pomocą widocznego u samej góry pola filtru możesz też zawęzić deklaracje do określonego zestawu. 1.3. Wartości specjalne Dostępne są dwie wartości specjalne, które możesz zastosować względem dowolnej wła- ściwości w celu ułatwienia modyfikowania kaskady: inherit i initial. Przyjrzyjmy się tym wartościom. 1.3.1. Użycie słowa kluczowego inherit Czasami wymagane będzie dziedziczenie, a wartość kaskadowa je uniemożliwia. Aby to było możliwe, możesz skorzystać ze słowa kluczowego inherit. Za jego pomocą możesz przesłonić inną wartość. W efekcie element odziedziczy tę wartość specjalną po swoim elemencie nadrzędnym. Załóżmy, że do strony dodajesz jasnoszarą stopkę. W stopce mogą się znajdować odnośniki, ale nie mają zbytnio się wyróżniać, ponieważ stopka nie jest istotną częścią strony. W związku z tym dla odnośników w stopce ustawisz kolor ciemnoszary (rysu- nek 1.10). Rysunek 1.10. Odnośnik Warunki użytkowania po odziedziczeniu przez niego szarego koloru tekstu Na końcu strony umieść kod znaczników z listingu 1.14. Zwykła strona będzie mieć wię- cej zawartości między stopką i nagłówkiem, ale przykład ten spełni swoją funkcję. Listing 1.14. Stopka z odnośnikiem footer class= footer copy; 2016 Wypalacze kawy Wombat mdash; a href= /terms-of-use Warunki użytkowania /a /footer Kolor czcionki będzie zwykle ustawiony dla wszystkich odnośników na stronie (jeśli będzie inaczej, kolor zostanie określony przez style agenta użytkownika). Kolor ten jest też stosowany dla odnośnika Warunki użytkowania. Aby odnośnik w stopce miał szary kolor, niezbędne będzie jego przesłonięcie. W tym celu do arkusza stylów dodaj kod z listingu 1.15. Poleć książkęKup książkę 1.3. Wartości specjalne 43 Listing 1.15. Wartość inherit Globalny kolor odnośników na stronie. Kolor tekstu stopki ustawiono na szary. a:link { color: blue; } … .footer { color: #666; background-color: #ccc; padding: 15px 0; text-align: center; font-size: 14px; } .footer a { color: inherit; text-decoration: underline; } Kolor czcionki jest dziedziczony ze stopki. Trzeci zestaw reguł w powyższym kodzie przesłania niebieski kolor odnośnika, zapew- niając odnośnikowi w stopce wartość kaskadową inherit. A zatem odnośnik dziedziczy kolor po swoim elemencie nadrzędnym footer . Tutaj korzyścią jest to, że odnośnik w stopce będzie się zmieniać wraz z resztą jej zawartości, gdy cokolwiek ją zmodyfikuje (może to spowodować edycja drugiego zestawu reguł lub kolejny styl w innym miejscu może przesłonić styl stopki). Jeśli na przykład tekst stopki określonych stron jest bardziej ciemnoszary, odnośnik zostanie odpowied- nio zmieniony. Możesz też użyć słowa kluczowego inherit, aby wymusić dziedziczenie właściwości, która normalnie nie jest dziedziczona, takiej jak właściwość obramowania lub wypeł- nienia. W odniesieniu do tego można wymienić kilka praktycznych zastosowań, ale w rozdziale 3. zaznajomisz się z jednym przydatnym wariantem podczas omawiania określania wymiarów elementu. 1.3.2. Użycie słowa kluczowego initial Czasami stwierdzisz, że zastosowałeś dla elementu style, które chcesz wycofać. W tym celu możesz skorzystać ze słowa kluczowego initial. Każda właściwość CSS ma war- tość początkową lub domyślną. Jeśli danej właściwości przypiszesz wartość initial, spowoduje ona w efekcie ponowne ustawienie dla właściwości jej wartości domyślnej. Przypomina to trwałe zdefiniowanie tej wartości. Na rysunku 1.11 pokazano, jak rende- rowana jest stopka, gdy zamiast słowa kluczowego inherit zostanie dla niej ustawiona wartość initial. Rysunek 1.11. Wartość początkowa właściwości koloru reprezentuje kolor czarny OSTRZEŻENIE Słowo kluczowe initial nie jest obsługiwane w żadnej wersji przeglądarek Internet Explorer i Opera Mini. Słowo to jest rozpoznawane przez wszystkie inne podstawowe przeglądarki, w tym przez przeglądarkę Edge, czyli następcę przeglądarki Internet Explorer 11 firmy Microsoft. Poleć książkęKup książkę 44 ROZDZIAŁ 1. Kaskada, specyficzność i dziedziczenie Listing 1.16 prezentuje kod CSS użyty do utworzenia strony z rysunku 1.11. Ponieważ kolor czarny jest wartością początkową właściwości koloru w większości przeglądarek, kod color: initial odpowiada kodowi color: black. Listing 1.16. Wartość initial .footer a { color: initial; text-decoration: underline; } Korzyść z tego jest taka, że nie musisz zbytnio o tym myśleć. Aby usunąć obramowanie z elementu, użyj kodu border: initial. W celu przywrócenia dla elementu jego szero- kości domyślnej zastosuj kod width: initial. Być może żeby wykonać tego rodzaju operację resetowania, masz nawyk stosowania wartości auto. Okazuje się, że do osiągnięcia tego samego rezultatu możesz użyć kodu width: auto. Wynika to stąd, że auto to wartość domyślna właściwości width. Godne uwagi jest jednak to, że auto nie jest wartością domyślną wszystkich właści- wości. Wartość ta nie jest nawet poprawna w wypadku wielu właściwości. Na przykład kody border-width: auto i padding: auto są niepoprawne, a tym samym nie powodują żadnego efektu. Możesz poświęcić czas na określenie wartości początkowej tych wła- ściwości, ale często łatwiej użyć wartości initial. UWAGA Deklaracja display: initial odpowiada deklaracji display: inline. Nie przyjmie ona postaci deklaracji display: block niezależnie od tego, dla jakiego typu elementu zosta- nie zastosowana. Wynika to stąd, że słowo kluczowe initial przywraca wartość począt- kową dla właściwości, a nie dla elementu. inline to wartość domyślna właściwości zwią- zanych z wyświetlaniem. 1.4. Właściwości skrócone Właściwości skrócone to właściwości umożliwiające jednoczesne ustawienie wartości dla kilku innych właściwości. Na przykład font to właściwość skrócona, która pozwala ustawić kilka właściwości czcionek. Następująca deklaracja określa właściwości font- style, font-weight, font-size, line-height i font-family: font: italic bold 18px/1.2 Helvetica , Arial , sans-serif; Podobnie:  background to właściwość skrócona dla wielu właściwości tła: background-color, background-image, background-size, background-repeat, background-position, background-origin, background-chip i background-attachment.  border to właściwość skrócona właściwości border-width, border-style i border- color, które również są właściwościami skróconymi.  border-width to właściwość skrócona właściwości określających szerokości lewego, dolnego, prawego i górnego obramowania. Poleć książkęKup książkę 1.4. Właściwości skrócone 45 Właściwości skrócone są przydatne, ponieważ pozwalają zachować zwięzłość i przejrzy- stość kodu. Kilka dziwactw z nimi związanych nie jest jednak od razu oczywistych. 1.4.1. Uważaj na właściwości skrócone przesłaniające „po cichu” inne style Większość właściwości skróconych umożliwia pominięcie określonych wartości i okre- ślenie tylko tego, czym jesteś zainteresowany. Godne uwagi jest jednak to, że przy postępowaniu w ten sposób w dalszym ciągu ustawiane są pominięte wartości. Nie- jawnie ustawiana jest dla nich ich wartość początkowa. Może to spowodować przesło- nięcie „po cichu” stylów zdefiniowanych w innym miejscu. Jeśli na przykład użyłeś właściwości skróconej font dla tytułu strony bez określania właściwości wagi czcionki font-weight, nadal będzie ustawiona dla niej wartość normal (rysunek 1.12). Rysunek 1.12. Właściwości skrócone spowodują ustawienie dla pominiętych właściwości ich wartości początkowej Aby sprawdzić, jak to działa, do arkusza stylów dodaj kod z listingu 1.17. Listing 1.17. Właściwość skrócona określająca wszystkie powiązane wartości h1 { font-weight: bold; } .title { font: 32px Helvetica, Arial, sans-serif; } Początkowo może się wydawać, że kod h1 class= title spowoduje uzyskanie pogru- bionego nagłówka. Tak jednak nie jest. Style widoczne w listingu 1.18 odpowiadają powyższemu kodowi. Listing 1.18. Rozszerzony odpowiednik kodu z listingu 1.17 z właściwością skróconą h1 { font-weight: bold; } .title { font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal; font-size: 32px; font-family: Helvetica, Arial, sans-serif; } Wartości początkowe właściwości. Oznacza to, że zastosowanie powyższych stylów względem elementu h1 powoduje uzy- skanie zwykłej wagi czcionki, a nie pogrubienia. Style te mogą też przesłonić inne style Poleć książkęKup książkę 46 ROZDZIAŁ 1. Kaskada, specyficzność i dziedziczenie czcionek, które w innym razie byłyby dziedziczone z elementu nadrzędnego. Spośród wszystkich właściwości skróconych właściwość font w najbardziej widoczny sposób powoduje problemy, ponieważ ustawia tak obszerny zestaw właściwości. Z tego powodu unikam tej właściwości, z wyjątkiem ustawiania za jej pomocą og
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

CSS od podszewki
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: