CSS Lijsten
In deze tutorial leer je hoe je HTML-lijsten opmaakt met CSS.
|
|
Soorten HTML-lijsten
Je kunt voor meer informatie en het maken van lijsten terecht bij onze HTML tutorial. Het wordt je aangeraden om als eerst onze HTML tutorial over lijsten te volgen voordat je verder gaat met het stijlen van lijsten met CSS.Er zijn drie verschillende soorten lijsten in HTML:
<ul> - Een ongeordende lijst - In een ongeordende lijst hebben de items een symbool als markering.
<ol> - Een geordende lijst - In een geordende lijst zijn de items genummerd met behulp van een getal of een letter.
<dl> - Een definitielijst - Bij een definitielijst zijn de items op dezelfde manier gerangschikt als in een woordenboek.
Met de CSS lijst eigenschappen kun je het volgende doen:
| Het instellen van verschillende lijstitem-markeringen voor geordende lijsten. | |
| Het instellen van verschillende lijstitem-markeringen voor ongeordende lijsten. | |
| Het weergeven van een afbeelding inplaats van een markering voor lijstitems. | |
| Achtergrondkleuren toevoegen aan lijsten en lijstitems. |
Soorten markeringen
Standaard worden items in een geordende lijst genummerd met cijfers (1, 2, 3, 4 enz.), terwijl items in een ongeordende lijst zijn gemarkeerd met een symbool. Standaard is dit een stip (bullet).Indien gewenst kan je deze standaard lijstmarkerings-type wijzigen in elk ander type, zoals Romeinse cijfers, Latijnse letters, cirkels, vierkanten, enz. door gebruikt te maken van de CSS eigenschap list-style-type. In het volgende voorbeeld maken we gebruik van enkele beschikbare lijstitemmarkeringen.
Voorbeeld:
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
Markerings positie wijzigen
Standaard worden markeringen van elke lijstitems buiten hun weergavekaders geplaatst.Je kunt deze markeringen of symbolen echter ook binnen de weergavevakken van het lijstitem plaatsen met behulp van de eigenschap list-style-position samen met de waarde erin. In dit geval lopen de lijnen onder de markering door in plaats van in te springen.
Voorbeeld:
ol.in li {
list-style-position: inside;
}
ol.out li {
list-style-position: outside;
}
Markering als afbeelding
Je kunt een afbeelding instellen als lijstmarkering met behulp van de CSS eigenschap list-style-image. De stijlregel in het volgende voorbeeld wijst naar een transparante PNG-afbeelding als lijstmarkering voor alle items in de ongeordende lijst. Laten we het voorbeeld eens uitproberen.
Markering verwijderen
De eigenschap list-style-type: none; kan worden gebruikt om de markeringen of symbolen te verwijderen. Zoals je hebt gezien heeft een lijst ook een standaardmarge en opvulling, om dit te verwijderen voeg je margin: 0 en padding: 0 toe. Zie het onderstaande voorbeeld om een idee te krijgen van hoe het werkt.
Enkele declaratie
De list-style eigenschap combineert de verschillende stijleigenschappen voor lijsten op een verkorte wijze. Je kunt de eigenschappen list-style-type, list-style-image en list-style-position in een enkele declaratie opgeven.
Lijsten en menu's
HTML lijsten worden vaak gebruikt om horizontale navigatiebalken of menu's te maken die meestal bovenaan een website verschijnen. Maar aangezien de lijstitems blokelementen zijn, moeten we de CSS-eigenschap display: gebruiken om ze inline weer te geven. Laten we het volgende voorbeeld proberen om te zien hoe het echt werkt.
Voorbeeld:
ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li {
display: inline-block;
}
ul li a {
display: block;
padding: 10px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
