Handleiding HTML - Stijleigenschappen voor lijsten

Eigenschappen voor lijsten

Tot de eigenschappen voor lijsten behoren: list-style-type, list-style-image, list-style-position en list-style.

Bij de voorbeelden van de verschillende eigenschappen is een afbeelding opgenomen, waarop te zien is hoe de weergave zou moeten zijn. Klik op de afbeelding en bekijk in een nieuw venster of de browser het voorbeeld (correct) ondersteunt.

list-style-type De list-style-type eigenschap bepaalt hoe de markering van een onderdeel van een lijst wordt weergegeven.

Mogelijke waarden zijn disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha en none.

De markering wordt weergegeven indien de waarde van de list-style-image eigenschap none is (de beginwaarde), of de afbeelding niet gevonden wordt.
Met de waarde none wordt geen markering weergegeven.

De beginwaarde is disc.

De eigenschap kan gebruikt worden voor alle elementen die de eigenschap display met de waarde list-item hebben en wordt geërfd.

De list-style-type eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3. Door Netscape Navigator 4.0 wordt de waarde none niet ondersteund.

De opbouw is:

list-style-type: waarde

In de volgende voorbeelden wordt de list-style-type eigenschap gedemonstreerd.
Wanneer de list-style-type eigenschap met de waarde square wordt toegevoegd aan het UL element, erft elk item van de lijst deze eigenschap.
`<UL STYLE="list-style-type: square;"> <LI>item 1</LI> <LI>item 2</LI> </UL>`
Door het UL element te gebruiken met bijvoorbeeld de waarde decimal voor de list-style-type eigenschap, wordt de lijst weergegeven als bij het OL element.
`<UL STYLE="list-style-type: decimal;"> <LI>item 1</LI> <LI>item 2</LI> </UL>`
Met de waarde none voor de list-style-type eigenschap, moet de markering achterwege blijven.
`<UL STYLE="list-style-type: none;"> <LI>item 1</LI> <LI>item 2</LI> </UL>`
Wanneer de list-style-type eigenschap met de waarde none wordt toegevoegd aan een LI element, wordt voor dat item de markering weggelaten.
`<UL STYLE="list-style-type: lower-roman;"> <LI>item 1</LI> <LI STYLE="list-style-type: none;">item 2</LI> <LI>item 3</LI> </UL>`

list-style-image De list-style-image eigenschap bepaalt, welke afbeelding wordt gebruikt als markering bij een onderdeel van een lijst.

Mogelijke waarden zijn url en none.

Wanneer de afbeelding beschikbaar is, vervangt deze de markering welke is aangegeven via de list-style-type eigenschap.

De beginwaarde is none.

De eigenschap kan gebruikt worden voor alle elementen die de eigenschap display met de waarde list-item hebben en wordt geërfd.

De list-style-image eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3 en Netscape Navigator 4.

De opbouw is:

list-style-image: waarde

De waarde url wordt als volgt opgebouwd:

url(URI)

De URI (Uniform Resource Identifier) heeft de volgende opbouw:

http://host/path

Host specificeert het adres van de server, waarop zich de gevraagde afbeelding bevindt. Het kan een IP-adres zijn, maar meestal is het de naam van de machine. Een machinenaam (ook wel domeinnaam) bestaat uit meerdere delen gescheiden door een punt, begint vaak met "www" en eindigt met een landcode (bijvoorbeeld "nl", "be", "uk") of de vooral in de Verenigde Staten gebruikte code voor de sector (bijvoorbeeld "com" voor commerciële instellingen en "org" voor non-profit organisaties).
Path geeft aan hoe de gevraagde afbeelding op de server gevonden kan worden: in welke directory en onder welke bestandsnaam.

Het is niet altijd nodig een complete URI op te nemen. Als de gevraagde afbeelding zich op de lokale server bevindt, dan volstaat de volgende URI:

path

De via het list-style-type opgegeven markering wordt niet weergegeven, wanneer de via de list-style-image eigenschap opgeven afbeelding aanwezig is.
`<UL STYLE="list-style-type: circle; list-style-image: url(redball.gif);"> <LI>item 1</LI> <LI>item 2</LI> </UL>`
De in het volgende voorbeeld opgegeven afbeelding is niet aanwezig en dus moet de gekozen markering nu wel geplaatst worden.
`<UL STYLE="list-style-type: circle; list-style-image: url(geenball.gif);"> <LI>item 1</LI> <LI>item 2</LI> </UL>`

list-style-position De list-style-position eigenschap bepaalt, hoe de markering van het lijst onderdeel geplaatst wordt ten opzichte van de inhoud.

Mogelijke waarden zijn outside en inside.

Bij de waarde outside staat de markering buiten de rechthoekige ruimte (de box) die het lijstonderdeel inneemt en de tekst van de volgende regels begint direct onder de tekst van de eerste regel. Bij de waarde inside wordt de markering binnen de box van het lijstonderdeel geplaatst en alle volgende regels van de inhoud beginnen daardoor direct onder de markering. De linkerzijde van de box van het lijstonderdeel houdt zijn normale plaats.

De beginwaarde is outside.

De eigenschap kan gebruikt worden voor alle elementen die de eigenschap display met de waarde list-item hebben en wordt geërfd.

De list-style-position eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3 en Netscape Navigator 4. Bij Microsoft Internet Explorer 4 houdt de box van het lijstonderdeel bij de waarde inside niet zijn gebruikelijke positie, maar wordt deze verschoven naar de plaats waar de markering normaal staat.

De opbouw is:

list-style-position: waarde

In het volgende voorbeelden wordt de list-style-position eigenschap gedemonstreerd.
`<UL STYLE="list-style-position: outside;"> <LI>In deze ... outside.</LI> <LI>De tekst ... uitgelijnd.</LI> </UL>`
`<UL STYLE="list-style-position: inside;"> <LI>In deze ... inside.</LI> <LI>De tekst ... uitgelijnd.</LI> </UL>`

list-style In de list-style eigenschap kunnen de verschillende eigenschappen van de stijl van een lijst op een verkorte wijze worden gecombineerd.

Mogelijke waarden zijn list-style-type, list-style-image en list-style-position.

Voor een toelichting op de verschillende waarden zie de afzonderlijke eigenschappen.

De beginwaarde is niet gedefinieerd voor gecombineerde eigenschappen.

De eigenschap kan gebruikt worden voor alle elementen die de eigenschap display met de waarde list-item hebben en wordt geërfd.

De list-style eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3. Netscape Navigator 4 ondersteunt de waarden list-style-image en list-style-position niet.

De opbouw is:

list-style: waarde

In het volgende voorbeeld zijn enkele list-style eigenschappen gecombineerd.
`<UL STYLE="list-style: square url(redball.gif) inside;"> <LI>In deze ...</LI> <LI>Als markering ...</LI> <LI>Een browser ...</LI> </UL>`

Inhoud Handleiding HTML Index Overzicht stijleigenschappen