Les 8

Lijsten

Met list-style kun je de weergave van je lijsten veranderen.

List-style-type

Geeft aan wat voor ieder list-item (<li>) getoond wordt.
Verschillende waarden mogelijk, afhankelijk van welk soort lijst je gebruikt.

Mogelijke waarden voor Unnumbered Lists (<ul>):

• disc (standaard)
• circle
• square

Voorbeeld <ul>:

ul { list-style-type: square }

Resultaat:

• eerste lijstitem
• tweede lijstitem
• derde lijstitem

Mogelijke waarden voor Ordered Lists (<ol>):

• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-alpha
• upper-alpha
• lower-greek
• lower-latin
• upper-latin
• hebrew
• armenian
• georgian
• cjk-ideographic
• hiragana
• katakana
• hiragana-iroha
• katakana-iroha

Voorbeeld (<ol>)

ol { list-style-type: upper-roman }

Resultaat:

1. eerste lijstitem
2. tweede lijstitem
3. derde lijstitem

List-style-image

Met list-style-image kun je zelf een plaatje opgeven dat voor ieder list-item (<li>) wordt getoond.

Voorbeeld van list-style-image:

ul { list-style-image: url('bestandsnaam.gif') }

Resultaat:

• Eerste item
• Tweede item
• Derde item

List-style-position

Twee mogelijke waarden:

• outside (standaard)
• inside

Voorbeeld van list-style-position: outside

ul { list-style-position: outside }

Resultaat:

• Eerste item
• Tweede item
• Derde item

Voorbeeld van list-style-position: inside

ul { list-style-position: inside }

Resultaat:

• Eerste item
• Tweede item
• Derde item

Einde les 8

Dit is het einde van de Cursus Cascading Style Sheets.
Met de dingen die je in deze cursus geleerd hebt, kun je je site fraai vormgeven. Deze cursus heeft zich vooral op de beginselen van CSS gericht. Er zijn zeker nog onderwerpen die niet behandeld zijn, omdat ik die niet goed vond passen bij een beginnerscursus.

Daarom heb ik nog wat links naar officiële CSS informatie en andere tutorials opgenomen.
Klik hier voor de CSS Links!

Heb je vragen over CSS, stel ze dan Op het Forum!
Help vooral ook andere bezoekers die hier hun vragen stellen, zo helpt iedereen elkaar. :)

Zoek je nog boeken over webontwerp, kijk dan eens in Onze Boeken Shop!!

MijnHomepage Tip