Formy i układy selektorów

Do tej pory operowaliśmy prostymi selektorami, które były po prostu znacznikami języka HTML. W tym miejscu należy przypomieć, że jeżeli chcemy aby jakieś formatowanie objęło cały dokument, to należy je umieścić w deklaracji stylu obiektu body. Ponownie przypomnij sobie obiektowy model dukumentu. Połącz te wiadomości z faktem, że wiele cech jest dziedziczonych i będzie jasne dlaczego ustalając wartości niektórych cech(tych, które są dziedziczne) dla body ustalasz je tym samym dla obiektów znajdujących się w body.

Operowanie tylko prostymi selektorami obiektów nie jest rozwiązaniem idealnym ponieważ styl zdefiniowany w ten sposób, obowiązuje we wszystkich obiektach danego typu w dokumencie. Co prawda można to zmienić za pomocą stylów lokalnych, ale jest to pracochłonne i niepotrzebnie rozbudowuje kod. CSS rozwiązuje ten problem ponieważ pozwala na definiowanie stylów przyporządkowanych:

grupie obiektów tego samego typu - mówimy wtedy o defincji klasy lub identyfikatora;
dowolnym obiektom - mówimy wtedy o defincji klasy uniwersalnej lub identyfikatora uniwersalnego;

Oddzielnym problemem jest formatowanie odsyłaczy, które CSS rozwiązuje wprowadzając tak zwane pseudoklasy.

Selektor klasy obiektów

Na przykładzie akapitu, zapis w arkuszu CSS powinien być następujący:

p.akapit_1

{ font-size:14px; c

olor:blue;

}

Dla tej klasy akapitów czcionka będzie miała kolor niebieski i rozmiar 14 pikseli. Nazwa klasy - tutaj akapit_1 powinna być pisana małymi literami, zgodnie z zasadami nazewnictwa w programowaniu. Oto jak należy zastosować ten styl w kodzie HTML:

Tekst akapitu

</p>

Selektor klasy uniwersalnej

Nie jest związany z żadnym znacznikiem, klasę uniwersalną, możemy zastosować do każdego obiektu. Kod CSS:

.uniwersalna

{

font-size:14px;

color:blue;

}

Kod HTML:

Tekst akapitu

</p>

Tekst w divie

</div>

Jak widzimy w kodzie CSS, klasa uniwersalna nie jest związana poprzez kropkę z żadnym znacznikiem. Taki zapis oznacza, że w kodzie HTML możemy ją zastosować w każdym znaczniku.

Selektor identyfikatora

Jeżeli w powyższym opisie klas znak kropki zastąpimy znakiem #, to będziemy mówić nie o klasie obiektów tylko o identyfikatorze obiektu, natomiast zamiast klasy uniwersalnej, będziemy mieli uniwersalny identyfikator. Różnica jest jeszcze taka, że w kodzie HTML nie piszemy class="", tylko id="".

Kiedy klasa a kiedy identyfikator?

Kieruj się logiką i optymalizacją kodu, pamiętając że:

identyfikator wskazuje na jeden konkretny obiekt w dokumencie - na stronie każdy identyfikator musi być unikatowy, nie może być dwóch o tej samej nazwie;
w jednym dokumencie można wielokrotnie wykorzystać tą samą klasę;
wydaje się, że mnożenie "id-ków" na siłę ze względu na style, nie ma sensu, ważne jest ich zastosowanie w odniesieniu do JavaScript.

Ćwiczenie 3_1_4_1

Wykonaj stronę pokazujacą selektory klas i identyfiktorów. Do wykonania zadania zastosuj następujący kod HTML:

<body>

<p class="class_1">akapit 1</p>

<p class="class_1">akapit 2</p>

<p class="class_2">akapit 3</p>

<p id="id_1">akapit 4</p>

<p id="id_2">akapit 5</p>

<p class="class_3">akapit 6</p>

<p class="class_4">akapit 7</p>

<p class="class_5">akapit 8</p>

</body>

Kod CSS będzie następujący:

body

