I noen tilfeller er vi pålagt å fjerne kulene fra uordnede og ordnede lister. Fjerning av listepunktene er ikke en kompleks oppgave ved å bruke CSS. Det kan enkelt gjøres ved å sette CSS liste-stil eller liste-stil-type eiendom til ingen .
De liste-stil-type CSS-egenskapen brukes til å angi markøren (som en plate, et tegn eller den egendefinerte tellerstilen) for en liste elementelement. Denne CSS-egenskapen hjelper oss å lage listen uten kuler. Den kan bare brukes på de elementene hvis visningsverdi er satt til liste-element. De liste-stil-type egenskapen er arvet, så den kan brukes på det overordnede elementet (som eller
) for å få den til å gjelde for alle listeelementer.
Som standard er de ordnede listeelementene nummerert med arabiske tall (1, 2, 3, osv.), og elementene i en uordnet liste er merket med runde kuler (•). De liste-stil-type CSS-egenskapen lar oss endre standard listetype markør til en hvilken som helst annen type som firkant, sirkel, romertall, latinske bokstaver og mange flere.
Hvis vi setter verdien til ingen , vil det fjerne markørene/kulene. I stedet for å fjerne kulene i en liste, kan vi erstatte dem med bildene. Det gjør siden visuelt mer attraktiv. Det kan gjøres ved å bruke liste-stil-bilde eiendom.
La oss forstå hvordan du fjerner kulepunkter ved å bruke et eksempel.
Eksempel
I dette eksemplet bruker vi både ordnede og uordnede lister og bruker liste-stil-type eiendom med verdien ingen for å fjerne punktene til listeelementene.
ol { list-style-type: none; font-weight: bold; font-size: 20px; } ul { list-style-type: none; font-weight: bold; font-size: 20px; } <h2>Ordered list</h2> <ol> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ol> <h2>Unordered list</h2> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul> Test det nå Produksjon
