Aplikacje internetowe

1. Aplikacje internetowe CSS - Formatowanie list

2. 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).

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

4. Właściwość list-style-type • Właściwośćlist-style-typesł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;

5. Właściwość list-style-type Właściwość list-style-typemoże przyjmować następujące wartości:

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

7. Pozycjonowanie markerów przykład

8. Punktoryrysunkowe • Za pomocą właściwości list-style-imagemoż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.

9. Punktoryrysunkowe • Oto przykładowy kod odwołujący się do plików kula.jpgoraz rozek.jpg, umieszczonych w katalogu obrazy na serwerze, jako do obrazów, które mają zostać wykorzystane do utworzenia listy. <ol> <li style="list-style-image: url(obrazy/kulka.jpg);">Loremipsumdolor sit amet, consecteturadipiscing elit. Nullamegetfelis sit ametsapienviverratempor. Vestibulum non erat. In turpis. Nunc vulputatearcuquis ligula. Crassuscipitnibh id odio. Nulla porta ligula. Aliquam et lorem et nibhluctusvenenatis. </li> <li style="list-style-image: url(obrazy/rozek.jpg);">Loremipsumdolor sit amet, consecteturadipiscing elit. Nullamegetfelis sit ametsapienviverratempor. Vestibulum non erat. In turpis. Nunc vulputatearcuquis ligula. Crassuscipitnibh id odio. Nulla porta ligula. Aliquam et lorem et nibhluctusvenenatis. </li> </ol>

10. Punktoryrysunkowe