CSS-listor är mycket hjälpsamma för att nå en uppsättning antingen numrerade eller punktade punkter. Den här artikeln visar hur du styr typ, position, stil för använder CSS. Följande tips kommer att behandlas här,
- CSS-egenskaper
- List-typ-typ egendom
- CSS-listor: Exempelprogram
- Markörvärden förI egenskapen för liststilsposition
Så låt oss komma igång då,
CSS-listor
CSS-egenskaper
Det finns fem olika CSS-egenskaper där du kan använda den för att styra listor:
- List-style-type: Det låter oss kontrollera formen eller utseendet på markören.
- List-style-position: Den anger att en lång punkt behövs för att linda till en andra rad eller ska rikta in sig med första raden eller börja med med markören.
- List-style-image: Den anger att en bild för markören ska läggas till eller göras mer attraktiv istället för kulorna eller de numrerade punkterna.
- Liststil: Den visar förkortningen till föregående egenskaper.
- Markörförskjutning: Den anger avståndet mellan markören och texten som anges i listan.
Här är den vanligaste listan: list-style-type och list-style-position. Det förklaras nedan
Fortsätter med den här artikeln om CSS-listor
List-typ-typ egendom
I egenskapen typ av liststil kan du styra formen och stilen för punktpunkterna eller markören i det oordnade listfallet. I beställt listfall är det numrerande tecken.
Nedanstående tabell som representerar de oordnade listorna:
| Värde | Beskrivning |
| Ingen | NA |
| Skiva | Den fylls i cirkeln. (Standard) |
| Cirkel | Det är en tom cirkel. |
| Fyrkant | Den är fylld i torget. |
Nedanstående tabell som representerar för de beställda listorna:
| Värde | Beskrivning | Exempel |
| Decimal | Det är ett nummer | 1,4,3 |
| Decimal ledande noll | 0 före det faktiska antalet | 01, 04, 03 |
| Lägre alfa | Det är små bokstäver. | a, b, c, d |
| Övre alfa | Det är alfanumeriska tecken med versaler. | A, B, C, D |
| Nedre romerska | Det är små bokstäver. | i, ii, iii, iv, v |
| Övre romerska | Det är versaler med romerska siffror. | I, II, III, IV, V |
| Lägre-grekiska | Markören är på lägre grekiska | alfa, gamma |
| Nedre latin | Markör är på lägre latin | a, b, c, d |
| Övre latin | Markören är på övre latin | A, B, C, D |
Fortsätter med den här artikeln om CSS-listor
CSS-listor: Exempelprogram
- Java
- Pytonorm
- Vinkel
- Java
- Pytonorm
- Vinkel
- Java
- Pytonorm
- Vinkel
- Java
- Pytonorm
- Vinkel
- Java
- Pytonorm
- Vinkel
Produktion
java djupkopia mot grunt kopia
Fortsätter med den här artikeln om CSS-listor
List-stil-position Egendom
Markörvärden för i list-stil-position egendom
I egenskapen för liststilsposition visar den att markören ska visas inom eller utanför rutan som innehåller punktpunkterna. Detta kan ha ett av de två värdena:
| Värde | Beskrivning |
| Ingen | NA |
| Inuti | I det här fallet, om texten går i andra raden, kommer texten att vikas under markören. Det visar också var texten skulle ha börjat om listorna hade en dal utanför. |
| utanför | I det här fallet, om texten går in i den andra raden, kommer texten att justeras med början på den första raden. |
Exempel:
- Matte
- Samhällskunskap
- Fysik
- Matte
- Samhällskunskap
- Fysik
- Matte
- Samhällskunskap
- Fysik
- Matte
- Samhällskunskap
- Fysik
Produktion
Detta leder oss till slutet av den här artikeln om CSS-listor.
Kolla in vår som kommer med instruktörsledad liveutbildning och verklig projektupplevelse. Denna utbildning gör dig skicklig för att arbeta med back-end och front-end webbteknik. Det inkluderar utbildning om webbutveckling, jQuery, Angular, NodeJS, ExpressJS och MongoDB.
Har du en fråga till oss? Vänligen nämna det i kommentarfältet i artikeln så återkommer vi till dig.