CSS - 3. Pozostałe właściwości

Transkrypt

1 CSS - 3 Pozostałe właściwości

2 Model pudełkowy Top Margin Border Left Padding Zawartość Right Bottom

3 Model pudełkowy - reguły Zawartość elementu musi wystąpić Padding, Border i Margin są opcjonalne Obwód zewnętrzny każdego ze składników modelu nazywany jest krawędzią (edge) tego elementu Własności width i height dotyczą wyłącznie zawartości elementu (nie mają wpływu na obramowanie i marginesy) Tło elementu dotyczy wszystkich składników oprócz marginesu zewnętrznego (margin), dla którego są przezroczyste

4 Marginesy wewnętrzne Służą do ustalenia odstępu między zawartością elementu a jego obramowaniem Własności:» padding» padding-bottom» padding-left» padding-right» padding-top Niedopuszczalne są wartości ujemne

5 Marginesy zewnętrzne pojedynczo Własności:» padding-top» padding-right» padding-bottom» padding-left» szerokość określona jedną z miar: ex, em, px, cm, mm, in, pt, pc» n% - procent wysokości (dla top i bottom ) lub szerokości (dla left i right) nabliższego elementu

6 Marginesy zewnętrzne łącznie» padding» od 1 do 4: jedna wszystkie strony dwie pierwsza określa górę i dół, a druga lewą i prawą stronę trzy góra, lewa i prawa, dół cztery góra, prawa, dół, lewa» szerokość określona jedną z miar: ex, em, px, cm, mm, in, pt, pc» n% - procent wysokości (dla top i bottom ) lub szerokości (dla left i right) nabliższego elementu

7 Listy Własności służące do formatowania wyglądu list numerowanych i wypunktowanych Własności:» list-style» list-style-image» list-style-position» list-style-type» marker-offset

8 Ustawienie znaczników listy» list-style-type» none brak» disc kółko» circle okrąg» square kwadracik» decimal liczba» decimal-leading-zero liczba z zerami wiodącymi» lower-roman liczby rzymskie małe (i, ii, iii, iv,...)» upper-roman liczby rzymskie duże(i, II, III, IV,...)» lower-alpha małe litery» upper-alpha wielkie litery» lower-greek małe greckie litery» hebrew numeracja hebrajska» armenian numeracja armeńska» georgian numeracja gruzińska» cjk-ideographic numeracja ideograficzna» hiragana - numeracja japońska (a, i, u,...)» hiragana-iroha numeracja japońska (i, ro, ha, ni,...)» katakana - numeracja japońska (A, I, U,...)» katakana-iroha numeracja japońska (I, RO, HA, NI,...) Uwaga! niektóre wartości mogą być niedostępne w niektórych przeglądarkach

9 Graficzne znaczniki listy» list-style-image Wartość:» URL adres obrazka» none bez obrazka Zaleca się stosowanie własności list-style-type, gdy istnieje zagrożenie, że obrazek może być czasowo niedostępny Przykład: ul { list-style-image: url(plus.gif); list-style-type: circle }

10 Pozycja znacznika listy» list-style-position» inside zawijanie tekstu z wyrównaniem do znacznika» outside zawijanie tekstu w taki sposób, że znacznik jest wysunięty w lewą stronę w stosunku do tekstu

11 Styl listy łącznie» list-style» wymieniane jedna po drugiej wartości list-style-type list-style-position list-style-image» przykład: ul {list-style: disc outside}

12 Odległość znacznika od tekstu» marker-offset» auto odległość ustawiana automatycznie» odległość wyrażona jedną z następujących wielkości: em, ex, px, in, pt, pc, mm, cm

13 Automatyczna wielopoziomowa numeracja 1. Określić nazwę licznika dla danej listy i wyzerować go 2. Usunąć domyślne numerowanie listy 3. Dla kolenych punktów i podpunktów listy wyswietlić aktualną wartość licznika przed wyświetleniem treści, następnie zwiększyć wartość licznika Przykład: ol {counter-reset: nazwa-licznika} ol li {list-style-type: none} ol li:before {content: counters(nazwalicznika, ".") ".";}

14 Wymiary Własności służące do określania wysokości i szerokości elementów Własności:» height» line-height» max-height» max-width» min-height» min-width» width

15 Wysokość elementu» height wysokość elementu Wartość:» auto wysokość wyznaczana przez przeglądarkę» wysokość wartość wyrażona w: px, em, ex, cm, mm, in, pc, pt» n% - procent wysokości bloku, w którym występuje element» max-height maksymalna wysokość elementu Wartość:» none maksymalna wysokość nieokreślona» wysokość» n%» min-height minimalna wysokość elementu Wartość:» wysokość» n%

16 Szerokość elementu» width szerokość elementu» auto szerokość wyznaczana przez przeglądarkę» szerokość wartość wyrażona w: px, em, ex, cm, mm, in, pc, pt» n% - procent szerokości elementu nadrzednego» max-width maksymalna szerokość elementu Wartość:» none maksymalna szerokość nieokreślona» szerokość» n%» min-width minimalna szerokość elementu Wartość:» szerokość» n%

17 Odległość między wierszami» line-height Wartość:» normal standardowa odległość» liczba odległość liczona jest jako liczba*wysokość_czcionki» wysokość stała wysokość wyrażona w: px, ex, em, in, pt, pc, cm lub mm» n% - odległość między liniami liczona jako procent wysokości czcionki Uwaga! niedopuszczalne są wartości ujemne

18 Przepełnienie Własność» overflow określa sposób wyświetlania, gdy element nie mieści się w zdefiniowanych dla niego wysokości i/lub szerokości (CSS 2.1)» visible pokazanie całej zawartości bez względu na zdfiniowane rozmiary (wartość domyślna)» hidden zawartość nadmiarowa jest ukrywana» scroll pojawiają się suwaki do przewijania zawartośći» auto suwaki pojawiają się tylko wtedy, gdy to konieczne

19 Właściwości tabel Określają wygląd tabeli Własności:» border-collapse» border-spacing» caption-side» empty-cells» table-leyout

20 Nagłówek tabeli» caption-side służy do określenia pozycji tytułu względem tabeli» top tytuł nad tabelą» bottom tytuł pod tabelą» left tytuł z lewej» right tytuł z prawej Uwaga! Wartości left i right zostały usnięte w CSS 2.1

21 Układ kolumn» table-layout» auto automatyczne ustawienie szerokości kolumn na podstawie algorytmu okreslającego mninimalną i maksymalną szerokość komórek» fixed stała szerokość kolumn zależna od: ustalonej szerokości kolumn (<colgroup>) ustalonej szerokości komórki w pierwszym wierszu (w przypadku komórek łączonych przez <colspan> wartość ta dzielona jest na liczbę kolumn) szerokość pozostałych kolumn wyznaczana jest przez równomierne podzielenie pozostałej części tabeli (pomniejszonej o odstępy międzykomórkowe i szerokość obramowania) Ostateczna szerokość tabeli w trybie fixed jest większą z wartości:» określona szerokość tabeli» lub suma szerokości poszczególnych kolumn, odstępów międzykomórkowych i szerokości obramowania Uwaga! Różne przeglądarki różnie interpretują układ kolumn tabeli

22 Obramowanie tabeli Model obramowania:» Własność: border-collapse» Wartości: collapse pojedyncze obramowanie (w niektórych przeglądarkach jego brak) separate komórki wyraźnie od siebie oddzielone Styl, szerokość i kolor obramowania:» Dla tabel <table>... </table> oraz ich komórek <td>... </td> można stosować wszystkie własności omówione wcześniej dla obramowań elementów

23 Odstępy między komórkami» border-spacing określa odstęp pomiędzy sąsiednimi komórkami w modelu obramowania "separate"» odległość określa pionowe i poziome odstępy między komórkami w: px, ex, em, in, pt, pc, cm, mm» odległość odległość określenie poziomego i pionowego odstępu o różnych wartościach Uwaga!» Internet Explorer nie interpretuje poprawnie tej własności

24 Wyświetlanie pustych komórek» empty-cells ustala sposób wyświetlania obramowania pustych komórek dla takich elementów jak: <table>, <td> i <th>» show pokazanie obramowania dla pustych komórek» hide ukrycie obramowania pustych komórek Uwaga!» Internet Explorer nie interpretuje poprawnie tej własności

25 Rozmiary elementów tabeli Własności:» takie same jak w przypadku innych rozmiarów» dla elementów: <table>... </table>, <td>... </td> oraz <th>... </th> można ustalić zarówno wysokość, jak i szerokość» dla wierszy <tr>... </tr> można ustalić jedynie wysokość, gdyż szerokość jest szerokością tabeli» dla kolumn <colgroup>... </colgroup> moża jedynie ustalić szerokość, gdyż wysokość określana jest wysokością tabeli

26 Własności klasyfikacji Określają: sposób wyświetlania elementu, czy obrazek może wystąpić w innym elemencie, pozycję elementu względem jego normalnej pozycji, pozycję elementu na podstawie wartości bezwzględnych, widoczność elementu Własności:» clear» cursor» display» float» position» visibility

