Podręcznik CSS

download Podręcznik CSS

of 272

Transcript of Podręcznik CSS

  • 7/26/2019 Podrcznik CSS

    1/272

  • 7/26/2019 Podrcznik CSS

    2/272

    Tytu oryginau: Smashing CSS: Professional Techniques for Modern Layout

    Tumaczenie: ukasz Piwko

    ISBN: 978-83-246-3599-3

    Numer katalogowy: 6647

    2011 John Wiley & Sons, Ltd.

    All Rights Reserved. Authorised translation from the English language edition published by

    John Wiley & Sons Limited. Responsibility for the accuracy of the translation rests solely with Helion S.A.

    and is not the responsibility of John Wiley & Sons Limited. No part of this book may be reproduced in any

    form without the written permission of the original copyright holder, John Wiley & Sons Limited.

    Polish edition copyright 2011 by Helion S.A. 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 zastrzeone. Nieautoryzowane rozpowszechnianie caoci lub fragmentu niniejszej publikacji

    w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metod kserograficzn, fotograficzn, a take

    kopiowanie ksiki na noniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich

    niniejszej publikacji.

    Wszystkie znaki wystpujce w tekcie s zastrzeonymi znakami firmowymi bd towarowymi ich wacicieli.

    Autor oraz Wydawnictwo HELION dooyli wszelkich stara, by zawarte w tej ksice informacje byy kompletne

    i rzetelne. Nie bior jednak adnej odpowiedzialnoci ani za ich wykorzystanie, ani za zwizane z tym ewentualne

    naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponosz rwnie adnej

    odpowiedzialnoci za ewentualne szkody wynike z wykorzystania informacji zawartych w ksice.

    Wydawnictwo HELION

    ul. Kociuszki 1c, 44-100 GLIWICE

    tel. 32 231 22 19, 32 230 98 63

    e-mail: [email protected]

    WWW: http://helion.pl(ksigarnia internetowa, katalog ksiek)

    Drogi Czytelniku!

    Jeeli chcesz oceni t ksik, zajrzyj pod adres

    http://helion.pl/user/opinie?tfacss_p

    Moesz tam wpisa swoje uwagi, spostrzeenia, recenzj.

    Printed in Poland.

    Pole ksik na Facebook.com

    Kup w wersji papierowej

    Oce ksik

    Ksigarnia internetowa

    Lubi to!Nasza spoeczno

    mailto:[email protected]://helion.pl/http://helion.pl/http://helion.pl/user/opinie?tfacss_phttp://ebookpoint.pl/rf/TFACSS_Phttp://ebookpoint.pl/rt/TFACSShttp://ebookpoint.pl/ro/TFACSS_Phttp://ebookpoint.pl/http://ebookpoint.pl/r/4CAKFhttp://ebookpoint.pl/r/4CAKFhttp://ebookpoint.pl/r/4CAKFhttp://ebookpoint.pl/r/4CAKFhttp://ebookpoint.pl/r/4CAKFhttp://ebookpoint.pl/r/4CAKFhttp://ebookpoint.pl/http://ebookpoint.pl/ro/TFACSS_Phttp://ebookpoint.pl/rt/TFACSShttp://ebookpoint.pl/rf/TFACSS_Phttp://helion.pl/user/opinie?tfacss_phttp://helion.pl/mailto:[email protected]
  • 7/26/2019 Podrcznik CSS

    3/272

    PODZIKOWANIA WYDAWCY ORYGINAU

    Oto wybrane osoby, ktre przyczyniy si do powstania tej ksiki:

    Editorial and ProductionVP Consumer and Technology Publishing Director: Michelle LeeteAssociate Director Book Content Management: Martin TribeAssociate Publisher: Chris WebbPublishing Assistant: Ellie ScottProject Editor: Brian HerrmannCopy Editor: Debbye ButlerEditorial Manager: Jodi JensenSr. Project Editor: Sara Shlaer

    Editorial Assistant: Leslie Saxman

    MarketingSenior Marketing Manager: Louise BreinholtMarketing Executive: Kate Parrett

    Composition ServicesCompositor: Jennifer MayberryProofreader: Susan HobbsIndexer: Potomac Indexing, LLC

  • 7/26/2019 Podrcznik CSS

    4/272

  • 7/26/2019 Podrcznik CSS

    5/272

    Dla Kathryn, Carolyn i Rebeki,

    ktre s mym najpikniejszym snem.

  • 7/26/2019 Podrcznik CSS

    6/272

    O autorze

    Eric A. Meyerjest znanym na caym wiecie specjalist od jzykw HTML i CSS orazstandardw sieciowych. Pracuje w tym zawodzie od 1993 roku. Jest zaoycielem firmyComplex Spiral Consulting, ktrej klientami s m.in. takie firmy, jak America On-Line,Apple, Adobe, Microso, Progressive Insurance, Sherwin-Williams i wiele innych.Jest jednym z inicjatorw ruchu promujcego mikroformaty oraz wsporganizatorem(razem z Jeffreyem Zeldmanem) An Event Apart, serii konferencji dla osb zajmujcychsi tworzeniem witryn internetowych. Meyer jest rwnie autorem piciu bestsellerw

    powiconych tematyce kaskadowych arkuszy stylw i projektowaniu stron internetowych.

    6

  • 7/26/2019 Podrcznik CSS

    7/272

    Podzikowania

    Dzikuj Chrisowi Webbowi za zaangaowanie mnie w prace nad tym projektem i cierpliweprzeczekiwanie wszystkich moich opnie i potkni. Byy chwile, kiedy wydawao si,e ju nic z tego nie bdzie. Wtedy do akcji wkracza Chris ze swoim dobrym humoremi stoickim spokojem, po czym wszystko wracao na waciwe tory. Podziwiam Ci i mamnadziej, e ktrego roku uda nam si w kocu ustali czas wsplnego urlopu, abymymogli napi si razem daiquiri przy basenie.

    Dzikuj take Debbye Butler i Brianowi Herrmannowi za przeprowadzenie mnie za rkprzez proces korekty i pokazanie mi, gdzie zapuciem si na manowce, gdzie le dobraemsowa, a gdzie po prostu wyraziem si niejasno.

    Dzikuj wszystkim, ktrzy czytaj moje publikacje, czy to papierowe, czy w internecie.Dzikuj Wam z caego serca.

    Dzikuj mojej onie i crkom. Nie potrafi znale sw, aby opisa, jak bardzo jestemWam wdziczny.

    Eric A. Meyer

    Cleveland Heights, Ohio13 sierpnia 2010

    7

  • 7/26/2019 Podrcznik CSS

    8/272

  • 7/26/2019 Podrcznik CSS

    9/272

    Spis treci

    CZ I PODSTAWY 15

    Rozdzia 1 Narzdzia 17Firebug 18Pasek narzdzi Web Developer 24Pasek narzdzi Internet Explorer Developer Toolbar 29

    Dodatek Dragonfly dla Opery 33Dodatek WebInspector do przegldarki Safari 35XRAY 37Narzdzie Selectoracle 38Diagnostyczny arkusz stylw 40Zerowanie stylw 42Skrypt IE9.JS 45

    Rozdzia 2 Selektory 47Pseudoco tam 48

    Precyzyjne ldowanie 50Precyzja selektorw 51Regua wanoci 52Co si dzieje, gdy zostanie pominita jaka warto

    w zapisie skrconym? 53Wybircze przesanianie wasnoci w zapisie skrconym 55Selektor uniwersalny 57Identyfikatory a klasy 58czenie identyfikatorw z klasami 61Przypisywanie jednego elementu do wielu klas 61

    Selektory atrybutw 62Selektor atrybutu class 64Identyfikatory a selektory atrybutw 65Selektor podacuchw wartoci atrybutw 66Selektor podacuchw wartoci atrybutw cig dalszy 68Selektory dzieci 70Czciowa imitacja selektora elementw dzieci 72Selektory elementw siostrzanych 73Generowanie treci 75

  • 7/26/2019 Podrcznik CSS

    10/272

    SPIS TRECI

    10

    CZ II NIEZBDNIK 79

    Rozdzia 3 Porady 81Sprawdzaj poprawno kodu! 82Kolejno wasnoci pisma 83Wysoko linii 83Bezjednostkowe wartoci wasnoci line-height 84Okrelaj styl obramowania 86Ustawianie koloru obramowania 86Wyczanie wywietlania elementw 88Wyczanie widocznoci elementu 89Wyrzucanie elementw poza ekran 90Obrazy zamiast tekstu 92Style dla druku 94Pisanie arkuszy stylw dla druku 95cza blokowe 96Margines czy dopenienie? 97Wycinanie list 99Definiowanie punktorw list 100Punktory w tle 102Generowanie markerw 105Masz do dyspozycji wicej kontenerw, ni mylisz 107Ta dokumentu 110

    Arkusze serwerowe 111Rozdzia 4 Ukady 115

    Stosowanie obrysu zamiast obramowania 116Ustawianie blokw na rodku 118Kontenery elementw pywajcych przepenienie 121Pywajce kontenery elementw pywajcych 123Clearfix 125Kliring elementw przylegajcych 126Prosty ukad dwukolumnowy 128Prosty ukad trzykolumnowy 129Faszywe kolumny 132Technika Liquid Bleach 135One True Layout 138wity Graal 142Pynne siatki 146Ukad oparty na jednostkach em 150Ujemne marginesy w ukadzie normalnym 154Pozycjonowanie w kontekcie 156Wyjcie poza kontener 158Pozycjonowanie na sztywno nagwkw i stopek 161

  • 7/26/2019 Podrcznik CSS

    11/272

    SPIS TRECI

    11

    Rozdzia 5 Efekty 165Complexspiral 166Menu podrczne w CSS 170Menu CSS 172

    Nieregularne ksztaty 174Zaokrglanie rogw przed nastaniem CSS 3 177Zaokrglanie rogw przy uyciu CSS 3 181Sprajty CSS 183Sliding Doors 185Przesuwane drzwi z przycinaniem 189Paralaksa CSS 191Nieregularne ksztaty pywajce 193Lepsze nieregularne ksztaty pywajce 197Pola obrazw 201

    Ograniczanie rozmiaru obrazw 202

    CZ III NAJNOWSZE TECHNIKI 205

    Rozdzia 6 Tabele 207Nagwek, tre gwna i stopka tabeli 208Nagwki wierszy 211Formatowanie wedug kolumn 213Tworzenie map z danych tabelarycznych 217

    Wykresy z tabel 224

    Rozdzia 7 Pie przyszoci 233Formatowanie elementw HTML 5 234Imitacja elementw HTML 5 za pomoc nazw klas 236Zapytania o media 237Formatowanie wybranych elementw-dzieci 242Formatowanie wybranych kolumn 246Kolory RGB z kanaem alfa 249Kolory HSL i HSL z kanaem alfa 250

    Cienie 252Definiowanie wielu obrazw w tle elementw 254Przeksztacenia dwuwymiarowe 258

    Skorowidz 269

  • 7/26/2019 Podrcznik CSS

    12/272

  • 7/26/2019 Podrcznik CSS

    13/272

    Wstp

    Technologia CSS staa si tak niezwykle popularna dorwnaa ju prawie samemujzykowi HTML e czasami a trudno w to uwierzy. Mona j spotka ju wszdzie,od przegldarek internetowych, przez sklepy internetowe, po aplikacje do czatowania,i nie wyglda na to, aby miao si cokolwiek w tej kwestii zmieni. W miar jak zakresuycia jzyka staje si coraz szerszy, jego moliwoci coraz bardziej si powikszaj.

    Niniejsza ksika zawiera opis okoo setki porad, technik, narzdzi i sztuczek dotyczcych

    tworzenia najwyszej jakoci witryn internetowych przy uyciu CSS. Kady opis jestniezaleny od pozostaych, tzn. moesz otworzy ksik na dowolnej stronie i przeczyta to,co si na niej znajduje, bez obaw, e stracisz co wanego z poprzednich stron. Oznaczato, e do zrozumienia tekstu potrzebna jest przynajmniej podstawowa znajomo technikCSS oraz wiedza, do czego technologia ta suy. Potrzebny poziom umiejtnoci najlepiejmona by okreli jako zaawansowany pocztkujcy lub rednio zaawansowany. Jeliwic dopiero zaczynasz poznawa CSS albo wiesz na ten temat wicej ni twrcy samejspecyfikacji CSS, ta ksika raczej nie jest dla Ciebie. Wszyscy pozostali znajd tu mnstwocennych porad i duo si naucz.

    W pierwszej czci przedstawiem krtki przegld najprzydatniejszych narzdzi i podstawowychtechnik, wliczajc niektre najmniej znane selektory CSS. W czci drugiej opisuj rnerzeczy, jakie mona zrobi przy uyciu CSS, tzn. rozmaite ciekawe efekty, rne sposobyosignicia tego samego celu, ukady itp. W czci trzeciej zostay opisane najnowszezaawansowane techniki, ktrych moe nie uda Ci si realnie wykorzysta w cigunajbliszych dni, ale z pewnoci bd nabieray znaczenia w niedugim czasie.

    Przykady kodu mona pobra z serwera FTP wydawnictwa Helion pod adresemftp://p.helion.pl/przyklady/tfacss.zip .

    Niecae 10 lat temu kady, kto myla, e jzyk CSS odchodzi do lamusa, mgby by w jaki

    sposb usprawiedliwiony, lecz dzi, w roku 2011, technologia ta rozkwita jak nigdy dotd.Licz na to, e spodoba Ci si tre tej ksiki tak samo, jak mnie podobao si jej pisanie!

    ftp://ftp.helion.pl/przyklady/tfacss.zipftp://ftp.helion.pl/przyklady/tfacss.zipftp://ftp.helion.pl/przyklady/tfacss.zipftp://ftp.helion.pl/przyklady/tfacss.zipftp://ftp.helion.pl/przyklady/tfacss.zipftp://ftp.helion.pl/przyklady/tfacss.zip
  • 7/26/2019 Podrcznik CSS

    14/272

  • 7/26/2019 Podrcznik CSS

    15/272

    CZ

    I

    Rozdzia 1. Narzdzia

    Rozdzia 2. Selektory

    PODSTAWYI

  • 7/26/2019 Podrcznik CSS

    16/272

  • 7/26/2019 Podrcznik CSS

    17/272

    R

    OZDZIA

    1

    W PROCESIE TWORZENIAstron internetowych(a nawet aplikacji) w duym stopniu korzystamyz rozmaitych narzdzi. Jeli chodzi o CSS, touywamy zarwno narzdzi wspomagajcychpisanie kodu CSS, jak i samych arkuszy stylwdo tworzenia narzdzi, ktre pomagaj namw pracy.

    S nawet takie narzdzia, ktre rozszerzajpodstawowe moliwoci przegldarek w zakresieobsugi CSS. Jestemy konstruktorami, artystamii sprawcami w tym rozdziale poznasznarzdzia, bez ktrych nie bdziesz mg si

    ju wicej oby.

    NARZDZIA1

  • 7/26/2019 Podrcznik CSS

    18/272

    CZ I: PODSTAWY

    18

    FIREBUGFirebug (rysunek 1.1) to jedno z dwch moich ulubionych narzdzi pracy (drugie opisaemdalej, w podrozdziale Pasek narzdzi Web Developer). Jest to cakowicie darmowerozszerzenie do cakiem darmowej przegldarki Firefox. Jeli korzystasz z innej aplikacji,to czytaj dalej, bo w niej rwnie moesz korzysta z dodatku Firebug!

    Rysunek 1.1. Strona internetowa rozszerzenia Firebug

    Aby zainstalowa to rozszerzenie, otwrz w przegldarce Firefox strongetfirebug.com,kliknij przycisk instalacji (aktualnie znajduje si w pobliu prawego grnego rogu ekranui ma napis Install Firebug 1.5.2) i zezwl na instalacj. Uruchom ponownie Firefoksa

    i przygotuj si na ostr jazd.

    Nie ma szans, abym opisa wszystkie moliwoci oferowane przez dodatek Firebug na kilkustronach jednej porady. Mao tego, nawet cay rozdzia by nie wystarczy. Przedstawiamzatem kilka najwaniejszych opcji.

    Przycisk HTML(rysunek 1.2) wywietla w okienku po lewej stronie struktur HTMLdokumentu (symbole plus i minus su do rozwijania i zwijania poddrzew dokumentu).W tym widoku najechanie kursorem na dowolny element powoduje jego wyrnienie nasamej stronie. Mona w ten sposb zobaczy, jaki jest obszar treci elementu oraz jakie s

    jego marginesy i dopenienie, ktre zostan zaznaczone rnymi kolorami, co jest po prostufantastyczne. W obecnej implementacji obszar treci jest oznaczany kolorem niebieskim,dopenienie jasnofioletowym, a marginesy tym. Nie kolory s tu jednak wane,lecz sama moliwo podejrzenia na stronie tych poszczeglnych obszarw elementu.

  • 7/26/2019 Podrcznik CSS

    19/272

    ROZDZIA 1: NARZDZIA

    19

    Rysunek 1.2. Widok ukadu elementw rozszerzenia Firebug

    Klikajc zakadk Styl, mona wywietli po prawej stronie widoku HTML okienko z kodem

    CSS dotyczcym aktualnie badanego elementu (rysunek 1.3). Mona w nim zobaczy nietylko to, co sami napisalimy podczas tworzenia strony, lecz rwnie wszystkie standardowestyle przegldarki odnoszce si do danego elementu. Arkusze stylw przegldarki pochodz np.z plikw html.cssi quirk.css(s to tzw. style wasne przegldarki, a ich wywietlanie monawyczy w menu zakadki Styl).

    Warto wiedzie, e Firebug moe czasami wywietla wasnoci, ktrych nigdy niedefiniowalimy, np. -moz-background-clip. Jeli mamy pewno, e to nie nasze wpisy,moemy je ignorowa. Ponadto wszystkie wasnoci zapisane w formie skrconego zapisuzostan rozpisane na poszczeglne wasnoci skadowe. Jeli wic w arkuszu napiszemy regu:

    font: 1em "Andale Mono", "Courier New", Courier, monospace;

    w dodatku Firebug zostanie ona przedstawiona tak:

    font-family: "Andale Mono","Courier New",Courier, monospace;

    font-size: 1em;font-size-adjust: none;

    font-stretch: normal;

    font-style: normal;font-variant: normal;

    font-weight: normal;line-height: normal;

  • 7/26/2019 Podrcznik CSS

    20/272

    CZ I: PODSTAWY

    20 Rysunek 1.3. Rozszerzenie Firebug dziaajce w osobnym oknie z zakadk Styl w penej krasie

    Mimo i ten sposb prezentacji stylw nie jest zy przypomina nam, e skrconyzapis wasnoci czsto mwi o wiele wicej, ni w istocie bymy chcieli to trzeba sina pocztku do niego przyzwyczai (wicej na temat skrconego zapisu wasnoci piszw rozdziale 2.).

    Kolejna rzecz warta uwagi, to fakt, e reguy w okienku Styls wywietlane w kolejnociod najprecyzyjniejszej. To znaczy na pocztku znajduje si regua o najwyszym poziomieprecyzji w zastosowaniu do badanego elementu, pod ni jest druga w tej kolejnoci itd.(wicej na temat precyzji pisz w rozdziale 2., w podrozdziale Precyzja selektorw).

    Kady element na stronie mona dokadnie zbada, klikajc go prawym przyciskiem myszyi wybierajc w menu kontekstowym, ktre zostanie wywietlone, pozycj Zbadaj element(rysunek 1.4). Tryb inspekcji rozszerzenia Firebug mona te wczy poprzez kliknicieikony przedstawiajcej prostokt i kursor, umieszczonej obok ikony Firebug. Gdy bdzieszporusza si po stronie, wskazywane elementy bd zaznaczane, a kliknicie jednego z nichspowoduje wywietlenie jego szczegw.

    Kad deklaracj CSS mona wyczy, klikajc obok niej z lewej strony. Jest to bardzoprzydatna opcja, gdy chcemy sprawdzi, jak rne wasnoci wsppracuj ze sob, poprzezwyczanie po jednej z nich. Na rysunku 1.5 natomiast widzimy, e najedajc kursorem

    na warto koloru, mona zobaczy w maym okienku, jaki rzeczywicie kolor onareprezentuje.

  • 7/26/2019 Podrcznik CSS

    21/272

    ROZDZIA 1: NARZDZIA

    21

    Rysunek 1.4. Opcja menu kontekstowego Zbadaj element

    Rysunek 1.5. Wyczone style i okienko koloru

  • 7/26/2019 Podrcznik CSS

    22/272

    CZ I: PODSTAWY

    22

    Ponadto na karcie Stylmona wywietli ostateczne wartoci kadej wasnoci CSSzastosowanej do wybranego elementu (rysunek 1.6), a wic takie, ktre zostayzastosowane do niego przez przegldark w ostatecznym wyniku, bez wzgldu nato, czy co o nich wspominalimy w naszym arkuszu, czy nie. Pamitaj, e wszystkie

    wasnoci CSS maj domylne wartoci i dziki tej opcji mona je wszystkie zobaczy.W tym widoku mona np. dowiedzie si, ile dokadnie pikseli wynosi wasnoline-heightw naszym nagwku.

    Rysunek 1.6. Obliczone wartoci stylw

    Mona te sprawdzi dokadne wymiary komponentw modelu polowego elementu,takie jak wysoko, szeroko, dopenienie, marginesy itd. (rysunek 1.7). Wartoci te spodawane w pikselach. Najlepsze jest jednak to, e kiedy najedziemy kursorem na jednoz pl wywietlonych w tym widoku, na stronie pojawiaj si specjalne linijki, umiejscowionewzdu zewntrznych krawdzi wybranego elementu.

    Moliwoci jest znacznie wicej. Jak wida na rysunku 1.8, mona zmienia wartociatrybutw elementw (np. class), a nawet ich tre, dodawa i zmienia wasnocii wartoci CSS itd. Zapoznaj si z interfejsem dodatku Firebug, klikajc lewym i prawymprzyciskiem myszy wszystko, co si da.

    Ostrzeenie: na karcie Stylnie s uwzgldniane reguy CSS z uyciem pseudoelementw.Jeli np. w arkuszu znajduje si regua o selektorze p:rst-letter, to nie zobaczymy jej

    podczas inspekcji elementu p. Pseudoklasy s wywietlane, ale pseudoelementy nie.Najwiksze problemy z tym mog wystpowa przy zastosowaniu rozwizania clearfixztreci generowan (wicej na ten temat pisz w rozdziale 4., w podrozdziale Clearfix).

  • 7/26/2019 Podrcznik CSS

    23/272

    ROZDZIA 1: NARZDZIA

    23

    Rysunek 1.7. Karta Ukad

    Rysunek 1.8. Edycja kodu CSS na karcie Styl

  • 7/26/2019 Podrcznik CSS

    24/272

    CZ I: PODSTAWY

    24

    Jeli nie uywasz przegldarki Firefox, a chcesz korzysta z podstawowych dobrodziejstwrozszerzenia Firebug, wejd na strongetfirebug.com/lite.html(rysunek 1.9). Znajdziesz tamwskazwki na temat wczenia tego dodatku w przegldarkach Internet Explorer, Operai Safari. Aby korzysta z dodatku, moesz go doczy do testowanej przez siebie strony

    albo doda go jako zakadk do ulubionych (polecam t drug opcj).

    Rysunek 1.9. Firebug Lite w przegldarce Internet Explorer

    Ta wersja ma mniej opcji ni wersja dla Firefoksa (std sowo Lite w nazwie), ale i takoferuje bardzo duo moliwoci.

    PASEK NARZDZI WEB DEVELOPERDrugim obok rozszerzenia Firebug podstawowym narzdziem pracy kadego twrcy stroninternetowych jest Web Developer (WD). Jest to cakowicie darmowe rozszerzenie do cakiemdarmowej przegldarki Firefox.

    Aby je pobra i zainstalowa, wejd na stron chrispederick.com/work/web-developer.Alternatywnie moesz otworzy stron addons.mozilla.orgi tam poszuka tego dodatku(rysunek 1.10).

    Podobnie jak w przypadku rozszerzenia Firebug, nie ma szans, abym na kilku stronachzmieci wszystko, co mona napisa o Web Developer. Tu rwnie nawet cay rozdzia

    by nie wystarczy. Opisz tylko kilka najciekawszych opcji, ale pamitaj, eby pniejsamodzielnie gruntownie przeanalizowa wszystkie pozostae.

  • 7/26/2019 Podrcznik CSS

    25/272

    ROZDZIA 1: NARZDZIA

    25

    Rysunek 1.10. Strona paska narzdzi Web Developer w witrynie addons.mozilla.org

    Zyskujesz moliwo wyczenia pamici podrcznej przegldarki, co jest bardzo przydatne,gdy podczas pracy nad stron wprowadzasz duo drobnych modyfikacji i pami podrcznazaczyna zawadza. Moesz te wyczy obsug JavaScriptu (rysunek 1.11), co z koleipozwala zobaczy, co bdzie si dziao na stronie po wyczeniu wszystkich skryptwalbo gdy skrypty z jakiego powodu nie zostan wczytane.

    Niektre opcje z menu CSS s dostpne rwnie w rozszerzeniu Firebug, ale do najciekawszychnaley moliwo wyczenia wszystkich stylw osadzonych albo tylko stylw doczonychza pomoc elementu link(rysunek 1.12) lub tylko stylw rdliniowych (aczkolwieknie namawiam do uywania tych ostatnich). Mona nawet wyczy wikszo stylwprzegldarki, ale to dla tych, ktrzy chc pooglda rne dziwne rzeczy.

    W menu Informacje(widocznym na rysunku 1.13) znajdziesz mnstwo ciekawychdrobiazgw, np. szczegy dotyczce klas i identyfikatorw, dane na temat kolejnocielementw div, zestawienie kolorw uytych na stronie itp. Moesz te wczy trybinformowania o elementach. Jeli klikniesz w tym trybie jaki element, zostan wywietloneinformacje na temat jego atrybutw i ich wartoci, jego pooenia na stronie, jego elementwnadrzdnych i podrzdnych itd. Menu Informacjeudostpnia podobne dane jak narzdzieXRAY, o ktrym wicej napisz nieco dalej w tym rozdziale.

  • 7/26/2019 Podrcznik CSS

    26/272

    CZ I: PODSTAWY

    26

    Rysunek 1.11. Menu Wycz

    Rysunek 1.12. Wyczanie doczonych arkuszy stylw w menu CSS

  • 7/26/2019 Podrcznik CSS

    27/272

    ROZDZIA 1: NARZDZIA

    27

    Rysunek 1.13. Wywietlanie informacji o klasach i identyfikatorach za pomoc opcji z menu Informacje

    Za pomoc opcji w menu Zaznacz(rysunek 1.14) mona zaznaczy na stronie wybranerodzaje elementw np. wszystkie elementy blokowe, rdliniowe, odnoniki,pozycjonowane, komrki tabeli itd. jak rwnie okreli wasny zbir elementwi kolorw. Ponadto mona ustali, czy na stronie wraz z obrysami maj by wywietlanenazwy elementw. To menu oferuje znacznie wiksze moliwoci, ni mogoby si wydawana pierwszy rzut oka. Na swoje potrzeby nazywam je menu diagnostyki ukadu, poniewapozwala zaznaczy obrysem zestawy elementw i szybko oceni, jak s rozmieszczonewzgldem siebie, oraz wykry potencjalne usterki.

    W menu Narzdziaznajduj si opcje oferujce szybki dostp do kilku narzdzi dosprawdzania poprawnoci kodu, znajdowania bdw i do konsol do wykrywania bdw.

    Z tych wszystkich opcji najlepsze s Sprawd poprawno lokalnego pliku CSSi Sprawdpoprawno lokalnego pliku HTML(rysunek 1.15). Kada z nich serializuje kod otwartejstrony na posta acucha znakw i wysya go do odpowiedniego walidatora. Jeli wicwybierzesz pierwsz z tych opcji, program wyle do walidatora CSS kod arkuszy stylw,

    jeli natomiast wybierzesz drug do walidatora HTML zostanie wysany kod znacznikw,po czym otrzymasz raport na temat stanu tego kodu. Opcja ta jest nieoceniona, gdypracujemy pod ochron zapory internetowej albo bezporednio na plikach zapisanychna twardym dysku, ktre nie s dostpne w internecie, a wic te i dla walidatora.Dziki lokalnemu sprawdzaniu poprawnoci kodu nie jest to ju problemem.

  • 7/26/2019 Podrcznik CSS

    28/272

    CZ I: PODSTAWY

    28

    Rysunek 1.14. Zaznaczenie elementw blokowych za pomoc opcji z menu Zaznacz

    Rysunek 1.15. Menu Narzdzia

    Jak napisaem na pocztku, to tylko prbka moliwoci paska WD, dlatego musisz powicitroch czasu na dogbne zapoznanie si z nim, aby znale narzdzia, ktre uatwi Ci prac.

  • 7/26/2019 Podrcznik CSS

    29/272

    ROZDZIA 1: NARZDZIA

    29

    PASEK NARZDZIINTERNET EXPLORER DEVELOPER TOOLBAR

    Uytkownicy przegldarki Internet Explorer 7 nie maj moliwoci korzystania z paskanarzdzi Web Developer (zobacz poprzedni podrozdzia), ale mog w zamian zainstalowadodatek Internet Explorer Developer Toolbar (IEDT).

    Adres URL strony tego dodatku to jeden z tych klasycznych, nieskoczenie dugichi niemoliwych do rozszyfrowania adresw Microsou. Dlatego otwrz swoj ulubionwyszukiwark (np. na zo Microsoowi wybierz Google) i w polu wyszukiwaniawpisz fraz Internet Explorer Developer Toolbar. Szukana strona powinna zostawywietlona na pierwszym miejscu. Wejd na ni i zainstaluj dodatek, jeli uywasz IE 7.Nie jest on obsugiwany przez IE 8, ale do tej przegldarki wrcimy za chwil.

    Po zakoczeniu instalacji rozwi menu Narzdziaznajdujce si w pobliu prawegogrnego rogu okna przegldarki, obok menu Strony(rysunek 1.16) nie chodzi tu o menuNarzdziapo lewej stronie, midzy menu Ulubionei Pomoc. W wymienionym menu kliknijpozycj Paski narzdzi, a nastpnie Paski eksploratora i w kocu IE Developer Toolbar.

    Rysunek 1.16. Szukanie opcji IE Developer Toolbar w IE 7

  • 7/26/2019 Podrcznik CSS

    30/272

    CZ I: PODSTAWY

    30

    Gdy wczysz pasek IEDT, w dolnej czci okna Internet Explorera wywietli si specjalneokno, podobne do tego, ktre znamy z dodatku Firebug (rysunek 1.17). W jego grnej czciznajduj si rne menu. Dodatek mona uruchomi take w osobnym oknie. W tym celunaley klikn ikon przedstawiajc dwa mae okienka, umieszczon w prawym grnym

    rogu okna dodatku. Moliwo powikszenia okna w ten sposb najbardziej przydaje sipodczas pracy w rodowiskach o maej rozdzielczoci, takich jak netbooki czy projektory.

    Rysunek 1.17. Pasek narzdzi IE Developer Toolbar w akcji

    Jedn z najciekawszych funkcji tego paska jest moliwo przeczania si midzy widokiemwywietlania wartoci obliczonych stylw a widokiem ostatnio zadeklarowanych stylwprzy uyciu pola wyboru Show Default Style Values(rysunek 1.18). Podobnie za pomoc

    opcji Show Read-Only Propertiesmoemy wywietli wszystkie aspekty waciwoci DOM(ang. Document Object Model) badanego elementu. Opcja ta zdecydowanie nie jest dlaCiebie, jeli nie znasz si na JavaScripcie i DOM (na pewno nie jest dla mnie).

    Pasek IE Developer Toolbar oferuje cz funkcji dostpnych w pasku Web Developer,a najbardziej przydatne z nich, takie jak np. zaznaczanie elementw i sprawdzaniepoprawnoci kodu HTML i CSS, znajduj si na samym wierzchu. W menu View(widok)dostpna jest te ciekawa opcja o nazwie CSS Selector Matches(rysunek 1.19), wywietlajcawyskakujce okienko ze wszystkimi reguami CSS i informacj, ile razy kada z nich jestzastosowana do elementw na stronie. Jeli znajdziesz regu, ktra nie dotyczy adnego

    elementu (oznaczona komentarzem 0 match(es) for:), zastanw si, czy nie trzeba jej usun.

  • 7/26/2019 Podrcznik CSS

    31/272

    ROZDZIA 1: NARZDZIA

    31Rysunek 1.18. Pasek IE Developer Toolbar z wyczon opcj Show Default Styles

    Rysunek 1.19. Raport funkcji CSS Selector Matches

  • 7/26/2019 Podrcznik CSS

    32/272

    CZ I: PODSTAWY

    32

    Przegldarka IE 8 ma wbudowany zestaw narzdzi deweloperskich, a wic nie trzeba w niejinstalowa adnych dodatkw. Dokumentacja tego zestawu znajduje si w internecie,ale niestety pod adresem niewiele atwiejszym do zapamitania ni adres wczeniejopisywanego paska narzdzi dla IE 7. Dlatego lepiej skorzystaj z jakiej wyszukiwarki

    internetowej, wpisujc w niej fraz Discovering Internet Explorer Developer Tools(niestety, aktualnie dokumentacja dostpna jest tylko w jzyku angielskim przyp. tum.).Odnonik do waciwej strony powinien si wywietli na samej grze.

    Aby uruchomi dodatek Narzdzia deweloperskie, rozwi menu Narzdziaprzegldarki(rysunek 1.20) i kliknij opcj o tej samej nazwie albo nacinij klawisz F12. To wszystko,co trzeba zrobi. Narzdzia deweloperskie przypominaj wygldem pasek IE DeveloperToolbar, a wic wygldaj jak krzywka dodatku Firebug z paskiem narzdzi WebDeveloper. Ukad menu jest bardzo podobny do paska narzdzi IE 7, natomiastznajdujcym si pod nimi zakadkom bliej do dodatku Firebug.

    Rysunek 1.20. Narzdzia deweloperskie w przegldarce IE 8

    Jedn z rzeczy, ktre nie podobaj mi si w funkcji Narzdzia deweloperskie, jest sposbprezentacji arkuszy stylw na karcie CSS, ktry dla mnie jest niezrozumiay. Na pewno niezastosowano kolejnoci wedug precyzji selektora. Wykazano wprawdzie, ktre deklaracjes przesaniane przez inne deklaracje, ale zapomniano o posortowaniu ich w jaki sensownysposb, przez co z opcji tych korzysta si trudniej ni w dodatku Firebug.

    Podsumowujc, mimo i funkcja Narzdzia deweloperskiei pasek narzdzi IE Developer

    Toolbar nie oferuj tak wielu opcji jak Firebug i Web Developer Toolbar, s one bardzoprzydatne i powinny znale si w arsenale kadego programisty stron internetowych,korzystajcego z przegldarek Internet Explorer. Narzdzia te mog by bardzo pomocneprzy wykrywaniu rde problemw z ukadem i innych osobliwoci tych przegldarek.

  • 7/26/2019 Podrcznik CSS

    33/272

    ROZDZIA 1: NARZDZIA

    33

    DODATEK DRAGONFLY DLA OPERYJeli w codziennej pracy korzystasz z przegldarki Opera, musisz zapozna si z dodatkiemo nazwie Dragonfly (rysunek 1.21). Jest to rodowisko programistyczne, ktre monaznale w standardowym wyposaeniu Opery od wersji 9.5. Wicej informacji na jego tematznajdziesz na stronie opera.com/dragonfly.

    Rysunek 1.21. Strona dodatku Dragonfly

    Aby wczy dodatek Dragonfly, naley rozwin menu Strona/Narzdzia deweloperskie

    i klikn opcj Opera Dragonflyalbo nacisn kombinacj klawiszy Shi+Ctrl+I(Windows)lub Option+Command+I(Mac).

    Dragonfly wygldem przypomina dodatek Firebug, ale midzy tymi narzdziami wystpujspore rnice. Przede wszystkim na karcie Stylespo prawej stronie mog by wywietlanezarwno style obliczone, jak i style zadeklarowane (rysunek 1.22) i kad z tych grup monarozwin lub zwin.

    Rysunek 1.23 przedstawia kart Ukad, na ktrej wywietlany jest schemat pola badanegoelementu. Oprcz wymiarw poszczeglnych komponentw wywietlane s dodatkowowartoci w pikselach rozmaitych waciwoci, jak offsetTopczy scrollLeft.

  • 7/26/2019 Podrcznik CSS

    34/272

    CZ I: PODSTAWY

    34 Rysunek 1.22. Narzdzie Dragonfly z rozwinit grup stylw obliczonych

    Rysunek 1.23. Karta Ukad narzdzia Dragonfly

  • 7/26/2019 Podrcznik CSS

    35/272

    ROZDZIA 1: NARZDZIA

    35

    DODATEK WEBINSPECTORDO PRZEGLDARKI SAFARI

    Jeli Twoim gwnym narzdziem pracy jest przegldarka Safari, to musisz konieczniezapozna si z narzdziem inspektor WWW.

    Aby je wczy, otwrz okno Preferencje, przejd na kart Zaawansowane, a nastpniezaznacz pole wyboru Pokazuj menu Programowanie w pasku menu(rysunek 1.24).Po wykonaniu tych czynnoci rozwi menu Programowaniei wybierz w nim pozycjPoka inspektora wwwlub nacinij kombinacj klawiszy Ctrl+Alt+I(Windows) alboOption+Command+I(Mac). Skrt nie jest przecznikiem, tzn. jeli inspektor WWW jestwczony, to nacinicie tej kombinacji klawiszy nie spowoduje jego zamknicia. Do tegopotrzebna jest mysz. Skrt Command+W(lub Ctrl+Ww Windows) dziaa tylko wwczas,

    gdy inspektor WWW jest uruchomiony we wasnym oknie. Jeli zastosuje si go, gdyinspektor WWW jest zadokowany w oknie gwnym przegldarki, to zostanie zamknitacaa przegldarka.

    Rysunek 1.24. Wczanie menu Programowanie

    Mimo i interfejs inspektora WWW jest bardzo podobny do interfejsu dodatkuFirebug, midzy tymi narzdziami wystpuj istotne rnice. Np. w okienku po prawej

    stronie wywietlane s style obliczone (tu nazwane stylami nadanymi) w postacigrupy (rysunek 1.25). Podobnie jak w przypadku rozszerzenia Firebug, to, co tu wida,niedokadnie odpowiada temu, co zadeklarowalimy, poniewa skrcone zapisy wasnocis rozwijane. Jeli zaznaczysz pole wyboru Poka dziedziczone, lista znacznie si wyduy.

  • 7/26/2019 Podrcznik CSS

    36/272

    CZ I: PODSTAWY

    36

    Rysunek 1.25. Style nadane

    Na dole znajduj si zgrupowane reguy dotyczce badanego elementu. Kad z grup monarozwin i zwin. Jeszcze niej znajduje si podokienkoMiary, w ktrym mona sprawdziwymiary pola tworzonego w ukadzie przez badany element (rysunek 1.26).

    Rysunek 1.26. Style i informacje o polu elementu

  • 7/26/2019 Podrcznik CSS

    37/272

    ROZDZIA 1: NARZDZIA

    37

    XRAYJeli potrzebujesz lekkiego narzdzia do inspekcji elementw, dziaajcego we wszystkichprzegldarkach, to widoczny na rysunku 1.27 XRAY jest stworzony dla Ciebie.Ma ograniczony zakres zastosowania, ale jeli szukasz czego prostego, to naley t cechtraktowa jako zalet.

    Rysunek 1.27. Strona XRAY

    Wejd na stron westciv.com/xrayi przecignij pole z napisem XRAY na swj pasek zakadek(albo do menu Zakadki, jeli chcesz ukry narzdzie). Teraz, gdy wejdziesz na jak stron,moesz zbada na niej dowolny element, wywoujc XRAY i wybierajc element, ktry Ciinteresuje.

    Gdy wybierzesz element, bdzie on wyrniony, zostan wywietlone jego wymiary orazwywietli si okno XRAY (rysunek 1.28) z dodatkowymi informacjami na temat miejscaelementu w drzewie dokumentu, jego klas i identyfikatorw oraz z podstawowymiwasnociami CSS. Aby obejrze szczegy innych elementw w hierarchii, wystarczy jezaznaczy. Aby wyczy XRAY, naley klikn krzyyk w prawym grnym rogu jego okna.

  • 7/26/2019 Podrcznik CSS

    38/272

    CZ I: PODSTAWY

    38

    Rysunek 1.28. Narzdzie XRAY w akcji

    Podobnym narzdziem, cho o nieco innym przeznaczeniu, jest MRI (westciv.com/mri).Umoliwia ono wpisanie dowolnego selektora i sprawdzenie, jaki to wywoa efekt.

    NARZDZIE SELECTORACLENazwa Selectoracle (rysunek 1.29) brzmi jak jaka reklama bazy danych, ale ni nie jest.

    Jest to internetowe narzdzie zamieniajce selektory w tekst przypominajcy uproszczonyangielski (nazwa powstaa z poczenia angielskich sw Selectori Oracle).

    Wejd na strongallery.theopalgroup.com/selectoraclei wpisz jeden albo kilka dowolnychselektorw CSS. Wybierz jzyk (dostpny jest jeszcze hiszpaski) i kliknij przycisk Explainis!(wyjanij to). W odpowiedzi otrzymasz objanienie wszystkich wprowadzonych przezsiebie selektorw. Np. dla selektora:

    ul li:nth-child(2n+3):not(:last-child)

  • 7/26/2019 Podrcznik CSS

    39/272

    ROZDZIA 1: NARZDZIA

    39

    Rysunek 1.29. Strona Selectoracle

    otrzymamy nastpujce objanienie:

    Selects any lielement that is an odd numbered child starting with the third child and that isnot a last child that is a descendant of a ulelement(wybiera wszystkie elementy libdcenieparzystym dzieckiem, zaczynajc od trzeciego dziecka, i niebdce ostatnim dzieckiemelementu ul).

    Moe na pocztku wydaje si to troch niejasne, ale po powtrnym przeczytaniu powoli

    staje si zrozumiae. Poza tym nie przejmuj si zbytnio tym selektorem, poniewa w chwili,gdy powstawa ten tekst, adna przegldarka nie potrafia go jeszcze w peni obsugiwa.Pamitaj jednak, e jeli trafisz na jaki selektor, ktrego nie rozumiesz, to moeszsprbowa znale pomoc na stronie Selectoracle.

    Czy marzye kiedy o tym, aby Twoja przegldarka krzyczaa, gdy wczytujesz w niej stronyz przestarzaymi i niewygodnymi elementami, takimi jak font? Teraz jest to moliwe w sensie wizualnym dziki diagnostycznym arkuszom stylw.

  • 7/26/2019 Podrcznik CSS

    40/272

    CZ I: PODSTAWY

    40

    DIAGNOSTYCZNY ARKUSZ STYLWDziki diagnostycznemu arkuszowi stylw mona szybko si dowiedzie, e co jest nietak z kodem HTML na stronie. Przykady takich arkuszy mona znale np. pod adresamimeyerweb.com/eric/tools/css/diagnostic (dostpne s take wersje dla CSS 3 i zgodna z IE 7)i accessites.org/site/2006/07/big-red-angry-text.

    Po co to komu? Oto jeden z wierszy kodu mojego diagnostycznego arkusza stylw:

    *[style], font, center {outline: 5px solid red;}

    Regua ta rysuje czerwon obwdk wok wszystkich elementw z atrybutem style,wszystkich elementw fontoraz wszystkich elementw wyrodkowanych. Mona je

    jeszcze bardziej uwidoczni, stosujc np. ty kolor ta. Chodzi o to, aby wykry wszystkie

    przypadki zastosowania podejrzanego kodu HTML, czy zosta on dodany przez systemzarzdzania treci, czy w jakikolwiek inny sposb.

    Moe Ci si wydaje, e wszystkie problemy z kodem da si wykry za pomoc walidatora,ale nie zawsze jest to moliwe. Oczywicie narzdzie to na pewno ostrzee nas, e na stronieznajduje si element font, ale jest wiele problemw, ktrych walidator nie wykryje. Wemyna przykad typowy odnonik skonstruowany przy uyciu JavaScriptu:

    Dalej

    Kod jest poprawny, wic walidator nie zgosi adnego problemu. A jednak, jeli kto

    korzysta z przegldarki nieobsugujcej JavaScriptu, ten odnonik nie zadziaa. Takimodnonikom powinno towarzyszy jakie alternatywne rozwizanie z uyciem normalnejwartoci atrybutu href. Dlatego w innym miejscu mojego diagnostycznego arkusza stylwznajduje si nastpujca regua:

    a[href="#"] {background: lime;}

    Pokae nam ona wszystkie odnoniki, ktre maj w atrybucie hreftylko warto wstawianza pomoc JavaScriptu (w regule wykorzystaem selektor atrybutu wicej na jego tematpisz w rozdziale 2., w podrozdziale Selektory atrybutw).

    Jak naley uywa diagnostycznego arkusza stylw? Mona go doda do arkuszy witrynyw czasie pracy nad ni i usun go po skoczeniu pracy albo ustawi jako arkusz stylwuytkownika w przegldarce i wwczas bdzie mona go stosowa do kadej odwiedzanejstrony.

    Poniej zamieszczono peny kod diagnostycznego arkusza stylw, ktry znajduje elementybez treci, obrazy bez atrybutw alti title, puste elementy obrazw, tabele bez atrybutwsummary, nagwki tabel z niepoprawnymi wartociami atrybutu scopeoraz odnonikiz niepoprawnymi lub pustymi atrybutami titlei href. Ta wersja arkusza nie dziaaw przegldarce IE 7 ze wzgldu na uyte w nim selektory atrybutw. W IE 8 te nie zadziaa

    z powodu uycia pseudoklas :not()i :empty(). Na rysunku 1.30 wida stron testow tegoarkusza.

  • 7/26/2019 Podrcznik CSS

    41/272

    ROZDZIA 1: NARZDZIA

    41

    div:empty, span:empty,li:empty, p:empty,

    td:empty, th:empty {padding: 0.5em; background: yellow;}

    *[style], font, center {outline: 5px solid red;}

    *[class=""], *[id=""] {outline: 5px dotted red;}img[alt=""] {border: 3px dotted red;}img:not([alt]) {border: 5px solid red;}

    img[title=""] {outline: 3px dotted fuchsia;}

    img:not([title]) {outline: 5px solid fuchsia;}table:not([summary]) {outline: 5px solid red;}

    table[summary=""] {outline: 3px dotted red;}th {border: 2px solid red;}

    th[scope="col"], th[scope="row"] {border: none;}

    a[href]:not([title]) {border: 5px solid red;}

    a[title=""] {outline: 3px dotted red;}a[href="#"] {background: lime;}

    a[href=""] {background: fuchsia;}

    Rysunek 1.30. Strona testowa diagnostycznego arkusza stylw

  • 7/26/2019 Podrcznik CSS

    42/272

    CZ I: PODSTAWY

    42

    ZEROWANIE STYLWJedn z rzeczy, o ktr moe nigdy nie podejrzewae arkuszy CSS, jest to, e s onestosowane do formatowania dokumentw HTML zawsze, nawet wtedy, gdy nie napiszeszani jednej reguy. W rzeczywistoci do kadego niestylizowanego dokumentu (przykadna rysunku 1.31) stosowana jest caa masa arkuszy stylw, z ktrych wszystkie pochodzbezporednio od przegldarki. Domylny rozmiar i grubo nagwkw, rozdzia elementwod fragmentw tekstu, punktory obok elementw list, a nawet rozrnienie pl blokowychi rdliniowych pochodz od zestawu domylnych arkuszy stylw przegldarki.

    Rysunek 1.31. Dokument bez stylw, ale w istocie o piknym stylu

    Domylne style w przegldarkach oczywicie s rne. Nie naley tego uznawa za jakiebdy w przegldarkach, poniewa nie istnieje adna oficjalna specyfikacja, ktra byokrelaa, jak takie domylne style maj wyglda. Wikszo przegldarek stara si jaknajwierniej naladowa to, co robia przegldarka Mosaic. Tak, Mosaic, poniewa j staranosi naladowa w przegldarce Netscape 1.0, ktr prbowano naladowa w IE 3 itd. Jelidobrze przyjrzysz si domylnym stylom, to spostrzeesz, e mona w nich znale wielerzeczy takich samych jak we wczesnych wersjach beta przegldarki Mosaic.

  • 7/26/2019 Podrcznik CSS

    43/272

    ROZDZIA 1: NARZDZIA

    43

    W odpowiedzi na te niespjnoci zaczto tworzy arkusze stylw zerujce domylneustawienia (rysunek 1.32). Ich zadaniem jest zlikwidowanie jak najwikszej liczby rnicmidzy przegldarkami poprzez bezporednie ustawienie rnych wasnoci. Najprostszaz takich regu znajduje si poniej:

    * {margin: 0; padding: 0;}

    Rysunek 1.32. Dokument po zastosowaniu prostego arkusza zerujcego

    Wiele osb uywa tej techniki, poniewa jest prosta. Niektrym jednak nie odpowiadazerowanie wszystkich elementw cznie z elementami formularzy, takimi jak polatekstowe czy pola wyboru. Poniewa aktualnie przegldarki bardzo rnie obsuguj CSSdla elementw formularzy (a niektre w ogle tego nie robi), wyzerowanie wszystkichelementw w celu ujednolicenia formatowania moe w tym przypadku da skutek odwrotnyod zamierzonego.

    W zwizku z tym opracowano bardziej skomplikowane arkusze zerujce. Bardzo popularnyznajduje si pod adresem meyerweb.com/eric/tools/css/reset. Oto urywek wzity z samegopocztku:

    html, body, div, span, applet, object, iframe,

    h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,

    small, strike, strong, sub, sup, tt, var,

  • 7/26/2019 Podrcznik CSS

    44/272

    CZ I: PODSTAWY

    44

    b, u, i, center,dl, dt, dd, ol, ul, li,

    eldset, form, label, legend,

    table, caption, tbody, tfoot, thead, tr, th, td {

    margin: 0; padding: 0; border: 0;

    outline: 0;

    font-size: 100%; vertical-align: baseline;

    }body {

    line-height: 1;

    }

    Wow! To caa masa elementw. Chodzi o to, aby wybra wszystkie elementy niebdcekontrolkami formularza (input, select, textarea) i ujednolici ich formatowanie.Pierwsza regua zeruje marginesy, dopenienie, obramowanie i obrys wszystkich elementworaz ustawia im jednakowy rozmiar pisma i takie same wyrwnanie poziome. Druganatomiast zmniejsza wysoko linii elementu body. Warto ta zostanie odziedziczonaprzez wszystkie elementy potomne tego elementu.

    W arkuszu tym znajduje si wicej regu stylistycznych tego rodzaju. Niektre np. usuwajwypunktowanie z elementw list i cudzysowy automatycznie wstawiane w elementach

    blockquotei q. Ma to na celu ujednolicenie wygldu dokumentu we wszystkichprzegldarkach przed rozpoczciem pisania arkuszy, ktre zamieni go w dzieo sztuki.

    Teraz moe sobie mylisz: Chwileczk, to znaczy, e musz cofn wszystko, co do tej poryzrobiem! Nigdy bym nie ustawi wysokoci linii na jeden, bo tekst byby za bardzo cinityw pionie! Nie mam te ochoty bawi si w pionowe wyrwnywanie elementw indeksugrnego i dolnego!.

    To s uzasadnione wtpliwoci. Dlatego kady powinien wzi taki arkusz stylwi dostosowa go do swoich potrzeb. Jeli np. wasnoci line-heightzawsze nadajeszwarto 1.4, aby uzyska przejrzysty tekst, wystarczy, e zmienisz odpowiedni deklaracj

    w arkuszu zerujcym:

    body {

    line-height: 1.4;}

    Przy okazji moesz doda swoje standardowe kolory ta i tekstu oraz okreli krj pisma,ktrego zawsze uywasz:

    body {

    font: smaller/1.4 Helvetica, sans-serif; background: #ABACAB;

    color: #444;

    }

  • 7/26/2019 Podrcznik CSS

    45/272

    ROZDZIA 1: NARZDZIA

    45

    Jeli nie planujesz zmienia wygldu list, moesz wyeliminowa regu usuwajc punktory(ja akurat bym j zostawi, ale przecie wszyscy si jako rnimy). Dodaj reguy precyzyjnieokrelajce sposb i gboko wcicia list, oddzielajce akapity od elementw listy, zdefiniujwasny sposb interpretacji elementu strongitd.

    Po wykonaniu tych wszystkich dziaa otrzymasz ju nie zerujcy, lecz raczejprzebudowujcy arkusz stylw. Za jego pomoc cakowicie zmienisz podstawowkonstrukcj dokumentw, ktra bdzie stanowia Twj punkt wyjcia do dalszej pracy.

    Oprcz tego, e za pomoc arkuszy CSS moesz przestawi kad przegldark na inny trybdziaania, moesz je ulepsza za pomoc JavaScriptu. Nie artuj.

    SKRYPT IE9.JSDziki skryptowi IE9.jsDeana Edwardsa moesz sprawi, aby przegldarki od IE 5 do IE8 obsugiway HTML i CSS w sposb bardzo podobny do (jeszcze oficjalnie niewydanej)przegldarki IE 9. Skrypt ten mona pobra pod adresem code.google.com/p/ie7-js(rysunek1.33) ta sidemka na kocu to nie pomyka, zostaa w nazwie jako relikt przeszoci,poniewa projekt pocztkowo mia nazw IE7.js, pniej IE8.js, a teraz jest ju IE9.js.

    Rysunek 1.33. Strona projektu IE7.js

  • 7/26/2019 Podrcznik CSS

    46/272

    CZ I: PODSTAWY

    46

    IE9.js to zestaw procedur w jzyku JavaScript, ktre jeli strona jest przegldana za pomocinnej przegldarki ni Internet Explorer 9 analizuj cay kod HTML i CSS w celusprawdzenia, ktre elementy i wasnoci nie s obsugiwane przez uywan przegldark.Nastpnie skrypt wykonuje kilka magicznych sztuczek za kulisami i naprawia to, co jest

    popsute.

    Wemy np. selektory atrybutw, ktre nie s obsugiwane przez IE 5 i IE 6. Gdybymynapisali tak regu:

    a[href] {text-decoration: none; color: red;}

    to przegldarki te zignorowayby j i nasze odnoniki pozostayby niezmienione (chociaucieszyby si z tego Jakob Nielsen, projektant strony nie podzieliby ju jego entuzjazmu).Jeli jednak uyjemy skryptu IE9.js, naprawi on wszystko za nas i style naszych odnonikwbd dziaa jak nigdy dotd! Jedyne, co musisz zrobi, to do kadej strony, ktra tegopotrzebuje, doczy plik IE9.js.

    Oczywicie nic z tego nie bdzie, jeli przegldarka bdzie miaa wyczon obsugJavaScriptu. Po prostu trzeba rozway potencjalne korzyci i to, czego moemy sispodziewa po grupie docelowej uytkownikw strony. Czy wielu z nich uywa jeszcze IE 6?Czy jest due prawdopodobiestwo, e wyczyli oni obsug JavaScriptu? Tak naprawd tesame pytania trzeba sobie zada przed rozpoczciem pracy nad kadym projektem, a wicnie przysporzy nam to wiele dodatkowej pracy.

    Najczciej zalecan technik doczania skryptu IE9.jsdo stron jest zamknicie elementu

    scriptw komentarzu warunkowym:

    Skrypt jednak sam decyduje, czy istnieje potrzeba jego uruchomienia, a wic pod tymwzgldem komentarz ten jest zbdny. W takim przypadku jednak bdzie pobierany przezkadego uytkownika, bez wzgldu na uywan przez niego przegldark. Jeli zastosujemykomentarz warunkowy, skrypt bdzie pobierany tylko przez te przegldarki, ktre gopotrzebuj.

    Jak ju wspomniaem, istniej wersje skryptu uaktualniajce starsze wersje IE do wersji 7.i 8. Jeli wic stwierdzisz, e IE9.jsnie spenia Twoich oczekiwa, moesz wyprbowa te

    jedn z poprzednich wersji.

  • 7/26/2019 Podrcznik CSS

    47/272

    R

    OZDZIA

    2

    SELEKTORY S SERCEMtechnologii CSS.Bez nich nie daoby si przypisywa stylwdo elementw, nie mwic ju o dobieraniusi do ich atrybutw. To byoby straszne.Dziki moliwoci odwoywania si do rnychrodzajw elementw moemy za pomoc tylko

    kilku wierszy kodu CSS spowodowa naprawddue zamieszanie w dokumencie.

    W tym rozdziale poznasz szczegy dziaaniarnych selektorw oraz nauczysz si korzystaz wielu z nich.

    SELEKTORY2

  • 7/26/2019 Podrcznik CSS

    48/272

    CZ I: PODSTAWY

    48

    PSEUDOCO TAMW technologii CSS wystpuj dwa rodzaje pseudoczego tam pseudoklasyi pseudoelementy. W CSS 2.1 dostpne s nastpujce pseudoklasy:

    :link: nieodwiedzone cze

    :visited: odwiedzone cze

    :hover: element, nad ktrym znajduje si kursor

    :focus: element z fokusem

    :active: aktywny element (np. odnonik w czasie, gdy element jest klikany)

    :rst-child: element bdcy pierwszym dzieckiem innego elementu

    :lang(): element o okrelonej wartoci atrybutu lang

    A oto lista pseudoelementw CSS 2.1:

    ::rst-line

    ::rst-letter

    ::before

    ::after

    Co je rni? Rnica polega na sposobie, w jaki pseudoklasy i pseudoelementy wpywajna stron. Pseudoklasy dziaaj w pewnym sensie tak, jakby dynamicznie dodaway dodokumentu zwyke klasy. Natomiast pseudoelementy wstawiaj do dokumentu noweelementy.

    Wemy np. pseudoelement ::rst-letter. Zamy, e chcemy sprawi, aby pierwszalitera kadego nagwka h1bya dwa razy wiksza od pozostaych liter (jak na rysunku 2.1).atwizna:

    h1::rst-letter {font-size: 250%;}

    Rysunek 2.1. Powikszenie pierwszej litery elementu h1

  • 7/26/2019 Podrcznik CSS

    49/272

    ROZDZIA 2: SELEKTORY

    49

    Ta regua ma takie samo dziaanie, jakbymy napisali:

    h1 pierwsza-litera {font-size: 250%;}

    Cze, dzieciaki!

    Czy wanie to dzieje si wewntrz mechanizmu przegldarki? Kto wie? Jedyne, co monastwierdzi na pewno, to fakt, e tak to dziaa. Std nazwa pseudoelement.

    Natomiast pseudoklasy dziaaj tak, jakby dynamicznie doczay do elementw klasy.Wyobramy sobie, e przegldarka przypisuje kademu elementowi w dokumenciebdcemu pierwszym dzieckiem jakiegokolwiek innego elementu klas pierwsze-dziecko.Wwczas moglibymy przypisa styl tym elementom, stosujc nastpujc regu:

    li.pierwsze-dziecko{border-left: none;}

    Wystarczy, e zamienisz tylko kropk na rednik, tzn. li:rst-child, i uzyskasz taki samefekt bez koniecznoci zamiecania swojego kodu ca mas klas.

    Zapewne ciekawi Ci te, dlaczego na pocztku pseudoelementw znajduj si dwadwukropki. Taki standard zapisu zosta wprowadzony poza specyfikacj CSS 2.1 i jak narazie adna przegldarka nie zmusza do jego stosowania. Rwnie dobrze mona stosowatylko jeden dwukropek.

    Na marginesie warto doda, e w CSS 3 wprowadzono sporo nowych pseudoklas,ktre w chwili obecnej nie s zbyt szeroko rozpoznawane przez przegldarki:

    :target :root

    :nth-child()

    :nth-of-type()

    :nth-last-of-type()

    :rst-of-type

    :last-of-type

    :only-of-type

    :only-child :last-child

    :empty

    :not()

    :enabled

    :disabled

    :checked

  • 7/26/2019 Podrcznik CSS

    50/272

    CZ I: PODSTAWY

    50

    PRECYZYJNE LDOWANIECzsto bardzo przydatna jest moliwo wskazania w dokumencie identyfikatora fragmentu.C to takiego? spytasz. Nic strasznego. Spjrz niej:

    Podrozdzia 2.7

    Kady, kto kliknie takie cze, zostanie przeniesiony nie tylko na odpowiedni stron, leczwylduje dokadnie w miejscu wskazywanym przez identyfikator fragmentu strony (#podr2-7).Ten sam efekt mona uzyska za pomoc kotwicy, ale lepiej jest uywa identyfikatorw.Oto obie moliwoci:

    Wyjtki

    Wyjtki

    W obu tych przypadkach przegldarka przeniesie nas w odpowiednie miejsce w dokumencie,ale nie wywietli adnej wizualnej wskazwki, e do takiego miejsca przeszlimy. Dlategomamy do dyspozycji pseudoklas :target. Gdybymy np. chcieli jako zaznaczy wszystkieelementy h3bdce punktami docelowymi identyfikatora fragmentu (jak na rysunku 2.2),moglibymy napisa tak regu:

    h3:target {color: 20689a; background: #ffff66;}

    Rysunek 2.2. Wyrnienie elementu docelowego

    http://przyklad.pl/law.html#podr2-7http://przyklad.pl/law.html#podr2-7http://przyklad.pl/law.html#podr2-7http://przyklad.pl/law.html#podr2-7http://przyklad.pl/law.html#podr2-7http://przyklad.pl/law.html#podr2-7
  • 7/26/2019 Podrcznik CSS

    51/272

    ROZDZIA 2: SELEKTORY

    51

    Oczywicie mona te zastosowa specjalne formatowanie do kadego elementu bdcegopunktem docelowym. Wwczas selektor h3naley zastpi selektorem uniwersalnym,

    jak wida poniej:

    *:target {color: 20689a; background: #ffff66;}

    Z technicznego punktu widzenia selektor uniwersalny w tym przypadku jest opcjonalny.Gdybymy napisali po prostu :target, te byoby dobrze.

    Jeli chcesz, aby Twoja strona bya bardziej w duchu Web 2.0, moesz zastosowa efektzanikajcego ta. Gdy uytkownik przejdzie do miejsca docelowego na stronie, tonajpierw przybierze okrelony kolor, ktry potem powoli zaniknie, co bdzie wskazywa,e wykonano jakie zadanie. Mona to atwo zrobi przy uyciu pseudoklasy :targeti animowanego GIF-a. Utwrz obraz GIF zmieniajcy powoli kolor z jakiego wybranegona kolor ta Twojej strony i zastosuj go w tle.

    *:target {background: url(/pix/yellow-fade.gif);}

    PRECYZJA SELEKTORWPrecyzja selektorw, mimo i dla niektrych trudna do pojcia, jest kluczem do zrozumieniainterakcji zachodzcych midzy rnymi reguami CSS.

    Jest to liczbowa reprezentacja dokadnoci selektora. Okrela si j na podstawie trzechczynnikw:

    Kady selektor elementu wnosi precyzj rzdu 0,0,0,1.

    Kada klasa, pseudoklasa i kady selektor atrybutu ma precyzj 0,0,1,0.

    Kady identyfikator ma precyzj 0,1,0,0.

    Nie denerwuj si (jeszcze). Lepiej najpierw spjrz na ponisze przykady.

    div ul ul li 0,0,0,4 Cztery selektory elementw.

    div.aside ul li 0,0,1,3 Jeden selektor klasy, trzy selektory elementw.

    a:hover 0,0,1,1 Jeden selektor pseudoklasy, jeden selektor elementu.

    div.navlinks a:hover 0,0,2,2 Jeden selektor pseudoklasy, jeden selektor klasy,dwa selektory elementw.

    #title em 0,1,0,1 Jeden selektor identyfikatora, jeden selektor elementu.

    h1#title em 0,1,0,2 Jeden selektor identyfikatora, dwa selektory elementw.

  • 7/26/2019 Podrcznik CSS

    52/272

    CZ I: PODSTAWY

    52

    To powinno Ci pomc zrozumie sposb konstrukcji wartoci okrelajcych precyzj.Do czego su te wszystkie przecinki? Ot kady poziom precyzji jest jakby samodzielnwartoci. Tak wic selektor skadajcy si z jednego selektora klasy ma wiksz precyzj niskadajcy si z 13 selektorw elementw. Ich wartoci byyby nastpujce:

    .aside /* 0,0,1,0 */

    div table tbody tr td div ul li ol li ul li pre /* 0,0,0,13 */

    Jedynka na trzeciej pozycji w wartoci pierwszego selektora bije zero na tej samej pozycjiw wartoci drugiego selektora. To oznacza, e trzynastka na czwartej pozycji drugiegoselektora w tym przypadku jest bez znaczenia. Przecinki sprawiaj, e atwiej jest rozpozna,do czego nale poszczeglne liczby. Gdyby ich nie byo, otrzymalibymy wartoci 10 i 13i wycignlibymy bdny wniosek, e drugi selektor jest precyzyjniejszy od pierwszego(we wczeniejszych wersjach CSS, zanim wprowadzono zapis z przecinkami, rzeczywicie

    byo z tym mnstwo problemw).Wiele osb apie si te na tym, e myli, i na precyzj selektorw ma wpyw strukturalnyukad elementw HTML. Wemy np. ponisze dwie reguy:

    ul li {font-style: normal;}html li {font-style: italic;}

    Ktra z nich wemie gr? Obie zawieraj po dwa selektory elementw, a wic obie majprecyzj 0,0,0,2. Dlatego zastosowana zostanie ta, ktra zostaa wpisana ostatnia, a wichtml li. Nie ma adnego znaczenia, e element uljest skadniowo bliszy elementowili.

    Precyzja selektorw to prosta warto liczbowa. Nie bierze si w niej pod uwag w adensposb struktury dokumentw. W tym przypadku wszystkie elementy listy zostannapisane pismem pochyym, poniewa jeli dwie reguy maj tak samo precyzyjne selektory,zastosowana zostaje ostatnia z nich.

    Zapewne zastanawiasz si, jak rol odgrywa to pierwsze zero w zapisie precyzji, skoronapisaem, e pod uwag brane s tylko trzy czynniki. Dotyczy ono stylw rdliniowych,a wic w poniszym kodzie to elementu divbdzie niebieskie.

    div#header {background: purple;} /* 0,1,0,0 */

    REGUA WANOCIRegua wanoci ma posta !importanti przewysza si reguy precyzji. Jeli jesteprogramist, to musz Ci od razu poratowa dodatkowym objanieniem !importantwcale nie oznacza nie important.

    Notacja ta suy do oznaczania wybranych deklaracji jako wane. Oto prosty przykad:

    a:hover {color: red !important; text-decoration: none;}

  • 7/26/2019 Podrcznik CSS

    53/272

    ROZDZIA 2: SELEKTORY

    53

    Jako wana zostaa tu oznaczona tylko deklaracja color: red. Aby tak samo oznaczy innedeklaracje, trzeba kad z nich opatrzy osobnym dopiskiem !important.

    Mwic najprociej, kada deklaracja oznaczona jako !importantjest waniejsza

    od wszystkich deklaracji bez takiego oznaczenia koniec i kropka. W przypadkuprzedstawionym poniej cze bdzie zielone:

    div#gohome a#home {color: red;}

    div a {color: green !important;}

    Strona gwna

    Pierwszej regule nie pomoga nawet bardzo wysoka precyzja selektora (0,2,0,2), poniewaregua !importanti tak jest waniejsza.

    Oczywicie, jeli dodamy oznaczenie !importanttake do pierwszej reguy, sytuacja zmieni sidiametralnie.

    div#gohome a#home {color: red !important;}

    div a {color: green !important;}

    Poniewa obie deklaracje kolorw s oznaczone jako !important, konflikt zosta rozwizanywedug typowych zasad kaskadowoci. Innymi sowy, znowu do gosu dosza precyzjaselektorw i cze bdzie czerwone.

    Z tego wynika, e regu !importantnaley stosowa z rozwag. Jeli zaczniesz jej naduywa

    do przesaniania rnych deklaracji, to w kocu moesz doprowadzi do tego, e bdzieszmusia jedne deklaracje !importantprzesania innymi, te kolejnymi itd., a w kocuwszystkie zostan oznaczone w ten sposb i adna nie bdzie specjalnie wana.

    CO SI DZIEJE, GDY ZOSTANIE POMINITAJAKA WARTO W ZAPISIE SKRCONYM?Wszyscy znamy czsto uywane skrcone formy zapisu wasnoci, takie jak background,

    border, font, marginczy padding. Stanowi one bardzo wygodny sposb wyraeniakilku waciwoci elementw za jednym razem. Co si jednak stanie, gdy w zapisie takimpominiemy niektre wartoci? Zobaczmy:

    strong {font: bold italic small-caps medium/1.2 Verdana, sans-serif;}

    Ta regua spowoduje, e wszystkie elementy strongbd napisane pismem pochylonym,kapitalikami o rednim rozmiarze i przy uyciu fontu Verdana (albo jakiego innegobezszeryfowego) oraz z wysokoci wiersza 1.2 wida to na rysunku 2.3.

  • 7/26/2019 Podrcznik CSS

    54/272

    CZ I: PODSTAWY

    54

    Rysunek 2.3. Szaowy element strong

    Wyobramy sobie teraz, e powysz regu nieco okroilimy:

    strong {font: medium Verdana, sans-serif;}

    Teraz uzyskamy tekst redniego rozmiaru napisany Verdan (lub innym bezszeryfowymkrojem pisma, jeli Verdana bdzie niedostpna) i o normalnej gruboci. Na rysunku 2.4wida, e pogrubienie rzeczywicie znikno.

    Rysunek 2.4. Przypadkowe usunicie pogrubienia

    Wynik taki uzyskalimy dlatego, e w skrconym zapisie wasnoci wszystkie wartoci, ktrenie zostan bezporednio zdefiniowane, przyjmuj okrelon warto domyln. Dlatego nieokrelajc gruboci, stylu i wariantu pisma, napisalimy regu rwnoznaczn z ponisz:

    strong {font: normal normal normal small/normal Verdana, sans-serif;}

    Tak, nawet wasnoci line-heightjest przypisywana domylna warto, ktra moe

    przesoni ewentualn warto odziedziczon.

    Jeli nie zaplanujemy swojego arkusza stylw bardzo starannie, to moemy mie z tympowane kopoty. Wemy pod rozwag dwie ponisze reguy. Pierwsza z nich pochodziz oglnego arkusza dla caej witryny, a druga z arkusza osadzonego na stronie.

    body {background: #FCC url(/i/pagebg.gif) 10px 25% no-repeat xed;}

    body {background: url(i/body-bg.gif);}

    Te dwie reguy sprawi, e na naszej stronie zostanie wywietlony nowy obraz zwielokrotnionyw tle. Jego pocztek bdzie znajdowa si w lewym grnym rogu i bdzie on przewijany wrazz treci strony. Jest to efekt tego, e druga regua jest rwnoznaczna z ponisz:

    body {background: transparent url() 0 0 repeat scroll;}

  • 7/26/2019 Podrcznik CSS

    55/272

    ROZDZIA 2: SELEKTORY

    55

    Jeli tego wanie chcielimy, to tak powinnimy wanie napisa. Ale bardziejprawdopodobne wydaje si, e chcielimy zamieni jeden obraz na inny. W takimprzypadku powinnimy zastosowa konkretn wasno:

    body {background-image: url(i/body-bg.gif);}

    Tak samo zachowuj si wszystkie pozostae wasnoci w zapisie skrconym. Wyjtkami stu margin, padding, border-style,border-widthi border-color. W tych przypadkachbrakujce wartoci s kopiami podanych. Oto kilka przykadw rnego zapisu wasnocio takim samym znaczeniu.

    margin: 1em; margin: 1em 1em 1em 1em;padding: 10px 25px; padding: 10px 25px 10px 25px;

    border-color: red green blue; border-color: red green blue green;

    Kolejno okrelania wartoci jest nastpujca: gra, prawa strona, d i lewa strona.

    WYBIRCZE PRZESANIANIE WASNOCIW ZAPISIE SKRCONYMTo, e w zapisie skrconym wasnoci niepodane wartoci s automatycznie uzupeniane,wcale nie oznacza, e powinnimy go unika. W istocie moe nawet si nam opacazadeklarowa 80% wszystkiego, czego chcemy w zapisie skrconym, a potem pozostae 20%zmieni za pomoc konkretnych wasnoci.

    Wyobramy sobie, e chcemy utworzy przerywan ramk o szerokoci boku 3 pikselii czarn z trzech stron, a czerwon z czwartej strony (rysunek 2.5). Do tego celu mona bynapisa osobn deklaracj dla kadego boku, ale wwczas mielibymy duo powtrze tegosamego kodu. Dlatego lepiej jest napisa tak:

    border: 3px dotted black;

    border-left-color: red;

    Rysunek 2.5. Kolorowanie jednej krawdzi na czerwono

  • 7/26/2019 Podrcznik CSS

    56/272

    CZ I: PODSTAWY

    56

    Pierwsza deklaracja ustawia wasnoci wszystkich krawdzi, a druga zmienia tylko t jedn,ktra nas interesuje. Co ciekawe, obie te deklaracje moemy zamieci w jednej regule.

    Innym dobrym przykadem, kiedy trzeba wybirczo przesania niektre ustawienia

    skrconego zapisu wasnoci, s style nagwkw, ktre czsto rni si midzy sob tylkorozmiarem tekstu. Jeli odpowiadaj Ci domylne rozmiary przypisywane nagwkom,wystarczy napisa regu podobn do poniszej:

    h1, h2, h3, h4, h5, h6 {font-weight: normal;font-style: italic;

    font-family: Helvetica, sans-serif;

    line-height: 1.5;}

    Jeli jednak masz zamiar ustawi wasne rozmiary nagwkw, jak na rysunku 2.6, zastosujnastpujc technik:

    h1, h2, h3, h4, h5, h6 {font: italic 100%/1.5 Helvetica, sans-serif;}h1 {font-size: 225%;}

    h2 {font-size: 185%;}

    h3 {font-size: 140%;}/* itd. */

    Rysunek 2.6. Zmienione rozmiary nagwkw za pomoc nadpisania wybranych wasnoci

  • 7/26/2019 Podrcznik CSS

    57/272

    ROZDZIA 2: SELEKTORY

    57

    Kiedy korzystasz z tej techniki, pamitaj, aby konkretne wasnoci byy zadeklarowaneza wasnoci w zapisie skrconym. Poniewa selektory bd miay tak sam precyzj,zastosowane zostan te, ktre zostay zapisane jako ostatnie.

    SELEKTOR UNIWERSALNYTeraz nauczysz si stosowa znak gwiazdki jako selektor (*). Nie ekscytuj si jednak zbytnio,bo nie jest on a tak uniwersalny, jak Ci si wydaje. Oto prosty przykad jego uycia:

    * {color: blue;}

    Gwiazdka nazywa si selektorem uniwersalnym, a wic wybiera wszystkie elementyz dokumentu i stosuje do nich zdefiniowane w regule style.

    Wyglda to jak wyraenie wieloznaczne i w pewnym sensie nim jest, poniewa pozwaladobra si do caej masy elementw bez wymieniania ich nazw. W ramach przykaduwyobramy sobie, e chcemy wybra wszystkie elementy z poniszego elementu div:

    Hej-ho!

    Jestem sobieakapitem.

    UnoDeux

    Drei

    Nic atwiejszego:

    div * {border: 1px solid red;}

    Wynik jest dokadnie taki sam, jak gdybym napisa:

    div h1, div p, div em, div ol, div li {border: 1px solid red;}

    No, moe prawie taki sam. Wizualnie nie ma rnicy (co wida na rysunku 2.7), ale jestrnica, jeli chodzi o precyzj selektorw. Selektor uniwersalny do wartoci precyzji caegoselektora nie wnosi nic, tzn. ma precyzj 0,0,0,0. To znaczy, e selektor div *ma precyzj0,0,0,1, a div h1i wszystkie pozostae w tej grupie 0,0,0,2. Poza tym szczegem wszystkopozostae jest w obu przypadkach takie same.

    Jeli masz nadziej, e za pomoc gwiazdki moesz odwoa si do wszystkich nagwkwnaraz, stosujc zapis w rodzaju h*, zamiast wylicza h1, h2, h3, h4, h5, h6, to muszCi rozczarowa tak si nie da. Selektor uniwersalny mona stosowa do elementw tylkow sposb pokazany powyej i w aden inny.

  • 7/26/2019 Podrcznik CSS

    58/272

    CZ I: PODSTAWY

    58

    Rysunek 2.7. Dodanie czerwonego obramowania do wszystkich potomkw elementu div

    IDENTYFIKATORY A KLASYJednym z pierwszych powanych dylematw, przed jakimi staje kady adept aspirujcy domiana programisty CSS jest: uywa klas (atrybut class) czy identyfikatorw (atrybut id)?

    Jak to zwykle w yciu bywa, na to pytanie istnieje jedna prosta odpowied i kilkainnych, bardziej skomplikowanych. Prosta wersja brzmi nastpujco: Uywaj klas dooznaczania wszystkich elementw, ktre mog wystpi na stronie wicej ni jeden raz,a identyfikatorw do elementw, ktre mog wystpi tylko raz. Przez sowo oznaczarozumiem uywanie wyrazw, ktre dobrze opisuj zastosowanie oznaczanych elementw.Ten sposb wykorzystania klas i identyfikatorw stanowi 99,44% ich cakowitego uycia.

    Typowymi, czsto spotykanymi przykadami identyfikatorw s header(nagwek)i footer(stopka), poniewa zakada si, e kady z tych elementw wystpuje na kadejstronie tylko w jednym egzemplarzu. Nazwy klas s bardziej zrnicowane i mog to bynp. more(do oznaczenia odnonikw prowadzcych do dodatkowych informacji), tabs(do oznaczania kart w nawigacji) czy odd(do oznaczania co drugiego wiersza w tabeli).

    W wersji bardziej skomplikowanej musimy wzi pod uwag nie tylko to, czy nasza etykietama by niepowtarzalna, czy nie, lecz rwnie wpyw, jaki nasza klasa lub identyfikatorwywrze na precyzj caego selektora. Poniewa selektory z identyfikatorami maj wyszprecyzj od tych z klasami, niewykluczone, e nie bdzie mona przesoni jakiej reguy.

    Oto prosty przykad. Wyobramy sobie, e mamy w arkuszu ponisze dwie reguy:

    #header {background: black;}#header a {color: white;}

    Po pewnym czasie dochodzimy jednak do wniosku, e nasza strona kontaktowa powinna byprzystpniejsza i postanawiamy zmieni kolor nagwka na przyjemny dla oka jasnoszary,a czy nawigacyjnych na odprajcy, rednio intensywny zielony. Poniewa na tejstronie znajduje si kilka zbiorw czy nawigacyjnych, piszemy takie reguy:

    #header {background: #BBB;}.navlinks a {color: #257000;}

  • 7/26/2019 Podrcznik CSS

    59/272

    ROZDZIA 2: SELEKTORY

    59

    Niestety, cza nawigacyjne w nagwku pozostan biae, co bdzie efektem wysokiejprecyzji selektora #header a(rysunek 2.8).

    Rysunek 2.8. Niezbyt atrakcyjne cza w nagwku

    Problem mona rozwiza, stosujc taki zapis:

    #header a, .navlinks a {color: #257000;}

    Albo nawet:

    #header .navlinks a, .navlinks a {color: #257000;}

    Oba dziaaj, lecz aden z nich nie jest zbyt elegancki (ale i tak jest lepszy ni dodanie sowa!importantdo reguy .navlinks a). Innym rozwizaniem tego problemu jest zamianaidentyfikatora nagwka na klas:

    Zastpiem id="header"atrybutem class="header". Teraz z pewnoci bdziemymieli znacznie mniej trudnych do rozwizania problemw z precyzj selektorw

    z identyfikatorami. W arkuszu oglnym witryny mielibymy nastpujcy kod:

    .header {background: black;}

    .header a {color: white;}

    a w stylach lokalnych strony kontaktowej:

    .header {background: #BBB;}

    .navlinks a {color: #257000;}

    W wyniku otrzymamy adne, zielone odnoniki, jak na rysunku 2.9.

  • 7/26/2019 Podrcznik CSS

    60/272

    CZ I: PODSTAWY

    60

    Rysunek 2.9. Atrakcyjne cza w nagwku

    To wszystko, co trzeba byo zrobi. Jest to argument za tym, aby stosowa tylko lub prawietylko same klasy.

    Innym argumentem jest to, e nigdy nie wiadomo, kiedy jaki element na stronieprzestanie by niepowtarzalny. Doskonaym przykadem jest tu nagwek, poniewa nastronie nagwkw moe by kilka. Jeli uwaasz, e to dziwne, to pomyl np. o portalachinformacyjnych. Kada sekcja i kade pole w pasku bocznym moe mie wasny nagwek

    i wasn stopk. Nadanie wszystkim tym elementom spjnych klas wydaje si bardzorozsdnym rozwizaniem.

    Mona oczywicie si spiera, e to nie s prawdziwe nagwki strony tylko nagwkiprasowe czy co tam jeszcze innego. Jest to kwestia semantyki, ktrej nie da si atworozstrzygn. To, co jedni nazywaj pierwszym wierszem, inni mog nazwa nagwkiem.Chodzi mi tylko o to, e element, ktry kiedy oznaczylimy jako niepowtarzalny, ktregodnia moe okaza si nie tak unikatowy, jak si nam wydawao. Najlepszym sposobem nazabezpieczenie si na wypadek wystpienia tego problemu jest uywanie tylko klas.

    Czy w takim razie uywanie identyfikatorw ma w ogle sens? Istniej elementy na stronie,

    co do ktrych moemy mie absolutn pewno, e zawsze pozostan niepowtarzalne w obrbiejednej strony. Czasami zastosowanie identyfikatora moe by podyktowane wanie chciwykorzystania jego zwikszonej precyzji w stosunku do innych identyfikatorw. Oprcztego identyfikatory mog odgrywa wan rol w skryptach, tworzeniu czy do wybranychmiejsc na stronie i innych technikach bdcych poza zakresem zastosowania CSS. Trzebatylko pamita, aby na nie uwaa.

    Problem z precyzj selektorw z identyfikatorami mona rozwiza jeszcze w inny sposb,ktry zosta opisany dalej, w podrozdziale Identyfikatory a selektor atrybutw.

  • 7/26/2019 Podrcznik CSS

    61/272

    ROZDZIA 2: SELEKTORY

    61

    CZENIE IDENTYFIKATORW Z KLASAMICzasami trafiaj si elementy, ktre jednoczenie s niepowtarzalne, a zarazem nale do

    jakiej szerszej klasy elementw. Wyobramy sobie, e mamy w pasku bocznym kilka maychpaneli. Kady z nich jest otoczony obramowaniem i ma okrelon kombinacj kolorwi krojw pisma, ale kady jest te na swj sposb niepowtarzalny, np. ma inny obraz w tle.

    W takich przypadkach dla elementw mona zdefiniowa zarwno klasy, jak i identyfikatory:

    Do kadego z tych elementw moemy si odwoa w arkuszu stylw tak, jak nam pasuje:

    .panel { border: 1px solid silver; background: #EEE top left no-repeat;

    color: #333;

    font: x-small sans-serif;}#weather {

    background-image: url(/pix/panel-weather.jpg);}#stocks {

    background-image: url(/pix/panel-stocks.jpg);}

    #latest { background-image: url(/pix/panel-latest.jpg);}

    Selektory klas i identyfikatorw mona nawet czy:

    .panel#weather {font-weight: bold;}#latest.panel {color: #511;}

    Kolejno zapisu selektorw nie ma znaczenia, co wida w powyszym przykadzie, a wicnie musz one te odpowiada kolejnoci atrybutw w elemencie HTML.

    PRZYPISYWANIE JEDNEGO ELEMENTUDO WIELU KLASCzsto zapominan cech atrybutu classjest to, e mona mu przypisa dowoln liczbwyrazw rozdzielonych spacjami, co w istocie oznacza, e kady element HTML monaprzyporzdkowa do wielu klas.

    Jako przykad wykorzystamy wczeniejszy kod HTML i pozbdziemy si z niego wszystkichatrybutw id:

  • 7/26/2019 Podrcznik CSS

    62/272

    CZ I: PODSTAWY

    62

    Nastpnie musimy odpowiednio zmieni selektory CSS, aby odwoyway si do klas zamiastidentyfikatorw:.panel {

    border: 1px solid silver;

    background: #EEE top left no-repeat; color: #333;

    font: x-small sans-serif;}.weather {

    background-image: url(/pix/panel-weather.jpg);}

    .stocks { background-image: url(/pix/panel-stocks.jpg);}

    .latest { background-image: url(/pix/panel-latest.jpg);}

    .panel.weather {font-weight: bold;}

    .latest.panel {color: #511;}

    Kolejno zapisu klas w atrybucie HTML nie ma znaczenia dla ich kolejnoci w arkuszustylw. Dlatego zapis .panel.weatherjest rwnoznaczny z zapisem .weather.panel, jelichodzi o precyzj. Nie ma te znaczenia, czy midzy nimi w rdle HTML znajduj si

    jeszcze jakie inne nazwy klas, np.:

    Do tego elementu take mona si odwoywa za pomoc selektorw .panel.weatheri .weather.panel.

    Jeszcze tylko jedna drobna uwaga przegldarka IE 6 (i jej wczeniejsze wersje) nierozpoznaje prawidowo selektorw zoonych z kilku klas w arkuszach stylw. Jelinapiszemy .panel.weather, przegldarka zinterpretuje to jako .weather. ElementomHTML mona przypisywa wiele klas naraz, ale w kodzie CSS trzeba si do nich odwoywapojedynczo. Zatem selektory .weatheri .panelzostan poprawnie zinterpretowane przezIE 6. Natomiast selektor .weather.panelzostanie potraktowany jako odwoanie do kadegoelementu z atrybutem classzawierajcym warto panel, co nie jest rwnoznaczne z tym,co napisalimy.

    SELEKTORY ATRYBUTWSelektory atrybutw wprowadzono w CSS 2 i rozszerzono w CSS 3. Aktualnie s oneobsugiwane przez wszystkie najwaniejsze przegldarki (nie obsuguje ich przegldarka IE6, wic jeli jest to dla Ciebie problem, wr do podrozdziau Skrypt IE9.js w rozdziale 1.).

    Oglna zasada dziaania tego typu selektorw opiera si na posiadaniu przez elementyokrelonych atrybutw lub okrelonych cech wartoci atrybutw. Przy ich uyciu mona np.

    odwoa si do wszystkich elementw a, ktre s czami:

    a[href]

  • 7/26/2019 Podrcznik CSS

    63/272

    ROZDZIA 2: SELEKTORY

    63

    Powyszy selektor wybiera wszystkie elementy amajce atrybut href, a pomija takie,ktre tego atrybutu nie maj, czyli najczciej nazwane kotwice (np. ).W pewnym sensie selektor ten jest zwilejsz wersj selektorw a:linki a:visited, np.:

    a[href] {color: green;}

    Efekt powyszej reguy wida na rysunku 2.10.

    Rysunek 2.10. Wybr czy z atrybutem href

    Zauwamy, e sama warto atrybutu hrefnie ma w tym przypadku najmniejszegoznaczenia, a wic podany w niej adres URL (lub cokolwiek innego wpisanego tam przez nas)moe by niepoprawny. Dla tego selektora element jest tak samo dobry jak.

    Co w takim razie mamy zrobi, gdybymy chcieli odwoa si do wszystkich hiperczyprowadzcych pod wybrany adres? Jeli interesuje Ci konkretny adres URI, moeszzastosowa technik przedstawion poniej (rysunek 2.11):

    a[href="http://w3.org/"] {font-style: italic;}

    Rysunek 2.11. Wybr czy z okrelonym adresem URL w atrybucie href

    Ta regua dotyczy tylko tych elementw a, ktrych atrybut hrefma wartohttp://w3.org/.Zwr uwag na sposb, w jaki si wyraziem nie napisaem:hiperczy prowadzcych do witryny internetowej W3C, poniewa nie o to chodzi.Wane jest to, e dopasowanie musi by dokadne, co do znaku. Gdybymy mieli element, pokazany selektor zignorowaby go. Selektor i wartoatrybutu musz by identyczne.

    http://w3.org/http://w3.org/http://w3.org/http://w3.org/http://w3.org/http://w3.org/http://w3.org/http://w3.org/http://www.w3.org/http://www.w3.org/http://www.w3.org/http://w3.org/http://w3.org/http://w3.org/
  • 7/26/2019 Podrcznik CSS

    64/272

    CZ I: PODSTAWY

    64

    Technika ta nie jest moe najprzydatniejsza w przypadku hiperczy, ale mona j np.wykorzysta do wybierania rnych obrazw w celu zdefiniowania stylu np. logo firmy.Jeli korzystasz z systemu zarzdzania treci, ktry wstawia logo w grnej czci stronyza pomoc nastpujcego elementu img:

    to mona si do niego odwoa przy uyciu nastpujcego selektora:

    img[src="/img/2010/mainlogo.png"]

    Nie trzeba dodawa adnych klas ani identyfikatorw wystarczy wykorzystanie jakopunktu zaczepienia wartoci atrybutu elementu, oczywicie przy zaoeniu, e warto tazawsze bdzie taka sama (jeli interesuje Ci mniej dokadne dopasowywanie wartoci,zobacz dalej podrozdzia Selektory wyboru podacuchw w atrybutach).

    Jeszcze jedn rzecz wart uwagi jest nastpujcy zapis w specyfikacji CSS: to, czy w nazwachi wartociach atrybutw s rozrniane wielkie i mae litery, zaley od jzyka dokumentu(www.w3.org/TR/CSS2/selector.html#matching-attrs). Toznaczy, e w niektrych jzykachznacznikw wielko liter w nazwach atrybutw ma znaczenie, a w innych nie. W jzykuXHTML wielko liter ma znaczenie i oglnie lepiej jest przyj zaoenie, e tak samo jestwe wszystkich innych jzykach.

    SELEKTOR ATRYBUTU CLASSPo przeczytaniu poprzedniego podrozdziau mona doj do wniosku, e za pomocselektorw atrybutw mona odtworzy selektor .class. Jest to prawda, da si to zrobi,ale nie w aden ze sposobw, ktre przedstawiem do tej pory.

    Oto sposb uzyskania dokadnego odpowiednika selektora div.panelprzy uyciu selektoraatrybutw:

    div[class~="panel"]

    Zauwaye tyld znajdujc si w tym kodzie przed znakiem rwnoci? W tym przypadku

    jest ona bezwzgldnie potrzebna, poniewa oznacza, e ten selektor wybiera podane sowoz listy sw oddzielanych spacjami. Taki may zawijas, a taki wany!

    Aby nie byo wtpliwoci, zobaczmy, co si stanie, jeli tyld usuniemy. Nasz selektorwygldaby wwczas nastpujco:

    div[class="panel"]

    Selektor ten wybiera wszystkie elementy divz atrybutem classo wartoci panel liczsi tylko takie, ktre maj warto dokadnie panel. Jeli w atrybucie classbyoby wpisanepanelweather, to selektor bez tyldy nie zadziaa, poniewa panelto nie jest dokadnie

    to samo co panel weather. Natomiast selektor div.panelwybierze elementbez problemu.

    http://www.w3.org/TR/CSS2/selector.html#matching-attrshttp://www.w3.org/TR/CSS2/selector.html#matching-attrshttp://www.w3.org/TR/CSS2/selector.html#matching-attrs
  • 7/26/2019 Podrcznik CSS

    65/272

    ROZDZIA 2: SELEKTORY

    65

    Dodanie tyldy sprawia, e selektor zachowuje si dokadnie tak, jak w przypadku skadniz uyciem kropki. W zwizku z tym dwa ponisze selektory s identyczne pod kadymwzgldem oprcz liter, z ktrych si skadaj:

    div[class~="panel"]div.panel

    Teraz pewnie sobie mylisz: wietnie, zawsze chciaem pozna dug i zawi skadniselektora do wybierania klas. Dlatego zaznaczam, e selektory atrybutw nie su tylko dowyboru elementw na podstawie wartoci ich atrybutw idi class. Przedstawionej notacjimona uywa w stosunku do wszystkich atrybutw dopuszczajcych w wartociach listywyrazw oddzielanych spacjami (przez wyraz rozumiem tu cig znakw).

    Oto kilka innych przykadw uycia tego rodzaju selektora:

    img[alt~="gura"] Kady obraz, ktrego atrybut altzawiera wyraz gura.

    table[summary~="data"] Kada tabela, ktrej atrybut summaryzawiera wyraz data.

    *[title~="2009"] Kady element, ktrego atrybut titlezawiera cig znakw 2009.

    IDENTYFIKATORY A SELEKTORY ATRYBUTWSelektorw atrybutw mona uywa nie tylko do naladowania w skomplikowany sposbselektorw klas, lecz rwnie do imitowania selektorw identyfikatorw. Obie ponisze

    reguy odnosz si do tego samego elementu:p#lead-in {font-weight: bold;}

    p[id="lead-in"] {font-weight: normal; font-style: italic;}

    Wszystko w porzdku, ale spjrzmy na wynik zastosowania kadej z tych dwch regu.Akapit o identyfikatorze lead-inbdzie mia tekst pogrubiony i jednoczenie pochylony(rysunek 2.12).

    Jest to spowodowane tym, e selektor atrybutw ma precyzj 0,0,1,0 tak sam jak klasyi pseudoklasy. W zwizku z tym precyzja pierwszej reguy wynosi 0,1,0,1, a drugiej 0,0,1,1.

    T bitw o zastosowanie wasnoci font-weightwygrywa pierwsza regua, ktra jestprecyzyjniejsza.

    Jest to jedna z zawioci precyzji selektorw, ktra moe spowodowa powstaniecakiem nowych rodzajw formatowania. Moe pamitasz z jednego z wczeniejszychpodrozdziaw, e identyfikatory maj wysz precyzj od klas i mog je przesania,z ktrego to powodu czasami moe by korzystniejsze uywanie tylko klas. Jeli grupadocelowa Twojego serwisu skada si wycznie z internautw uywajcych przegldarekobsugujcych selektory atrybutw, moesz bez przeszkd stosowa atrybuty classi id,do tych drugich odwoujc si tylko za pomoc selektora atrybutw. W ten sposb pozbdziesz

    si problemu zwizanego z tym, e selektor #IDprzesania wszystkie inne selektory.

  • 7/26/2019 Podrcznik CSS

    66/272

    CZ I: PODSTAWY

    66

    Rysunek 2.12. Poczenie stylw spowodowane rnicami w precyzji selektorw

    SELEKTOR PODACUCHWWARTOCI ATRYBUTWGdy zakoczono prace nad specyfikacj CSS 2, natychmiast rozpoczto prace nad kolejnwersj technologii, ktr moemy nazywa CSS 3, chocia nie ma ona ju formy pojedynczejspecyfikacji (mona by dugo o tym opowiada). Jednym z obszarw, ktrym powicononajwicej uwagi, byy selektory, a wic te i selektory atrybutw. Zdefiniowano niezwykleprzydatny w codziennej pracy zestaw wzorcw dopasowujcych podacuchy.

    Najprostszy z nich dopasowuje podacuchy w zwyky sposb. Aby lepiej zrozumie istot

    jego dziaania, spjrzmy na poniszy stary przykad:a[href="http://w3.org/"]

    Ten selektor jest doskonay, jeli chcemy odwoa si do odnonika prowadzcego podkonkretny adres URL. Wyobramy sobie jednak, e na swojej stronie mamy du liczbodnonikw do rnych stron witryny W3C i wszystkie chcemy sformatowa w taki samsposb. Najlepiej by byo, gdybymy mogli dokona wyboru odnonikw na podstawieczci w3.orgadresu (rysunek 2.13). Oto sposb realizacji tego zadania:

    a[href*="w3.org"] {font-weight: bold;}

    http://w3.org/http://w3.org/http://w3.org/http://w3.org/http://w3.org/
  • 7/26/2019 Podrcznik CSS

    67/272

    ROZDZIA 2: SELEKTORY

    67

    Rysunek 2.13. Wybr wszystkich czy, ktre w adresie URL zawieraj podacuch w3.org

    Do uzyskania danego efektu wystarczya nam tylko gwiazdka przed znakiemrwnoci. Nie naley jednak myli jej w tym zastosowaniu z selektorem uniwersalnymani symbolem wieloznacznym z Uniksa czy narzdzia grep. Umieszczenie jej przedznakiem rwnoci oznacza tylko, e ten cig znakw musi wystpowa w ktrymmiejscu w wartoci atrybutu.

    Technik t mona oczywicie stosowa w odniesieniu do kadego elementu i atrybutu.Wracajc do przykadu wyboru logo firmy, moglibymy napisa taki selektor:

    img[src*="mainlogo.png"]

    Ten selektor wybierze wszystkie elementy imgwskazujce obraz o nazwie mainlogo.pnglub majcy cig znakw mainlogo.pnggdziekolwiek w wartoci atrybutu src. W zwizkuz tym wybraby oba ponisze elementy:

    Przy okazji nie polecam nadawania takich nazw plikom.

    Selektor ten mona wykorzysta na wiele rnych sposobw, np. do formatowaniawszystkich obrazw pochodzcych z okrelonego katalogu poprzez wybr za

    pomoc selektora nazwy katalogu, z ktrego s pobierane. Analogicznie monazastosowa odrbne formatowanie dla czy prowadzcych do rnych obszarwwitryny, wykorzystujc w selektorze nazwy poszczeglnych katalogw wystpujcychw atrybucie href.

    a[href*="/contact"] {color: maroon;}

    a[href*="/news"] {font-weight: bold;}

    Pamitaj, aby wartoci atrybutw zawsze traktowa tak, jakby wielko liter miaa w nichznaczenie (tak jest po prostu atwiej). Wwczas dwa pierwsze elementy przedstawioneponiej zostan dopasowane, a trzeci nie.

  • 7/26/2019 Podrcznik CSS

    68/272

    CZ I: PODSTAWY

    68

    img[alt*="Figure"] {border: 1px solid gray;}

    Ostatni obraz nie zostanie sformatowany, poniewa rysuneki Rysunekto dwa rne sowa.W tym przypadku rozrnienie to wydaje si przydatne, poniewa (biorc pod uwagzawarto atrybutu alt) trzeci obraz nie jest rysunkiem w formalnym sensie. Tak si tylkozoyo, e jego atrybut altzawiera to sowo. Nie znaczy to jednak, e nie musimy uwaa,bo poniszy element rwnie zostaby sformatowany przez nasz regu:

    Jest sowo Rysunek jest dopasowanie.

    Jeli chcemy dopasowa wyrazy napisane zarwno ma, jak i wielk liter, moemy toograniczenie obej, stosujc nastpujcy selektor:

    img[alt*="ysunek"] {border: 1px solid gray;}

    Ten selektor wybierze wszystkie wystpienia podanego cigu znakw, a wic zarwnorysunek, jak i Rysunek, a take wszelkie inne acuchy znakw, w ktrych pojawi si podanypodacuch.

    To jeszcze nie wszystko na temat wyboru podacuchw. Czytaj dalej, aby dowiedzie si

    szczegw.

    SELEKTOR PODACUCHWWARTOCI ATRYBUTW CIG DALSZYPodczas gdy moliwo wyboru podacucha w dowolnym miejscu wartoci atrybutubardzo si przydaje (zobacz poprzedni podrozdzia), czasami wolelibymy ograniczyzakres poszukiwania tylko do pocztku lub koca wartoci atrybutu. Da si to zrobi.

    Jeli chcesz dokona wyboru podacucha na pocztku wartoci atrybutu,uyj nastpujcego wzorca:

    a[href^="http"]

    Dziki daszkowi (^) powyszy selektor sformatuje wszystkie elementy a, ktrych atrybuthref ma warto zaczynajc si od cigu znakw http. W ten sposb mona atwo wybrawszystkie cza do zewntrznych stron, jeli przyj, e wszystkie cza wewntrzne sreprezentowane przez adresy wzgldne i e adnemu folderowi w swoim systemie plikwnie nadalimy nazwy http. Oto przykadowa prosta regua z uyciem opisywanego selektora:

    a[href^="http"] {font-weight: bold;}

  • 7/26/2019 Podrcznik CSS

    69/272

    ROZDZIA 2: SELEKTORY

    69

    A poniej mamy co nieco bardziej skomplikowanego:

    a[href^="http"] {padding-right: 18px;

    background: url(/pix/external.png) 100% 50% no-repeat;}

    Wynik wida na rysunku 2.14.

    Rysunek 2.14. Dodanie ikon do czy, ktre zaczynaj si od liter http

    Aby dokona selekcji na podstawie wystpowania okrelonego podacucha na kocuwartoci atrybutu, naley zastosowa nastpujcy wzorzec:

    a[href$=".pdf"]

    Znak dolara ($) powoduje, e selektor wybierze wszystkie elementy a, ktrych atrybut hrefkoczy si podacuchem .pdf. W ten sposb mona bardzo atwo oznaczy wszystkieodnoniki prowadzce do plikw PDF (jak na rysunku 2.15). Na przykad:

    a[href$=".pdf"] {padding-right: 18px;

    background: url(/pix/pdf.png) 100% 50% no-repeat;}

    Rysunek 2.15. Ikony PDF do czy do plikw w tym formacie

  • 7/26/2019 Podrcznik CSS

    70/272

    CZ I: PODSTAWY

    70

    Znakomicie! Oto kilka innych pomysw na wykorzystanie selektorw atrybutwdo formatowania czy:

    a[href^="https"] cza szyfrowane

    a[href^="mailto"] cza do adresw e-mail

    a[href^="aim"] cza do usugi AOL Instant Messenger

    a[href$=".doc"] dokumenty programu Microsoft Word

    a[href$=".xls"] dokumenty programu Microsoft Excel

    a[href$=".zip"] archiwa ZIP

    Nie zapominaj jednak, e przedstawione tu selektory mona stosowa do dowolnego rodzajuelementw. Jeli przypomnisz sobie przykad z rysunkami z poprzedniego podrozdziau,

    to spostrzeesz, e wikszo opisywanych tam problemw mona atwo rozwiza przyuyciu selektora z daszkiem:

    img[alt^="Rysunek"] {border: 1px solid gray;}

    Teraz wybieramy tylko te elementy img, ktrych atrybut altma warto zaczynajc siod acucha Rysunek, i nie przejmujemy si tym, e wyraz ten moe wystpi take gdziedalej w tekcie. Te bd przez nasz selektor pomijane.

    SELEKTORY DZIECIJednym z najczstszych sposobw, w jakie odwoujemy si do elementw HTML za pomocCSS, jest wykorzystanie ich miejsca w hierarchii dokumentu. Do tego celu zwyklewykorzystujemy selektor potomkw, np.:

    div#header a {color: #DEFACE;}

    Powysza regua sformatuje wszystkie elementy abdce potomkami kadego elementu divo identyfikatorze header.

    Bardzo czsto wanie takiego selektora nam potrzeba chcemy wybra wszystkie czaznajdujce si w nagwku bez wzgldu na to, w ktrym konkretnie jego miejscu siznajduj i czy co jest jeszcze przed nimi.

    Czasami jednak potrzebny jest dostp do elementu bdcego bezporednim potomkiem(dzieckiem) innego elementu. Wyobramy sobie, e chcemy wybra elementy listy bdcedziemi (nie potomkami) elementu ol(rysunek 2.16). Jeli w tej uporzdkowanej licieznajdowayby si jakie listy nieuporzdkowane, ich elementy nie zostayby wzite poduwag. Do tego potrzebny jest selektor dzieci.

    ol > li {list-style-type: upper-alpha;}

  • 7/26/2019 Podrcznik CSS

    71/272

    ROZDZIA 2: SELEKTORY

    71

    Rysunek 2.16. Wybr elementw listy bdcych dziemi listy uporzdkowanej

    Ograniczenie wyboru elementw tylko do dzieci wybranego elementu daje znak wikszoci.Gdybymy go usunli, regua zostaaby zastosowana do wszystkich elementw listyznajdujcych si w elemencie ol, nawet tych, ktre znajduj si w listach zagniedonychw tej licie (rysunek 2.17).

    Rysunek 2.17. Uporzdkowanie list nieuporzdkowanych

    Tak, to jest moliwe i wcale nie oszukuj. Na rysunku 2.17 znajduje si listanieuporzdkowana ze znacznikami listy uporzdkowanej, ktra powstaa w wynikuusunicia z selektora kombinatora wyboru elementw dzieci.

  • 7/26/2019 Podrcznik CSS

    72/272

    CZ I: PODSTAWY

    72

    CZCIOWA IMITACJASELEKTORA ELEMENTW DZIECI

    Jeli Twoja strona musi by zgodna ze starszymi przegldarkami, takimi jak IE 6, ktre nieobsuguj kombinatora wyboru elementw dzieci, a nie chcesz rozwiza tego problemuprzy uyciu JavaScriptu (zobacz podrozdzia Skrypt IE9.js w rozdziale 1.), to moeszposuy si selektorem uniwersalnym.

    Zamy, e chcemy otoczy obramowaniem kady element divbdcy dzieckiem elementudivo identyfikatorze main(rysunek 2.18). Przy uyciu normalnego selektora dziecinapisalibymy co takiego:

    div#main > div {border: 1px solid gray;}

    Rysunek 2.18. Podrbka selektora dzieci

    Jak wic robi si imitacj tego efektu? Tak:

    div#main div {border: 1px solid gray;}div#main * div {border: 0;}

    Druga z tych regu wybiera wszystkie elementy divbdce potomkami dowolnegoelementu bdcego potomkiem elementu divo identyfikatorze main. W istocie cofa ona

    efekt pierwszej reguy. Obie te reguy dotycz elementw divbdcych najwyej wnukamielementu div#maini obie ustawiaj waciwoci obramowania, a wic s w konflikcie.Poniewa maj tak sam precyzj, ostatecznie zostanie zastosowana druga z nich. Jednakeelementy divznajdujce si w elemencie div#mains wybierane tylko przez pierwsz regu,a wic te bd miay obramowanie.

    Trzeba jednak pamita o jednej wanej rzeczy ta technika dobrze dziaa tylkoz wasnociami niedziedzicznymi. Jeli uyjemy jej do wasnoci dziedzicznych,moemy otrzyma niezamierzone efekty. Wemy np. ponisze dwie reguy:

    ol li {font-weight: bold;}

    ol * li {font-weight: normal;}

  • 7/26/2019 Podrcznik CSS

    73/272

    ROZDZIA 2: SELEKTORY

    73

    Teraz zamy, e chcemy, aby tekst list nieuporzdkowanych, znajdujcych si w listachuporzdkowanych przypisanych do pewnej klasy, by pogrubiony (rysunek 2.19):

    ol.urgent ul {font-weight: bold;}

    Rysunek 2.19. Style dziedziczne przesonite przez style przypisane bezporednio

    Dziki tej dodatkowej regule elementy list nieuporzdkowanych bd niepogrubione.Jest to spowodowane tym, e ogldany przez nas wczeniej selektor ol * lima bezporedniezastosowanie do tych elementw. Zadeklarowana tam normalna grubo pisma przesaniapogrubienie, ktre w normalnej sytuacji zostaoby odziedziczone po regule ol.urgent li.

    Problem ten nie wystpuje podczas uywania wasnoci niedziedzicznych, a wic np.background, border, display, margin, paddingitd. Jeli nie wiesz, ktre wasnoci sdziedziczne, moesz to sprawdzi na stronie http://www.w3.org/TR/CSS2/propidx.htmlalbo w specyfikacji CSS.

    SELEKTORY ELEMENTW SIOSTRZANYCHWiemy ju, e elementy mona wybiera na podstawie ich relacji dziecko-rodzic

    i przodek-potomek, ale to nie wszystko. Moliwe jest take odwoywanie si do elementwsiostrzanych, tzn. takich, ktre maj wsplnego rodzica. Relacj tego typu pokazanona rysunku 2.20 elementy siostrzane s wyrnione.

    Rys