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:
- eerste lijstitem
- tweede lijstitem
- 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!!
Homepage-Maken Tip
De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.
Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.