Dynamic Duo - Pozycjonowanie CSS




loc = "../"






document.write(toccss)
document.write(tochtml)

Pozycjonowanie CSS

Kaskadowe Arkusze Styli (CSS - Cascading Style Sheets) są podstawą dla dynamicznego HTML-a zarówno w przeglądarce Netscape Navigator 4.0 jak i Internet Explorer 4.0. CSS służy do stworzenia "styli" które definiują sposób wyświetlania elementów na stronie przez przeglądarkę. CSSP jest rozszerzeniem CSS które daje twórcy możliwość kontroli położenia dowolnego elementu na stronie z dokładnością do pojedyńczych pikseli. Ponieważ w sieci jest dostępna spora ilość dokumentacji i podręczników dotyczących zarówno CSS jak i CSSP, nie będę ich tutaj powielał, postaram się raczej rozszerzyć informacje tam zawarte.

Tutaj znajdziesz informacje wyjaśniające składnię CSS i CSSP:

W3C CSS-Positioning
Przewodnik po CSS z Builder.com


Serwisy te zawierają kompletny opis CSS i sposoby jego implementacji. Jednakże teraz postaram się w skrócie przypomnieć te elementy CSS które będą wykorzystywane w naszym podręczniku.

Używanie znaczników DIV:

Korzystanie z CSS-Positioning wiąże się najczęściej z używaniem znacznika DIV (ang.: DIVision - sekcja) i nadawaniem mu pożądanych własności. Znacznik ten w swojej podstawowej formie określa pustą, nie sformatowaną część dokumentu i doskonale pasuje do wykorzystania przez CSS. Kiedy umieszcza się tekst wewnątrz znaczników DIV jest to najczęściej tłumaczone jako "Blok DIV", "Element DIV", "Warstwa CSS", lub w skrócie - "warstwa". Kiedy napotkasz takie określenia podczas lektury stron WWW o DHTML-u, czy też na grupach newsowych, to wiedz, że wszystkie one określają to samo - kod HTML zamknięty pomiędzy tagami DIV.

W zapisie pusty znacznik DIV niczym nie różni się od innych znaczników HTML:


<DIV>
Teraz jesteśmy wewnątrz znacznika DIV
</DIV>


Użycie samego znacznika DIV daje taki sam rezultat jak użycie <P></P>

Poprzez dodanie poleceń CSS do znacznika DIV możemy wpływać na to w którym miejscu na ekranie ten konkretny kawałek kodu HTML zostanie pokazany. Możemy narysować prostokąt lub linie lub też wpłynąć na sposób wyświetlania tekstu znajdującego się wewnątrz znacznika DIV. Aby tego dokonać, musimy najpierw nazwać ten konretny znacznik poprzez nadanie mu parametru ID:


<DIV ID="ciezarowka">
To jest ciezarowka
</DIV>


Co zostanie użyte jako nazwa zależy od Ciebie. Może to być dowolny ciąg znaków i cyfr (a-z, A-Z, 0-9 i podkreślenie), BEZ polskich liter i zaczynający się od litery.

Następnie należy dodać opis CSS. Możemy tego dokonać na jeden z dwóch sposobów:

Wewnętrzny CSS (inline):

Ten sposób jest chyba najczęściej używany i od niego właśnie rozpoczniemy pokazywanie jak pisać DHTML i JavaScript.


<DIV ID="ciezarowka" STYLE="tutaj definicja stylu">
To jest ciężarówka
</DIV>


Zewnętrzny znacznik STYLE:

Ta metoda jest działa równie dobrze jak poprzednia, jednakże jest tutaj parę spraw, które trochę komplikują definiowanie styli w ten sposób. Tak więc sugeruję, abyś zaczekał z tą formą do momentu, kiedy nie dojdziemy do lekcji o warstwach zagnieżdżonych. A teraz tylko rzucimy okiem jak to wygląda...


<STYLE TYPE="text/css">
<!--
#ciezarowka {tutaj definicja stylu}
-->
</STYLE>

<DIV ID="ciezarowka">
To jest ciężarówka
</DIV>


Zwróć uwagę na sposób zapisu nazwy ID wewnątrz znacznika STYLE.

Przenośne własności CSS:

