Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00047 003853 12925375 na godz. na dobę w sumie
CSS. Nieoficjalny podręcznik. Wydanie IV - książka
CSS. Nieoficjalny podręcznik. Wydanie IV - książka
Autor: Liczba stron: 656
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-2289-9 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook (-25%), audiobook).
CSS jest świetnym narzędziem do budowania profesjonalnych stron internetowych. Opanowanie jego tajników może wydawać się dość trudnym zadaniem, jednak wysiłek ten bardzo się opłaca. CSS wciąż zaskakuje nieoczekiwanymi możliwościami, dalece wykraczającymi poza proste ozdabianie stron WWW. Technologia ta pozwala na tworzenie znakomicie wyglądających witryn o przebogatej funkcjonalności. Co jakiś czas pojawiają się nowe narzędzia i modele, jeszcze bardziej poszerzające warsztat projektanta. CSS jest jedną z tych technik, które wymagają nieustannego uczenia się i zapoznawania z nowościami.

Niniejsza książka to niezwykle wartościowy podręcznik dla projektantów stron o różnym poziomie zaawansowania. Zawarto tu zwięzłe wprowadzenie do języka HTML w zakresie niezbędnym dla każdego, kto chce programować w CSS. Przedstawiono wyczerpujące i dokładne wskazówki tworzenia stron WWW w CSS, wyjaśniając poszczególne niuanse tej technologii. W dobie rozwoju urządzeń mobilnych niezwykle cenne są informacje o sposobach kontroli układów strony, o elementach pływających i pozycjonowaniu. Ponadto autor omówił wiele zaawansowanych technik CSS, takich jak systemy siatkowe, model Flexbox, technologia Sass i wiele, wiele innych.

W tej książce znajdziesz:

Odkryj tajemnice CSS — projektuj stylowo!

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

Darmowy fragment publikacji:

