Style CSS - Pozycjonowanie

1. Style CSS - Pozycjonowanie

2. Relatywne Absolutne Ustalone Statyczne Nakładanie Kadrowanie Wyświetlanie Widzialność Ustawienie Przyleganie Rozmiary Bibliografia Pozycjonowanie

3. Relatywne • SEL { position: relative; parametry } • left/right/top/bottom:odległość od lewej/prawej/górnej/dolnej krawędzi położenia spoczynkowego • left: 1cm; top: -10px

4. Absolutne • SEL { position: absolute; parametry } • left/right/top/bottom:odległość od lewej/prawej/górnej/dolnej krawędzi strony • left: 1cm; bottom: 30px

5. Ustalone • SEL { position: fixed; parametry } • left/right/top/bottom:stałaodległość od lewej/prawej/górnej/dolnej krawędzi przeglądarki • left: 10px; top: 3cm

6. Statyczne • style="position: static" • przywraca normalne pozycjonowanie

7. Nakładanie • SEL { position: typ; parametry; z-index: nr} • ustalenie kolejności nakładania się • <IMG style="position: relative; z-index: 1" SRC=„X"> <IMG style="position: relative; right: 20px; top: -20px; z-index: 2" SRC=„Y"> Y X

8. Kadrowanie • SEL { position: absolute; clip: rect(góra, prawo, dół, lewo) } • auto == nie tnij • position: absolute; clip: rect(25px, auto, 40px, 10px)

9. Wyświetlanie • SEL { display: typ } • block - element będzie wyświetlony w bloku (odstęp z góry i z dołu) • inline - element będzie wyświetlony w linii (sąsiadująco z innymi) • list-item - przywraca domyślne wyświetlanie dla elementu wykazu <LI> • none - element nie będzie wyświetlony

10. Wyświetlanie block inline none SEL { display: typ }

11. Widzialność • SEL { visibility: tryb } visibile - widzialny hidden - niewidoczny

12. Ustawienie poziome (pływanie) • SEL { float: tryb } left right none

13. Ustawienie pionowe • SEL { vertical-align: tryb } • baseline - wyrównuje linię bazową elementu do linii bazowej elementu nadrzędnego (domyślnie) • text-top / middle / text-bottom • super / sub • top / bottom

14. Ustawienie pionowe text-top middle text-bottom • text-top - szczyt elementu = szczyt tekstu elementu nadrzędnego • middle - ustawia element na środku wysokości elementów sąsiadujących • text-bottom - podstawa elementu = podstawa tekstu elementu nadrzędnego

15. Ustawienie pionowe super abc abc sub super sub super - indeks górny bez zmiany wielkości tekstu sub - indeks dolny bez zmiany wielkości tekstu

16. abc abc abc abc abc top abc bottom abc abc abc abc Ustawienie pionowe top bottom • top - szczyt el. = szczyt najwyższego elementu linii, w której się znajduje • bottom - podstawa el. = podstawa elementu położonego najniżej w linii, w której się znajduje

17. Przyleganie • SEL { clear: typ } • left / right / both / none • ustala pozycję elementów sąsiadujących względem elementu pływającego (np. obrazka). Określa które krawędzie elementu następującego po elemencie pływającymnie będą do niego przylegać.

18. Przyleganie <IMG style="float: left"> <IMG style="float: left"> Prawy bok nie przylega ... Lewy bok nie przylega do obrazka <P style="clear: right">(...)</P> <P style="clear: left">(...)</P>

19. Przyleganie <IMG style="float: left"> <IMG style="float: left"> Dowolność przylegania Żaden bok nie przylega do obrazka <P style="clear: both">(...)</P> <P style="clear: none">(...)</P>

20. Rozmiary • SEL { width: typ } • SEL { height: typ } abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu height: 20px width: 200px

21. Bibliografia • www.kurshtml.boo.pl - Sławomir Kokłowski • Kurs HTML - Paweł Wimmer, wyd. Lupus