Ćwiczenie 10 - Selektory Wprowadzenie: W tym ćwiczeniu uwaga skupiona będzie na selektorach, czyli tych elementach w kodzie źródłowym dokumentu HTML, którym będą przypisywane atrybuty formatowania, zmieniające ich wygląd. Selektory wchodzą w skład reguł CSS. Reguły CSS mają specyficzną budowę. Składają się z trzech głównych elementów, a ich format jest następujący: selektor {właściwość: wartość;} Z selektorami ściśle wiąŝe się pojęcie drzewa dokumentu i dziedziczenia stylów. Przykładowy dokument źródłowy i drzewo dokumentu: Dokument źródłowy i drzewo dokumentu Z drzewem dokumentu natomiast wiąŝe się kilka innych waŝnych pojęć wykorzystywanych równieŝ w selektorach:
1. drzewo dokumentu (document tree) - hierarchiczny układ elementów HTML zakodowanych w dokumencie; kaŝdy element ma dokładnie jednego rodzica, oprócz elementu najwyŝszego w hierarchii 2. dziecko (child) - element będący o jeden szczebel niŝej w drzewie w stosunku do danego elementu 3. potomek (descendant) - element będący o jeden lub więcej szczebli niŝej w drzewie w stosunku do danego elementu 4. rodzic (parent) - element o jeden szczebel wyŝej w drzewie w stosunku do danego elementu 5. przodek (ancestor) - element będący o jeden lub więcej szczebli wyŝej w drzewie w stosunku do danego elementu 6. brat (sibling) - element mający tego samego rodzica co inny element; jeśli znajduje się obok niego, to jest to brat przylegający (adjacent sibling) W przykładowym dokumencie wyŝej: 1. element table jest dzieckiem elementu body 2. element table jest potomkiem elementu html oraz body 3. element table jest rodzicem elementu tr 4. element table jest przodkiem dwóch elementów td oraz elementu tr 5. element table jest bratem elementów h1 oraz p 6. elementy h1 oraz p są braćmi poprzedzającymi elementu table 7. element table jest bratem następującym elementów h1 oraz p 8. element table jest elementem poprzedzającym elementu tr oraz td 9. element table jest elementem następującym elementu body oraz html Oznacza to, Ŝe elementy, które leŝą niŝej w hierarchii (jeśli nie zostanie zaznaczone inaczej) dziedziczą atrybuty formatowania, które zostały nadane ich przodkom. Istnieje wiele rodzajów selektorów, niektóre z nich zostaną tu omówione: Selektor typu 1. selektor {właściwość: wartość;} Selektor typu dotyczy nazw określonego elementu w języku dokumentu. Obejmuje wszystkie elementy o tej nazwie - selektor to konkretny znacznik. h3 {color: #008000;}
Wobec tego wszystkie wystąpienia znacznika <h3>...</h3> w dokumencie HTML będą skutkowały tym, Ŝe tekst zawarty w nich wyświetlony będzie w kolorze #008000; (green). Selektor uniwersalny 1. * {właściwość: wartość;} Selektor uniwersalny dotyczy wszystkich elementów strony. MoŜna za pomocą tego selektora nadać to samo formatowanie kaŝdemu elementowi na całej stronie, niezaleŝnie od jego typu (p, h1, li itd.). Selektor potomka 1. przodek_1 przodek_2... potomek {właściwość: wartość;} Wyrazy przodek_1, przodek_2,... a takŝe potomek to selektory typu, lecz w ustalonej hierarchii, zgodnie z drzewem dokumentu. Selektor potomka dotyczy atrybutów elementów umiejscowionych niŝej w drzewie dokumentu. Dzięki temu selektorowi moŝna formatować tylko te elementy, które są potomne w stosunku do innych elementów. Potomek moŝe znajdować się kilka stopni niŝej w stosunku do swego przodka. 1. p b {color: #008000;} JeŜeli w akapicie znajdzie się znacznik <b>...</b>, to zawarty w nim tekst będzie pogrubiony i w kolorze #008000; (green): To jest tekst w akapicie, a tutaj pogrubiony i w kolorze #008000; (green). Tutaj jest dalszy ciąg akapitu. 1. p i b {color: #008000;} Formatowanie będzie wyglądało następująco:
To jest ponownie tekst w akapicie. Tutaj jest pochylony, a tutaj pochylony, pogrubiony i w kolorze #008000; (green). Tutaj jest dalszy ciąg akapitu - odtąd pogrubiony - poza znacznikami pochylenia. I tu ponownie zwykły akapit. Selektor dziecka 1. rodzic > dziecko {właściwość: wartość;} Wyrazy rodzic oraz dziecko są selektorami typu, lecz w ustalonej hierarchii, zgodnie z drzewem dokumentu. Dziecko znajduje się bezpośrednio poniŝej rodzica. Dzięki temu selektorowi moŝna formatować tylko te elementy, które są potomne tylko o jeden stopień w stosunku do innych elementów. 1. p > b {color: #008000;} JeŜeli w akapicie znajdzie się znacznik <b>...</b>, to zawarty w nim tekst będzie pogrubiony i w kolorze #008000; (green): To jest tekst w akapicie, a tutaj pogrubiony i w kolorze #008000; (green). Tutaj jest dalszy ciąg akapitu. A tutaj tekst jest w znacznikach pochylenia i pogrubienia i nie powinien być koloru #008000; (green). Niestety, Internet Explorer nie interpretuje tego selektora... Selektor braci 1. brat_1 + brat_2 {właściwość: wartość;} Wyrazy brat_1 oraz brat_2 są selektorami typu, lecz w ustalonej hierarchii, zgodnie z drzewem dokumentu. Oba elementy znajdują się na tym samym poziomie. Dzięki temu selektorowi moŝna formatować tylko te elementy, które sąsiadują ze sobą i nie zawierają się w sobie. Formatowany jest drugi element.
1. i + b {color: #008000;} Jeśli wewnątrz tego samego znacznika (rodzica), będą znajdowały się po sobie znaczniki i oraz b, to ten drugi uzyska określone atrybuty: To jest tekst w akapicie, tutaj jest pochylony. Tutaj jest dalszy ciąg akapitu - bez formatowania. A tutaj jest tekst pogrubiony i jest koloru #008000; (green). Niestety, Internet Explorer nie interpretuje tego selektora... Klasy selektorów 1. selektor.klasa {właściwość: wartość;} Wyraz selektor ma zastosowanie do wszystkich elementów. Wyraz klasa to nazwa przydzielona znacznikowi w dokumencie HTML za pomocą atrybutu class. Składnia znacznika: 1. <selektor class="klasa">...</selektor> Jako klasa naleŝy podać dowolny pojedynczy wyraz, który nie moŝe zawierać znaków: spacji, kropki, przecinka, dwukropka, pytajnika, nawiasów, znaku równości, plusa itp. MoŜe natomiast zawierać litery (A-Z, a-z), cyfry (0-9), myślniki ("-") i podkreślniki ("_"). Lepiej nie uŝywać polskich liter. Nie moŝe się on równieŝ rozpoczynać cyfrą ani myślnikiem. Klasy selektorów stosuje się, by wyodrębnić określone elementy w dokumencie, które mają być w odpowiedni sposób sformatowane. Tworzy się w ten sposób grupę elementów, nadając im odrębną nazwę (przydzielając klasę). Elementów moŝe być dowolna ilość.
Dzięki temu wybrane znaczniki uzyskają poŝądane formatowanie. Na przykład na kaŝdej podstronie tytułowe nagłówki w znacznikach <h1>...</h1> mają być w pewien sposób sformatowane. Nadaje się kaŝdemu z nich tę samą klasę, którą następnie wywołuje się w arkuszu stylów i nagłówki we właściwy sposób są wyświetlane. Inne nagłówki <h1>...</h1> nie otrzymują tej klasy i nie są tak sformatowane. 1. p.klasa_cw_11 {color: #008000;} To jeŝeli w dowolnym miejscu pliku HTML umieszczony zostanie zapis: 1. <p class="klasa_cw_11">...</p> to akapit będzie w ten sposób wyświetlony: To jest akapit z klasą. A ten juŝ w sposób zwykły, bo nie jest objęty tą klasą. Istnieje równieŝ moŝliwość podania selektora uniwersalnego. Dzięki temu moŝna przypisać własności klasy do wszystkich elementów, którym zostanie ona nadana, bez względu na typ znacznika. 1. *.klasa_uniwersalna {właściwość: wartość;} Gwiazdkę (*) w regule stylu moŝna pominąć. 1..klasa_uniwersalna {właściwość: wartość;} 1..klasa_uniwersalna_cw_11 {color: #008000;} To jeŝeli w dokumencie HTML pojawi się selektor z nadaną taką klasą uniwersalną, to treść w nim zawarta uzyska odpowiednie formatowanie: To jest akapit z przypisaną uniwersalną klasą. A tu jest pogrubienie z nadaną uniwersalną klasą.
Selektor identyfikatora 1. selektor#identyfikator {właściwość: wartość;} Wyraz selektor ma zastosowanie do wszystkich elementów. Wyraz identyfikator to nazwa przydzielona znacznikowi w dokumencie HTML za pomocą atrybutu id. Składnia znacznika: 1. <selektor id="identyfikator">...</selektor> Jako identyfikator naleŝy podać dowolny pojedynczy wyraz, który nie moŝe zawierać znaków: spacji, kropki, przecinka, dwukropka, pytajnika, nawiasów, znaku równości, plusa itp. MoŜe natomiast zawierać litery (A-Z, a-z), cyfry (0-9), myślniki ("-") i podkreślniki ("_"). Lepiej nie uŝywać polskich liter. Nie moŝe się on równieŝ rozpoczynać cyfrą ani myślnikiem. Dzięki selektorowi identyfikatora moŝna wybrać do formatowania jeden i tylko jeden element z całego dokumentu, który ma być w określony sposób sformatowany. 1. p#identyfikator_11_1 {color: #008000;} A w dokumencie HTML pojawia się akapit z podanym identyfikatorem: 1. <p id="identyfikator_11_1">...</p> to dzięki temu, ten akapit i tylko on, uzyska odpowiednie formatowanie: To jest akapit z identyfikatorem. Podobnie, jak w klasach selektorów istnieje równieŝ moŝliwość podania selektora uniwersalnego. Dzięki temu moŝna przypisać własności identyfikatora do wszystkich elementów, którym zostanie ona nadana, bez względu na typ znacznika. 1. *#identyfikator {właściwość: wartość;}
Gwiazdkę (*) w regule stylu moŝna pominąć. 1. #identyfikator {właściwość: wartość;} Selektory pseudoklas - odsyłacz podstawowy 1. a:link {właściwość: wartość;} Selektory pseudoklas nie tyle dotyczą nazw elementów, ale ich stanu w chwili akcji podjętej przez czytającego dokument. Dotyczy to odsyłaczy i ich czterech moŝliwych zachowań: 1. jeszcze nieodwiedzone 2. odwiedzone 3. najechanie myszką 4. kliknięcie myszką Selektor pseudoklasy jest nazwą połączoną z innym selektorem za pomocą dwukropka (nie moŝe być spacji po dwukropku). Litera a na początku deklaracji, jest selektorem odsyłacza. Dzięki poleceniu :link moŝna odpowiednio sformatować wszystkie odsyłacze, które nie były jeszcze odwiedzone. Ta pseudoklasa :link dotyczy tylko odsyłaczy, moŝna więc opuścić selektor elementu a. 1. :link {właściwość: wartość;} 1. a:link {background-color: #ffff00;} Efekt powinien być następujący: jest link do zasobów internetu. Jeśli strona nie była jeszcze odwiedzana, łącze powinno być umieszczone na tle koloru #ffff00; (yellow).
Selektory pseudoklas - odsyłacz odwiedzony 1. a:visited {właściwość: wartość;} Selektory pseudoklas nie tyle dotyczą nazw elementów, ale ich stanu w chwili akcji podjętej przez czytającego dokument. Dotyczy to odsyłaczy i ich czterech moŝliwych zachowań: 1. jeszcze nieodwiedzone 2. odwiedzone 3. najechanie myszką 4. kliknięcie myszką Selektor pseudoklasy jest nazwą połączoną z innym selektorem za pomocą dwukropka (nie moŝe być spacji po dwukropku). Litera a na początku deklaracji, jest selektorem odsyłacza. Dzięki poleceniu :visited moŝna odpowiednio sformatować wszystkie odsyłacze, które juŝ były odwiedzone. Ta pseudoklasa :visited dotyczy tylko odsyłaczy, moŝna więc opuścić selektor elementu a. 1. :visited {właściwość: wartość;} 1. a:visited {background-color: #00ffff;} Efekt powinien być następujący: jest link do zasobów internetu. Jeśli strona była juŝ odwiedzona, łącze powinno być umieszczone na tle koloru aqua.
Selektory pseudoklas - odsyłacz wskazany 1. a:hover {właściwość: wartość;} Selektory pseudoklas nie tyle dotyczą nazw elementów, ale ich stanu w chwili akcji podjętej przez czytającego dokument. Dotyczy to odsyłaczy i ich czterech moŝliwych zachowań: 1. jeszcze nieodwiedzone 2. odwiedzone 3. najechanie myszką 4. kliknięcie myszką Selektor pseudoklasy jest nazwą połączoną z innym selektorem za pomocą dwukropka (nie moŝe być spacji po dwukropku). Litera a na początku deklaracji, jest selektorem odsyłacza. Dzięki poleceniu :hover moŝna odpowiednio sformatować wszystkie odsyłacze, nad którymi znajduje się wskaźnik myszki. 1. a:hover {font-size: large;} Efekt powinien być następujący: est link do zasobów internetu. Jeśli najedzie się kursorem nad łącze, to czcionka powinna się powiększyć. Selektory pseudoklas - odsyłacz aktywny 1. a:active {właściwość: wartość;} Selektory pseudoklas nie tyle dotyczą nazw elementów, ale ich stanu w chwili akcji podjętej przez czytającego dokument. Dotyczy to odsyłaczy i ich czterech moŝliwych zachowań: 1. jeszcze nieodwiedzone 2. odwiedzone 3. najechanie myszką 4. kliknięcie myszką
Selektor pseudoklasy jest nazwą połączoną z innym selektorem za pomocą dwukropka (nie moŝe być spacji po dwukropku). Litera a na początku deklaracji, jest selektorem odsyłacza. Dzięki poleceniu :active moŝna odpowiednio sformatować wszystkie odsyłacze, które są uaktywnione, to znaczy nad odsyłaczem wciśnięty jest i przytrzymany wskaźnik myszki. 1. a:active {background-color: #000000; color: #ffffff;} Efekt powinien być następujący: jest link do zasobów internetu. Jeśli najedzie się kursorem nad łącze, wciśnie i przytrzyma przycisk myszki, to tekst powinien być biały na tle koloru czarnego. AŜeby zachować zasadę kaskadowości, pseudoklasy naleŝy umieszczać w odpowiedniej kolejności: 1. a:link {właściwość: wartość;} 2. a:visited {właściwość: wartość;} 3. a:hover {właściwość: wartość;} 4. a:active {właściwość: wartość;} Te wszystkie cztery pseudoklasy mogą być uŝyte jednocześnie. Na przykład w pliku CSS umieszczone są następujące reguły: 1. a:link {background-color: #ffff00;} 2. a:visited {background-color: #00ffff;} 3. a:hover {font-size: large;} 4. a:active {background-color: #000000; color: #ffffff;} Efektem będzie zgrupowanie tych wszystkich sposobów formatowania łącza: 1. nieodwiedzona strona - tekst będzie na tle koloru #ffff00; (yellow) 2. odwiedzona strona - tekst będzie na tle koloru #00ffff; (aqua) 3. najechanie kursorem nad łącze - czcionka się powiększy 4. łącze aktywne (wciśnięty i przytrzymany przycisk myszy) - tekst będzie koloru #ffffff; (white), na tle koloru #000000; (black)
Łączenie selektorów JeŜeli zachodzi konieczność zastosowania w jednej regule stylu kilku selektorów prostych, to moŝna to zrobić wpisując je jeden po drugim (bez Ŝadnych odstępów) w odpowiedniej kolejności: 1. 1. selektor typu lub selektor uniwersalny 2. 2. selektor identyfikatora, selektor klasy lub selektory pseudoklas Na przykład moŝna tak połączyć selektory: 1. a.jakas_klasa:hover {color: #ffffff;} Oznacza to kaŝdy odsyłacz z klasą o nazwie: jakas_klasa, wskazany myszką. Zadania do wykonania: Jako, Ŝe w tym ćwiczeniu nie było jeszcze mowy o konkretnych właściwościach i ich wartościach, tu zostaną uŝyte jedynie przykładowe, bo celem tego ćwiczenia jest przede wszystkim umiejętność stosowania róŝnego rodzaju selektorów. Właściwości jakie zostaną uŝyte to: 1. color: #rrggbb; - kolor tekstu 2. background-color: #rrggbb; - kolor tła 3. text-align: left, right, center, justify; (do wyboru) - wyrównanie tekstu 4. font-size: xx-small, x-small, smaller, small, medium, large, larger, x-large, xx-large (do wyboru) - wielkość czcionki 5. font-style: normal, italic (do wyboru) - styl czcionki Zadanie polega na wykonaniu formatowania pliku HTML za pomocą zewnętrznego arkusza CSS, z zastosowaniem róŝnych rodzajów selektorów: selektora potomka, klasy selektorów, selektora identyfikatora i selektorów pseudoklas. NaleŜy zacząć od przygotowania folderu, a w nim pliku HTML: selektory.html i pliku CSS: style.css. 1. zawartość pliku HTML: 2. szablon HTML 4.01 Transitional 3. w sekcji <head>...</head>: 4. łącze do arkusza stylów 5. w znaczniku <title>...</title> nazwa pliku 6. w sekcji <body>...</body>:
7. dziewięć zdań w róŝnych nagłówkach 8. kaŝdy nagłówek osobno objęty znacznikiem <div>...</div> 9. w nagłówku h1 zdanie: 1. To jest tytuł pierwszego stopnia 10. w nagłówku h2 zdanie: 2. To jest tytuł drugiego stopnia 11. w nagłówku h3 zdanie: 3. To jest tytuł trzeciego stopnia 12. w nagłówku h4 zdanie: 4. To jest tytuł czwartego stopnia 13. w nagłówku h1 zdanie: 5. To jest tytuł pierwszego stopnia 14. w nagłówku h1 zdanie: 6. To jest tytuł pierwszego stopnia 15. w nagłówku h2 zdanie: 7. To jest tytuł drugiego stopnia 16. w nagłówku h3 zdanie: 8. To jest tytuł trzeciego stopnia 17. w nagłówku h4 zdanie: 9. To jest tytuł czwartego stopnia 18. w kaŝdym zdaniu słowo - liczebnik objąć znacznikiem <i>...</i> 19. listę wyliczeniową numerowaną, zagnieŝdŝoną 20. łącze do zasobów WWW Plik selektory.html po wpisaniu zawartości i bez Ŝadnego formatowania arkuszami stylów wygląda tak:
W kolejnym kroku naleŝy dokonać takich zmian w pliku selektory.html, aŝeby moŝna było za pomocą zewnętrznego arkusza stylów doprowadzić ten plik do takiego sformatowania: Zrobić to naleŝy z zastosowaniem róŝnego rodzaju selektorów. 1. Następujące pary zdań tworzą te same klasy znacznika <div>...</div> i są odpowiednio sformatowane - naleŝy odpowiednio powstawiać klasy w selektorach i właściwie napisać reguły w arkuszu stylów. 1. 1. i 9. - text-align: center; background-color: #c0c0c0; (silver) 2. 2. i 8. - text-align: center; background-color: #ffff99; 3. 3. i 7. - text-align: right; background-color: #800000; (maroon)
4. 4. i 6. - text-align: left; background-color: #ff99ff; 2. Następujące pary zdań tworzą te same klasy w nagłówkach i są odpowiednio sformatowane - naleŝy odpowiednio powstawiać klasy w selektorach i właściwie napisać reguły w arkuszu stylów 1. 1. i 6. - color: #00ff00; (lime) 2. 2. i 7. - color: #00ffff; (aqua) 3. 3. i 8. - color: #808000; (olive) 4. 4. i 9. - color: #0000ff; (blue) 3. Odpowiednie słowa - te same liczebniki - objęte znacznikami <i>...</i> równieŝ tworzą te same klasy i są odpowiednio sformatowane - naleŝy odpowiednio powstawiać klasy w selektorach i właściwie napisać reguły w arkuszu stylów. 1. 1. i 6. - color: #ff0000; (red) 2. 2. i 7. - color: #008000; (green) 3. 3. i 8. - color: #008080; (teal) 4. 4. i 9. - color: #800080; (purple) 4. Natomiast zdanie nr 5. nie na eŝy do Ŝadnej klasy lecz wszystkie jego znaczniki mają utworzone selektory identyfikatorów: <div>...</div>, <h1>...</h1> oraz <i>...</i> i kaŝdy z nich jest odpowiednio sformatowany - naleŝy odpowiednio powstawiać identyfikatory w selektorach i właściwie napisać reguły w arkuszu stylów. 1. background-color: #00ffff; (aqua) - dla <div>...</div> 2. color: #000080; (navy) - dla <h1>...</h1> 3. text-align: center; - dla <h1>...</h1> 4. color: #ffff00; (yellow) - <i>...</i> 5. Na liście wyliczeniowej naleŝy dokonać takiego formatowania, aŝeby tylko jej drugi poziom uzyskał odpowiedni kolor. Uzyska się to, stosując selektor potomka. 1. color: #008000; (green) 6. Ostatnia część ćwiczenia z selektorami dotyczy selektorów pseudoklas. NaleŜy tak sformatować łącze, aŝeby w kaŝdym ze stanów jego aktywności wyświetlały się inne kolory, a po najechaniu kursorem zmieniała się równieŝ wielkość czcionki i jej styl. 1. link - background-color: #000080; (navy) color: #00ffff; (aqua) 2. visited - background-color: #00ffff; (aqua) color: #000080; (navy) 3. hover - background-color: #ff0000; (red) color: #ffff00; (yellow) font-size: x-large; font-style: italic; 4. active - background-color: #000000; (black) color: #ffffff; (white)
Oceniany będzie folder selektory z plikami: selektory.html i style.css. Plik selektory.html powinien być sformatowany zgodnie z instrukcjami, zewnętrznym arkuszem stylu style.css. Wykorzystane powinny być róŝnego rodzaju selektory: selektor potomka, selektory klas, selektory identyfikatorów i selektory pseudoklas. Folder proszę wysłać spakowany zip-em na adres email zatytułowany w następujący sposób: 3Ti_AI_Cw10_Imię_Nazwisko