27 Widoczność» display» visible widoczny element» hidden element niewidoczny» collapse w przypadku tabeli ukrywa odpowiedni wiersz lub kolumnę zwalniając miejsce na pozostałe elementy, w pozostałych przypadkach równoważny wartości "hidden"

28 Pozycja w elemencie nadrzędnym» float określa gdzie w innym elemencie będzie wyświetlany obrazek lub tekst» left obrazek lub tekst wyświetlany z lewej strony elementu nadrzędnego» right obrazek lub tekst wyswietlany z prawej strony elementu nadrzędnego» none obrazek lub tekst wyswietlany w miejscu wystąpienia Jeśli brak wystarczającej ilości wolnego miejsca w danej linii dla elementu z własnością float nastąpi przeniesienie go do nowej linii Różne zachowania w stosunku do: zawartości, tła i obramowania elementów blokowych i inline Przykład (wyróżnienie pierwszej litery akapitu): span { float:left; width:0.7em; font-size:400%; font-family:algerian,courier; line-height:80%; }

29 Przykład: poziome menu <html> <head> <style type="text/css"> ul {float:left; width:100%; padding:0; margin:0; list-style-type:none; } a {float:left; width:6em; text-decoration:none; color:white; background-color:purple; padding:0.2em 0.6em; border-right:1px solid white; } a:hover {background-color:#ff3300} li {display:inline} </style> </head> <body> <ul> <li><a href="#">link one</a></li> <li><a href="#">link two</a></li> <li><a href="#">link three</a></li> <li><a href="#">link four</a></li> </ul> <p> W przykładzie elementy ul i a umieszczono z lewej strony. Elementy li będą wyświetlane jako elementy typu "inline" (bez znaku przejścia do nowej linii pomiędzy nimi). Wymusza to wyświetlenie listy w jednej linii. Element ul ma szerokość 100% a każde hipełącze szerokość 6em. </p> </body> </html>

30 Przykład: Arkusz stylów: div.container { width:100%; margin:0px; border:1px solid gray; line-height:150%;} div.header,div.footer { padding:0.5em; color:white; background-color:gray; clear:left; } h1.header { padding:0; margin:0; } div.left { float:left; width:160px; margin:0; padding:1em; } div.content { margin-left:190px; border-left:1px solid gray; padding:1em; } Plik HTML: <html> <head> </head> <body> <div class="container"> <div class="header"><h1 class="header">nagłówek strony</h1></div> <div class="left"><p>"przykładowy tekst z lewej strony</p></div> <div class="content"> <h2>nagłówek paragrafu</h2> <p>paragraf z prawej strony.</p> <p>drugi paragraf z prawej strony</p></div> <div class="footer">stopka strony.</div> </div> </body> </html>

31 Wyświetlanie» display określa jak (jeśli w ogóle) ma być wyświetlony element» none element nie wyświetlany» block element blokowy (przejście do nowej linii przed i po elemencie)» inline element typu "inline" (brak znaków przejścia do nowej linii przed i po elemencie)» list-item element wyświetlany jak element listy» run-in w zależności od kontekstu element wyświetlany jako blokowy lub typu "inline"» compact jak run-in (usunięte w CSS 2.1)» marker wyróżnik listy (nie w CSS 2.1)» table element wyświetlany jako tabela blokowa» inline-table element wyświetlany jako tabela, ale bez przejścia do nowej linii przed i po» table-row-group element wyświetlany jako grupa wierszy» table-header-group grupa wierszy nagłówkowych» table-footer-group grupa wierszy stopki» table-row wiersz tabeli» table-column-group grupa kolumn tabeli» table-column kolumna tabeli» table-cell komórka tabeli» table-caption tytuł tabeli

32 Sposób określania pozycji» position» static normalny» relative określenie położenia względem połozenia normalnego (po średniku określamy względne współrzędne nowego położenia left, top, right, bottom wartości po dwukropku parametry oddzielane średnikami)» absolute położenie bezwzględne wewnątrz bloku (po średniku określamy wartości left, top, right, bottom)» fixed stałe położenie względem okna nie zmienia się przy przewijaniu zawartości okna (po średniku określa się współrzędne left, top, right i bottom, a po dwukropku ich wartości)

33 Kursor» cursor» url url z kursorem użytkownika» auto ustawiany przez przeglądarkę» default - domyślny» crosshair» pointer» move» e-resize» ne-resize» nw-resize» n-resize» se-resize» sw-resize» s-resize» w-resize» text» wait» help