Учебники

CSS — списки

Июль 11, 2018

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

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

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

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

  • List-style-image определяет изображение для маркера, а не маркера или числа.

  • Стиль списка служит сокращением для предыдущих свойств.

  • Смещение маркера указывает расстояние между маркером и текстом в списке.

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

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

List-style-image определяет изображение для маркера, а не маркера или числа.

Стиль списка служит сокращением для предыдущих свойств.

Смещение маркера указывает расстояние между маркером и текстом в списке.

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

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

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

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

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

никто

Не Доступно

2

диск (по умолчанию)

Заполненный круг

3

круг

Пустой круг

4

площадь

Заполненный квадрат

никто

Не Доступно

диск (по умолчанию)

Заполненный круг

круг

Пустой круг

площадь

Заполненный квадрат

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

Значение Описание пример
десятичный Число 1,2,3,4,5
десятичное ведущий нуля 0 перед числом 01, 02, 03, 04, 05
низший-альфа Строчные буквенно-цифровые символы а, б, в, д, е
Верхняя-альфа Прописные буквенно-цифровые символы A, B, C, D, E
низший романский Строчные римские цифры I, II, III, IV, V
Верхняя-римской Прописные римские цифры I, II, III, IV, V
низший греческий Маркер нижнегреческий альфа, бета, гамма
ниже латынь Маркер нижне-латинский а, б, в, д, е
Верхняя латынь Маркер верхне-латинский A, B, C, D, E
иврит Маркер традиционной еврейской нумерации
армянин Маркер традиционной армянской нумерации
грузинский Маркер традиционной грузинской нумерации
Дальневосточные-идеографических Маркер простых идеографических чисел
хирагана Маркер хирагана а, я, у, е, о, ка, ки
катакана Маркер катакана А, Я, У, Е, О, КА, КИ
хираган-Iroha Маркер хирагана-ироха я, ро, ха, ни, хо, он, чтобы
катакан-Iroha Маркер катакана-ироха Я, РО, ХА, НИ, ХО, ОН, ТО

Вот пример —

Live Demo

<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

никто

Не Доступно

2

внутри

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

3

вне

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

никто

Не Доступно

внутри

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

вне

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

Вот пример —

Live Demo 

<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

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

Вот пример —

Live Demo 

<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>

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

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

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

Вот пример —

Live Demo 

<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.

Вот пример —

Live Demo 

<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>

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

42
Share: