Lekcja 1.5. - Kaskadowe Arkusze Stylu - Identyfikator ID, warstwy i pozycjonowanie


Identyfikator ID to niezwykle wygodne narzędzie do celów stylu. Identyfikuje on dowolny element HTML, pozwala nadać mu określony styl w jeden z trzech wymienionych sposobów oraz zapewnia łatwość manipulacji tym elementem.

Przykład zastosowania identyfikatora ID poznaliśmy juz wtrakcie lekcji 1.2., podczas której omawialiśmy style wpisane.
W istocie atrybut ID wpisywany jest w konkretny znacznik określający dany element HTML. Styl odnoszacy się do tego elementu może być określony w dowolny sposób. Może być wpisany w znacznik,lub może znajdować się za identyfikatorem w arkuszu stylu w sekcji HEAD lub arkuszu zewnętrznym.

Identyfikatory ID najczęściej używamy w znacznikach DIV gdyż funkcjonują one dobrze we wszystkich przeglądarkach pozwalając na pozycjonowanie utworzonych przez DIV-y warstw. Przegladarka Internet Explorer i niektóre inne pozwalją także na łatwe pozycjonowanie innych elementów. Efekty takiego pozycjonowania poznaliśmy w przykładzie z obrazkami w lekcji 1.2


Utworzymy teraz kilka DIV-ów
i nadamy im identyfikatory.


<div id=warstwa1 style="position:absolute; top:280; left:200; width:150; height:30; color:blue;font-size:12pt; font-weight:bold; background:yellow; padding:3; text-align:center; border-style:solid; border-color:brown; border-width:1; z-index:-1">To jest warstwa 1</div>

To jest warstwa 1

<div id=warstwa2 style="position:absolute; top:305; left:310; width:150; height:30; color:black;font-size:12pt; font-weight:bold; background:aqua; padding:3; text-align:center; border-style:solid; border-color:navy; border-width:1; z-index:1">To jest warstwa 2</div>

To jest warstwa 2

<div id=warstwa3>To jest warstwa 3</div>
jej styl został opisany w sekcji HEAD w następujący sposób:

#warstwa3 {position:absolute; top:330; left:170; width:150; height:30; color:green;font-size:12pt; font-weight:bold; background:white; padding:3; text-align:center; border-style:solid; border-color:olive; border-width:1; z-index:2}


To jest warstwa 3
Wpisywanie styli w sekcji hed jest wygodniejsze, ponieważ mamy je wszystkie w jednym miejscu i łatwo jest ustawiać wzajemne położenie warstw. Efekt nakładania i wzajemnego przesłaniania się warstw został osiągnięty odpowiednio przez pozycjonowanie warstw na ekranie za pomocą wpółrzędnych left i top oraz odpowiednie ustawienie współrzędnej Z.

Oś współrzędnych Z jest prostopadła do ekranu i posiada wartość równą zero dla elementów wprowadzonych elementami HTML bez dodatkowego pozycjonowania. Jeśli chcemy aby element przesłaniał inny element, jego współrzędna powinna mieć wartość liczbową większą od współrzędnej Z elementu przesłanianego.

Element może być wyświetlany jako znajdujący się poza elementami bez pozycjonowania przez nadanie mu ujemnej wartości współrzędnej Z. Reasumując, elementy które wydają się być bliżej nas mają więszą wartość współrzędnej to znaczy oś współrzędnej z posiada zwrot w kierunku do nas.

Atrybutem do nadawania wartości współrzędnej z jest z-index Wartości liczbowe z-index nie mają większego znaczenia, ważne są wzajemne relacje wiekszości lub mniejszości, Należy jednak pamiętać, że naturalna wartością elementu nie ustawianego jest zero. Warto również wiedzieć, że w razie konfliktu położenia warstw o tej samej współrzędnej Z, o ich położeniu decyduje kolejność czytania informacji przez przeglądarkę. Warstwa odczytana później będzie na wierzchu.

Poszczególne nazwy i możliwe wartości atrybutów stylu przedstawiono w tabeli na następnej stronie. Nie należy ich uczyć się na pamięć lecz raczej starać się stosować korzystając z tabeli jako ściągawki. Tak łatwiej będzie nabrać wprawy i poznać ich działanie.

Jeśli style nie działają, oznacza to najczęściej, że popełniliśmy błąd przy pisaniu. Każdy dwukropek, średnik i przecinek jest tutaj bardzo ważny i brak lub nadmiar któregoś z nich albo przekręcenie wyrazu może spowodować, że style nie będą działać.
Czasami błąd spowodowany w jednym miejscu potrafi zablokować działanie wszystkich atrybutów. Najlepszą metodą jest wtedy wpisywanie atrybutów po jednym i każdorazowe sprawdzanie czy wszystko działa jak należy.

Rola i zastosowanie atrybutów objaśniono w tabeli. Życzymy udanych eksperymentów.


dalej