Style CSS - Pozycjonowanie

Prezentacja na temat: "Style CSS - Pozycjonowanie"— Zapis prezentacji:

1 Style CSS - Pozycjonowanie

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

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ła odległość od lewej/prawej/górnej/dolnej krawędzi przeglądarki left: 10px; top: 3cm

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

7 X Y 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 sub
abc abc sub super sub super - indeks górny bez zmiany wielkości tekstu sub - indeks dolny bez zmiany wielkości tekstu

16 Ustawienie pionowe top bottom
abc bottom abc 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ącym nie będą do niego przylegać.

18 Lewy bok nie przylega do obrazka
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">
Dowolność przylegania Żaden bok nie przylega do obrazka <P style="clear: both">(...)</P> <P style="clear: none">(...)</P>

20 abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu
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