HTML-listák összefoglalása
A HTML-ben két fő listatípus létezik - rendezett és rendezetlen .
A Rendezett listák (
decimal):
A rendezetlen listák (
disc.
A rendezett vagy rendezetlen listán belül minden listaelem a címkével jön létre .
Lista-specifikus stílusok
Három közös tulajdonság jellemző stílus jelent meg: list-style-type, list-style-positionés list-style-image. Van egy gyorsírású ingatlan is, amely mindháromat magában foglalja.
list-style-type
A rendezett és rendezetlen listákban megjelenő jelölők (vagy pontok) többféleképpen is stílusozhatók. A CSS tulajdonság a marker típusának stílusához a list-style-type. A list-style-typerendezett lista alapértelmezett értéke decimal, míg a nem rendezett lista alapértelmezett értéke disc.
Rendezett lista példa:
/* css */ ol { list-style-type: upper-roman; }
Rendezetlen lista példa:
/* css */ ul { list-style-type: square; }
Nincs jelölő példa:
/* css */ ul { list-style-type: none; }
A list-style-typetulajdonság elfogadott értékei a következők :
Rendezetlen:
- lemez ( alapértelmezett )
- kör
- négyzet
Rendelt:
- tizedes ( alapértelmezett )
- tizedes-vezető-nulla
- alsó-római
- felső-római
- alsó-görög
- alsó latin
- felső latin
- örmény
- grúz
- alsó-alfa
- felső-alfa
Egyéb:
- egyik sem
Megjegyzés: a fent felsorolt összes tulajdonságérték felhasználható mind a rendezett, mind a nem rendezett listák stílusához (pl .: rendezett squarelista listamarkerekkel).
list-style-position
list-style-positionszabályozza, hogy a listán marker jelenik belül vagy kívül a lista egyes elemeire elem ( ). A tulajdonság két értéket fogad el outside(alapértelmezett) vagy inside.
Helyezze outsideel a listaelem elem jelölőjét , és az egyes listaelemek minden szövegsora és alsora függőlegesen igazodik:
/* css */ ul { list-style-position: outside; /* default */ }
Helyezze el a jelölőt inside, és az egyes listaelemek első szövegsora behúzódik, hogy helyet biztosítson a jelölőnek. Ugyanazon listaelem bármely alsora igazodni fog a jelölővel, nem pedig az első szövegsorhoz:
/* css */ ul { list-style-position: inside; }
list-style-image
A list-style-imagetulajdonság kép URL-t fogad el a lista jelölő helyett. Az alapérték ez a tulajdonság none.
/* css */ ul { list-style-image: url(//url-to-image); }list-style Shorthand
list-style is a shorthand property for the three style properties listed above. The order of values list-style accepts is list-style-type, list-style-position, and list-style-image. If any value is omitted, the default value for that property will be used.
Example:
/* css */ ul { list-style: circle inside none; }
More List-Specific Styling
Ordered list tags also accept attributes that control the flow, count, or specific marker values of its list items. These include the start, reversed, and value attributes. See the MDN resources listed below for further details.
General Styling
List content can be styled just like other p or div elements. color, font-family, margin, padding, or border are just a few examples of properties that can be added to either the ul, ol, or li elements.
Note that any styles added to the ul or ol element will affect the entire list. Styles added directly to the li elements will affect the individual list items. In the example below, the border and background-color properties are styled differently between the list and list item elements:
/* css */ ul { list-style-type: circle; border: 2px solid blue; background-color: lightblue; } li { margin: 5px; background-color: lightyellow; }
List Spacing
You may notice extra spacing in front of the list items when list-style-type is set to none. Setting padding to 0 (or whatever spacing is preferred) on the list element will override this default padding.
/* css */ ul { list-style: none; padding: 0; } li { padding: 5px 10px; background-color: #EEEEEE; border: 1px solid #DDDDDD; }
Sources:
The links below were referenced in compiling information found in this article. Please visit them for further details about this topic.
More Information:
MDN - Styling Lists
W3Schools - CSS Lists
CSS Tricks - list-style