Monitasoisen luettelon luominen HTML:llä on vaikeampaa kuin monitasoisen luettelon luominen tekstinkäsittelyohjelmassa, mutta se voidaan silti saavuttaa HTML:llä ja CSS:llä. Alla on ohjeet monitasoisen luettelon luomiseen HTML:ssä CSS:n avulla.
Ennen kuin kokeilet seuraavia vaiheita, ymmärrä, että monitasoisen luettelon luominen HTML-kielellä sinun on upotettava luettelo toiseen luettelokohteeseen. Lisäksi, koska HTML:ssä on vain joko luettelomerkki tai numeroluettelo, jos haluat muuttaa luettelon tyyppiä, sinun on käytettävä CSS:ää uuden tyylityypin luomiseen.
HTML esimerkki
Alla on esimerkki siitä, kuinka monitasoinen luettelo voidaan tehdä HTML-kielellä HTML-koodilla ja HTML-tunnisteissa määritellyllä CSS-tyylillä. Tässä esimerkissä meillä on kaksi luettelokohdetta ja toisessa luettelokohteessa toinen järjestetty luettelo, jossa on alempi aakkostyyppinen listatyyli, jotta voidaan luoda a-, b- jne. luettelotyyli.
<ol>
<li>First</li>
<li>Second
<ol style="list-style-type: lower-alpha; padding-bottom: 0;"> <li style="margin-left:2em">Sub of Second</li> <li style="margin-left:2em; padding-bottom: 0;">Another Sub</li> </ol>
</li>
<li>Third</li>
<li>Fourth </li>
</ol>
Yllä olevassa esimerkissä käytämme lisätäyttöä ja marginaalia sopeutuaksemme globaaleihin CSS-arvoihimme antaaksemme esimerkin siitä, kuinka voit lisätä tai vähentää sisennystä.
Esimerkki tuotosta
- Ensimmäinen
- Toinen
- Toisen alapuolella
- Toinen Sub
- Kolmanneksi
- Neljäs
CSS ja HTML esimerkki
Yllä oleva ratkaisu toimii hyvin, jos sinun tarvitsee luoda monitasoinen luettelo vain muutaman kerran. Jos kuitenkin aiot sisältää useita monitasoisia luetteloita koko sivustossasi, on parempi idea sisällyttää mukaan alla olevan esimerkin kaltainen CSS-koodi. Esimerkissämme loimme kaksi luokkaa nimeltä “roman” ja “square” ja kutsumme niitä HTML-koodissa.
CSS-koodi
<style type="text/css">
.roman {
list-style-type: lower-roman;
}
.square {
list-style-type: square;
margin-left: -2em;
}
</style>
HTML-koodi
<ul class="roman">
<li>First</li>
<li>Second
<ul class="square">
<li>Sub of Second</li>
<li>Another Sub</li>
</ul>
</li>
<li>Third</li>
<li>Fourth</li>
</ul>
Esimerkki tuotosta
- Ensimmäinen
- Toinen
- Toisen alapuolella
- Toinen Sub
- Kolmanneksi
- Neljäs
Käytettävissä olevat CSS-listatyylityyppiset arvot
Alla on luettelo muista CSS-luettelotyyppisistä arvoista, joita voidaan käyttää aiemmin näyttämiemme esimerkkien sijaan. Olemme myös lisänneet lyhyen kuvauksen jokaisesta arvosta.
Kaikki nämä arvot eivät toimi tai näy samoin kaikissa selaimissa.
levy – Pieni yhtenäinen ympyrä (näkyy yllä).
ympyrä – Pieni tyhjä ympyrä (näkyy yllä).
neliö – kiinteä neliö.
desimaali – 1:llä alkava desimaaliluku. (näkyy yllä).
decimal-leading-zero – 0:lla alkava desimaaliluku (esim. 01, 02, 03 jne.).
pieni-roomalainen – Pienet roomalaiset numerot, jotka alkavat kirjaimella “i.”.
ylä-roomalainen – Isot roomalaiset numerot, jotka alkavat kirjaimella “I”.
pieni kreikka – pienet kreikka.
alalatina – Latinalaiset pienet kirjaimet
isot latinalaiset – latinalaiset isot kirjaimet
armenia – Perinteinen armenialainen numerointi
georgia – Perinteinen Georgian numerointi
pienet aakkoset – pienet aakkoskirjaimet, jotka alkavat kirjaimella “a”. (näkyy yllä).
ylempi aakkoset – Isot aakkoskirjaimet, jotka alkavat kirjaimella “A”.
ei mitään – näytä mitään.
