CSS -lyste
Ongeordende lyste:
- Koffie
- Tee
- Coke
- Koffie
- Tee
- Coke
Geordende lyste:
- Koffie
- Tee
- Coke
- Koffie
- Tee
- Coke
HTML-lyste en CSS-lys-eienskappe
In HTML is daar twee hooftipes lyste:
- ongeordende lyste (<ul>) - die lysitems is met kolpunte gemerk
- geordende lyste (<ol>) - die lysitems is met syfers of letters gemerk
Die CSS lys eienskappe laat jou toe om:
- Stel verskillende lysitemmerkers vir geordende lyste
- Stel verskillende lysitemmerkers vir ongeordende lyste
- Stel 'n prent as die lysitemmerker
- Voeg agtergrondkleure by lyste en lysitems
Verskillende lysitemmerkers
Die list-style-typeeiendom spesifiseer die tipe lysitemmerker.
Die volgende voorbeeld wys sommige van die beskikbare lysitemmerkers:
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;
}
Let wel: Sommige van die waardes is vir ongeordende lyste, en sommige vir geordende lyste.
'n Beeld as die lysitemmerker
Die list-style-imageeiendom spesifiseer 'n prent as die lysitemmerker:
Voorbeeld
ul
{
list-style-image: url('sqpurple.gif');
}
Plaas die lysitemmerkers
Die list-style-positioneiendom spesifiseer die posisie van die lys-item merkers (kolpunte).
"lys-styl-posisie: buite;" beteken dat die kolpunte buite die lysitem sal wees. Die begin van elke reël van 'n lysitem sal vertikaal in lyn gebring word. Dit is verstek:
- Koffie - 'n Gebrou drankie wat van geroosterde koffiebone berei word...
- Tee
- Coke
"lys-styl-posisie: binne;" beteken dat die kolpunte binne die lysitem sal wees. Aangesien dit deel van die lysitem is, sal dit deel van die teks wees en die teks aan die begin druk:
- Koffie - 'n Gebrou drankie wat van geroosterde koffiebone berei word...
- Tee
- Coke
Voorbeeld
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Verwyder verstekinstellings
Die list-style-type:noneeiendom kan ook gebruik word om die merkers/koeëls te verwyder. Let daarop dat die lys ook verstekmarge en opvulling het. Om dit te verwyder, voeg margin:0en padding:0by <ul> of <ol>:
Voorbeeld
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Lys - Snelskrif eiendom
Die list-styleeiendom is 'n snelskrif-eiendom. Dit word gebruik om al die lys eienskappe in een verklaring op te stel:
Voorbeeld
ul
{
list-style: square inside url("sqpurple.gif");
}
Wanneer die snelskrif-eienskap gebruik word, is die volgorde van die eiendomswaardes:
list-style-type(as 'n lys-styl-prent gespesifiseer word, sal die waarde van hierdie eienskap vertoon word as die prent om een of ander rede nie vertoon kan word nie)list-style-position(spesifiseer of die lysitemmerkers binne of buite die inhoudvloei moet verskyn)list-style-image(spesifiseer 'n prent as die lysitemmerker)
Indien een van die eiendomswaardes hierbo ontbreek, sal die verstekwaarde vir die ontbrekende eiendom ingevoeg word, indien enige.
Stilering Lys Met Kleure
Ons kan ook lyste met kleure styl, om dit 'n bietjie meer interessant te laat lyk.
Enigiets wat by die <ol>- of <ul>-merker gevoeg word, beïnvloed die hele lys, terwyl eienskappe wat by die <li>-merker gevoeg word, die individuele lysitems sal beïnvloed:
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:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
Meer voorbeelde
Hierdie voorbeeld demonstreer hoe om 'n lys met 'n rooi linkerrand te skep.
Hierdie voorbeeld demonstreer hoe om 'n omrandingslys sonder kolpunte te skep.
Hierdie voorbeeld demonstreer al die verskillende lys-item merkers in CSS.
Alle CSS lys eienskappe
| 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 |