Как да стилизирате списъци с CSS

Обобщение на HTML списъци

Има два основни типа списъци в HTML - Подредени и Неподредени .

В подредени списъци (

    ), редът на елементите от списъка е важен. Елементите могат да се показват в ред по номер, римска цифра, буквена цифра или друг тип маркер. Маркерът по подразбиране за подредени списъци е число (или decimal):

    В неподредени списъци (

      ), редът на елементите от списъка няма значение. Елементите се показват във формат на символи. Маркерът по подразбиране за неподредени списъци е кръгла точка или disc.

      Всеки елемент от списъка в подреден или неподреден списък се създава с маркера.

      Специфични за списъка стилове

      Има три общи свойства, специфични за стайлинг списъци: list-style-type, list-style-position, и list-style-image. Има и стенографско свойство, което включва и трите.

      list-style-type

      Маркерите (или точките), които се появяват в подредени и неподредени списъци, могат да бъдат стилизирани по различни начини. CSS свойството за стилизиране на типа маркер е list-style-type. Стойността по подразбиране list-style-typeза подреден списък е decimal, докато по подразбиране за неподреден списък е disc.

      Пример за подреден списък:

      /* css */ ol { list-style-type: upper-roman; }

      Пример за неподреден списък:

      /* css */ ul { list-style-type: square; }

      Няма пример за маркер:

      /* css */ ul { list-style-type: none; }

      Приетите стойности за list-style-typeсвойството включват:

      Неподредени:

      • диск ( по подразбиране )
      • кръг
      • квадрат

      Подредени:

      • десетична ( по подразбиране )
      • десетична водеща-нула
      • долноримски
      • горноримски
      • долногръцки
      • долнолатински
      • горнолатински
      • арменски
      • грузински
      • долно-алфа
      • горна алфа

      Други:

      • нито един

      Забележка: всички стойности на свойствата, изброени по-горе, могат да се използват за стилизиране както на подредени, така и на неподредени списъци (напр. Подреден списък с squareмаркери на списъка).

      list-style-position

      list-style-positionконтролира дали маркерът на списъка се появява във или извън всеки елемент от списъчен елемент ( ). Свойството приема две стойности outside(по подразбиране) или inside.

      Позиционирайте маркера outsideна елемента на списъчния елемент и всички текстови редове и подредове на всеки елемент от списъка ще се подравнят вертикално:

      /* css */ ul { list-style-position: outside; /* default */ }

      Позиционирайте маркера insideи първият текстов ред на всеки елемент от списъка ще бъде отстъпен, за да освободи място за маркера. Всички подлинии на същия елемент от списъка ще се подравнят с маркера, а не с първия текстов ред:

      /* css */ ul { list-style-position: inside; }

      list-style-image

      В list-style-imageимота приема URL на изображение на мястото на списък маркер. Стойността по подразбиране за това свойство е 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