Ponieważ naszym głównym zadaniem jest napisanie takiego kodu DHTML który będzie poprawnie interpretowany zarówno przez Netscape jak i Internet Explorera, jesteśmy ograniczeni w wyborze możliwości CSS które możemy wykorzystać. Generalnie rzecz biorąc poniższe parametry są tymi, które działają w obydwu przeglądarkach w sposób zbliżony do standardu określonego przez W3C.


position
Określa jak znacznik DIV będzie pozycjonowany - "relative" oznacza, że znacznik DIV będzie pokazany tak jak każdy inny znacznik HTML, natomiast "absolute" oznacza, że znacznik DIV zostanie pokazany w doładnie określonym miejscu. Pozycjonowanie typu "absolute" będzie głównym tematem tego podręcznika.
left
Położenie z lewej (ilość pikseli od lewego brzegu okna przeglądarki)
top
Położenie od góry (ilość pikseli od górnego brzegu okna przeglądarki).
width
Szerokość znacznika DIV. Każda treść (tekst, kod HTML) znajdująca się wewnątrz znacznika DIV zostanie zawinięta do szerokości określonej przez ten parametr. Jeśli nie został on określony, całość zostanie wyświetlona w jednej linii.
UWAGA:
Kiedy używasz warstw do tworzenia animacji, zawsze powinieneś określać szerokość. Przy braku tego parametru, IE zakłada jako szerokość całą dostępną szerokośc ekranu. Jeśli teraz będziesz poruszał warstwą po ekranie, na dole będzie pojawiał się suwak co nie dość, że irytujące, to dodatkowo będzie spowalniało animację.

height
Wysokość znacznika DIV. Ten parametr jest rzadko potrzebny chyba, że zamierzasz skorzystać z obcinania widoczności warstwy (clip).
clip
Określa prostokąt obcinania warstwy. Innymi słowy tworzy nad warstwą precyzyjnie określony prostokąt przez który możemy oglądać to co jest na warstwie umieszczone. Prostokąt ten jest definiowany poprzez wartości jego czterech rogów.
clip:rect(top,right,bottom,left);
visibility
Określa "widzialność" warstwy czyli to, czy dana warstwa będzie widoczna (visible), niewidoczna / schowana (hidden) czy też jej widzialność będzie dziedziczona (inherit - standardowo)
z-index
Określa kolejność układania warstw DIV.
background-color
Kolor tła warstwy DIV. W Netscape ten parametr wpływa tylko na kolor tła tekstu. Jeśli chcesz narysować prostokąt za pomocą CSS, musisz dla Netscape ustawić także parametr layer-background-color na tą samą wartość.
layer-background-color
Kolor tła warstwy DIV dla Netscape.
background-image
Obrazek tła warstwy DIV dla Internet Explorera. W Netscape ten parametr wpływa tylko na obrazek tła dla tekstu.
layer-background-image
Obrazek tła warstwy DIV dla Netscape.



Składnia dla CSS różni się od składni HTML, używa się dwukropków do oddzielenia parametrów od ich wartości, oraz średników do oddzielenia różnych wartości.


position: absolute;
left: 50px;
top: 100px;
width: 200px;
height: 100px;
clip: rect(0px 200px 100px 0px);
visiblity: visible;
z-index: 1;
background-color:#FF0000;
layer-background-color:#FF0000;
background-image:URL(filename.gif);
layer-background-image:URL(filename.gif);


Definiowanie parametrów CSS jest elastyczne, nie musisz określać ich wszystkich. Spacje są ignorowane, więc jeśli chcesz, możesz je napisać wszystkie w jednej linii lub w kilku oddzielnych z odstępami pomiędzy nimi itd. Standardową jednostką dla parametrów jest piksel, więc nie trzeba też pisać "px" po każdej wartości, jednakże zalecane jest aby tak robić.


position:absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); background-color:#FF0000; layer-background-color:#FF0000;


Przykład wewnętrznej definicji stylu (inline):


<DIV ID="divname" STYLE="position: absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); visiblity:visible; z-index:1;">
</DIV>


Przykład zewnętrznej definicji stylu:


<STYLE TYPE="text/css">
<!--
#nazwa {position: absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); visiblity:visible; z-index:1;}
-->
</STYLE>

<DIV ID="nazwa">
</DIV>


Przykład jest wart tysiąca słów:

przykład pozycjonowania
przykład pozycjonowania / obcinania i koloru tła



Strona główna
Następna lekcja:
Przenośny JavaScript


copyright 1998 Dan Steinman