{

font-family:Arial,sans-serif;

font-size:18px;

font-weight:bold;

}

p.class_1

{

color:red;

}

class_2

{

color:blue;

}

p#id_1, p#id_2, div#id_3

{

color:green;

}

p.class_3, p.class_4, p.class_5

{

color:lime;

}

p.class_5

{

color:silver;

}

Tak powinna wyglądać wykonana strona:

Klasa akapitów class_1 została wykorzystana w kodzie HTML dwa razy - do sformatowania akapitów 1 i 2. Nie możemy w ten sam sposób wykorzystać identyfikatorów, ponieważ na stronie dany identyfikator może być zastosowany tylko 1 raz. Widać to także na przykładzie identyfikatorów id_1, id_2, id_3 które mają ten sam styl - powinno się w tym przypadku zastosować jedną klasę.
Klasa class_2 jest klasą uniwersalną, zastosowaliśmy ją do akapitu ale także do znacznika div.
Jeżeli kilku klasom lub identyfikatorom chcemy przypisać ten sam styl, to należy wymienić je odzielając przecinkami. W naszym przykładzie mamy tak dla p#id_1, p#id_2, div#id_3 oraz p.class_3, p.class_4, p.class_5. Takie działanie stosuje się, jeżeli poszczególne style mają wiele jednakowych cech. Potem wystarczy ponownie zdefiniować tylko cechy odmienne.
W nawiązaniu do poprzedniego punktu, styl klasy class_5 został ponownie zdefiniowany. Jeżeli wartość jakiejś cechy zostaje zmieniona w ponownej deklaracji, to ostatecznie brana jest wartość ostatnia.
W zastosowanym kodzie CSS font-size:18px; oznacza czcionkę o rozmiarze 18 pikseli, natomiast font-weight:bold; czcionkę pogrubioną. Zwróć uwagę, że wystarczyło te cechy określić w stylu obiektu body.

Formatowanie odsyłaczy - selektory pseudoklas

Dlaczego pseudo? Jak mówi słownik języka polskiego PWN: pseudo - pierwszy człon wyrazów złożonych będących nazwami i określeniami osób, rzeczy lub zjawisk, które nie są tym, co udają lub naśladują. Każdą klasę możemy znaleźć w kodzie HTML - tam gdzie jest wpisany atrybut class="", tam mamy wywołanie klasy. Czy w kodzie HTML znajdziemy miejsce które mówi że np. kursor myszki znajduje się na odsyłaczem? Oczywiście że nie, ponieważ jest to zależne tylko od działania użytkownika. Niemniej odsyłacz zmienia swój wygląd, mimo że kod HTML pozostał niezmieniony. To jak to jest - zmienia się wygląd, a my nie możemy doszukać się klasy, która to powoduje? Aby umożliwić formatowanie takich dynamicznych sytuacji, w CSS wprowadzono pojęcie pseudoklasy. Najbardziej popularne pseudoklasy obsługują odsyłacze:

a:link - odpowiada za wygląd odsyłacza przed odwiedzeniem miejsca które wskazuje odsyłacz;
a:visited - odpowiada za wygląd po odwiedzeniu;
a:hover - odpowiada za wygląd po najechaniu na odsyłacz wskaźnikiem myszki;
a:active - kiedy użytkownik wciśnie i przytrzyma przycisk myszki na odsyłaczu - aktywacja będzie miała miejsce do momentu zwolnienia przycisku myszki.

Pokazane pseudoklasy mają zastosowanie również do innych elementów, np div:active.

Ćwiczenie 3_1_4_2a

Wykonaj stronę pokazujacą formatowanie odsyłacza. Do wykonania zadania zastosuj następujący kod HTML:

<body>

<a href="http://validator.w3.org/" target="_blank">Walidator W3C</a>

</body>

Oraz kod CSS w zewnętrznym arkuszu stylów:

{

text-decoration:none;

font-family:Arial,sans-serif;

font-size: 16px; font-weight:bold;

}

a:link

{

color:#31508f;

}

a:visited

{

color:maroon;

}

a:hover

{

color:red;

}

