Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00369 007431 15345764 na godz. na dobę w sumie
Responsywne strony WWW dla każdego - ebook/pdf
Responsywne strony WWW dla każdego - ebook/pdf
Autor: Liczba stron: 336
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-0038-5 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook (-35%), audiobook).

Twórz skalowalne strony WWW (RWD) dla wszystkich urządzeń!

Responsywne strony WWW umiejętnie dostosowują się do rozmiaru każdego ekranu, na jakim zechcesz je wyświetlić. Ta ich właściwość pomaga również generować zyski! Po pierwsze, wystarczy utrzymywać tylko jedną wersję responsywnej strony. Po drugie, Twoi potencjalni klienci i użytkownicy mogą zapoznać się z Twoją ofertą lub skorzystać z niej praktycznie w dowolnym miejscu świata. I to niezależnie od tego, czy korzystają ze smartfona, z tabletu czy z komputera stacjonarnego!

Jeżeli chcesz nauczyć się tworzyć takie strony, ta książka będzie dla Ciebie najlepszym źródłem! Już za chwilę dowiesz się, w jaki sposób zbudować skalowalne strony WWW z wykorzystaniem najnowszych możliwości kaskadowych arkuszy stylów CSS3 oraz języka HTML5. Przekonasz się, jak łatwo możesz modyfikować style pod konkretne media oraz jak najlepiej zorganizować proces projektowania responsywnej strony WWW. Zaznajomisz się też z najlepszymi technikami poprawy wydajności Twoich stron WWW. To jest obowiązkowa lektura dla wszystkich programistów i projektantów stron WWW! Odkryj możliwości responsywnych stron WWW!
Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Learning Responsive Web Design Tłumaczenie: Andrzej Watrak ISBN: 978-83-283-0035-4 © 2015 Helion S.A. Authorized Polish translation of the English edition Learning Responsive Web Design, ISBN 9781449362942 © 2014 Clarissa Peterson. This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. 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 Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie bierze jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Wydawnictwo HELION nie ponosi również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION 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) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/reswdk.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/reswdk Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:316)ci Wst(cid:253)p ........................................................................................................................................ 7 I Podstawy tworzenia responsywnych stron WWW .............................. 11 1. Czym jest responsywna strona WWW? ..................................................................... 13 13 15 23 25 Podstawy Historia stron WWW w skrócie Dlaczego w(cid:228)a(cid:264)nie responsywne strony? Podsumowanie 2. Responsywna tre(cid:316)(cid:235) ...................................................................................................... 27 27 29 31 34 34 35 37 Strategia tre(cid:264)ci Dobór tre(cid:264)ci Przygotowanie tre(cid:264)ci Jednolita tre(cid:264)(cid:232) Zarz(cid:241)dzanie tre(cid:264)ci(cid:241) Elastyczna tre(cid:264)(cid:232) Podsumowanie II Tworzenie responsywnych stron WWW .............................................. 39 3. Kod HTML responsywnych stron ................................................................................ 41 42 44 46 51 55 58 59 Kodowanie w j(cid:246)zyku HTML Podstawowa struktura strony Obszar widoku (viewport) Elementy strukturalne Tworzenie strony Prosty i logiczny kod HTML Podsumowanie 3 Kup książkęPoleć książkę 4. Style CSS w responsywnych stronach ......................................................................... 61 62 63 67 68 71 76 77 83 84 88 90 93 Jak dzia(cid:228)aj(cid:241) style CSS Wersje j(cid:246)zyka CSS Gdzie s(cid:241) zdefiniowane style CSS Kaskada stylów Stosowanie kaskady stylów Komentarze Model pude(cid:228)kowy W(cid:228)a(cid:264)ciwo(cid:264)(cid:232) display Pozycjonowanie elementów W(cid:228)a(cid:264)ciwo(cid:264)ci float i clear Style podstawowe Podsumowanie 5. Zapytania o media .......................................................................................................95 95 97 99 100 100 103 107 108 112 113 118 120 120 Czym jest zapytanie o medium? Struktura zapytania o medium Zapytania o media w odno(cid:264)nikach do arkuszy stylów Inne metody stosowania zapyta(cid:254) o media Co sprawdzaj(cid:241) zapytania Obs(cid:228)uga zapyta(cid:254) przez przegl(cid:241)darki Zakresy szeroko(cid:264)ci projektu Responsywne projektowanie stron Zastosowanie zapyta(cid:254) o media Uk(cid:228)ad dwukolumnowy Okre(cid:264)lenie maksymalnej szeroko(cid:264)ci obszaru widoku Jak dobiera(cid:232) punkty podzia(cid:228)u Podsumowanie 6. Obrazy ........................................................................................................................ 123 124 127 130 133 136 147 149 158 Sposoby wy(cid:264)wietlania obrazów Tekst alternatywny Formaty obrazów Optymalizacja obrazów Obrazy z tre(cid:264)ci(cid:241) Obrazy w tle Skalowalne obrazy Podsumowanie 4 (cid:95) Spis tre(cid:316)ci Kup książkęPoleć książkę III Responsywno(cid:316)(cid:235) w praktyce .................................................................159 7. Proces tworzenia responsywnej strony ....................................................................161 161 164 167 170 176 180 184 187 190 Strategia i planowanie Najpierw tre(cid:264)(cid:232), potem uk(cid:228)ad Analiza uk(cid:228)adu strony Prototypy stron Wizualny projekt strony Narz(cid:246)dzia do projektowania stron Propagowanie responsywnych projektów Praca z klientami Podsumowanie 8. Urz(cid:233)dzenia przeno(cid:316)ne i nie tylko ..............................................................................191 191 196 196 197 199 202 208 210 216 217 218 221 Wra(cid:276)enia u(cid:276)ytkownika Strony niezale(cid:276)ne od urz(cid:241)dzenia Przede wszystkim urz(cid:241)dzenia mobilne Rób, co mo(cid:276)esz Rodzaje urz(cid:241)dze(cid:254) Dotyk Wielko(cid:264)(cid:232) ekranu Dost(cid:246)pno(cid:264)(cid:232) strony (projektowanie uniwersalne) Wybór obs(cid:228)ugiwanych urz(cid:241)dze(cid:254) Po co testowa(cid:232) stron(cid:246) na prawdziwych urz(cid:241)dzeniach Testy Podsumowanie IV Projektowanie responsywnych stron WWW ...................................... 223 9. Typografia .................................................................................................................225 225 226 227 231 241 246 246 248 249 Zacznij od kodu HTML Kroje pisma Fonty Wielko(cid:264)(cid:232) tekstu D(cid:228)ugo(cid:264)(cid:232) wiersza Bia(cid:228)e znaki Marginesy i odst(cid:246)py Krój pisma a wielko(cid:264)(cid:232) ekranu Podsumowanie Spis tre(cid:316)ci (cid:95) 5 Kup książkęPoleć książkę 10. Nawigacja i nag(cid:293)ówek strony .................................................................................... 251 251 257 259 265 285 293 Responsywna sekcja nawigacji Informacje o marce Odno(cid:264)niki nawigacyjne Szablony nawigacji Nag(cid:228)ówek strony Podsumowanie 11. Wydajno(cid:316)(cid:235) stron WWW .............................................................................................295 295 296 298 303 305 307 309 312 317 319 320 321 322 324 Dlaczego wydajno(cid:264)(cid:232) jest wa(cid:276)na Wydajno(cid:264)(cid:232) jako proces Jak s(cid:241) (cid:228)adowane i wy(cid:264)wietlane strony Pomiar wydajno(cid:264)ci strony Oczyszczanie kodu Minimalizacja liczby zapyta(cid:254) HTTP Serwer WWW Skrypty JavaScript Arkusze CSS Hosting stron Warunkowe (cid:228)adowanie tre(cid:264)ci Przeorganizowanie i przerysowanie strony RESS Podsumowanie Skorowidz .............................................................................................................................327 6 (cid:95) Spis tre(cid:316)ci Kup książkęPoleć książkę ROZDZIA(cid:292) 4. Style CSS w responsywnych stronach Kod HTML nadaje struktur(cid:246) ca(cid:228)ej tre(cid:264)ci Twojej strony WWW, natomiast kod CSS instruuje przegl(cid:241)dark(cid:246), jak tre(cid:264)(cid:232) ma by(cid:232) przedstawiona. Ten rozdzia(cid:228), podobnie jak poprzedni, b(cid:246)dzie dla do(cid:264)wiadczonych programistów stanowi(cid:228) przy- pomnienie wiadomo(cid:264)ci. Opisuje on jednak bardziej szczegó(cid:228)owo, w porównaniu z HTML, podstawow(cid:241) koncepcj(cid:246) j(cid:246)zyka CSS, z tego prostego powodu, (cid:276)e CSS jest kodem decyduj(cid:241)cym o responsywno(cid:264)ci strony. Dog(cid:228)(cid:246)bne zrozumienie budowy responsywnej strony jest niemo(cid:276)liwe bez poznania takich poj(cid:246)(cid:232) jak „kaskada stylów” i „model pude(cid:228)kowy”. Najpierw dowiesz si(cid:246), na czym polega wersjonowanie j(cid:246)zyka CSS i w jaki sposób stosowa(cid:232) prefiksy w celu prawid(cid:228)owego zinterpretowania nowych w(cid:228)a(cid:264)ciwo(cid:264)ci stylów przez ró(cid:276)ne prze- gl(cid:241)darki, nawet gdy w(cid:228)a(cid:264)ciwo(cid:264)ci te s(cid:241) jeszcze na etapie testów. Nast(cid:246)pnie poznasz ró(cid:276)ne sposoby umieszczania stylów w swojej stronie WWW, czy to przez osadzanie ich za pomoc(cid:241) arkusza stylów obejmuj(cid:241)cego wiele stron lub ca(cid:228)(cid:241) witryn(cid:246), czy za pomoc(cid:241) wstawiania, obejmuj(cid:241)cego tylko poszczególne elementy strony. W dalszej kolejno(cid:264)ci poznasz poj(cid:246)cie kaskady, od którego wzi(cid:246)(cid:228)a si(cid:246) nazwa Cascading Style Sheets (CSS — kaskadowe arkusze stylów). Kaskada okre(cid:264)la kolejno(cid:264)(cid:232) stosowania stylów i ich dobór przez przegl(cid:241)dark(cid:246) w przypadku wyst(cid:241)pienia konfliktu stylów. Poznasz równie(cid:276) zalecany, wymagaj(cid:241)cy minimalnego nak(cid:228)adu pracy sposób zastosowania kaskady przy implementacji stylów w swojej stronie. W kolejnej cz(cid:246)(cid:264)ci rozdzia(cid:228)u zapoznasz si(cid:246) z poj(cid:246)ciem modelu pude(cid:228)kowego, okre(cid:264)laj(cid:241)cym sposób wy(cid:264)wietlania elementów na stronie. Ka(cid:276)dy element jest traktowany jak pude(cid:228)ko z przy- pisanymi mu warto(cid:264)ciami (niekiedy zerowymi) opisuj(cid:241)cymi szeroko(cid:264)(cid:232), wysoko(cid:264)(cid:232), marginesy, odst(cid:246)py i ramki. Poznasz zasady wy(cid:264)wietlania i pozycjonowania elementów okre(cid:264)laj(cid:241)ce ich po(cid:228)o(cid:276)enie na stronie. Na zako(cid:254)czenie wrócimy do naszej przyk(cid:228)adowej strony i zastosujemy w niej kilka stylów czcionki i po(cid:228)o(cid:276)enia elementów, wzbogacaj(cid:241)c w ten sposób jej wygl(cid:241)d. 61 Kup książkęPoleć książkę Jak dzia(cid:293)aj(cid:233) style CSS Poni(cid:276)ej, dla wszystkich czytelników, którzy nie znaj(cid:241) j(cid:246)zyka CSS, zosta(cid:228)o umieszczone krótkie przypomnienie, z czego sk(cid:228)ada si(cid:246) kod w arkuszu stylów. Opis nie obejmuje wszystkich mo(cid:276)- liwych sposobów wykorzystania stylów, ale jest wystarczaj(cid:241)cy do prawid(cid:228)owego odczytywania i zrozumienia zawarto(cid:264)ci plików CSS. Zacznijmy od poj(cid:246)cia regu(cid:228)y, oznaczaj(cid:241)cego ka(cid:276)dorazowe zastosowanie stylu w danym elemencie: p { color: red; } Ka(cid:276)da regu(cid:228)a sk(cid:228)ada si(cid:246) z dwóch osobnych sekcji. Selektor opisuje element j(cid:246)zyka HTML, bez nawiasów, w którym b(cid:246)dzie zastosowany dany styl. W powy(cid:276)szym przypadku litera p odpo- wiada elementowi HTML p , a sama regu(cid:228)a okre(cid:264)la sposób, w jaki przegl(cid:241)darka wy(cid:264)wietli akapit na stronie. Za selektorem znajduje si(cid:246) jedna lub kilka deklaracji. Wszystkie deklaracje s(cid:241) umieszczone w nawiasach i definiuj(cid:241) styl, który b(cid:246)dzie zastosowany w elemencie. Deklaracja zawiera w(cid:228)a(cid:264)ciwo(cid:264)(cid:232) elementu, która ma by(cid:232) zmieniona, na przyk(cid:228)ad kolor lub szeroko(cid:264)(cid:232). Jest jej przypisywana warto(cid:264)(cid:232), na przyk(cid:228)ad orange lub 50 . Po ka(cid:276)dej w(cid:228)a(cid:264)ciwo(cid:264)ci znajduje si(cid:246) dwukropek i warto(cid:264)(cid:232), na przyk(cid:228)ad color: red, jak w powy(cid:276)szym przyk(cid:228)adzie, w którym okre(cid:264)lony jest czerwony kolor tekstu. Je(cid:276)eli w regule umieszczonych jest kilka deklaracji, s(cid:241) one rozdzielone (cid:264)rednikami: p { color: red; font-size: 1.5em; } Umieszczenie (cid:264)rednika po ostatniej (lub jedynej) deklaracji nie jest obowi(cid:241)zkowe, ale wielu pro- gramistów go stosuje w celu ujednolicenia kodu. Wszystkie deklaracje zamkni(cid:246)te w nawiasach klamrowych s(cid:241) zwane grup(cid:241) deklaracji. Dzi(cid:246)ki klasom i identyfikatorom style mo(cid:276)na stosowa(cid:232) dla podzbioru elementów: .nazwa_klasy { color: blue; } #identyfikator { color: green; } Powy(cid:276)szy kod dotyczy elementów nale(cid:276)(cid:241)cych do klasy nazwa_klasy (na przyk(cid:228)ad p class= (cid:180) nazwa_klasy ) lub elementów oznaczonych identyfikatorem identyfikator (na przyk(cid:228)ad div id= identyfikator ). Klasy i identyfikatory funkcjonuj(cid:241) podobnie i mog(cid:241) dotyczy(cid:232) dowolnego elementu na stronie. Jednak identyfikator mo(cid:276)na przypisa(cid:232) tylko jednemu, natomiast klas(cid:246) dowolnej liczbie elemen- tów na stronie. Powiniene(cid:264) stosowa(cid:232) opisowe nazwy klas i identyfikatorów. Ich tre(cid:264)(cid:232), w odró(cid:276)nieniu od j(cid:246)zyka HTML, nie ma dla przegl(cid:241)darki (cid:276)adnego znaczenia, za to programi(cid:264)cie jest (cid:228)atwiej kodowa(cid:232), gdy wie, do czego s(cid:228)u(cid:276)y dana klasa lub identyfikator, na przyk(cid:228)ad: p class= wprowadzenie ... /p nav id= podstawowy ... /nav Elementy mo(cid:276)esz okre(cid:264)la(cid:232) bardziej precyzyjnie za pomoc(cid:241) selektorów pochodnych, opisuj(cid:241)- cych elementy znajduj(cid:241)ce si(cid:246) w(cid:264)ród innych elementów, na przyk(cid:228)ad: .nazwa_klasy p { color: purple; } 62 (cid:95) Rozdzia(cid:293) 4. Style CSS w responsywnych stronach Kup książkęPoleć książkę Powy(cid:276)szy przyk(cid:228)ad pokazuje, (cid:276)e spo(cid:264)ród wszystkich elementów nale(cid:276)(cid:241)cych do klasy nazwa_ (cid:180)klasy, elementy p b(cid:246)d(cid:241) mia(cid:228)y kolor fioletowy (nie dotyczy to elementów p spoza klasy nazwa_klasy). Je(cid:276)eli chcesz zastosowa(cid:232) ten sam styl w kilku selektorach, to zamiast tworzy(cid:232) kilka osobnych regu(cid:228), mo(cid:276)esz je zebra(cid:232) w grup(cid:246), oddzielaj(cid:241)c przecinkami: h1, h2 { color: green; } W tym przyk(cid:228)adzie styl instruuje przegl(cid:241)dark(cid:246), (cid:276)e elementy h1 i h2 musz(cid:241) mie(cid:232) kolor zielony. Wpisywanie spacji i podzia(cid:228)ów wierszy podczas tworzenia pliku CSS nie jest obowi(cid:241)zkowe, z wyj(cid:241)tkiem spacji w selektorach pochodnych, na przyk(cid:228)ad .nazwa_klasy p, jak w powy(cid:276)szym przyk(cid:228)adzie. Arkusz stylów mo(cid:276)e wi(cid:246)c wygl(cid:241)da(cid:232) jak poni(cid:276)ej. Jest on w zupe(cid:228)no(cid:264)ci poprawny, aczkolwiek zupe(cid:228)nie nieczytelny: p{color:green}div{width:50 ;backgroundcolor:blue}.nazwa_klasy{color:yellow} Usuwaj(cid:241)c spacje, czyli optymalizuj(cid:241)c arkusz stylów, zmniejszasz wielko(cid:264)(cid:232) pliku CSS (liczy si(cid:246) ka(cid:276)dy bajt), dzi(cid:246)ki czemu Twoja strona b(cid:246)dzie (cid:228)adowa(cid:232) si(cid:246) szybciej (w rozdziale 11. dowiesz si(cid:246), jak korzysta(cid:232) z oprogramowania automatycznie usuwaj(cid:241)cego spacje). UWAGA Trudno czyta si(cid:246) zoptymalizowane arkusze stylów, poniewa(cid:276) wszystkie opisy s(cid:241) w nich umiesz- czone jeden za drugim. W Internecie s(cid:241) dost(cid:246)pne narz(cid:246)dzia wstawiaj(cid:241)ce z powrotem spacje i podzia(cid:228)y wierszy w odpowiednich miejscach pliku, dzi(cid:246)ki czemu jest on bardziej czytelny. Wypróbuj narz(cid:246)- dzie Clean CSS (http://www.cleancss.com) lub inne optymalizatory on-line. Wersje j(cid:253)zyka CSS Podobnie jak w przypadku j(cid:246)zyka HTML, s(cid:241) ró(cid:276)ne wersje j(cid:246)zyka CSS. Pierwsza pojawi(cid:228)a si(cid:246) w roku 1996, zaledwie kilka lat po utworzeniu pierwszej strony w j(cid:246)zyku HTML. Najnowsza wersja ma oznaczenie CSS3. Ka(cid:276)da wersja j(cid:246)zyka CSS obejmuje wszystkie w(cid:228)a(cid:264)ciwo(cid:264)ci elementów, w których mo(cid:276)na zasto- sowa(cid:232) styl. W(cid:228)a(cid:264)ciwo(cid:264)ci s(cid:241) to cechy elementów HTML zmieniane za pomoc(cid:241) stylów, na przy- k(cid:228)ad kolor, czcionka, wielko(cid:264)(cid:232) i po(cid:228)o(cid:276)enie na stronie. W wersji CSS3 zosta(cid:228)o wprowadzonych wiele nowych w(cid:228)a(cid:264)ciwo(cid:264)ci elementów. Jedn(cid:241) z najwi(cid:246)k- szych zmian s(cid:241) zapytania o medium, dzi(cid:246)ki którym mo(cid:276)liwe jest tworzenie stron responsyw- nych. W rozdziale 5. dowiesz si(cid:246) dok(cid:228)adniej, jak dzia(cid:228)aj(cid:241) zapytania o media. Pami(cid:246)taj, (cid:276)e podobnie jak w przypadku j(cid:246)zyka HTML, nie wszystkie przegl(cid:241)darki potrafi(cid:241) interpretowa(cid:232) i prawid(cid:228)owo wy(cid:264)wietla(cid:232) na stronie wszystkie w(cid:228)a(cid:264)ciwo(cid:264)ci zdefiniowane w wersji CSS3. W tej ksi(cid:241)(cid:276)ce s(cid:241) wyró(cid:276)nione w(cid:228)a(cid:264)ciwo(cid:264)ci, na które powiniene(cid:264) zwróci(cid:232) szczególn(cid:241) uwag(cid:246). Równie(cid:276), podobnie jak w HTML, nie wszystkie przegl(cid:241)darki interpretuj(cid:241) wszystkie style CSS dok(cid:228)adnie tak samo. Powiniene(cid:264) pami(cid:246)ta(cid:232) o tych ró(cid:276)nicach i testowa(cid:232) strony za pomoc(cid:241) ró(cid:276)- nych przegl(cid:241)darek i urz(cid:241)dze(cid:254), aby upewni(cid:232) si(cid:246), (cid:276)e wygl(cid:241)daj(cid:241) tak, jak tego oczekujesz. Na rysunku 4.1 przedstawiona jest strona wy(cid:264)wietlona zgodnie z oczekiwaniami w przegl(cid:241)darce Mozilla, natomiast na rysunku 4.2 jest pokazana ta sama strona z usuni(cid:246)tymi stylami CSS. Wersje j(cid:253)zyka CSS (cid:95) 63 Kup książkęPoleć książkę Rysunek 4.1. Strona wy(cid:264)wietlona zgodnie z oczekiwaniami w przegl(cid:241)darce Mozilla Prefiksy przegl(cid:233)darek Niektóre cz(cid:246)(cid:264)ci j(cid:246)zyka CSS3 s(cid:241) wci(cid:241)(cid:276) w trakcie opracowywania przez grup(cid:246) W3C i testowania przez twórców przegl(cid:241)darek. Dlatego ostateczna specyfikacja ka(cid:276)dego nowego stylu mo(cid:276)e si(cid:246) nieco ró(cid:276)ni(cid:232) od sposobu, w jaki przegl(cid:241)darki aktualnie go interpretuj(cid:241). Zamiast pozostawia(cid:232) programistów w niepewno(cid:264)ci, jak b(cid:246)dzie wygl(cid:241)da(cid:228) ich kod wy(cid:264)wietlony w danej przegl(cid:241)darce, zosta(cid:228)y wprowadzone prefiksy przegl(cid:241)darek (zwane te(cid:276) prefiksami producentów), umo(cid:276)liwiaj(cid:241)ce programistom utrzymanie lepszej kontroli nad nowymi sty- lami CSS. W praktyce nie trzeba przejmowa(cid:232) si(cid:246) wszystkimi dost(cid:246)pnymi przegl(cid:241)darkami, poniewa(cid:276) wi(cid:246)k- szo(cid:264)(cid:232) z nich opiera swoje dzia(cid:228)anie na jednym z czterech silników wizualizacyjnych, okre(cid:264)la- j(cid:241)cych sposób wy(cid:264)wietlania strony. W celu wy(cid:264)wietlenia strony przegl(cid:241)darka pobiera ca(cid:228)(cid:241) jej 64 (cid:95) Rozdzia(cid:293) 4. Style CSS w responsywnych stronach Kup książkęPoleć książkę Rysunek 4.2. Strona wy(cid:264)wietlona w przegl(cid:241)darce Mozilla bez stylów CSS Wersje j(cid:253)zyka CSS (cid:95) 65 Kup książkęPoleć książkę tre(cid:264)(cid:232) (plik HTML i obrazy), style (plik CSS) i skrypty JavaScript, po czym podejmuje decyzj(cid:246), jak strona b(cid:246)dzie wy(cid:264)wietlona na ekranie. Wszystkie przegl(cid:241)darki wykorzystuj(cid:241)ce ten sam silnik b(cid:246)d(cid:241) wy(cid:264)wietla(cid:228)y poszczególne fragmenty kodu w taki sam sposób. Te cztery silniki wizualizacyjne, do których b(cid:246)dzie si(cid:246) odwo(cid:228)ywa(cid:228) fragment kodu umieszczony kilka akapitów ni(cid:276)ej, to: (cid:120) WebKit, wykorzystywany przez przegl(cid:241)darki Safari firmy Apple oraz Chrome firmy Google. (cid:120) Gecko firmy Mozilla, wykorzystywany w przegl(cid:241)darce Firefox. (cid:120) Trident firmy Microsoft, stosowany w przegl(cid:241)darce Internet Explorer. (cid:120) Presto firmy Opera, stosowany w przegl(cid:241)darce Opera. Poniewa(cid:276) ka(cid:276)dy z silników mo(cid:276)e w inny sposób wy(cid:264)wietla(cid:232) style znajduj(cid:241)ce si(cid:246) w fazie opra- cowywania, ka(cid:276)dy z nich stosuje swoje w(cid:228)a(cid:264)ciwo(cid:264)ci z prefiksami, b(cid:246)d(cid:241)ce odmianami podsta- wowej w(cid:228)a(cid:264)ciwo(cid:264)ci. Na przyk(cid:228)ad, nie zosta(cid:228)y jeszcze uko(cid:254)czone prace nad w(cid:228)a(cid:264)ciwo(cid:264)ci(cid:241) hyphens, wi(cid:246)c dost(cid:246)pne s(cid:241) jej odmiany dla czterech silników wizualizacyjnych, a ka(cid:276)d(cid:241) z nich mo(cid:276)esz umie(cid:264)ci(cid:232) w swoim kodzie: p { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; } Pi(cid:246)(cid:232) powy(cid:276)szych deklaracji zawiera ró(cid:276)ne w(cid:228)a(cid:264)ciwo(cid:264)ci, przy czym ostatnia, która b(cid:246)dzie ostatecznie zdefiniowana przez W3C, nie jest poprzedzona prefiksem. Cztery pierwsze w(cid:228)a(cid:264)ciwo(cid:264)ci dotycz(cid:241) poszczególnych silników wizualizacyjnych. Która w(cid:228)a- (cid:264)ciwo(cid:264)(cid:232) dotyczy którego silnika, mo(cid:276)na pozna(cid:232) po pierwszej cz(cid:246)(cid:264)ci nazwy — webkit, moz, ms lub o. Zwró(cid:232) uwag(cid:246), (cid:276)e nazwy w(cid:228)a(cid:264)ciwo(cid:264)ci z prefiksami zaczynaj(cid:241) si(cid:246) od my(cid:264)lnika. W powy(cid:276)szym przyk(cid:228)adzie, je(cid:276)eli w(cid:228)a(cid:264)ciwo(cid:264)(cid:232) hyphens jest wci(cid:241)(cid:276) testowana przez silnik WebKit, przegl(cid:241)darka odczyta i zastosuje deklaracj(cid:246) -webkit-hyphens. Przegl(cid:241)darka nie rozpozna innych w(cid:228)a(cid:264)ciwo(cid:264)ci z prefiksami lub bez nich i je pominie. Ale co si(cid:246) stanie, gdy specyfikacja zostanie zatwierdzona? Gdy w silniku WebKit zostanie zaimplementowana oficjalna w(cid:228)a(cid:264)ciwo(cid:264)(cid:232) hyphens, wtedy w(cid:228)a(cid:264)ciwo(cid:264)(cid:232) -webkit-hyphens b(cid:246)dzie wci(cid:241)(cid:276) rozpoznawana, przynajmniej przez pewien czas. Poniewa(cid:276) jednak w(cid:228)a(cid:264)ciwo(cid:264)(cid:232) hyphens bez prefiksu jest okre(cid:264)lona ni(cid:276)ej w arkuszu stylów, równie(cid:276) zostanie rozpoznana i zast(cid:241)pi w(cid:228)a- (cid:264)ciwo(cid:264)(cid:232) -webkit-hyphens. W wi(cid:246)kszo(cid:264)ci przypadków, gdy b(cid:246)dziesz wykorzystywa(cid:228) w(cid:228)a(cid:264)ciwo(cid:264)ci, nad którymi prace jesz- cze nie zosta(cid:228)y zako(cid:254)czone, b(cid:246)dziesz musia(cid:228) stosowa(cid:232) wszystkie cztery prefiksy, podobnie jak w pokazanym wy(cid:276)ej przyk(cid:228)adzie. Kolejno(cid:264)(cid:232) umieszczenia w(cid:228)a(cid:264)ciwo(cid:264)ci z prefiksami nie ma znaczenia. Wi(cid:246)kszo(cid:264)(cid:232) programistów preferuje kolejno(cid:264)(cid:232) jak w powy(cid:276)szym przyk(cid:228)adzie (tj. od najd(cid:228)u(cid:276)szego do najkrótszego), ponie- wa(cid:276) arkusz stylów jest wtedy bardziej czytelny. Jednak na ko(cid:254)cu zawsze jest umieszczana w(cid:228)a- (cid:264)ciwo(cid:264)(cid:232) bez prefiksu. 66 (cid:95) Rozdzia(cid:293) 4. Style CSS w responsywnych stronach Kup książkęPoleć książkę Jak zauwa(cid:276)y(cid:228)e(cid:264), w powy(cid:276)szym przyk(cid:228)adzie ka(cid:276)da deklaracja jest umieszczona w osobnym wierszu, czego zazwyczaj si(cid:246) nie robi w kodzie CSS. Ten przypadek jest wyj(cid:241)tkowy, poniewa(cid:276) stosuj(cid:241)c podzia(cid:228) na osobne wiersze, o wiele (cid:228)atwiej jest sprawdzi(cid:232), czy zosta(cid:228)y uwzgl(cid:246)dnione wszystkie prefiksy i czy ka(cid:276)dy z nich ma t(cid:246) sam(cid:241) warto(cid:264)(cid:232) (aczkolwiek w niektórych sytuacjach mo(cid:276)esz stosowa(cid:232) inne warto(cid:264)ci niektórych w(cid:228)a(cid:264)ciwo(cid:264)ci). W ostatecznej wersji projektu b(cid:246)dziesz móg(cid:228) zrezygnowa(cid:232) z prefiksów i stosowa(cid:232) tylko w(cid:228)a(cid:264)ci- wo(cid:264)ci bez nich (jednak wci(cid:241)(cid:276) b(cid:246)d(cid:241) si(cid:246) pojawia(cid:228)y nowe w(cid:228)a(cid:264)ciwo(cid:264)ci, które b(cid:246)d(cid:241) wymaga(cid:228)y u(cid:276)ycia prefiksów). Kilka nowych w(cid:228)a(cid:264)ciwo(cid:264)ci wprowadzonych w wersji CSS3 jest ju(cid:276) obs(cid:228)ugiwanych przez wszystkie najwa(cid:276)niejsze przegl(cid:241)darki. W prawid(cid:228)owym wy(cid:264)wietlaniu strony nie przeszkadzaj(cid:241) w(cid:228)a(cid:264)ciwo(cid:264)ci z prefiksami, które ju(cid:276) nie s(cid:241) potrzebne. Z tego powodu na ko(cid:254)cu listy umieszcza si(cid:246) w(cid:228)a(cid:264)ciwo(cid:264)(cid:232) bez prefiksu, aby zast(cid:241)pi(cid:228)a wszystkie wcze(cid:264)niejsze. Powi(cid:246)ksza to jednak niepo- trzebnie plik CSS. Je(cid:276)eli jaka(cid:264) w(cid:228)a(cid:264)ciwo(cid:264)(cid:232) wprowadzona w wersji CSS3 wymaga(cid:228)a w chwili pisania tej ksi(cid:241)(cid:276)ki zastosowania prefiksów, zosta(cid:228)o to wyra(cid:274)nie zaznaczone. Jednak gdy czytasz t(cid:246) ksi(cid:241)(cid:276)k(cid:246), status tych w(cid:228)a(cid:264)ciwo(cid:264)ci mo(cid:276)e si(cid:246) ju(cid:276) zmieni(cid:232). Odwied(cid:274) stron(cid:246) „Can I Use…” (http://caniuse.com) i sprawd(cid:274), jakie w(cid:228)a(cid:264)ciwo(cid:264)ci CSS s(cid:241) obs(cid:228)ugi- wane przez ró(cid:276)ne wersje przegl(cid:241)darek i czy musz(cid:241) by(cid:232) stosowane prefiksy. Gdzie s(cid:233) zdefiniowane style CSS Style mo(cid:276)esz stosowa(cid:232) na swojej stronie na kilka sposobów, czy to wykorzystuj(cid:241)c osobny plik zwany arkuszem stylów, czy wbudowuj(cid:241)c je w kod strony. Sposób zdefiniowania stylów CSS wp(cid:228)ywa na ich zastosowanie w stronie. Style wbudowane Je(cid:276)eli chcesz, aby style by(cid:228)y stosowane tylko w jednej stronie witryny, mo(cid:276)esz umie(cid:264)ci(cid:232) je bezpo(cid:264)rednio w sekcji head w pliku HTML, u(cid:276)ywaj(cid:241)c elementu style . Wewn(cid:241)trz tego elementu umie(cid:264)(cid:232) po prostu jedn(cid:241) lub kilka regu(cid:228) CSS w pokazany ni(cid:276)ej sposób: head style p { color: blue; } /style /head Zazwyczaj stylów nie stosuje si(cid:246) tylko w jednej stronie, ale w ca(cid:228)ej witrynie. Nawet je(cid:276)eli okre(cid:264)lony styl b(cid:246)dzie zastosowany tylko na jednej stronie, i tak umieszcza si(cid:246) go w osobnym arkuszu stylów. Dzi(cid:246)ki umieszczeniu wszystkich stylów w jednym miejscu mo(cid:276)na je pó(cid:274)niej (cid:228)atwo znale(cid:274)(cid:232), szczególnie gdy nad kodem strony pracuje kilka osób. Natomiast style wbudowane stosuje si(cid:246) podczas tworzenia kodu HTML dla wiadomo(cid:264)ci e-mail, poniewa(cid:276) u(cid:276)ytkownicy poczty zazwyczaj nie maj(cid:241) mo(cid:276)liwo(cid:264)ci zaimportowania zewn(cid:246)trznego arkusza stylów. Gdzie s(cid:233) zdefiniowane style CSS (cid:95) 67 Kup książkęPoleć książkę Arkusze stylów Zazwyczaj deklaracje CSS s(cid:241) umieszczane w jednym lub kilku oddzielnych plikach, zwanych arkuszami stylów (ang. stylesheets), po(cid:228)(cid:241)czonych z plikami HTML. Style opisuj(cid:241)ce czcionk(cid:246), kolory i uk(cid:228)ad strony powinny by(cid:232) jednolite dla ca(cid:228)ej witryny. Tworz(cid:241)c arkusze, mo(cid:276)esz zade- klarowa(cid:232) style tylko raz i stosowa(cid:232) je w ka(cid:276)dej stronie swojej witryny. Element link umo(cid:276)liwia po(cid:228)(cid:241)czenie dokumentów (plików) CSS i JavaScript z kodem HTML. Element ten umieszcza si(cid:246) w sekcji head pliku HTML: head link rel= stylesheet href= style/moje_style.css /head Z ka(cid:276)d(cid:241) stron(cid:241) WWW mo(cid:276)e by(cid:232) po(cid:228)(cid:241)czonych kilka arkuszy stylów. Mo(cid:276)esz w tym celu równie(cid:276) u(cid:276)y(cid:232) regu(cid:228)y @import, umieszczaj(cid:241)c j(cid:241) wewn(cid:241)trz sekcji head dokumentu i elementu style : head style @import url(style/moje_style.css) /style /head (cid:227)(cid:241)czenie i importowanie arkuszy stylów oznacza w rzeczywisto(cid:264)ci t(cid:246) sam(cid:241) operacj(cid:246) pobierania stylów wykonywan(cid:241) przez przegl(cid:241)dark(cid:246). Jednak wybór konkretnej metody mo(cid:276)e mie(cid:232) wp(cid:228)yw na szybko(cid:264)(cid:232) otwierania strony, o czym si(cid:246) dowiesz w rozdziale 11. Zazwyczaj powiniene(cid:264) stosowa(cid:232) element link i minimalizowa(cid:232) liczb(cid:246) stosowanych arkuszy stylów. Style wstawiane Niekiedy b(cid:246)dziesz chcia(cid:228) kodowa(cid:232) bardziej precyzyjnie i stosowa(cid:232) style tylko w jednym elemen- cie bezpo(cid:264)rednio w kodzie HTML. W tym celu umie(cid:264)(cid:232) w elemencie atrybut stylu (style= ... ), podaj(cid:241)c w cudzys(cid:228)owie dowolne style, które chcesz zastosowa(cid:232): p style= color: green; font-size: 2em; To jest akapit. /p Powiniene(cid:264) jednak unika(cid:232) stosowania na stronie stylów wstawianych, poniewa(cid:276) (cid:228)atwo zapomnie(cid:232), gdzie s(cid:241) zdefiniowane poszczególne style i co definiuj(cid:241), przez co stron(cid:246) b(cid:246)dzie potem trudniej utrzymywa(cid:232). Jednak style te mog(cid:241) by(cid:232) przydatne podczas testowania zmian wprowadzanych na stronie. Kaskada stylów Je(cid:276)eli potrafisz stosowa(cid:232) style CSS, to w tej cz(cid:246)(cid:264)ci rozdzia(cid:228)u znajdziesz znane Ci informacje, które jednak warto przypomnie(cid:232). Jak ju(cid:276) wiesz, style mog(cid:241) by(cid:232) zdefiniowane w zewn(cid:246)trznych arkuszach stylów b(cid:241)d(cid:274) w sekcji head . Mog(cid:241) to tak(cid:276)e by(cid:232) style wstawiane. Dowiedzia(cid:228)e(cid:264) si(cid:246) te(cid:276), (cid:276)e style mog(cid:241) by(cid:232) przypisy- wane elementom, klasom i identyfikatorom. Je(cid:276)eli do elementu zostanie przypisany wi(cid:246)cej ni(cid:276) jeden styl, sk(cid:241)d przegl(cid:241)darka b(cid:246)dzie wiedzia(cid:228)a, który z nich zastosowa(cid:232)? W j(cid:246)zyku CSS obowi(cid:241)zuj(cid:241) bardzo (cid:264)cis(cid:228)e regu(cid:228)y stosowania stylów, zwane kaskadami. Kaskada okre(cid:264)la, które regu(cid:228)y maj(cid:241) priorytet wzgl(cid:246)dem innych regu(cid:228). 68 (cid:95) Rozdzia(cid:293) 4. Style CSS w responsywnych stronach Kup książkęPoleć książkę Poj(cid:246)cie kaskady jest do(cid:264)(cid:232) skomplikowane, ale w wi(cid:246)kszo(cid:264)ci przypadków jej zastosowanie w kodzie CSS b(cid:246)dzie ca(cid:228)kiem proste, a dzia(cid:228)anie zrozumia(cid:228)e. Opisane zostanie dzia(cid:228)anie nie- co uproszczonej wersji kaskady, ale je(cid:276)eli b(cid:246)dziesz bardzo du(cid:276)o pracowa(cid:228) nad kodem, to musisz si(cid:246) o kaskadzie dowiedzie(cid:232) wi(cid:246)cej. Jak to dzia(cid:293)a Ka(cid:276)dy element HTML ma kilka w(cid:228)a(cid:264)ciwo(cid:264)ci. Na przyk(cid:228)ad w(cid:228)a(cid:264)ciwo(cid:264)ci elementu p to kolor tekstu, kolor t(cid:228)a, wielko(cid:264)(cid:232) i krój czcionki, pogrubienie, pochylenie, obecno(cid:264)(cid:232) ramki i jej wygl(cid:241)d, pozycja akapitu na stronie itp. (jest jeszcze kilkana(cid:264)cie innych w(cid:228)a(cid:264)ciwo(cid:264)ci). Przegl(cid:241)darka podczas wy(cid:264)wietlania strony analizuje ka(cid:276)dy element po kolei i na podstawie warto(cid:264)ci jego w(cid:228)a(cid:264)ciwo(cid:264)ci decyduje, w jaki sposób go przedstawi. Przegl(cid:241)darka podczas rozstrzygania o stylach zastosowanych w poszczególnych elementach stosuje (cid:264)ci(cid:264)le okre(cid:264)lon(cid:241) procedur(cid:246) — hierarchi(cid:246) regu(cid:228). Poni(cid:276)ej wymieniona jest kolejno(cid:264)(cid:232) regu(cid:228) wed(cid:228)ug priorytetów, pocz(cid:241)wszy od najwy(cid:276)szej: 1. Regu(cid:228)y oznaczone jako wa(cid:276)ne. 2. Regu(cid:228)y stylów wstawianych. 3. Regu(cid:228)y zawieraj(cid:241)ce identyfikatory. 4. Regu(cid:228)y zawieraj(cid:241)ce klasy, atrybuty i pseudoklasy. 5. Regu(cid:228)y zawieraj(cid:241)ce elementy i pseudoelementy. 6. Regu(cid:228)y odziedziczone. 7. Warto(cid:264)ci domy(cid:264)lne. Kolejno(cid:264)(cid:232) stosowania powy(cid:276)szych regu(cid:228) jest cz(cid:246)sto zwana precyzj(cid:241) CSS, poniewa(cid:276) zaczyna si(cid:246) od najbardziej szczegó(cid:228)owej regu(cid:228)y (stosowanej tylko w jednej lub kilku instancjach danego elementu), a ko(cid:254)czy na najbardziej ogólnej (stosowanej we wszystkich instancjach elementu). Przegl(cid:241)darka, analizuj(cid:241)c ka(cid:276)dy element strony, sprawdza regu(cid:228)y zgodnie z hierarchi(cid:241), a(cid:276) znaj- dzie styl dotycz(cid:241)cy konkretnej w(cid:228)a(cid:264)ciwo(cid:264)ci. Za(cid:228)ó(cid:276)my na przyk(cid:228)ad, (cid:276)e potrzebne jest okre(cid:264)lenie koloru tekstu akapitu (w(cid:228)a(cid:264)ciwo(cid:264)(cid:232) color). Przegl(cid:241)darka zacznie od sprawdzania regu(cid:228) ozna- czonych jako wa(cid:276)ne, potem przejdzie do stylów wstawianych, stylów z identyfikatorami itd. Je(cid:276)eli znajdzie kilka kolorów tekstu akapitu, wybierze ten, który ma najwy(cid:276)szy priorytet w kaskadzie. Oznaczenie wa(cid:348)no(cid:316)ci Je(cid:276)eli chcesz, aby okre(cid:264)lona regu(cid:228)a by(cid:228)a stosowana bez wzgl(cid:246)du na okoliczno(cid:264)ci, mo(cid:276)esz ozna- czy(cid:232) j(cid:241) jako wa(cid:276)n(cid:241) — !important. Oznaczenie mo(cid:276)e by(cid:232) u(cid:276)yte w stylach zwyk(cid:228)ych lub wsta- wionych. Przegl(cid:241)darka zawsze sprawdza oznaczenie !important przed sprawdzeniem nast(cid:246)pnej regu(cid:228)y. W poni(cid:276)szym przyk(cid:228)adzie w(cid:228)a(cid:264)ciwo(cid:264)(cid:232) color zosta(cid:228)a oznaczona jako !important, ale font- weight ju(cid:276) nie. Oznaczenie !important umieszczone jest bezpo(cid:264)rednio przed (cid:264)rednikiem i doty- czy tylko jednej deklaracji, a nie ca(cid:228)ej grupy: p { font-weight: bold; color: blue !important; } Kaskada stylów (cid:95) 69 Kup książkęPoleć książkę Ten akapit b(cid:246)dzie zawiera(cid:228) niebieski tekst, niezale(cid:276)nie od innych kolorów zdefiniowanych w innych deklaracjach dotycz(cid:241)cych tego samego elementu. Chocia(cid:276) oznaczenie !important wydaje si(cid:246) u(cid:276)ytecznym narz(cid:246)dziem, nale(cid:276)y je stosowa(cid:232) bardzo, bardzo rzadko, tylko wtedy, gdy naprawd(cid:246) nie da si(cid:246) osi(cid:241)gn(cid:241)(cid:232) zamierzonego efektu za pomoc(cid:241) klas, identyfikatorów i innych selektorów. Gdy u(cid:276)yjesz tego oznaczenia, b(cid:246)dzie mia(cid:228)o ono bezwzgl(cid:246)dny priorytet i nie da si(cid:246) go — potocznie mówi(cid:241)c — przeskoczy(cid:232). Style wstawiane Je(cid:276)eli przegl(cid:241)darka nie znajdzie regu(cid:228) z oznaczeniem !important opisuj(cid:241)cych kolor, wtedy b(cid:246)dzie szuka(cid:232) stylów wstawianych. S(cid:241) to style przypisane bezpo(cid:264)rednio do elementów w doku- mencie HTML. Wszystkie style wstawiane maj(cid:241) wy(cid:276)szy priorytet od innych stylów zdefinio- wanych w zewn(cid:246)trznym arkuszu lub wbudowanych w sekcji head : p style= color: blue; Tekst akapitu. /p Identyfikatory Je(cid:276)eli nie s(cid:241) zdefiniowane style wstawiane opisuj(cid:241)ce kolor, wtedy przegl(cid:241)darka b(cid:246)dzie szuka(cid:232) identyfikatorów zastosowanych w danym elemencie, czy to bezpo(cid:264)rednio, czy za pomoc(cid:241) selektora pochodnego: p id= przyk(cid:239)ad Tekst akapitu. /p #przyk(cid:239)ad { color: blue; } Klasy, atrybuty i pseudoklasy Je(cid:276)eli nie ma w kodzie identyfikatorów okre(cid:264)laj(cid:241)cych kolor, przegl(cid:241)darka b(cid:246)dzie szuka(cid:232) jakiej- kolwiek klasy, atrybutu lub pseudoklasy, odnosz(cid:241)cych si(cid:246) do danego elementu. Podobnie jak poprzednio, mog(cid:241) one by(cid:232) umieszczone w selektorze pochodnym: .przyklad { color: blue; } .przyklad p { color: green; } Elementy i pseudoelementy Je(cid:276)eli nie ma (cid:276)adnych stylów zawieraj(cid:241)cych klasy, atrybuty lub pseudoklasy, przegl(cid:241)darka b(cid:246)dzie szuka(cid:232) stylów zawieraj(cid:241)cych tylko elementy lub pseudoelementy w selektorze: p Tekst akapitu. /p p { color: blue; } Regu(cid:293)y odziedziczone Je(cid:276)eli do tego miejsca kaskady przegl(cid:241)darka nie znalaz(cid:228)a stylów bezpo(cid:264)rednio okre(cid:264)laj(cid:241)cych kolor naszego elementu p , to b(cid:246)dzie szuka(cid:232) stylów odziedziczonych, które b(cid:246)dzie mog(cid:228)a zastosowa(cid:232). Poj(cid:246)cie dziedziczenia jest do(cid:264)(cid:232) proste. Je(cid:276)eli w jakim(cid:264) elemencie nie jest zastosowany styl, wtedy zostanie u(cid:276)yty styl odziedziczony po elemencie nadrz(cid:246)dnym: 70 (cid:95) Rozdzia(cid:293) 4. Style CSS w responsywnych stronach Kup książkęPoleć książkę p Tekst w tym akapicie jest strong pogrubiony /strong . /p p { color: blue; } Poniewa(cid:276) do elementu strong nie jest przypisana warto(cid:264)(cid:232) okre(cid:264)laj(cid:241)ca jego kolor, zostanie odziedziczona warto(cid:264)(cid:232) z elementu nadrz(cid:246)dnego, w tym przypadku p . Kolor tego elementu jest niebieski (blue) i taki zostanie nadany elementowi strong . Nie wszystkie w(cid:228)a(cid:264)ciwo(cid:264)ci mog(cid:241) by(cid:232) dziedziczone, jednak bardzo (cid:228)atwo mo(cid:276)na rozpozna(cid:232), które z nich mog(cid:241). Na przyk(cid:228)ad wielko(cid:264)(cid:232) czcionki jest dziedziczona, poniewa(cid:276) po ustawieniu jej w elemencie p ca(cid:228)y tekst w tym elemencie powinien mie(cid:232) t(cid:246) sam(cid:241) wielko(cid:264)(cid:232), nawet wewn(cid:241)trz elementów strong lub em . Natomiast w(cid:228)a(cid:264)ciwo(cid:264)ci ramek nie s(cid:241) dziedziczone. Je(cid:276)eli okre(cid:264)lisz ramk(cid:246) elementu div , nie spodziewaj si(cid:246), (cid:276)e ka(cid:276)dy akapit wewn(cid:241)trz tego elementu b(cid:246)dzie mia(cid:228) w(cid:228)asn(cid:241) ramk(cid:246). Warto(cid:316)ci domy(cid:316)lne Je(cid:276)eli przegl(cid:241)darka dotar(cid:228)a do tego miejsca kaskady i nie znalaz(cid:228)a koloru naszego elementu p , to jeszcze nie wszystko stracone, poniewa(cid:276) ka(cid:276)dy element ma swoje warto(cid:264)ci domy(cid:264)lne. Warto(cid:264)ci domy(cid:264)lne wi(cid:246)kszo(cid:264)ci w(cid:228)a(cid:264)ciwo(cid:264)ci s(cid:241) okre(cid:264)lone w specyfikacji j(cid:246)zyka CSS. Na przy- k(cid:228)ad ka(cid:276)dy element tekstowy ma domy(cid:264)lny kolor czarny. Je(cid:276)eli nie okre(cid:264)lisz koloru, przegl(cid:241)- darka u(cid:276)yje domy(cid:264)lnego. Je(cid:276)eli wi(cid:246)c nie b(cid:246)dzie zdefiniowany styl koloru, który mo(cid:276)na by zastosowa(cid:232) w naszym ele- mencie p , b(cid:246)dzie on zawiera(cid:228) czarny tekst. Jak rozstrzygane s(cid:233) konflikty? Oprócz przedstawionych informacji jest jeszcze pewien szczegó(cid:228), o którym nale(cid:276)y pami(cid:246)ta(cid:232). Oprócz stosowania stylów zgodnie z hierarchi(cid:241), sprawdzana jest liczba atrybutów w selektorze. Wi(cid:246)ksza liczba atrybutów oznacza wy(cid:276)szy priorytet (tj. styl zawieraj(cid:241)cy dwa identyfikatory ma wy(cid:276)szy priorytet ni(cid:276) styl z tylko jednym identyfikatorem). Je(cid:276)eli mimo tego dwa style maj(cid:241) ten sam priorytet i wci(cid:241)(cid:276) nie wiadomo, który z nich powinien by(cid:232) zastosowany, wybrany b(cid:246)dzie ten drugi w kolejno(cid:264)ci, w jakiej s(cid:241) zdefiniowane (w kierunku od pocz(cid:241)tku arkusza stylów do jego ko(cid:254)ca). To, co przeczyta(cid:228)e(cid:264) w tej cz(cid:246)(cid:264)ci rozdzia(cid:228)u, stanowi w zasadzie ca(cid:228)(cid:241) wiedz(cid:246), jak(cid:241) powiniene(cid:264) posiada(cid:232) na temat kaskady stylów. Je(cid:276)eli jednak chcia(cid:228)by(cid:264) dowiedzie(cid:232) si(cid:246) wi(cid:246)cej na temat regu(cid:228) stosowania stylów lub u(cid:276)ycia bardziej zaawansowanych funkcjonalno(cid:264)ci j(cid:246)zyka CSS, zapoznaj si(cid:246) z artyku(cid:228)em Vitaly’ego Friedmana pod tytu(cid:228)em CSS Specificity: Things You Should Know („Precyzja stylów CSS: rzeczy, o których powiniene(cid:264) pami(cid:246)ta(cid:232)”, http://www.smashingmagazine.com /2007/07/27/css-specificity-things-you-should-know/). Stosowanie kaskady stylów Ca(cid:228)y powy(cid:276)szy proces prawdopodobnie wydaje si(cid:246) do(cid:264)(cid:232) skomplikowany, ale w rzeczywisto(cid:264)ci jest ca(cid:228)kiem prosty, poniewa(cid:276) to Ty decydujesz o tym, gdzie s(cid:241) stosowane style. Stosowanie kaskady stylów (cid:95) 71 Kup książkęPoleć książkę Podczas okre(cid:264)lania stylów na stronie w rzeczywisto(cid:264)ci stosujesz odwrotn(cid:241) kolejno(cid:264)(cid:232) ni(cid:276) opi- sana wy(cid:276)ej. Style powiniene(cid:264) stosowa(cid:232) w najszerszym mo(cid:276)liwym zakresie i rzadko zag(cid:228)(cid:246)bia(cid:232) si(cid:246) w szczegó(cid:228)y. Na przyk(cid:228)ad, nie b(cid:246)dziesz raczej umieszcza(cid:228) na stronie tekstu w kilkunastu kolorach za pomoc(cid:241) wielu ró(cid:276)nych stylów, które b(cid:246)d(cid:241) ze sob(cid:241) konkurowa(cid:232). Okre(cid:264)lisz jeden lub dwa style i b(cid:246)dziesz dok(cid:228)adnie wiedzia(cid:228), gdzie je zastosowa(cid:232). B(cid:246)dziesz stosowa(cid:228) regu(cid:228)y w nast(cid:246)puj(cid:241)cej kolejno(cid:264)ci: 1. Warto(cid:264)ci domy(cid:264)lne. 2. Regu(cid:228)y odziedziczone. 3. Regu(cid:228)y zawieraj(cid:241)ce elementy i pseudoelementy. 4. Regu(cid:228)y zawieraj(cid:241)ce klasy, atrybuty i pseudoklasy. 5. Regu(cid:228)y zawieraj(cid:241)ce identyfikatory. 6. Regu(cid:228)y stylów wstawianych. 7. Regu(cid:228)y oznaczone jako wa(cid:276)ne. Warto(cid:316)ci domy(cid:316)lne i reset stylu Przede wszystkim zacznij od stosowania warto(cid:264)ci domy(cid:264)lnych. W wi(cid:246)kszo(cid:264)ci przypadków b(cid:246)dzie to oczywiste. Gdy nie b(cid:246)d(cid:241) u(cid:276)yte (cid:276)adne style, jak na stronie utworzonej w rozdziale 3., tekst b(cid:246)dzie czarny, czcionka nag(cid:228)ówka wi(cid:246)ksza ni(cid:276) czcionka akapitu i nie b(cid:246)dzie ramek. To s(cid:241) domy(cid:264)lne warto(cid:264)ci. Jednak przegl(cid:241)darki nie zawsze stosuj(cid:241) domy(cid:264)lne warto(cid:264)ci, których oczekujemy. Dlatego aby mie(cid:232) pewno(cid:264)(cid:232), (cid:276)e startujemy z tego samego miejsca niezale(cid:276)nie od u(cid:276)ytej przegl(cid:241)darki, nale(cid:276)y zresetowa(cid:232) niektóre warto(cid:264)ci do zera. W przeciwnym wypadku niewielkie pozosta(cid:228)o(cid:264)ci stylów b(cid:246)d(cid:241) mia(cid:228)y niew(cid:228)a(cid:264)ciwe domy(cid:264)lne warto(cid:264)ci, które b(cid:246)d(cid:241) wp(cid:228)ywa(cid:228)y na wygl(cid:241)d strony i powo- dowa(cid:228)y, (cid:276)e b(cid:246)dzie ona ró(cid:276)nie wy(cid:264)wietlana przez ró(cid:276)ne przegl(cid:241)darki. Reset warto(cid:316)ci W celu zresetowania stylu nale(cid:276)y ustawi(cid:232) wszystkie marginesy i odst(cid:246)py na zero, a niektóre w(cid:228)a(cid:264)ciwo(cid:264)ci czcionki na standardowe warto(cid:264)ci bazowe. Po zresetowaniu wszystkich warto(cid:264)ci mo(cid:276)na ustawi(cid:232) wszystkie w(cid:228)a(cid:264)ciwo(cid:264)ci stylów na (cid:276)(cid:241)dane warto(cid:264)ci. Sekcja pliku CSS, w której resetowane s(cid:241) wszystkie warto(cid:264)ci, jest cz(cid:246)sto nazywana stylem resetuj(cid:241)cym lub arkuszem resetuj(cid:241)cym. Je(cid:276)eli na przyk(cid:228)ad zastosujemy reset CSS w naszej stronie o pandzie, otrzymamy efekt przed- stawiony na rysunku 4.3. Poprzednia strona wygl(cid:241)da(cid:228)a lepiej, prawda? Nie przejmuj si(cid:246), za chwil(cid:246) to naprawimy. Wyszukanie wszystkich elementów, które mog(cid:241) si(cid:246) ró(cid:276)ni(cid:232), i napisanie deklaracji CSS resetuj(cid:241)- cych ich warto(cid:264)ci wymaga(cid:228)oby w(cid:228)o(cid:276)enia mnóstwa pracy. Na szcz(cid:246)(cid:264)cie, inni zrobili to ju(cid:276) za nas i utworzyli bloki kodu CSS zawieraj(cid:241)ce wszystkie zresetowane style, które s(cid:241) potrzebne. Bloki te mo(cid:276)na po prostu skopiowa(cid:232) i wklei(cid:232) do w(cid:228)asnego arkusza stylów. 72 (cid:95) Rozdzia(cid:293) 4. Style CSS w responsywnych stronach Kup książkęPoleć książkę Rysunek 4.3. Nasza przyk(cid:228)adowa strona ze zresetowanymi stylami Jednym z najpopularniejszych kodów jest Reset CSS autorstwa Erica Meyera (http://meyerweb. com/eric/tools/css/reset). Jest on powszechnie dost(cid:246)pny, wi(cid:246)c u(cid:276)ywaj go (cid:264)mia(cid:228)o i modyfikuj wed(cid:228)ug potrzeb. Innym arkuszem jest plik Normalize.css (http://necolas.github.com/normalize.css) utworzony przez Nicolasa Gallaghera. Mo(cid:276)esz równie(cid:276) utworzy(cid:232) w(cid:228)asny arkusz resetuj(cid:241)cy. Szczegó(cid:228)owe informacje zawarte s(cid:241) w serwisie Nettuts+ w artykule Jeffreya Waya Quick Tip: Create Your Own Simple Reset.css File („Szybka porada: tworzenie w(cid:228)asnego prostego pliku reset.css”, http://net.tutsplus.com/ tutorials/html-css-techniques/weekend-quick-tip-create-your-own-resetcss-file). Arkusz resetuj(cid:241)cy powinien by(cid:232) przetwarzany przez przegl(cid:241)dark(cid:246) na samym pocz(cid:241)tku, aby nie zast(cid:241)pi(cid:228) (cid:276)adnych Twoich stylów. Dlatego powinien by(cid:232) pod(cid:228)(cid:241)czony w pierwszej kolejno(cid:264)ci w sekcji head lub umieszczony w pierwszych wierszach kodu CSS, je(cid:276)eli nie jest zawarty w osobnym pliku. Regu(cid:293)y odziedziczone W nast(cid:246)pnym kroku przyjrzymy si(cid:246) regu(cid:228)om odziedziczonym. Wi(cid:246)kszo(cid:264)(cid:232) stylów w Twojej stronie b(cid:246)dzie odziedziczonych. Je(cid:276)eli ustawisz kolor ró(cid:276)owy tekstu w sekcji body (chocia(cid:276) nie s(cid:241)dz(cid:246), (cid:276)e tak zrobisz), wów- czas ca(cid:228)y tekst na stronie b(cid:246)dzie ró(cid:276)owy. Dzi(cid:246)ki temu nie musisz zaprz(cid:241)ta(cid:232) sobie g(cid:228)owy usta- wianiem kolorów akapitów, list, elementów div itp., chyba (cid:276)e chcesz, aby ich kolor by(cid:228) inny: body { color: pink; } Stosowanie kaskady stylów (cid:95) 73 Kup książkęPoleć książkę Od tej zasady jest jeden wyj(cid:241)tek: odno(cid:264)niki ( a ) nie dziedzicz(cid:241) koloru, s(cid:241) one domy(cid:264)lnie niebieskie (lub fioletowe, je(cid:276)eli zostan(cid:241) odwiedzone), dzi(cid:246)ki czemu s(cid:241) wizualnie wyró(cid:276)nione na stronie. Mo(cid:276)esz pozostawi(cid:232) kolory niebieski i fioletowy lub wybra(cid:232) inne poprzez przypi- sanie ich do elementu a . Upewnij si(cid:246), (cid:276)e nie umie(cid:264)ci(cid:228)e(cid:264) powtarzaj(cid:241)cych si(cid:246) deklaracji stylów. Je(cid:276)eli element body ma kolor ró(cid:276)owy, nie umieszczaj stylu, który ustawia ten kolor dla wszystkich elementów p . Zosta(cid:228) im ju(cid:276) nadany kolor ró(cid:276)owy, wi(cid:246)c by(cid:228)oby to wpisanie niepotrzebnego kodu. Elementy W pierwszej kolejno(cid:264)ci stosuj style o najwi(cid:246)kszym zasi(cid:246)gu. Je(cid:276)eli na przyk(cid:228)ad w ca(cid:228)ym tek(cid:264)cie ma by(cid:232) u(cid:276)yta czcionka Helvetica, zastosuj odpowiedni(cid:241) regu(cid:228)(cid:246) w elemencie body . W ten sposób wszystkie inne elementy odziedzicz(cid:241) t(cid:246) czcionk(cid:246). Je(cid:276)eli chcesz, aby we wszystkich najwa(cid:276)niejszych nag(cid:228)ówkach by(cid:228)a dla odró(cid:276)nienia u(cid:276)yta czcionka Georgia, zastosuj j(cid:241) w stylu dla elementu h1 , dzi(cid:246)ki czemu wszystkie nag(cid:228)ówki b(cid:246)d(cid:241) zapisane czcionk(cid:241) Georgia, a ca(cid:228)y pozosta(cid:228)y tekst czcionk(cid:241) Helvetica. Gdy b(cid:246)dziesz definiowa(cid:228) jakikolwiek styl, spróbuj najpierw odszuka(cid:232) element na najwy(cid:276)szym poziomie hierarchii i w nim zastosuj dany styl. W naszym przypadku chcemy zmieni(cid:232) czcionk(cid:246) nag(cid:228)ówków tak, aby by(cid:228)a ona wi(cid:246)ksza ni(cid:276) pozosta(cid:228)y tekst i pogrubiona: h1 { font-size: 2em; } h2 { font-size: 1.3em; } h1, h2 { font-weight: bold; } p, ul { font-size: 1em; } Jednostka em jest jednostk(cid:241) wzgl(cid:246)dn(cid:241). Warto(cid:264)(cid:232) 2em oznacza, (cid:276)e tekst w elementach h1 b(cid:246)dzie dwa razy wi(cid:246)kszy ni(cid:276) warto(cid:264)(cid:232) bazowa (wielko(cid:264)(cid:232) pozosta(cid:228)ego tekstu na stronie). Wi(cid:246)cej infor- macji na temat jednostki em znajduje si(cid:246) w cz(cid:246)(cid:264)ci „Wymiary” niniejszego rozdzia(cid:228)u). W akapitach i listach zostanie zastosowana domy(cid:264)lna wielko(cid:264)(cid:232) czcionki, jednak aby nie by(cid:228)o niejasno(cid:264)ci, zdefiniujemy j(cid:241) w naszym pliku CSS, nadaj(cid:241)c jej warto(cid:264)(cid:232) 1em. Ca(cid:293)a reszta Je(cid:276)eli styl u(cid:276)yty w jednym elemencie musi ró(cid:276)ni(cid:232) si(cid:246) od stylu u(cid:276)ytego we wszystkich pozo- sta(cid:228)ych instancjach tego elementu, mo(cid:276)esz to osi(cid:241)gn(cid:241)(cid:232) na kilka sposobów. Na przyk(cid:228)ad mo(cid:276)esz okre(cid:264)li(cid:232), aby tekst odno(cid:264)ników w elemencie nav by(cid:228) wi(cid:246)kszy: nav li { font-size: 1.5em; } Wszystkie pozosta(cid:228)e elementy li b(cid:246)d(cid:241) dziedziczy(cid:228)y zdefiniowan(cid:241) dla nich wielko(cid:264)(cid:232) tekstu, wi(cid:246)c jak pokazuje rysunek 4.4, czcionka odno(cid:264)ników w sekcji Dodatkowe odno(cid:264)niki nie zmieni wielko(cid:264)ci. Zacznij od zastosowania selektorów pochodnych, jak w poprzednim przyk(cid:228)adzie, a nast(cid:246)pnie zdefiniuj klasy, za pomoc(cid:241) których wyró(cid:276)nisz wybrane elementy spo(cid:264)ród pozosta(cid:228)ych. 74 (cid:95) Rozdzia(cid:293) 4. Style CSS w responsywnych stronach Kup książkęPoleć książkę Rysunek 4.4. Wielko(cid:264)(cid:232) czcionki w li(cid:264)cie w sekcji nawigacji b(cid:246)dzie wi(cid:246)ksza, ale w pozosta(cid:228)ych listach b(cid:246)dzie mia(cid:228)a pocz(cid:241)tkow(cid:241) wielko(cid:264)(cid:232) Nie u(cid:276)ywaj jednak selektorów pochodnych ani klas, je(cid:276)eli nie jest to konieczne. W poprzednim przyk(cid:228)adzie zosta(cid:228) zastosowany styl bezpo(cid:264)rednio w elemencie nav , a nie selektor pochodny, poniewa(cid:276) odno(cid:264)niki stanowi(cid:241) jedyny tekst wewn(cid:241)trz tego elementu. Ten sam efekt da(cid:228)by nast(cid:246)- puj(cid:241)cy kod: nav { font-size: 1.5em; } Najbardziej precyzyjnymi selektorami s(cid:241) identyfikatory, style wstawiane oraz te z oznacze- niem !important, jednak powiniene(cid:264) unika(cid:232) ich stosowania, chyba (cid:276)e b(cid:246)dziesz to robi(cid:228) z pe(cid:228)n(cid:241) (cid:264)wiadomo(cid:264)ci(cid:241). Prostota Mo(cid:276)esz si(cid:246) dziwi(cid:232), dlaczego trzeba maksymalnie upraszcza(cid:232) arkusz CSS. Czy nie mo(cid:276)na po prostu zdefiniowa(cid:232) klas i stylów z oznaczeniami !important, skoro pozwalaj(cid:241) osi(cid:241)gn(cid:241)(cid:232) zamie- rzony efekt? Jest tak dlatego, (cid:276)e niemal w ka(cid:276)dej stronie b(cid:246)d(cid:241) kiedy(cid:264) wprowadzane zmiany w stylach CSS — niewielkie korekty kosmetyczne lub generalna przebudowa strony. Im prostszy b(cid:246)dzie arkusz CSS na samym pocz(cid:241)tku, tym wprowadzanie pó(cid:274)niej zmian b(cid:246)dzie (cid:228)atwiejsze, szczególnie dla kogo(cid:264) innego ni(cid:276) autor strony. Jak wspomniano wcze(cid:264)niej, niniejsza ksi(cid:241)(cid:276)ka zawiera tylko bardzo podstawowe informacje o funkcjonowaniu stylów CSS. Stosowanie kaskady stylów (cid:95) 75 Kup książkęPoleć książkę Je(cid:276)eli jaki(cid:264) element jest wy(cid:264)wietlany na stronie niezgodnie z oczekiwaniami, powodem mo(cid:276)e by(cid:232) u(cid:276)ycie w kaskadzie innego stylu ni(cid:276) zamierzony. Wykonuj ró(cid:276)ne próby i wprowadzaj zmiany w kodzie, a(cid:276) dowiesz si(cid:246), co jest tego przyczyn(cid:241). Najprostszym sposobem weryfikacji, jak dzia(cid:228)aj(cid:241) wszystkie style, jest wypróbowanie ró(cid:276)nych metod i sprawdzenie efektu. Zawsze testuj swoj(cid:241) stron(cid:246) za pomoc(cid:241) ró(cid:276)nych przegl(cid:241)darek i urz(cid:241)dze(cid:254), aby mie(cid:232) pewno(cid:264)(cid:232), (cid:276)e same style CSS b(cid:246)d(cid:241) stosowane w ten sam sposób. Wi(cid:246)cej informacji na temat testów jest zawartych w rozdziale 8. Komentarze W kodzie CSS, podobnie jak w HTML, mo(cid:276)esz umieszcza(cid:232) komentarze, aczkolwiek w tym celu stosowane s(cid:241) inne symbole. Ca(cid:228)y tekst zawarty w komentarzach jest po prostu pomijany przez przegl(cid:241)dark(cid:246). Komentarze stosuje si(cid:246) w arkuszach stylów najcz(cid:246)(cid:264)ciej w celu umieszczenia opisu lub obja- (cid:264)nienia, do czego u(cid:276)ywany jest jaki(cid:264) styl, albo w celu dodania notatki z informacj(cid:241), kiedy zosta(cid:228)a wprowadzona zmiana: /* To jest komentarz w pliku CSS */ /* Komentarz mo(cid:298)e sk(cid:225)ada(cid:252) si(cid:266) z jednego lub kilku wierszy, a nawet mo(cid:298)e by(cid:252) w tym samym wierszu, co kod stylu */ h1 { color: #7b0000; } Porz(cid:233)dek w arkuszu stylów Poza tym, (cid:276)e style musz(cid:241) by(cid:232) zdefiniowane w okre(cid:264)lonej kolejno(cid:264)ci, aby by(cid:228)y poprawnie zastosowane, sam arkusz mo(cid:276)e by(cid:232) dowolnie zorganizowany. Jednak najlepiej jest tworzy(cid:232) go w usystematyzowany sposób, aby pó(cid:274)niej mo(cid:276)na by(cid:228)o w nim wszystko (cid:228)atwiej znale(cid:274)(cid:232). Gdy umie(cid:264)cisz w nim jeszcze zapytania o media, musisz wiedzie(cid:232), gdzie co jest. Zawsze musisz zaczyna(cid:232) od stylów resetuj(cid:241)cych. Mo(cid:276)e to by(cid:232) oddzielny plik albo pierwsze wiersze kodu w podstawowym arkuszu. Niektórzy programi(cid:264)ci porz(cid:241)dkuj(cid:241) arkusz stylów wed(cid:228)ug sekcji strony, umieszczaj(cid:241)c komenta- rze opisuj(cid:241)ce ka(cid:276)d(cid:241) sekcj(cid:246) arkusza. Mo(cid:276)esz w komentarzach umieszcza(cid:232) my(cid:264)lniki lub inne sym- bole, aby rysowa(cid:232) „linie” pomi(cid:246)dzy sekcjami, dzi(cid:246)ki czemu (cid:228)atwiej b(cid:246)dzie odnale(cid:274)(cid:232) okre(cid:264)lony kod: /* Podstawowa tre(cid:286)(cid:252) ----------------------------- */ Style kroju czcionki, uk(cid:239)adu strony itp. dla podstawowej tre(cid:258)ci /* Nag(cid:225)ówek ----------------------------- */ Style kroju czcionki, uk(cid:239)adu strony itp. dla nag(cid:239)ówka /* Stopka ----------------------------- */ Style kroju czcionki, uk(cid:239)adu strony itp. dla stopki Inni programi(cid:264)ci preferuj(cid:241) umieszczanie podobnych stylów razem, niezale(cid:276)nie od sekcji strony, w których s(cid:241) stosowane, aby mie(cid:232) lepsze rozeznanie, co si(cid:246) dzieje na stronie: /* Czcionki ----------------------------- */ p { ... } nag(cid:239)ówek p { ... } stopka p { ... } .nazwa_klasy p { ... } 76 (cid:95) Rozdzia(cid:293) 4. Style CSS w responsywnych stronach Kup książkęPoleć książkę li { ... } stopka li { ... } .nazwa_klasy li { ... } /* Uk(cid:225)ad ----------------------------- */ nag(cid:239)ówek { ... } stopka { .... } W swojej przegl(cid:241)darce mo(cid:276)esz przejrze(cid:232) kod HTML i CSS dowolnej strony. Przyjrzyj si(cid:246) arku- szom CSS ró(cid:276)nych stron i sprawd(cid:274), jak zorganizowane s(cid:241) w nich style. Nie obowi(cid:241)zuje tu okre(cid:264)lona zasada, trzeba jednak by(cid:232) konsekwentnym. Model pude(cid:293)kowy Najwa(cid:276)niejszym poj(cid:246)ciem w j(cid:246)zyku CSS jest „model pude(cid:228)kowy” strony. Oznacza ono, (cid:276)e ka(cid:276)dy element HTML na stronie jest prostok(cid:241)tnym pude(cid:228)kiem. Ka(cid:276)de pude(cid:228)ko mo(cid:276)e mie(cid:232) ramki, odst(cid:246)py (puste miejsca wewn(cid:241)trz ramki) i marginesy (puste miejsce na zewn(cid:241)trz ramki), ale nie musi. Jak pokazuje rysunek 4.5, zawarto(cid:264)(cid:232) pude(cid:228)ka znajduje si(cid:246) w jego (cid:264)rodku. Zawarto(cid:264)(cid:232) mo(cid:276)e sta- nowi(cid:232) tekst, obrazy lub elementy podrz(cid:246)dne (na przyk(cid:228)ad akapit wewn(cid:241)trz elementu div ). Wokó(cid:228) elementu s(cid:241) odst(cid:246)py, nast(cid:246)pnie ramki, potem marginesy, z których ka(cid:276)dy mo(cid:276)e mie(cid:232) szeroko(cid:264)(cid:232) lub wysoko(cid:264)(cid:232) równ(cid:241) zero (ramka o szeroko(cid:264)ci i wysoko(cid:264)ci równej zero jest niewi- doczna). Rysunek 4.5. Wokó(cid:228) tego elementu znajduj(cid:241) si(cid:246) odst(cid:246)py, ramki i marginesy Wymiary Wysoko(cid:264)(cid:232), szeroko(cid:264)(cid:232), marginesy, odst(cid:246)py i ramki elementów mog(cid:241) by(cid:232) wyra(cid:276)one w dowolnych jednostkach. Model pude(cid:293)kowy (cid:95) 77 Kup książkęPoleć książkę Tradycyjnie stosuje si(cid:246) jednostki bezwzgl(cid:246)dne, aby zagwarantowa(cid:232), (cid:276)e element zostanie umiesz- czony w okre(cid:264)lonym miejscu na ekranie. W przypadku stron responsywnych zazwyczaj wyko- rzystuje si(cid:246) jednostki wzgl(cid:246)dne, dzi(cid:246)ki czemu elementy mog(cid:241) dostosowywa(cid:232) si(cid:246) do wielko(cid:264)ci ekranu. Najcz(cid:246)(cid:264)ciej stosowane wzgl(cid:246)dne jednostki wymiarów to: em rem Warto(cid:264)(cid:232) procentowa opisuje element zawarty wewn(cid:241)trz innego elementu. Em jest to wzgl(cid:246)dna jednostka wielko(cid:264)ci tekstu elementu. Rem jest to wzgl(cid:246)dna jednostka okre(cid:264)laj(cid:241)ca wielko(cid:264)(cid:232) tekstu dokumentu (tj. elementu html ). Poni(cid:276)ej wymienione s(cid:241) najcz(cid:246)(cid:264)ciej stosowane jednostki bezwzgl(cid:246)dne: px Piksel to jednostka bezwzgl(cid:246)dna, jednak nie zawsze jest taka sama dla wszystkich urz(cid:241)dze(cid:254). in, cm oraz mm Fizyczne jednostki przeliczane na piksele, które równie(cid:276) nie musz(cid:241) by(cid:232) takie same dla ró(cid:276)nych urz(cid:241)dze(cid:254). Na jeden cal przypada 96 pikseli, na jeden centymetr 37,8 piksela, a na jeden milimetr 3,78 piksela. pt Punkt odpowiada 1/72 cz(cid:246)(cid:264)ci cala. Cz(cid:246)(cid:264)ciej jest stosowany w wydrukach. W przypadku stron WWW mo(cid:276)e by(cid:232) przydatny w arkuszach stylów opisuj(cid:241)cych stron(cid:246) do wydruku. Jednostka em W responsywnych stronach b(cid:246)dziesz bardzo cz(cid:246)sto stosowa(cid:228) jednostk(cid:246) em. W minionej epoce sk(cid:228)adu drukarskiego jednostka em okre(cid:264)la(cid:228)a wielko(cid:264)(cid:232) metalowej p(cid:228)ytki, odpowiednio szerokiej, aby mog(cid:228)a si(cid:246) na niej zmie(cid:264)ci(cid:232) najszersza litera, czyli wielka litera M. Wielu programistów przyjmuje, (cid:276)e komputerowa jednostka em równie(cid:276) odpowiada szeroko(cid:264)ci litery M, ale tak w rzeczywisto(cid:264)ci nie jest. Okre(cid:264)la ona po prostu wielko(cid:264)(cid:232) czcionki u(cid:276)ytej w elemencie. Jak pokazuje rysunek 4.6, jednostka ta nie zale(cid:276)y od wybranego kroju czcionki. Rysunek 4.6. Oba prostok(cid:241)ty maj(cid:241) wysoko(cid:264)(cid:232) i szeroko(cid:264)(cid:232) równ(cid:241) dok(cid:228)adnie 1 em 78 (cid:95) Rozdzia(cid:293) 4. Style CSS w responsywnych stronach Kup książkęPoleć książkę Wysoko(cid:316)(cid:235) i szeroko(cid:316)(cid:235) elementów W modelu pude(cid:228)kowym ka(cid:276)dy element ma okre(cid:264)lon(cid:241) wysoko(cid:264)(cid:232) i szeroko(cid:264)(cid:232), które niekiedy mog(cid:241) by(cid:232) zmieniane za pomoc(cid:241) stylów CSS. Wysoko(cid:264)(cid:232) i szeroko(cid:264)(cid:232) elementów wstawianych s(cid:241) dziedziczone po elementach nadrz(cid:246)dnych i nie mo(cid:276)na ich zmienia(cid:232). Elementy wstawiane s(cid:241) domy(cid:264)lnie na tyle szerokie i wysokie, aby mog(cid:228)a by(cid:232) wy(cid:264)wietlona ich zawarto(cid:264)(cid:232), jak pokazuje rysunek 4.7. Rysunek 4.7. Elementy wstawiane maj(cid:241) minimaln(cid:241) szeroko(cid:264)(cid:232) i wysoko(cid:264)(cid:232) niezb(cid:246)dn(cid:241) do wy(cid:264)wietlenia zawarto(cid:264)ci Szeroko(cid:264)(cid:232) elementu blokowego jest domy(cid:264)lnie równa 100 szeroko(cid:264)ci elementu nadrz(cid:246)dnego, nawet je(cid:276)eli wy(cid:264)wietlana zawarto(cid:264)(cid:232) nie zajmuje ca(cid:228)ego miejsca. Domy(cid:264)lnie elementowi nadawana jest wysoko(cid:264)(cid:232) odpowiednia do zawartej w nim tre(cid:264)ci. Na przyk(cid:228)ad akapit jest na tyle wysoki, aby zmie(cid:264)ci(cid:228) si(cid:246) w nim ca(cid:228)y tekst zapisany w kilku wier- szach, jak pokazuje rysunek 4.8. Rysunek 4.8. Elementy blokowe maj(cid:241) domy(cid:264)ln(cid:241) szeroko(cid:264)(cid:232) odpowiadaj(cid:241)c(cid:241) elementowi nadrz(cid:246)dnemu, natomiast wysoko(cid:264)(cid:232) odpowiedni(cid:241) do zawartej w nim tre(cid:264)ci Wysoko(cid:264)(cid:232) i szeroko(cid:264)(cid:232) elementu blokowego mo(cid:276)esz zmieni(cid:232) za pomoc(cid:241) stylu CSS: div { width: 75 ; height: 200px; } Pami(cid:246)taj, (cid:276)e szeroko(cid:264)(cid:232) wyra(cid:276)ona w procentach odnosi si(cid:246) do szeroko(cid:264)ci elementu nadrz(cid:246)dnego, a wi(cid:246)c w powy(cid:276)szym przyk(cid:228)adzie szeroko(cid:264)(cid:232) elementu div b(cid:246)dzie równa 75 szeroko(cid:264)ci innego elementu, w którym b(cid:246)dzie on umieszczony. Marginesy i odst(cid:253)py Ka(cid:276)dy element umieszczony na stronie ma marginesy, czyli puste miejsce wokó(cid:228) zewn(cid:246)trznych kraw(cid:246)dzi, oraz odst(cid:246)py, czyli puste miejsce wewn(cid:241)trz kraw(cid:246)dzi, otaczaj(cid:241)ce zawarto(cid:264)(cid:232). Mar- ginesy i odst(cid:246)py cz(cid:246)sto daj(cid:241) ten sam efekt, chyba (cid:276)e element ma ramk(cid:246), która znajduje si(cid:246) na zewn(cid:241)trz odst(cid:246)pów i wewn(cid:241)trz marginesów. Przegl(cid:241)darki stosuj(cid:241) domy(cid:264)lne odst(cid:246)py i marginesy dla ka(cid:276)dego elementu, ale nie s(cid:241) one takie same we wszystkich przegl(cid:241)darkach. Z tego powodu stosowane s(cid:241) opisane wy(cid:276)ej arkusze rese- tuj(cid:241)ce, które ustawiaj(cid:241) odst(cid:246)py i marginesy wszystkich elementów na zero. Dzi(cid:246)ki temu unika Model pude(cid:293)kowy (cid:95) 79 Kup książkęPoleć książkę si(cid:246) przypadkowego ustawienia ró(cid:276)nych marginesów i odst(cid:246)pów w ró(cid:276)nych przegl(cid:241)darkach, przez co strona mog(cid:228)aby nie wygl(cid:241)da(cid:232) tak, jak by(cid:264) tego oczekiwa(cid:228). Zazwyczaj w przypadku responsywnych stron szeroko(cid:264)(cid:232) lewego i prawego marginesu i od- st(cid:246)pu okre(cid:264)la si(cid:246) w procentach, dzi(cid:246)ki czemu uk(cid:228)ad strony mo(cid:276)e by(cid:232) dostosowany do szero- ko(cid:264)ci obszaru widoku. Na szerokich ekranach margines wokó(cid:228) tre(cid:264)ci b(cid:246)dzie odpowiednio du(cid:276)y, natomiast na ma(cid:228)ych ekranach cenne miejsce nie b(cid:246)dzie tracone na szerokie marginesy. Marginesy i odst(cid:246)py górne i dolne mog(cid:241) by(cid:232) wyra(cid:276)one w pikselach, poniewa(cid:276) nie musz(cid:241) by(cid:232) dostosowywane do wielko(cid:264)ci obszaru widoku. Ka(cid:276)da z czterech stron elementu mo(cid:276)e mie(cid:232) okre(cid:264)lon(cid:241) w(cid:228)asn(cid:241) szeroko(cid:264)(cid:232) marginesu i odst(cid:246)pu. W poni(cid:276)szym przyk(cid:228)adzie ustawiane s(cid:241) osobne warto(cid:264)ci parametrów ka(cid:276)dego brzegu elementu. Kolejno(cid:264)(cid:232) brzegów jest zgodna z ruchem wskazówek zegara — górny, prawy, dolny, lewy: div { padding: 1px 2px 3px 4px; margin: 1px 2px 3px 4px; } W tym przyk(cid:228)adzie górny margines i odst(cid:246)p s(cid:241) ustawiane na 1 piksel, prawy na 2 piksele, dolny na 3 piksele i lewy na 4 piksele. Je(cid:276)eli wymiary po przeciwnych stronach lub wszystkie wymiary s(cid:241) takie sam
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Responsywne strony WWW dla każdego
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ą: