Po stracie zębów podobno większa swoboda języka

• Joomla
• CSS
• HTML
• Początek
• Start

Początek

Strona Główna

HTML

Wprowadzenie

Ćw. 1 - Wstęp do HTML i XHTML

Ćw. 2 - Body i meta

Ćw. 3 - Tekst

Ćw. 4 - Odsyłacze

Ćw. 5 - Tabele

Ćw. 6 - Multimedia

Ćw. 7 - Ramki

Ćw. 8 - Formularze

Ćw. 9 - Kolory i znaki specjalne

CSS

Wprowadzenie

Ćw. 10 - CSS i wstawianie CSS

Ćw. 11 - Selektory

Ćw. 12 - Czcionki i tekst

Ćw. 13 - Tło i marginesy

Ćw. 14 - Obramowanie i wykazy

Ćw. 15 - Rozmiary i tabele

Ćw. 16 - Pozycjonowanie i kursory

Ćw. 17 - Suwaki i filtry

Ćw. 18 - Menu w CSS

Ćw. 19 - Strona na DIV-ach

Joomla

Wprowadzenie

Ćw. 20 - Instalacja i konfiguracja

Ćw. 21 - Treść, sekcje i kategorie

Ćw. 22 - Tworzenie menu

Ćw. 23 - Komponenty Joomla

Ćw. 24 - Szablony i inne atrakcje

Ćwiczenie 11 - Selektory

Wprowadzenie:

W tym ćwiczeniu uwaga skupiona będzie na selektorach, czyli tych elementach w kodzie źródłowym dokumentu HTML, któym będą przypisywane atrybuty formatowania, zmieniające ich wygląd.

1. zadania do wykonania

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ść;}. Patrz Ćwiczenie 10.

Z selektorami ściśle wiąże się pojęcie drzewa dokumentu i dziedziczenia stylów. Przykładowy dokument źródłowy i drzewo dokumentu:

1. dokument źródłowy i drzewo dokumentu

źródło: www.kurshtml.boo.pl

Istnieje wiele rodzajów selektorów, niektóre z nich zostaną tu omówione:

1. selektor typu
2. selektor uniwersalny
3. selektor potomka
4. selektor dziecka
5. selektor braci
6. klasy selektorów
7. selektor identyfikatora
8. selektory pseudoklas - odsyłacz podstawowy
9. selektory pseudoklas - odsyłacz odwiedzony
10. selektory pseudoklas - odsyłacz wskazany
11. selektory pseudoklas - odsyłacz aktywny

Selektor typu

Składnia reguły:

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.

Na przykład w pliku CSS umieszczona jest reguła:

1. 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).

do góry

Selektor uniwersalny

Składnia reguły:

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.).

do góry

Selektor potomka

Składnia reguły:

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 hierachii, 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.

Na przykład w pliku CSS umieszczona jest reguła:

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):

Na przykład w pliku CSS umieszczona jest reguła:

1. p i b {color: #008000;}

Formatowanie będzie wyglądało następująco:

do góry

Selektor dziecka

Składnia reguły:

1. rodzic > dziecko {właściwość: wartość;}

Wyrazy rodzic oraz dziecko są selektorami typu, lecz w ustalonej hierachii, 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.

Na przykład w pliku CSS umieszczona jest reguła:

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):

Niestety, Internet Explorer nie interpretuje tego selektora...

do góry

Selektor braci

Składnia reguły:

1. brat_1 + brat_2 {właściwość: wartość;}

Wyrazy brat_1 oraz brat_2 są selektorami typu, lecz w ustalonej hierachii, 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.

Na przykład w pliku CSS umieszczona jest reguła:

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:

Niestety, Internet Explorer nie interpretuje tego selektora...

do góry

Klasy selektorów

Składnia reguły:

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>

źródło: www.kurshtml.boo.pl

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.

Na przykład w pliku CSS umieszczona jest reguła:

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:

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.

Składnia reguły:

1. *.klasa_uniwersalna {właściwość: wartość;}

Gwiazdkę (*) w regule stylu można pominąć.

Składnia reguły:

1. .klasa_uniwersalna {właściwość: wartość;}

Na przykład w pliku CSS umieszczona jest reguła:

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:

do góry

Selektor identyfikatora

Składnia reguły:

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>

źródło: www.kurshtml.boo.pl

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.

Na przykład w pliku CSS umieszczona jest reguła:

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:

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.

Składnia reguły:

1. *#identyfikator {właściwość: wartość;}

Gwiazdkę (*) w regule stylu można pominąć.

Składnia reguły:

1. #identyfikator {właściwość: wartość;}

do góry

Selektory pseudoklas - odsyłacz podstawowy

Składnia reguły:

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.

Składnia reguły:

1. :link {właściwość: wartość;}

Na przykład w pliku CSS umieszczona jest reguła:

1. a:link {background-color: #ffff00;}

do góry

Selektory pseudoklas - odsyłacz odwiedzony

Składnia reguły:

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.

Składnia reguły:

1. :visited {właściwość: wartość;}

Na przykład w pliku CSS umieszczona jest reguła:

1. a:visited {background-color: #00ffff;}

do góry

Selektory pseudoklas - odsyłacz wskazany

Składnia reguły:

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.

Na przykład w pliku CSS umieszczona jest reguła:

1. a:hover {font-size: large;}

do góry

Selektory pseudoklas - odsyłacz aktywny

Składnia reguły:

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.

Na przykład w pliku CSS umieszczona jest reguła:

1. a:active {background-color: #000000; color: #ffffff;}

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)

do góry

Łą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ą.

do góry

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

Informacje o kolorach: tutaj

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 - patrz tutaj
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:

Krok 1

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:

Krok 2

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 - patrz tutaj:

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 - patrz tutaj:

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 - patrz tutaj:

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 należ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 - patrz tutaj:

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. Patrz tutaj:

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. O selektorach pseudoklas - patrz tutaj.

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 winny być różnego rodzaju selektory: selektor potomka, selektory klas, selektory identyfikatorów i selektory pseudoklas.

Strona Główna

do góry

Przy przygotowywaniu powyższego ćwiczenia wielką pomocą służył kurs HTML-a - w wersji online: http://www.kurshtml.boo.pl, jak również w wersji offline do pobrania z tej samej strony.

Copyright © 2008   Sławek Rokicki