1 / 21

Style CSS - Pozycjonowanie

Style CSS - Pozycjonowanie. Relatywne Absolutne Ustalone Statyczne Nakładanie Kadrowanie. Wyświetlanie Widzialność Ustawienie Przyleganie Rozmiary Bibliografia. Pozycjonowanie. Relatywne. SEL { position: relative; parametry }

keelie-barron
Télécharger la présentation

Style CSS - Pozycjonowanie

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related