Tytuł oryginału: CSS: The Missing Manual, 4th Edition Tłumaczenie: Łukasz Piwko ISBN: 978-83-283-2289-9 © 2016 Helion SA. Authorized Polish translation of the English edition CSS: The Missing Manual, 4th Edition, ISBN 9781491918050 © 2015 David Sawyer McFarland. 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 biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą 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) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/cssnp4 Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/cssnp4.zip Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treści Nieoficjalna czołówka ............................................................ 7 Wstęp ..................................................................................... 11 Czym jest CSS ..........................................................................................................11 Co trzeba wiedzieć ................................................................................................12 HTML — szkielet dokumentu ............................................................................12 Jak działają znaczniki HTML ...............................................................................13 HTML5 — więcej elementów do wyboru .....................................................14 Programy do pracy z CSS ....................................................................................15 O tej książce .............................................................................................................16 Podstawy ..................................................................................................................18 Zasoby internetowe ..............................................................................................19 Część I Podstawy CSS ...................................................... 21 ROZDZIAŁ 1. HTML i CSS ............................................................................ 23 HTML kiedyś i teraz ...............................................................................................23 Pisanie HTML-a z myślą o CSS ...........................................................................26 Znaczenie deklaracji typu dokumentu ..........................................................36 Jak działa CSS ..........................................................................................................38 ROZDZIAŁ 2. Tworzenie stylów i arkuszy stylów ..................................... 41 Anatomia stylu ........................................................................................................42 Zrozumieć arkusze stylów ..................................................................................44 Wewnętrzne arkusze stylów ..............................................................................44 Style zewnętrzne ....................................................................................................46 Kurs: tworzenie pierwszego stylu ....................................................................47 ROZDZIAŁ 3. Selektory, czyli do czego odnoszą się style ....................... 59 Selektory typu — style dla elementów HTML .............................................60 Selektor klasy — precyzyjna kontrola ............................................................61 Selektor ID — pojedyncze elementy strony ................................................65 Nadawanie stylów grupom znaczników .......................................................67 Stylizowanie znaczników zagnieżdżonych ..................................................68 Pseudoklasy i pseudoelementy ........................................................................72 Selektory atrybutu .................................................................................................77 Selektor brata ..........................................................................................................84 Selektor :target() .....................................................................................................85 Selektor :not() ..........................................................................................................86 Kurs: selektory .........................................................................................................87 3 Poleć książkęKup książkę ROZDZIAŁ 4. Oszczędzanie czasu dzięki dziedziczeniu .......................... 99 Czym jest dziedziczenie .......................................................................................99 Jak dziedziczenie upraszcza arkusze stylów ............................................. 101 Granice dziedziczenia ........................................................................................ 101 Kurs: dziedziczenie ............................................................................................. 103 ROZDZIAŁ 5. Zarządzanie wieloma stylami — kaskada ....................... 109 Kaskadowość stylów .......................................................................................... 110 Precyzja: który styl weźmie górę ................................................................... 114 Kontrolowanie kaskady .................................................................................... 116 Kurs: kaskadowość w akcji ............................................................................... 123 Część II Stosowanie CSS ................................................ 129 ROZDZIAŁ 6. Formatowanie tekstu ........................................................ 131 Czcionki .................................................................................................................. 131 Stosowanie czcionek sieciowych .................................................................. 136 Usługa Google Fonts ......................................................................................... 150 Kolorowanie tekstu ............................................................................................ 156 Zmiana rozmiaru pisma .................................................................................... 159 Formatowanie słów i liter ................................................................................. 165 Dodawanie cieni do tekstu .............................................................................. 169 Formatowanie całych akapitów .................................................................... 170 Stylizowanie list ................................................................................................... 176 Kurs: formatowanie tekstu ............................................................................... 179 ROZDZIAŁ 7. Marginesy, dopełnienie i obramowanie .......................... 193 Istota modelu polowego .................................................................................. 193 Marginesy i dopełnienie ................................................................................... 195 Obramowanie ...................................................................................................... 201 Kolorowanie tła .................................................................................................... 204 Zaokrąglanie rogów ........................................................................................... 205 Cienie elementów ............................................................................................... 207 Określanie wysokości i szerokości ................................................................ 210 Elementy pływające ........................................................................................... 216 Kurs: marginesy, tła i obramowanie ............................................................. 221 ROZDZIAŁ 8. Umieszczanie grafiki na stronach WWW ......................... 233 CSS i znacznik img ........................................................................................ 233 Obrazy tła ............................................................................................................... 234 Kontrola sposobu powtarzania obrazu w tle ............................................ 238 Pozycjonowanie obrazu tła ............................................................................. 240 Własność zbiorcza background ..................................................................... 248 Ustawianie wielu obrazów w tle jednego elementu ............................. 250 Stosowanie gradientów w tle ......................................................................... 253 Kurs: uatrakcyjnianie grafik ............................................................................. 261 Kurs: tworzenie galerii fotografii ................................................................... 266 Kurs: wstawianie obrazów do tła elementów ........................................... 270 ROZDZIAŁ 9. Upiększanie systemu nawigacji ........................................ 277 Wybieranie odnośników do stylizacji .......................................................... 277 Stylizowanie odnośników ................................................................................ 281 Tworzenie pasków nawigacji .......................................................................... 287 4 SPIS TREŚCI Poleć książkęKup książkę Wczytywanie grafik tła odnośników z wyprzedzeniem ........................ 295 Stylizowanie wybranych rodzajów odnośników ..................................... 297 Kurs: stylizowanie odnośników ..................................................................... 299 Kurs: tworzenie paska nawigacji ................................................................... 304 ROZDZIAŁ 10. Przekształcenia, przejścia i animacje CSS ........................313 Przekształcenia .................................................................................................... 313 Przejścia .................................................................................................................. 321 Animacje ................................................................................................................ 328 Kurs .......................................................................................................................... 339 ROZDZIAŁ 11. Formatowanie tabel i formularzy .....................................347 Właściwy sposób używania tabel ................................................................. 347 Stylizowanie tabel .............................................................................................. 349 Stylizowanie formularzy ................................................................................... 355 Kurs: stylizowanie tabeli ................................................................................... 359 Kurs: stylizowanie formularza ......................................................................... 364 Część III Tworzenie układu strony za pomocą CSS ....... 371 ROZDZIAŁ 12. Wprowadzenie do układów stron ....................................373 Typy układów stron WWW .............................................................................. 373 Jak działa układ w CSS ....................................................................................... 376 Strategie planowania układu ......................................................................... 379 ROZDZIAŁ 13. Tworzenie układów opartych na elementach pływających ........................................................................385 Stosowanie elementów pływających w układach .................................. 388 Rozwiązywanie problemów z elementami pływającymi ..................... 393 Kurs: układy wielokolumnowe ....................................................................... 404 ROZDZIAŁ 14. Pozycjonowanie elementów na stronie WWW ................415 Jak działają właściwości pozycjonujące ..................................................... 416 Użyteczne strategie pozycjonowania ......................................................... 428 Kurs: pozycjonowanie elementów strony ................................................. 433 ROZDZIAŁ 15. Projektowanie responsywnych stron internetowych .....441 Podstawy techniki RWD ................................................................................... 441 Przystosowywanie strony do techniki RWD .............................................. 443 Zapytania medialne ........................................................................................... 444 Elastyczne siatki ................................................................................................... 451 Płynne obrazy ....................................................................................................... 455 Kurs stosowania techniki RWD ...................................................................... 459 ROZDZIAŁ 16. Systemy siatkowe CSS .......................................................473 Jak działają siatki ................................................................................................. 473 Definiowanie struktury strony na bazie siatki .......................................... 475 System siatkowy Skeleton ............................................................................... 476 Tworzenie kolumn i nadawanie im nazw .................................................. 480 Kurs: jak posługiwać się systemem siatkowym ....................................... 487 ROZDZIAŁ 17. Tworzenie nowoczesnych układów za pomocą modelu Flexbox ..................................................................503 Wprowadzenie do Flexboksa ......................................................................... 503 Własności kontenera elastycznego .............................................................. 507 SPIS TREŚCI 5 Poleć książkęKup książkę Własności elementów elastycznych ............................................................ 514 Kurs — budowa układu przy użyciu modelu Flexbox ........................... 527 Część IV Zaawansowany CSS .......................................... 537 ROZDZIAŁ 18. Dobre nawyki w CSS .......................................................... 539 Wstawianie komentarzy ................................................................................... 539 Porządkowanie stylów i arkuszy stylów ...................................................... 541 Usuwanie przeszkadzających stylów przeglądarki ................................. 549 Wykorzystanie selektorów potomka ........................................................... 552 ROZDZIAŁ 19. Sass, czyli CSS z turbodoładowaniem .............................. 559 Czym jest Sass ...................................................................................................... 559 Instalacja Sass ....................................................................................................... 561 Podstawy Sass ...................................................................................................... 564 Organizacja stylów w plikach częściowych ............................................... 569 Zmienne w Sass ................................................................................................... 572 Zagnieżdżanie selektorów ............................................................................... 576 Dziedziczenie własności ................................................................................... 580 Domieszki .............................................................................................................. 585 Zapytania medialne ........................................................................................... 593 Rozwiązywanie problemów przy użyciu map źródeł CSS .................... 597 Część V Dodatki .............................................................. 601 DODATEK A Zestawienie własności CSS ................................................ 603 Wartości CSS ......................................................................................................... 603 Właściwości tekstu .............................................................................................. 608 Właściwości list .................................................................................................... 613 Dopełnienie, obramowania i marginesy .................................................... 614 Tła ............................................................................................................................. 620 Właściwości układu strony .............................................................................. 623 Własności animacji, przekształceń i przejść .............................................. 630 Właściwości tabel ................................................................................................ 634 Pozostałe właściwości ....................................................................................... 636 DODATEK B Zasoby CSS ......................................................................... 639 Podręczniki ............................................................................................................ 639 Pomoc dotycząca CSS ....................................................................................... 640 Porady, sztuczki i wskazówki .......................................................................... 641 Nawigacja z CSS ................................................................................................... 641 Układy oparte na CSS ........................................................................................ 642 Witryny pokazowe .............................................................................................. 642 Skorowidz ........................................................................... 645 6 SPIS TREŚCI Poleć książkęKup książkę Selektory, czyli do czego odnoszą się style ROZDZIAŁ 3 K ażdy styl CSS składa się z dwóch podstawowych części: selektora i bloku deklaracji (pisałem już o tym w poprzednim rozdziale). Blok deklaracji zawiera właściwości formatujące kolor, rozmiar pisma itd., ale to służy tylko upiększaniu strony. Prawdziwa magia CSS kryje się w tych kilku pierw- szych znakach poprzedzających każdą regułę — selektorze. Selektory, mówiąc arkuszom stylów, co mają sformatować, dają nam pełną kontrolę nad wyglądem strony (rysunek 3.1). Jeśli chcemy, selektor może odnosić się do wielu elemen- tów strony jednocześnie lub, jeśli wolimy skupić się na szczegółach, do jednego określonego elementu albo jednej grupy elementów. Selektory CSS dają bar- dzo duże możliwości i w tym rozdziale nauczymy się je wykorzystywać. RYSUNEK 3.1. Pierwsza część stylu, selektor, wskazuje, który element lub które elementy na stronie mają być sformatowane. W tym przypadku h1 oznacza, że formatowanie ma zostać zastosowane do wszystkich nagłówków pierwszego rzędu lub znaczników h1 na tej stronie UWAGA Osoby, które wolą zdobyć nieco doświadczenia, zanim zaczną czytać na temat zasad doty- czących selektorów CSS, powinny przejść do kursu w dalszej części rozdziału. 59 Poleć książkęKup książkę SELEKTORY TYPU — STYLE DLA ELEMENTÓW HTML Selektory typu — style dla elementów HTML Selektory służące do wskazywania określonych elementów HTML nazywają się selektorami typu (ang. type selector) lub elementu (ang. element selector). Są one niezwykle skuteczne, ponieważ mają zastosowanie do każdego wystąpie- nia danego znacznika na stronie. Dzięki nim można dokonać znacznych zmian w projekcie strony przy bardzo małym nakładzie pracy. Przykładowo aby sfor- matować wszystkie akapity tekstu na stronie, nadając im taki sam krój, kolor i roz- miar pisma, wystarczy utworzyć styl wykorzystujący selektor p (od znacznika p ). W zasadzie selektor znacznika przedefiniowuje sposób prezentacji przez prze- glądarkę zawartości określonego znacznika. Przed powstaniem CSS tekst formatowano, umieszczając go w znacznikach font . Żeby sprawić, aby wszystkie akapity na stronie wyglądały tak samo, trzeba było użyć tego znacznika wiele razy. Wymagało to wiele pracy i powo- dowało powstawanie dużych ilości kodu HTML, co z kolei pociągało za sobą wydłużony czas pobierania i aktualizacji strony. Przy zastosowaniu selektorów znacznika poza kodem HTML nie trzeba w zasadzie robić nic — wystarczy utwo- rzyć regułę CSS, a przeglądarka zajmie się resztą. Selektory typu łatwo odnaleźć w regułach CSS, ponieważ ich nazwy pokrywają się z nazwami znaczników, do których się odwołują — p, h1, table, img itd. Na przykład na rysunku 3.2 selektor h2 (na górze) nadaje styl pisma wszystkim znacznikom h2 na stronie (na dole). RYSUNEK 3.2. Selektor typu zmienia wygląd wszystkich wystąpień danego znacznika na stronie. Ta strona ma trzy znaczniki h2 (oznaczone odpowiednio po lewej stronie okna przeglądarki). Pojedynczy styl z selektorem h2 pozwala kontrolować wygląd wszystkich znaczników h2 na stronie 60 CSS. NIEOFICJALNY PODRĘCZNIK Poleć książkęKup książkę UWAGA Jak wyraźnie widać na rysunku 3.2, w selektorach nie używa się znaków mniejszości ( ) i większości ( ), które otaczają znaczniki HTML. W związku z tym, pisząc regułę na przykład dla znacznika p , wystarczy podać tylko jego nazwę, czyli p. SELEKTOR KLASY — PRECYZYJNA KONTROLA Selektory typu mają jednak też wady. Co zrobić, jeśli chcemy, aby część akapi- tów wyglądała tak, a pozostałe inaczej? Prosty selektor znacznika nie sprawdzi się w takiej sytuacji, ponieważ nie dostarcza on przeglądarce wystarczających informacji, aby ta mogła odróżnić akapity, które mają być pisane fioletowym, powiększonym i pogrubionym pismem, od tych, które mają być pisane normal- nym czarnym pismem. Na szczęście w CSS dostępnych jest kilka rozwiązań tego problemu, z których najprostsze polega na użyciu tzw. selektora klasy. Selektor klasy — precyzyjna kontrola Selektor klasy — precyzyjna kontrola Gdy chcemy kilka wybranych elementów strony zdefiniować inaczej niż pozo- stałe elementy tego samego typu na tej stronie — na przykład chcemy dwóm obrazom nadać czerwone obramowanie, a pozostałe grafiki pozostawić bez zmian — możemy użyć selektora klasy. Jeżeli używałeś kiedyś stylów w edytorze tekstów typu Microsoft Word, to znasz już zasadę działania selektora klasy. Selek- tor taki tworzy się poprzez zdefiniowanie jego nazwy, a następnie stosuje się go do wybranych elementów na stronie. Można na przykład utworzyć styl o nazwie .copyright i stosować go tylko do tych akapitów, które zawierają informacje chro- nione prawami autorskimi, nie wpływając na wygląd pozostałych akapitów. Selektory klas pozwalają także na odniesienie się do konkretnego elementu na stronie, bez względu na jego znacznik. Powiedzmy, że chcemy sformatować jedno lub dwa słowa, które znajdują się wewnątrz akapitu. Nie chcemy zmieniać wyglądu całego znacznika p , a tylko jakiegoś znajdującego się w nim wyra- żenia. Do wskazania tych słów można wykorzystać selektor klasy. Za pomocą tego selektora można nawet zastosować takie samo formatowanie do różnych elementów, które mają różne znaczniki HTML. Przykładowo jednemu akapitowi i nagłówkowi drugiego rzędu można nadać ten sam styl — mogą to być na przy- kład ten sam kolor i krój pisma, za pomocą których wyróżniamy ważne infor- macje, co pokazano na rysunku 3.3. W przeciwieństwie do selektorów znaczni- ków, które ograniczają się tylko do znaczników HTML występujących na stronie, selektory klas mogą występować w dowolnej liczbie i mogą znajdować się w dowolnym miejscu. UWAGA Aby zastosować selektor klasy tylko do kilku słów zawartych w innym znaczniku (na przykład p z rysunku 3.3), trzeba skorzystać z pomocy znacznika span . Więcej szczegółów na ten temat znaj- duje się w ramce „Znaczniki div i span ”. Jak nietrudno zauważyć, na początku każdego selektora klasy znajduje się kropka, na przykład .copyright czy .special. Jest to jedna z kilku reguł, o których należy pamiętać przy nadawaniu nazw klasom: (cid:120) Nazwy wszystkich selektorów klas muszą zaczynać się od kropki. Dzięki niej przeglądarka dowiaduje się o selektorach klas zawartych w arkuszach stylów. ROZDZIAŁ 3. SELEKTORY, CZYLI DO CZEGO ODNOSZĄ SIĘ STYLE 61 Poleć książkęKup książkę SELEKTOR KLASY — PRECYZYJNA KONTROLA RYSUNEK 3.3. Selektory klas pozwalają na dokonywanie precyzyjnych zmian w projekcie. Można na przykład zmienić styl jednego nagłówka h2 (Mokra darń to ciężka darń). Selektor klasy .special każe przeglądarce, aby zastosowała ten styl tylko do tego jednego znacznika h2 . Klasy można stosować także do innych znaczników, jak górny akapit na tej stronie (cid:120) W nazwach klas można używać tylko liter, cyfr, łączników i znaków podkreślenia. (cid:120) Bezpośrednio po kropce zawsze musi znajdować się litera. Na przykład .9lives nie jest poprawną nazwą klasy, ale .crazy8 tak. Nazwa klasy może wyglądać tak: .copy-right lub .banner_image, ale nie .-zle lub ._tez_zle. (cid:120) W nazwach klas rozróżniane są małe i wielkie litery. Przykładowo .SIDEBAR i .sidebar to dwie różne klasy w CSS. Poza nazwą proces tworzenia stylów klas nie różni się od stylów znaczników. Po nazwie klasy powinien znajdować się blok deklaracji zawierający wszystkie żądane style: .special { color:#FF0000; font-family: Monotype Corsiva ; } 62 CSS. NIEOFICJALNY PODRĘCZNIK Poleć książkęKup książkę Jako że selektory typu odnoszą się do wszystkich znaczników na stronie, wystar- czy je zdefiniować w arkuszu stylów, a znaczniki HTML, na których one działają, są już na swoich miejscach. Wolność, jaką dają selektory klas, jest okupiona niedużym dodatkiem pracy. Używanie selektorów klas jest procesem dwufa- zowym. Po utworzeniu reguły klasy trzeba jeszcze wskazać, do czego ma być ona stosowana. W tym celu do znacznika HTML, któremu ma być nadany styl, dodaje się atrybut class. Załóżmy, że utworzyliśmy klasę .special, za pomocą której będziemy wyróżniać określone elementy na stronie. Aby dodać ten styl do akapitu, należy do znacz- nika p dodać atrybut class w następujący sposób: p class- special SELEKTOR KLASY — PRECYZYJNA KONTROLA UWAGA W HTML-u przed nazwą klasy będącą wartością atrybutu class nie stawia się kropki. Jest ona wymagana tylko przed nazwą selektora w arkuszu stylów. Kiedy przeglądarka napotyka ten znacznik, wie, że do akapitu należy zasto- sować reguły formatujące zawarte w stylu .special. Dzięki klasom można także sformatować tylko określony fragment akapitu bądź nagłówka, posługując się znacznikiem span . Na przykład aby wyróżnić tylko jedno słowo w akapicie przypisanym do klasy .special, można napisać taki kod: p Witaj w span class= companyName Café Soylent Green /span , (cid:180)restauracji z dusz(cid:200). /p Po utworzeniu stylu klasy można go zastosować do dowolnego znacznika na stronie. Jedną klasę można zastosować do dowolnej liczby znaczników, a więc można utworzyć specjalny styl (.special) o określonych właściwościach czcionki i koloru i zastosować go do elementów h2 , p , ul itp. Jeden element, wiele klas Nie tylko jedną klasę można przypisać do wielu elementów, lecz również jed- nemu elementowi można przypisać wiele klas. Choć w pierwszej chwili może się wydawać, że tworzenie wielu klas to mnóstwo pracy, jest to bardzo często stosowana technika. Oto przykład sytuacji, gdy dobrym rozwiązaniem jest przypisanie jednemu ele- mentowi kilku klas: wyobraź sobie, że projektujesz interfejs do zarządzania koszy- kiem zakupów w sklepie internetowym. W interfejsie tym znajdują się różne przy- ciski, z których każdy służy do czegoś innego. Jeden na przykład umożliwia usunięcie produktu z koszyka, inny dodanie pozycji, a jeszcze inny służy do zmieniania liczby kupowanych produktów. Dobry projektant wie, że wszystkie przyciski powinny mieć pewne cechy wspól- ne, np. zaokrąglone rogi i taki sam krój pisma, ale też powinny się od siebie wyraźnie różnić, np. przycisk usuwania jest czerwony, przycisk dodawania pro- duktów jest zielony itd. Te podobieństwa i różnice można zdefiniować właśnie w kilku klasach. Jedna klasa będzie miała zastosowanie do wszystkich przyci- sków, a pozostałe — tylko do wybranych typów przycisków. ROZDZIAŁ 3. SELEKTORY, CZYLI DO CZEGO ODNOSZĄ SIĘ STYLE 63 Poleć książkęKup książkę SELEKTOR KLASY — PRECYZYJNA KONTROLA PRZYSPIESZAMY Znaczniki div i span W rozdziale 1. wprowadziłem dwa ogólne znaczniki HTML div i span , które można dopasować do własnych potrzeb za pomocą CSS. Jeśli nie ma znacznika HTML, który dokładnie odpowiada miejscu, w jakim chcemy umieścić styl klasy albo identyfikator (ID), to należy użyć znacznika span lub div . Znacznik div identyfikuje logiczną sekcję strony, jak baner, pasek nawigacyjny, pasek boczny czy stopka. Można w nim także umieszczać inne elementy, które zawierają określone fragmenty strony, jak nagłówki, listy wypunktowane czy aka- pity (programiści nazywają je elementami blokowymi, ponie- waż tworzą one pełne bloki treści otoczone nowymi wier- szami). Znacznik div jest podobny w użyciu do znacznika p — wpisuje się otwierający znacznik div , wprowadza tekst, obrazy i inną treść, a następnie zamyka go znaczni- kiem /div . Znacznik div ma unikalną zdolność zawierania wielu ele- mentów blokowych, dzięki czemu doskonale nadaje się do grupowania logicznie ze sobą powiązanych znaczników, takich jak logo i pasek nawigacyjny w banerze na stronie albo seria wiadomości na pasku bocznym. Mając pogrupowane w ten sposób elementy, formatowanie można stosować do każdego ze znaczników znajdujących się w div osobno lub prze- nieść cały blok treści znajdujący się w tym znaczniku w okre- ślone miejsce, na przykład na prawą stronę okna przeglą- darki (CSS pozwala na kontrolowanie układu strony w taki sposób, ale o tym piszę dopiero w części trzeciej). Wyobraźmy sobie na przykład, że dodaliśmy do strony obraz, któremu towarzyszy podpis. Za pomocą znacznika div (z klasą) można zgrupować to zdjęcie razem z podpisem: div class= photo img src= holidays.jpg alt= Pingwiny (cid:180)zaczynaj(cid:200) figlowa(cid:202) / p Mama, tata i ja na naszej corocznej (cid:180)wycieczce na Antarktyd(cid:218). /p /div W zależności od tego, co zostanie umieszczone w bloku dekla- racji, klasa .photo może dodawać dekoracyjne obramowanie, kolor tła itd. zarówno do zdjęcia, jak i do podpisu pod nim. W części trzeciej tej książki prezentuję jeszcze bardziej przy- datne zastosowanie znacznika div , włącznie z jego zagnież- dżaniem. W najnowszej wersji języka HTML wprowadzono wiele ele- mentów blokowych, które zachowują się podobnie jak ele- menty div , ale mają bardziej konkretne przeznaczenie. Na przykład obrazy z podpisami można prezentować za pomocą nowego elementu figure . Ponieważ jednak przeglądarka IE8 nie obsługuje tych nowych elementów (zobacz ramkę „Jak zmusić IE 8 do obsługi elementów HTML5” w rozdziale 1.), wielu projektantów nadal do grupowania używa tylko ele- mentów div . Ponadto nowe elementy HTML5 mają nadawać częściom stron „znaczenie”. Na przykład element article oznacza samo- dzielny blok tekstu, taki jak np. artykuł w czasopiśmie. Ale nie każdy kod HTML musi mieć określoną semantykę, więc mimo wszystko nadal często będziesz potrzebować elementu div do grupowania innych elementów. Znacznik span natomiast pozwala zastosować style klasy lub identyfikatora tylko do określonego fragmentu jakiegoś znacznika. Znacznik span można stosować na pojedynczych słowach lub wyrażeniach (często nazywanych elementami śródliniowymi) wewnątrz akapitów w celu nadania im in- dywidualnych cech formatowania. W poniższym przykładzie klasa o nazwie .companyName nadaje styl elementom śródli- niowym „CosmoFarmer.com”, „Disney” i „ESPN”. p Witamy w span class= companyName (cid:180) CosmoFarmer.com /span , firmie (cid:180)rodzicielskiej takich znanych korporacji, (cid:180)jak span class= companyName Disney / (cid:180)span i span class= companyName ESPN / (cid:180)span ...no mo(cid:285)e nie do ko(cid:241)ca. /p Najpierw zdefiniujemy klasę ogólną o nazwie .btn: .btn { border-radius: 5px; font-family: Arial, Helvetica, serif; font-size: .8 em; } 64 CSS. NIEOFICJALNY PODRĘCZNIK Poleć książkęKup książkę SELEKTOR ID — POJEDYNCZE ELEMENTY STRONY Następnie dodamy klasy dla poszczególnych rodzajów przycisków: .delete { background-color: red; } .add { background-color: green; } .edit { background-color: grey; } Teraz danemu elementowi można przypisać dowolną kombinację tych klas, aby otrzymać spójny zestaw różniących się od siebie detalami przycisków: button class= btn add Dodaj /button button class= btn delete Usu(cid:241) /button button class= btn edit Edytuj /button Przeglądarki internetowe doskonale radzą sobie ze stosowaniem deklaracji z wielu klas do pojedynczych elementów i jest to zgodne z zasadami języka HTML. W kodzie HTML wystarczy zdefiniować elementowi atrybut class i w jego wartości wpisać tyle nazw klas oddzielanych spacjami, ile się chce. Przeglądarka połączy deklaracje z wszystkich wskazanych reguł i zastosuje je jako jedną regułę. Zatem w naszym przykładzie wszystkie przyciski będą miały zaokrąglone rogi oraz pismo o rozmiarze 0.8em i kroju Arial. Jednocześnie przycisk dodawania produktów będzie zielony, przycisk usuwania produktów będzie czerwony, a przycisk edycji — szary. Zaletą tej metody jest to, że gdy uznamy, że przyciski nie powinny jednak mieć zaokrąglonych rogów albo powinny mieć inny krój pisma, wystarczy zmienić tylko styl .btn, który odnosi się do wszystkich przycisków. Analogicznie: jeśli postanowimy zmienić kolor przycisku edycji na żółty, to zmiana wprowadzona w stylu .edit znajdzie zastosowanie właśnie tylko w tym przycisku. Selektor ID — pojedyncze elementy strony Selektor ID — pojedyncze elementy strony Selektor identyfikatora w CSS służy do identyfikacji niepowtarzalnych części strony, takich jak banery, paski nawigacyjne czy główny obszar z treścią. Podobnie jak w przypadku selektora klasy, identyfikator tworzy się poprzez nadanie mu nazwy w CSS, a następnie stosuje się go, dodając do kodu HTML. Jaka jest zatem między nimi różnica? Jak napisano w ramce „Ukryte moce selektorów identyfikatora”, selektor identyfikatora ma pewne określone zastosowania na bardzo długich lub wykorzystujących JavaScript stronach. Poza tym powodów do używania identyfikatorów zamiast klas jest niewiele. UWAGA Ostatnio można zaobserwować trend odchodzenia od stosowania selektorów identyfika- tora. Zrozumienie przyczyn tego zjawiska wymaga trochę większej wiedzy niż przedstawiona do tej pory. Dlatego też w książce tej nie zobaczysz zbyt wielu tych selektorów, a szczegółowe informacje na temat tego, dlaczego ich stosowanie nie jest najlepszym pomysłem, znajdują się w ramce „Ukryte moce selektorów identyfikatora” w dalszej części rozdziału. ROZDZIAŁ 3. SELEKTORY, CZYLI DO CZEGO ODNOSZĄ SIĘ STYLE 65 Poleć książkęKup książkę SELEKTOR ID — POJEDYNCZE ELEMENTY STRONY Mimo że wielu twórców stron internetowych nie używa już identyfikatorów tak często jak kiedyś, warto jednak wiedzieć, czym one są i jak działają. Jeśli zdecydujesz się użyć selektora identyfikatora, to nie będziesz mieć z tym żad- nego problemu, ponieważ jest to bardzo łatwe. Podobnie jak w klasach używa się kropki, w identyfikatorach używa się krzyżyka. Opisane wcześniej zasady dotyczące nadawania nazw również mają tu zastosowanie. Poniższy przykład ustawia kolor tła oraz szerokość i wysokość banera: #banner { background: #CC0000; height: 300px; width: 720px; } Identyfikatory w CSS stosuje się podobnie jak klasy, tylko używa się innego atrybutu — id. Przykładowo aby zastosować powyższy styl do elementu div , należałoby napisać taki kod HTML: div id= banner Aby zaznaczyć, że ostatni akapit strony stanowi informację o prawach autorskich, można utworzyć styl identyfikatora o nazwie #copyright i dodać go do tego akapitu: p id= copyright UWAGA Tak samo jak w przypadku klas, symbolu # używa się tylko przy nazwie stylu w arkuszu stylów. W wartości atrybutu znacznika HTML znak ten opuszczamy, na przykład div id= banner . PORADNIK INŻYNIERA Ukryte moce selektorów identyfikatora Selektory identyfikatora mają kilka właściwości, których brak klasom. Nie mają one nic wspólnego z CSS, więc może nie będą nam nigdy potrzebne, ale skoro pytasz: • W języku JavaScript identyfikatory są używane do loka- lizacji sekcji strony i manipulacji nimi. Na przykład pro- gramiści często stosują identyfikatory w elementach formularzy, takich jak pola tekstowe, w których odwie- dzający podaje swoje imię. Dzięki identyfikatorowi za pomocą JavaScriptu można uzyskać dostęp do takiego pola i w „magiczny” sposób sprawdzić, czy nie jest ono puste w momencie wysyłania formularza do serwera. • Identyfikatory pozwalają także na tworzenie łączy do określonych części strony, co ułatwia nawigację po dłu- gich dokumentach. W przypadku glosariusza posortowa- nych alfabetycznie terminów za pomocą identyfikatorów można utworzyć odnośniki do konkretnych liter alfabetu. 66 CSS. NIEOFICJALNY PODRĘCZNIK Kiedy użytkownik kliknie literę „R”, zostanie natych- miast przeniesiony do miejsca, w którym znajdują się hasła zaczynające się na tę literę. Nie trzeba w tym przypadku pisać żadnych reguł CSS — wszystko odbywa się w HTML-u. Najpierw należy dodać identyfikator do miejsca na stronie, do którego ma prowadzić łącze. Na przykład w słowniku można zdefiniować elementy h2 zawierające litery alfabetu, po których znajdują się defi- nicje. Później do każdego z tych elementów h2 należy dodać identyfikator: h2 id= R R /h2 . Tworząc odnośnik w HTML-u, na końcu adresu należy dodać krzyżyk i identyfikator, na przykład index.html#R. Łącze takie prowadzi bezpośrednio do elementu o iden- tyfikatorze #R na stronie index.html. W tym zastosowa- niu identyfikator jest podobny do połączeń nazwanych — a name= R R /a — w HTML-u. Poleć książkęKup książkę NADAWANIE STYLÓW GRUPOM ZNACZNIKÓW Nadawanie stylów grupom znaczników Czasami potrzebny jest sposób na szybkie zastosowanie jednego stylu forma- towania do kilku różnych elementów. Przykładowo można chcieć, aby wszyst- kie nagłówki na stronie miały taki sam kolor i krój pisma. Tworzenie oddzielnego stylu dla każdego z nich — h1, h2, h3, h4 itd. — to zdecydowanie zbyt dużo pracy. Ponadto jeśli później zechcemy zmienić kolor tych nagłówków, trzeba będzie uaktualnić aż sześć różnych stylów. Lepszym rozwiązaniem będzie więc użycie selektora grupowego. Selektor grupowy pozwala na stosowanie stylów do wielu selektorów jednocześnie. Grupowanie selektorów Aby zgrupować selektory, wystarczy napisać ich listę rozdzieloną przecinkami. W związku z tym, żeby nadać ten sam kolor wszystkim nagłówkom, można utworzyć następującą regułę: h1, h2, h3, h4, h5, h6 {color: #F1CD33;} Powyższy przykład składa się z samych selektorów znacznika, ale można w ten sposób wykorzystać każdy prawidłowy selektor (lub kombinację typów selek- torów). Przykładowo poniższy selektor nadaje ten sam kolor znacznikom h1 i p należącym do klasy .copyright oraz temu, który ma identyfikator #banner. h1, p, .copyright, #banner {color: #F1CD33;} UWAGA Jeśli chcesz, aby kilka znaczników miało takie same niektóre style (ale nie wszystkie), to możesz utworzyć selektor grupowy ze wspólnymi właściwościami oraz indywidualne reguły z indywidual- nymi właściwościami dla każdego znacznika osobno. Innymi słowy, do jednego znacznika może odnosić się kilka stylów. Możliwość stosowania wielu stylów do jednego elementu jest bardzo przydatną cechą CSS. Szczegóły na ten temat można znaleźć w rozdziale 5. Selektor uniwersalny Selektor grupowy można traktować jako skrócony zapis nadawania tego samego stylu kilku różnym elementom. W CSS dostępny jest także selektor wszystkich grup o nazwie selektor uniwersalny. Symbol gwiazdki (*) jest uniwersalnym selektorem pasującym do wszystkich znaczników. Załóżmy, że chcemy na przykład, aby wszystkie znaczniki na stronie były pisane drukiem pogrubionym. Selektor grupowy w takiej sytuacji wyglądałby tak: a, p, img, h1, h2, h3, h4, h5 itd. {font-weight: bold;} Gwiazdka jest jednak o wiele krótszym sposobem na poinformowanie CSS, aby zastosował styl do wszystkich znaczników na stronie: * {font-weight: bold;} Selektora uniwersalnego można także użyć jako części selektora potomka, dzięki czemu można zastosować styl do wszystkich znaczników będących potomkami jednego określonego elementu strony. Na przykład selektor .banner * wybiera wszystkie znaczniki znajdujące się w elemencie należącym do klasy banner (selek- tory potomka są objaśnione w kolejnym podrozdziale). ROZDZIAŁ 3. SELEKTORY, CZYLI DO CZEGO ODNOSZĄ SIĘ STYLE 67 Poleć książkęKup książkę STYLIZOWANIE ZNACZNIKÓW ZAGNIEŻDŻONYCH Jako że selektor uniwersalny nie określa żadnego konkretnego typu znacznika, trudno przewidzieć, jaki wywoła efekt na wszystkich stronach witryny złożonych z wielu różnych znaczników HTML. Do formatowania wielu różnych elementów strony guru od projektowania stron posługują się dziedziczeniem — techniką CSS opisaną w następnym rozdziale. Niektórzy projektanci stron internetowych wykorzystują selektor uniwersalny do usuwania wszystkich odstępów znajdujących się wokół elementów bloko- wych. Jak piszę w rozdziale 7., za pomocą własności margin można zdefiniować pustą przestrzeń wokół elementu, a za pomocą własności padding można usta- wić odstęp między obramowaniem elementu i jego treścią. Przeglądarki auto- matycznie dodają różne ilości pustego miejsca wokół i wewnątrz różnych ele- mentów, więc jednym ze sposobów na zapewnienie sobie czystej karty jest zastosowanie następującego stylu: * { padding: 0; margin: 0; } Stylizowanie znaczników zagnieżdżonych Wybór dotyczący tego, czy używać na stronie selektorów znaczników, czy klas, wiąże się z pewnymi kompromisami. Selektory znaczników są szybkie i łatwe w użyciu, ale powodują, że dany znacznik zawsze wygląda tak samo, co nie jest problemem, jeśli chcemy, aby wszystkie nagłówki h2 na stronie wyglą- dały identycznie. Selektory identyfikatorów i klas dają możliwość indywidual- nego stylizowania elementów na stronie, w sposób niezależny od innych, ale tworzenie nowego stylu tylko po to, aby zmienić wygląd tekstu w nagłówku, wymaga bardzo dużo pracy i kodu HTML. To, co rozwiązałoby nasze problemy, to połączenie prostoty selektorów znacznika z precyzją klas i identyfikatorów. W CSS coś takiego nawet jest i nazywa się selektorem potomka. Selektorów potomka używa się do formatowania znaczników „na pęczki” (dokładnie tak samo, jak w przypadku selektorów znacznika), ale tylko wtedy, gdy znajdują się one w określonej części strony. To tak, jakbyśmy mówili: „Hej, wy, wszystkie znaczniki a w pasku nawigacyjnym! Słuchajcie, mam dla was trochę formatowania. Wszystkie pozostałe znaczniki a mogą iść dalej. Nic tu po was”. Selektor potomka pozwala formatować znaczniki w oparciu o ich powiązania z innymi znacznikami. Aby zrozumieć jego działanie, trzeba nieco bardziej zagłę- bić się w sam HTML. Ponadto koncepcje leżące u podłoża selektorów potomka pomogą nam zrozumieć kilka innych selektorów, o których będziemy mówić nieco później. UWAGA Przy pierwszym zetknięciu selektory potomka mogą się wydawać skomplikowane i trudne do zrozumienia, ale należą one do najważniejszych technik CSS umożliwiających stosowanie stylów do elementów. Warto poświęcić trochę czasu, aby je opanować. 68 CSS. NIEOFICJALNY PODRĘCZNIK Poleć książkęKup książkę Drzewo rodzinne HTML Kod HTML tworzący każdą stronę internetową można porównać do drzewa rodzinnego, na którym różne znaczniki HTML reprezentują różnych członków rodziny. Pierwszy znacznik użyty na stronie — html — jest dziadkiem wszyst- kich pozostałych znaczników. Zawiera on zarówno znacznik head , jak i body , dzięki czemu jest ich przodkiem. Również znacznik znajdujący się w innym znaczniku jest jego potomkiem. W poniższym przykładzie znacznik title jest potomkiem znacznika head : STYLIZOWANIE ZNACZNIKÓW ZAGNIEŻDŻONYCH html head title Prosty dokument /title /head body h1 Nag(cid:239)ówek /h1 p Akapit strong wa(cid:285)nego /strong tekstu. /p /body /html Powyższy kod można przedstawić w postaci diagramu, jak na rysunku 3.4, uwi- daczniając powiązania pomiędzy znacznikami na stronie. Pierwszy jest znacz- nik html . Dzieli się on na dwie sekcje reprezentowane przez znaczniki head i body . Zawierają one inne znaczniki, które z kolei mogą zawierać następne. Wiedząc, które znaczniki znajdują się w których, można każdą stronę przedsta- wić w postaci diagramu. RYSUNEK 3.4. Kod HTML składa się ze znaczników, w których zagnieżdżone są inne znaczniki zawierające kolejne znaczniki itd. Powiązania pomiędzy nimi — czyli to, w jaki sposób są one w sobie zagnieżdżone — tworzą coś w rodzaju drzewa rodzinnego Drzewa pomagają zaobserwować, w jaki sposób CSS postrzega powiązania jed- nych elementów na stronie z innymi. Wiele selektorów opisywanych w tym roz- dziale, włącznie z selektorem potomka, wykorzystuje te powiązania. Najważ- niejsze związki to: (cid:120) Przodek — jak pisałem na początku tego rozdziału, znacznik HTML zawie- rający inny znacznik jest jego przodkiem. Na rysunku 3.4 znacznik html jest przodkiem wszystkich pozostałych znaczników, natomiast znacznik body jest przodkiem wszystkich znaczników znajdujących się w nim — h1 , p i strong . (cid:120) Potomek — znacznik znajdujący się w innym znaczniku lub innych znacz- nikach jest potomkiem. Na rysunku 3.4 znacznik body jest potomkiem znacznika html , podczas gdy title jest potomkiem znaczników head i html . ROZDZIAŁ 3. SELEKTORY, CZYLI DO CZEGO ODNOSZĄ SIĘ STYLE 69 Poleć książkęKup książkę STYLIZOWANIE ZNACZNIKÓW ZAGNIEŻDŻONYCH (cid:120) Rodzic — rodzic jest najbliższym przodkiem znacznika. Na rysunku 3.4 rodzicem jest pierwszy znacznik bezpośrednio połączony z innym znaczni- kiem i znajdujący się nad nim. Tak więc znacznik html jest rodzicem tylko znaczników head i body . Znacznik p jest rodzicem znacznika strong . (cid:120) Dziecko — znacznik, który jest bezpośrednio w innym znaczniku. Na rysun- ku 3.4 zarówno znacznik h1 , jak i p są dziećmi znacznika body , ale strong już nie, ponieważ jest on bezpośrednio wewnątrz znacznika p . (cid:120) Brat — znaczniki będące dziećmi jednego elementu są nazywane braćmi. Na diagramie HTML znaczniki braci znajdują się obok siebie i połączone są z tym samym rodzicem. Na rysunku 3.4 znaczniki head i body są braćmi, podobnie jak h1 i p . Na szczęście na tym kończą się w CSS odniesienia rodzinne. Nie musimy się już martwić o ciocie, wujków lub kuzynów (aczkolwiek plotka głosi, że w CSS10 będą nawet teściowe). Tworzenie selektorów potomka Selektory potomka pozwalają wykorzystać drzewo HTML, różnie formatując znaczniki w zależności od tego, czy znajdują się one w określonych innych znacz- nikach lub stylach. Przypuśćmy na przykład, że mamy znacznik h1 i chcemy w nim wyróżnić jedno słowo za pomocą znacznika strong . Problem polega na tym, że większość przeglądarek wyświetla zarówno zawartość znacznika h1 , jak i strong drukiem pogrubionym, przez co odwiedzający stronę nie zobaczą żadnej różnicy pomiędzy słowem wyróżnionym a resztą nagłówka. Zmiana koloru tekstu w znaczniku strong i tym samym wyróżnienie go za pomocą selektora znacznika nie jest dobrym rozwiązaniem, ponieważ spowo- duje zmianę koloru wszystkich znaczników strong na stronie bez względu na to, czy nam się to podoba, czy nie. Selektor potomka pozwala zrobić to, co rzeczywiście chcemy, czyli zmienić kolor znacznika strong tylko wtedy, gdy znajduje się on w znaczniku h1 . Rozwiązanie dylematu ze znacznikami h1 i strong wygląda tak: h1 strong {color: red;} Zawartość wszystkich znaczników strong znajdujących się w znaczniku h1 będzie miała kolor czerwony, a pozostałe znaczniki strong na stronie pozo- staną nietknięte. Ten sam efekt można uzyskać przy użyciu klasy — na przykład .strongHeader — ale wówczas trzeba by było w dokumencie HTML dodać atry- but class= strongHeader do elementów strong znajdujących się w nagłów- kach. Dzięki selektorowi potomka nie trzeba nic zmieniać w kodzie HTML — wszystko robi się w arkuszu stylów! Selektory potomka stylizują elementy, które są zagnieżdżone w innych elemen- tach, posługując się dokładnie taką samą strukturą przodków i potomków jak w drzewie HTML. Selektor potomka tworzy się poprzez łączne użycie selektorów zgodnie z częścią drzewa, którą chcemy formatować. Przodek najwyższego rzędu (najstarszy) powinien znajdować się po lewej stronie, a selektor znacznika, który ma zostać sformatowany na samym końcu, po prawej stronie. Zwróćmy uwagę na przykład na trzy odnośniki (znacznik a ) znajdujące się w liście 70 CSS. NIEOFICJALNY PODRĘCZNIK Poleć książkęKup książkę wypunktowanej i jeden odnośnik w akapicie na rysunku 3.5. Aby odnośniki w liście sformatować inaczej niż pozostałe na stronie, można utworzyć taki selektor potomka: STYLIZOWANIE ZNACZNIKÓW ZAGNIEŻDŻONYCH li a {font-family: Arial;} RYSUNEK 3.5. Ten prosty diagram (po prawej) reprezentuje strukturę strony internetowej widocznej po lewej stronie. Każdy znacznik na stronie jest potomkiem znacznika html , ponieważ w nim zawarta jest cała treść strony. Jeden znacznik może być potomkiem wielu innych znaczników. Na przykład pierwszy znacznik a widoczny na tym diagramie jest potomkiem znaczników strong , p , body i html Reguła ta mówi: „Sformatuj wszystkie odnośniki (a) znajdujące się wewnątrz elementu listy (li), stosując krój pisma Arial”. Selektor potomka może składać się z więcej niż dwóch elementów. Wszystkie poniższe przykłady są popraw- nymi selektorami znaczników a znajdujących się w elementach listy na rysunku 3.5: ul li a body li a html li a html body ul li a Powyższe cztery selektory — z których każdy robi to samo — pokazują, że nie trzeba wykorzystywać wszystkich przodków znacznika, który ma być sformato- wany. Na przykład w drugim przykładzie (body li a) element ul nie jest potrzebny. Selektor ten zadziała, jeśli znacznik a będzie potomkiem (niekoniecznie bezpo- średnim) znacznika li (który jest także potomkiem znacznika body). Selektor ten równie dobrze może odnosić się do znacznika a znajdującego się wewnątrz znacznika em , który jest w znaczniku strong będącym potomkiem znacznika li itd. Ogólnie rzecz biorąc, selektory potomków powinny być jak najkrótsze. Jako że wszystkie elementy znajdują się w elementach html i body , nie ma potrze- by dodawać tych składników do selektora. UWAGA Liczba indywidualnych selektorów w selektorze potomka ma znaczenie dla interakcji danego selektora z innymi kolidującymi z nim selektorami. Jest to związane z tzw. precyzją selektorów, o której piszę w rozdziale 5. Nie ma także ograniczenia tylko do selektorów znaczników. Można tworzyć skomplikowane selektory potomka przy użyciu różnych typów selektorów. ROZDZIAŁ 3. SELEKTORY, CZYLI DO CZEGO ODNOSZĄ SIĘ STYLE 71 Poleć książkęKup książkę PSEUDOKLASY I PSEUDOELEMENTY Przypuśćmy na przykład, że chcemy, aby we wstępie (który oznaczony został klasą intro) odnośniki miały kolor żółty. Do tego celu służy poniższy selektor: .intro a {color: yellow;} Szybkie tłumaczenie: „Zastosuj ten styl do wszystkich odnośników (a), które są potomkami innego znacznika należącego do klasy intro”. Tworzenie modułów Selektory potomka są często używane do formatowania modułów kodu, czyli zbiorów elementów HTML pełniących określoną rolę na stronie. Powiedzmy na przykład, że mamy na stronie element div , w którym prezentowane są najśwież- sze informacje dotyczące działalności firmy. Kod ten mógłby wyglądać tak: div h2 Nasza firma jest wspania(cid:239)a! /h2 p Wi(cid:218)cej informacji o tym, dlaczego nasza firma jest taka (cid:180)znakomita /p h2 Kolejna wiadomo(cid:258)(cid:202) /h2 p Informacje o nowej wiadomo(cid:258)ci… /p h2 …itd… /h2 p …itd… /p /div Jeśli powyższemu elementowi div przypiszemy klasę — div class= news — to będziemy mogli pisać selektory potomka odnoszące się tylko do elemen- tów wewnątrz tej sekcji wiadomości, na przykład: .news h2 { color: red; } .news p { color: blue; } Teraz elementy h2 znajdujące się w sekcji wiadomości będą czerwone, a akapi- ty — niebieskie. Można nawet — i często się to robi — tworzyć selektory potomka składające się z kilku selektorów klasy. Wyobraź sobie na przykład, że tworzysz stronę internetową zawierającą wykaz adresów członków jakiejś organizacji. Każdy kontakt możesz umieścić w osobnym elemencie div , a następnie odpo- wiednio sformatować znajdujące się w nim inne elementy: div class= contact p class= name Jan Kowalski /p p class= phone 555-555-1234 /p p class= address Klonowa 1234 /p /div Następnie za pomocą selektorów potomka możesz sformatować tylko wybrane elementy kontaktu: .contact .name { font-weight: bold; } .contact .phone { color: blue ;} .contact .address { color: red; } i pseudoelementy Pseudoklasy Pseudoklasy i pseudoelementy Czasami trzeba dobrać się do takich części strony, które nie są oznaczone żadnymi znacznikami, ale mimo wszystko łatwo je zlokalizować, jak na przykład pierw- szy wiersz akapitu albo odnośnik w chwili, gdy umieszczono nad nim kursor. Do zabawy z tymi elementami w CSS służą pseudoklasy i pseudoelementy. 72 CSS. NIEOFICJALNY PODRĘCZNIK Poleć książkęKup książkę UWAGA W niektórych arkuszach stylów można znaleźć kod podobny do poniższego: p.intro PSEUDOKLASY I PSEUDOELEMENTY Wygląda on podobnie do selektora potomka, ponieważ zawiera nazwę elementu HTML i klasę — ale nim nie jest. Między nazwą p i klasą .intro nie ma odstępu, co oznacza, że ten styl dotyczy tylko elementów p przypisanych do klasy intro ( p class= intro ). Dodanie spacji spowoduje zmianę działania tego selektora: p .intro { color: yellow; } Ta pozornie drobna zmiana powoduje, że styl zostanie zastosowany do wszystkich elementów należących do klasy intro i znajdujących się w elemencie p . Innymi słowy, ten selektor nie wybiera akapitu, tylko element znajdujący się w akapicie. Ogólnie lepiej jest opuszczać nazwę elementu HTML (tzn. pisać .intro zamiast p.intro), ponieważ dzięki temu style są bardziej elastyczne. Style odnośników Istnieją cztery pseudoklasy, które pozwalają formatować odnośniki będące w jed- nym z czterech stanów wywoływanych przez odwiedzającego. Sprawdzają one, kiedy odnośnik jest w jednym z czterech poniższych stanów: (cid:120) a:link — wybiera wszystkie jeszcze nieodwiedzone odnośniki, jeśli nie znajduje się nad nimi kursor i nie są właśnie klikane. Ten styl odpowiada za zwykły, nieodwiedzony odnośnik. (cid:120) a:visited — odnośnik, który był już wcześniej kliknięty, a informacja ta znajduje się w historii przeglądarki. Odnośnikowi tego typu można nadać inny styl niż zwykłym odnośnikom, mówiąc w ten sposób odwiedzającemu: „Hej, tutaj już byłeś” (w rozdziale 9., w ramce „Ograniczanie wolności” znajduje się opis ograniczeń zastosowania tego selektora). (cid:120) a:hover — pozwala na zmianę wyglądu odnośnika w momencie najecha- nia na niego myszą. Efekty najechania myszą na odnośnik nie są tworzone tylko dla zabawy — mogą one także dostarczać przydatnych informacji dla przycisków na pasku nawigacyjnym. Pseudoklasy :hover można używać także z innymi elementami niż odno- śniki. Za jej pomocą można przykładowo wyróżnić tekst w znaczniku p albo div , kiedy odwiedzający najedzie na niego myszą. W takim przy- padku zamiast selektora a:hover (który służy do formatowania łączy) możesz użyć selektora p:hover. Jeśli chcesz, aby efekt dotyczył tylko elementów należących do wybranej klasy, możesz tę klasę dodać przed pseudoklasą, na przykład: .highlight:hover. (cid:120) a:active — pozwala określić wygląd odnośnika w momencie kliknięcia go. Innymi słowy, odpowiada za krótką chwilę od momentu wciśnięcia przy- cisku myszy do jego zwolnienia. Rozdział 9. zawiera opis sposobu projektowania wyglądu odnośników przy użyciu omówionych pseudoklas w taki sposób, aby ułatwić użytkownikom nawi- gację po stronie. ROZDZIAŁ 3. SELEKTORY, CZYLI DO CZEGO ODNOSZĄ SIĘ STYLE 73 Poleć książkęKup książkę PSEUDOKLASY I PSEUDOELEMENTY UWAGA Bez selektorów opisanych w następnych podrozdziałach można spokojnie sobie poradzić. Wielu projektantów nigdy ich nie używa. Opisane dotychczas selektory — znacznika, klasy, identyfikatora, potomka, grupowy itd. — pozwalają na tworzenie pięknych, funkcjonalnych i łatwych w utrzymaniu stron. Jeśli jesteś gotowy rozpocząć prawdziwą zabawę, czyli projektowanie stron, to możesz pominąć kurs z dalszej części rozdziału. Można zawsze do niego wrócić w jakiś zimny deszczowy dzień spędzany przed kominkiem. Stylizowanie fragmentów akapitu Cechy typograficzne, dzięki którym książki i czasopisma wyglądają ładnie i ele- gancko, nie istniały w początkowej fazie rozwoju sieci (bo kiedy niby naukowcy martwili się o to, aby coś wyglądało ładnie?). W CSS dostępne są dwa pseudo- elementy :first-letter i :first-line, które nadają stronom internetowym fine- zji znanej od wieków w druku. Pseudoelement :first-letter umożliwia kontrolę wyglądu pierwszej litery aka- pitu, która wyróżnia się na tle reszty tekstu większym lub grubszym pismem, jak na przykład na początku rozdziału. Nadanie odmiennego koloru pierwszej linii tekstu w akapicie (:first-line) przy- ciąga wzrok i daje wrażenie świeżości (jeśli Cię to zaintrygowało, to rozdział 6. jest w całości poświęcony formatowaniu tekstu i zawiera także opis tych dwóch selektorów). UWAGA dwukropkiem: W CSS3 zmieniono składnię pseudoelementów. W CSS 2.1 poprzedzało się je jednym :first-letter Natomiast w CSS3 należy używać dwóch dwukropków, aby odróżnić pseudoelementy od pseudoklas, na przykład :hover. W związku z tym teraz zamiast :first-letter i :first-line należy pisać ::first- (cid:180)letter i ::first-line. Na szczęście przeglądarki nadal obsługują także starą wersję zapisu pseudo- elementów. To bardzo dobra wiadomość, szczególnie jeśli weźmie się pod uwagę fakt, że Internet Explorer 8 nie rozpoznaje składni z dwoma dwukropkami. Dlatego też na razie lepiej pozostać przy składni z jednym dwukropkiem. Więcej pseudoklas i pseudoelementów W specyfikacji CSS można znaleźć wiele innych ciekawych i bardzo przydatnych pseudoklas i pseudoelementów. Selektory te są bardzo dobrze obsługiwane przez wszystkie nowsze przeglądarki. PSEUDOKLASA :FOCUS Pseudoklasa :focus działa podobnie jak :hover. Podczas gdy :hover ma zasto- sowanie, gdy użytkownik najedzie myszą na odnośnik, :focus reaguje na zda- rzenie, podczas którego użytkownik zrobi coś, co wskazuje na jego zaintere- sowanie danym elementem, z reguły jest to kliknięcie lub zaznaczenie za pomocą klawisza Tab. To kliknięcie jest jedyną wskazówką dla projektanta doty- czącą tego, na czym dany użytkownik skupił swoją uwagę. Selektor :focus przydaje się głównie do prezentowania różnych informacji użyt- kownikowi, na przykład zmiana koloru tła może wskazywać, gdzie należy wpro- 74 CSS. NIEOFICJALNY PODRĘCZNIK Poleć książkęKup książkę wadzić tekst (selektor ten jest często stosowany do pojedynczych pól tekstowych, pól haseł i ramek z tekstem textarea ). Poniższy styl zmienia na jasnożółty kolor każdego pola tekstowego, w którym kliknie użytkownik lub które zostanie zaznaczone klawiszem Tab: PSEUDOKLASY I PSEUDOELEMENTY input:focus {background-color: #FFFFCC;} Selektor :focus ma zastosowanie tylko wtedy, gdy na danym elemencie jest skoncentrowana uwaga odwiedzającego. Jeśli kliknie on w innym polu teksto- wym lub w ogóle gdzieś indziej na stronie, to punkt koncentracji zostanie prze- niesiony z tego pola wraz z właściwościami CSS. WSKAZÓWKA przeglądarki jest strona www.caniuse.com. Dobrym źródłem informacji na temat poziomu obsługi selektorów przez różne PSEUDOELEMENT :BEFORE Pseudoelement :before potrafi zrobić coś, czego nie umie żaden inny selektor. Pozwala dodać treść przed dowolnym wybranym elementem. Załóżmy na przy- kład, że przed niektórymi akapitami chcemy umieścić ramkę „GORĄCA WSKA- ZÓWKA” podobną do „PRZYSPIESZAMY” i „PORADNIK INŻYNIERA” z tej książki. Zamiast wpisywać ten tekst na stronach HTML, można wyręczyć się pseudoele- mentem :before. Pozwala to nie tylko oszczędzić na pisaniu kodu, lecz także, jeśli zdecydujemy się zmienić nazwę z „GORĄCA WSKAZÓWKA” na „TO TRZEBA WIEDZIEĆ”, sprawić, że zmiany na wszystkich stronach zostaną wprowadzone dzięki tylko jednej małej zmianie w arkuszu stylów. Wadą tej metody jest to, że wstawiony w ten sposób tekst nie
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

CSS. Nieoficjalny podręcznik. Wydanie IV
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ą: