Aplikacje internetowe CSS - Formatowanie list

Ogólne informacje o listach W standardowym HTML-u istnieją dwa typy list: numerowane i wypunktowane. Na liście numerowanej do każdego elementu przypisany jest numer, dlatego używa się jej w sytuacji, gdy istotna jest kolejność poszczególnych elementów. Listy wypunktowane stanowią z reguły zestawienia powiązanych ze sobą elementów, które nie muszą być wymienione w określonej kolejności (zazwyczaj, jak sama nazwa wskazuje, są one formatowane w postaci list punktowanych).

Ogólne informacje o listach Listy numerowane są zawarte w znaczniku (skrót od ang. ordered list). Listy wypunktowane są zawarte w znaczniku (skrót od ang. unordered list). Znacznik ( ) musi poprzedzać każdy element listy. Oto kod, który zawiera krótkie przykłady listy każdego typu: Lista numerowana Krok 1. Krok 2 Krok 3. Lista wypunktowana Element 1. Element 2. Element 3.

Właściwość list-style-type Właściwość list-style-type służy do określenia typu listy, a więc tego, jaki identyfikator ma się znajdować przed każdym elementem listy — mogą to być kropki, liczby, cyfry rzymskie i tak dalej. list-style-type: typ;

Właściwość list-style-type disc – kołolower-greek – małe greckie circle – okrąggeorgian - gregoriańskie square – kwadratarmenian - armeńskie decimal – liczby arabskiehebrew – hebrajskie lower-alpha – małe literycjk-ideographic upper-alpha – duże literyhiragana upper-roman – duże liczby rzymskiekatakana lower-roman – małe liczby rzymskiehiragana-iroha decimal-leading-zero – "prowadzące zero" np.: 01, 02, 03) katakana-iroha lower-latin (małe łacińskie: a, b, c) - to samo co lower- alpha none – brak wyróżnika (markera) upper-latin (duże łacińskie: A, B, C) - to samo co upper- alpha Właściwość list-style-type może przyjmować następujące wartości:

Pozycjonowanie markerów Właściwość list-style-position umożliwia zmianę położenia markera względem elementu listy. Może ona przyjmować wartość inside lub outside. Wartość outside nadaje liście typowy styl, w którym marker jest oddzielony od elementu listy, a cały tekst elementu jest wcięty. Z kolei wartość inside nadaje liście styl bardziej złożony, w którym marker jest umieszczony w pierwszym wierszu elementu.

Pozycjonowanie markerów przykład

Punktory rysunkowe Za pomocą właściwości list-style-image możemy wyznaczyć obraz, który chcemy wykorzystać jako punktor listy. Właściwość ta bywa używana zamiast właściwości list-style-type, która przed każdym elementem listy wstawia kropkę. Co więcej, jeśli jej wartość zostanie określona, to punkty na liście będą oznaczane przy użyciu wskazanego obrazka nawet wtedy, gdy w dalszej kolejności zostanie określona wartość właściwości list-style. Obraz, którego chcemy użyć, określamy za pomocą konstrukcji url.

Punktory rysunkowe Oto przykładowy kod odwołujący się do plików kula.jpg oraz rozek.jpg, umieszczonych w katalogu obrazy na serwerze, jako do obrazów, które mają zostać wykorzystane do utworzenia listy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget felis sit amet sapien viverra tempor. Vestibulum non erat. In turpis. Nunc vulputate arcu quis ligula. Cras suscipit nibh id odio. Nulla porta ligula. Aliquam et lorem et nibh luctus venenatis.

Punktory rysunkowe