HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSS -zelfstudie

CSS HOME CSS-introductie CSS-syntaxis CSS-kiezers CSS-handleiding CSS-opmerkingen CSS-kleuren
kleuren RGB HEX HSL
CSS-achtergronden
Achtergrond kleur Achtergrond afbeelding achtergrond herhaling Achtergrondbijlage Achtergrond steno
CSS-randen
grenzen Grensbreedte Rand kleur Rand Zijkanten Grensverkorting Afgeronde randen
CSS-marges
Marges Margin Collapse
CSS-opvulling CSS Hoogte/Breedte CSS-boxmodel CSS-overzicht
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS-tekst
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS-lettertypen
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS-pictogrammen CSS-links CSS-lijsten CSS-tabellen
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS-weergave CSS Max-breedte CSS-positie CSS Z-index CSS-overloop CSS zweven
Float Clear Float Examples
CSS Inline-blok CSS uitlijnen CSS-combinaties CSS Pseudo-klasse CSS Pseudo-element CSS-dekking CSS-navigatiebalk
Navbar Vertical Navbar Horizontal Navbar
CSS-dropdownmenu's CSS-afbeeldingengalerij CSS-afbeeldingssprites CSS Attr-kiezers CSS-formulieren CSS-tellers CSS-websitelay-out CSS-eenheden CSS-specificiteit CSS !belangrijk CSS wiskundige functies

CSS Geavanceerd

CSS afgeronde hoeken CSS-randafbeeldingen CSS-achtergronden CSS-kleuren CSS-kleurzoekwoorden CSS-verlopen
Linear Gradients Radial Gradients Conic Gradients
CSS-schaduwen
Shadow Effects Box Shadow
CSS-teksteffecten CSS-weblettertypen CSS 2D-transformaties CSS 3D-transformaties CSS-overgangen CSS-animaties CSS-tooltips Afbeeldingen in CSS-stijl CSS-beeldreflectie CSS-object-fit CSS-objectpositie CSS-maskering CSS-knoppen CSS-Paginering CSS Meerdere kolommen CSS-gebruikersinterface CSS-variabelen
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Grootte van CSS-box CSS-mediaquery's CSS MQ-voorbeelden CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Responsief

RWD Intro RWD-kijkpoort RWD-rasterweergave RWD-mediaquery's RWD-afbeeldingen RWD-video's RWD-frameworks RWD-sjablonen

CSS- raster

Rasterintro Rastercontainer Rasteritem

CSS SASS

SASS-zelfstudie

CSS- voorbeelden

CSS-sjablonen CSS-voorbeelden css-quiz CSS-oefeningen CSS-certificaat

CSS- referenties

CSS-referentie CSS-kiezers CSS-functies CSS Referentie Auditief CSS webveilige lettertypen CSS animeerbaar CSS-eenheden CSS PX-EM-converter CSS-kleuren CSS-kleurwaarden CSS-standaardwaarden Ondersteuning voor CSS-browser

CSS- lijsten

❮ Vorig Volgende ❯

Ongeordende lijsten:

  • Koffie
  • Thee
  • Cokes
  • Koffie
  • Thee
  • Cokes

Bestelde lijsten:

  1. Koffie
  2. Thee
  3. Cokes
  1. Koffie
  2. Thee
  3. Cokes

HTML-lijsten en CSS-lijsteigenschappen

In HTML zijn er twee hoofdtypen lijsten:

  • ongeordende lijsten (<ul>) - de lijstitems zijn gemarkeerd met opsommingstekens
  • geordende lijsten (<ol>) - de lijstitems zijn gemarkeerd met cijfers of letters

Met de CSS-lijsteigenschappen kunt u:

  • Stel verschillende lijstitemmarkeringen in voor geordende lijsten
  • Stel verschillende markeringen voor lijstitems in voor ongeordende lijsten
  • Stel een afbeelding in als de markering voor lijstitems
  • Achtergrondkleuren toevoegen aan lijsten en lijstitems

Verschillende markeringen voor lijstitems

De list-style-typeeigenschap specificeert het type lijstitemmarkering.

In het volgende voorbeeld ziet u enkele van de 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;
}

Opmerking: sommige waarden zijn voor ongeordende lijsten en sommige voor geordende lijsten.

Een afbeelding als de markering van het lijstitem

De list-style-imageeigenschap specificeert een afbeelding als de lijstitemmarkering:

Voorbeeld

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

Plaats de markeringen voor lijstitems

De list-style-positioneigenschap specificeert de positie van de lijstitemmarkeringen (opsommingstekens).

"lijst-stijl-positie: buiten;" betekent dat de opsommingstekens buiten het lijstitem vallen. Het begin van elke regel van een lijstitem wordt verticaal uitgelijnd. Dit is standaard:

  • Koffie - Een gebrouwen drankje bereid van gebrande koffiebonen...
  • Thee
  • Cokes

"lijst-stijl-positie: binnen;" betekent dat de opsommingstekens binnen het lijstitem staan. Omdat het deel uitmaakt van het lijstitem, maakt het deel uit van de tekst en drukt u op de tekst aan het begin:

  • Koffie - Een gebrouwen drankje bereid van gebrande koffiebonen...
  • Thee
  • Cokes

Voorbeeld

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

Standaardinstellingen verwijderen

Het list-style-type:nonepand kan ook worden gebruikt om de markeringen / kogels te verwijderen. Merk op dat de lijst ook standaardmarge en opvulling heeft. Om dit te verwijderen, voeg margin:0en toe padding:0aan <ul> of <ol>:

Voorbeeld

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Lijst - steno-eigenschap

De list-styleeigenschap is een steno-eigendom. Het wordt gebruikt om alle lijsteigenschappen in één aangifte in te stellen:

Voorbeeld

ul {
  list-style: square inside url("sqpurple.gif");
}

Bij gebruik van de steno-eigenschap is de volgorde van de eigenschapswaarden:

  • list-style-type(als een lijst-stijl-afbeelding is opgegeven, wordt de waarde van deze eigenschap weergegeven als de afbeelding om de een of andere reden niet kan worden weergegeven)
  • list-style-position(geeft aan of de lijstitemmarkeringen binnen of buiten de inhoudsstroom moeten verschijnen)
  • list-style-image(geeft een afbeelding aan als de lijstitemmarkering)

Als een van de bovenstaande eigenschapswaarden ontbreekt, wordt de standaardwaarde voor de ontbrekende eigenschap ingevoegd, indien aanwezig.

Stylinglijst met kleuren

We kunnen lijsten ook stylen met kleuren, om ze er wat interessanter uit te laten zien.

Alles wat aan de <ol>- of <ul>-tag wordt toegevoegd, heeft invloed op de hele lijst, terwijl eigenschappen die aan de <li>-tag worden toegevoegd, van invloed zijn op de afzonderlijke lijstitems:

Voorbeeld

ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}

Resultaat:

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola

Meer voorbeelden


Dit voorbeeld laat zien hoe u een lijst maakt met een rode linkerrand.


Dit voorbeeld laat zien hoe u een lijst met randen zonder opsommingstekens maakt.


Dit voorbeeld demonstreert alle verschillende lijstitemmarkeringen in CSS.

Test jezelf met oefeningen

Oefening:

Stel de lijststijl voor ongeordende lijsten in op "vierkant".

<style>
ul {
  : ;
}
</style>

<body>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
</body>

Alle CSS-lijsteigenschappen

Property Description
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies the position of the list-item markers (bullet points)
list-style-type Specifies the type of list-item marker

❮ Vorig Volgende ❯