CSS - Списки

Списки очень полезны при передаче набора пронумерованных или маркированных пунктов. В этой главе вы узнаете, как управлять типом, положением, стилем списка и т. Д. С помощью CSS.

У нас есть следующие пять свойств CSS, которые можно использовать для управления списками:

  • В list-style-type позволяет управлять формой или внешним видом маркера.

  • В list-style-position указывает, должна ли длинная точка, переходящая во вторую строку, выровняться с первой линией или начинаться под началом маркера.

  • В list-style-image указывает изображение для маркера, а не точку или число.

  • В list-style служит сокращением для предыдущих свойств.

  • В marker-offset указывает расстояние между маркером и текстом в списке.

Теперь посмотрим, как использовать эти свойства на примерах.

Свойство типа списка

Свойство list-style-type позволяет вам управлять формой или стилем маркера (также известного как маркер) в случае неупорядоченных списков и стилем нумерации символов в упорядоченных списках.

Вот значения, которые можно использовать для неупорядоченного списка -

Sr.No. Значение и описание
1

none

NA

2

disc (default)

Закрашенный круг

3

circle

Пустой круг

4

square

Закрашенный квадрат

Вот значения, которые можно использовать для упорядоченного списка -

Значение Описание пример
десятичный номер 1,2,3,4,5
десятичный ведущий ноль 0 перед числом 01, 02, 03, 04, 05
нижняя альфа Строчные буквенно-цифровые символы а, б, в, г, д
верхняя альфа Буквенно-цифровые символы в верхнем регистре A, B, C, D, E
нижний римский Строчные римские цифры я, II, III, IV, V
верхний римский Римские цифры в верхнем регистре I, II, III, IV, V
нижнегреческий Маркер нижнегреческий альфа, бета, гамма
нижнелатинский Маркер нижнелатинский а, б, в, г, д
верхнелатинский Маркер верхнелатинский A, B, C, D, E
иврит Маркер - традиционная нумерация на иврите.  
армянский Маркер - традиционная армянская нумерация.  
грузинский Маркер - традиционная грузинская нумерация.  
cjk-идеографический Маркер - простые идеографические числа  
хирагана Маркер - хирагана а, я, у, е, о, ка, ки
катакана Маркер - катакана A, I, U, E, O, KA, KI
хирагана-ироха Маркер - хирагана-ироха я, ро, ха, ни, хо, он, чтобы
катакана-ироха Маркер - катакана-ироха Я, RO, HA, NI, HO, HE, TO

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-roman;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Это даст следующий результат -

Свойство list-style-position

Свойство list-style-position указывает, должен ли маркер появляться внутри или за пределами поля, содержащего маркеры. Он может иметь одно из двух значений -

Sr.No. Значение и описание
1

none

NA

2

inside

Если текст переходит на вторую строку, он переносится под маркер. Он также будет отображаться с отступом в том месте, где текст начинался бы, если бы список имел значение external.

3

outside

Если текст переходит на вторую строку, текст будет выровнен по началу первой строки (справа от маркера).

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle; list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Это даст следующий результат -

Свойство list-style-image

Изображение в стиле списка позволяет вам указать изображение, чтобы вы могли использовать свой собственный стиль маркера. Синтаксис аналогичен свойству background-image с буквами url, начинающимися со значения свойства, за которыми следует URL в скобках. Если он не находит данное изображение, используются маркеры по умолчанию.

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <ul>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Это даст следующий результат -

Свойство в стиле списка

Стиль списка позволяет вам указать все свойства списка в одном выражении. Эти свойства могут появляться в любом порядке.

Вот пример -

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style: inside square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Это даст следующий результат -

Свойство смещения маркера

Свойство marker-offset позволяет вам указать расстояние между маркером и текстом, относящимся к этому маркеру. Его значение должно быть длиной, как показано в следующем примере -

К сожалению, это свойство не поддерживается в IE 6 и Netscape 7.

Вот пример -

<html>
   <head>
   </head>

   <body>
      <ul style = "list-style: inside square; marker-offset:2em;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Это даст следующий результат -