a:active

{

color:green;

}

Tak powinna wyglądać wykonana strona:

text-decoration:none; powoduje, że usuniemy domyślne podkreślenie linku.
Przetestuj działanie odsyłacza.
Zwróć uwagę na prostotę kodu HTML - jest to możliwe, dzięki przeniesieniu formatowania do zewnętrznego arkusza stylów.

Ćwiczenie 3_1_4_2b

Wykonaj stronę pokazujacą przycisk, będący osyłaczem do strony http://www.staszickutno.pl. Do wykonania zadania zastosuj następujący kod HTML:

<!doctype html>

<html>

<head>

<title>Przycisk</title>

</head>

<body>

Strona naszej szkoły

</div>

</a>

</body>

</html>

Arkusz stylów:

.przycisk

{

display:block;

height:30px;

width:300px;

background-color:green;

line-height:30px;

text-align:center;

font-family:Arial;

font-size:17px;

color:white;

font-weight:bold;

border:3px solid silver;

letter-spacing:4px;

cursor:default;

}

.przycisk:active

{

border:1px solid silver;

}

a.a1

{

text-decoration:none;

}

cursor:default; - wskaźnik myszki podstawowy,
efekt wciskania uzyskujemy zmieniając szerokość obramowania border

Dziedziczenie stylów

Z drzewem dokumentu związana jest dziedziczenie stylów. Elementy leżące niżej w hierarchii - potomkowie, jeśli nie zaznaczymy inaczej, dziedziczą cechy swoich przodków. W tych "koligacjach" stosuje się między innymi także pojęcie rodzica i dziecka.

Selektor potomka pokazuje miejsce obiektu w strukturze dziedziczenia, w stylach CSS zapis jest następujący:

przodek1przodek2 ... potomek

{

cecha:wartość;

...

}

Przodkowie są oddzieleni spacjami. Nie można w tym przypadku pomylić spacji z przecinkiem (jeżeli nie pamiętasz, znajdź na tej stronie miejsce, gdzie mówi się o użyciu przecinka).

Selektor dziecka pokazuje zależność rodzic > dziecko:

rodzic > dziecko

{

cecha:wartość;

...

}

Selektor potomka i selektor dziecka - ćwiczenie 3_1_4_3

Wykonaj stronę pokazujacą dziedziczenie stylów. Do wykonania zadania zastosuj następujący kod HTML:

<body>

<div>

<p>

Kolor niebieski - <i>p</i> jest dzieckiem <i>div</i>

</p>

<p>

<span>Kolor czerwony - <i>span</i> jet potomkiem <i>div</i></span>

</p>

</div>

<p>

Kolor domyślny - <i>p</i> jest poza zdefiniowaną strukturą dziedziczenia

</p>

<p>

<span>Kolor domyślny - <i>span</i> jet poza zdefiniowaną strukturą dziedziczenia

</p>

</body>

Kod CSS umieszczony w zewnętrznym arkuszu stylów:

div > p

{

color:blue;

}

div span

{

color:red;

}

Tak powinna wyglądać wykonana strona:

Wcięcia selektorów potomnych w kodzie CSS - ćwiczenie 3_1_4_4

Wykonaj stronę pokazującą wcięcia selektorów potomnych w kodzie CSS. Do wykonania zadania zastosuj następujący kod HTML:

<body>

</div>

</body>

Kod CSS, w zewnętrznym arkuszu stylów:

.div_2, .div_3, .div_4

{

position:relative;

left:50px;

top:50px;

}

.div_1

{

width:400px;

height:400px;

background-color:black;

}

.div_1 > .div_2

{

width:300px;

height:300px;

background-color:yellow;

}

.div_2 > .div_3

{

width:200px;

height:200px;

background-color:red;

}

.div_3 > .div_4

{

width:100px;

height:100px;

background-color:white;

}

Przez dodanie wcięć selektorów potomnych, nie tylko można łatwo zidentyfikować dany styl, ale również można zobaczyć hierarchię drzewa dokumentu.

Tak powinna wyglądać wykonana strona: