Компьютерапия

Списки в CSS

Категория: Основы CSS
Просмотров: 1636

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

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

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

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

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

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

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

Свойство Описание
noneНе Доступно
disc (default)Заполненный круг
circleПустой круг
squareЗаполненная площадь

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

Свойство Описание Пример
decimalЧисло1,2,3,4,5
decimal-leading-zero0 до номера01, 02, 03, 04, 05
lower-alphaСтрочные буквенно-цифровые символыa, b, c, d, e
upper-alphaПрописные буквенно-цифровые символыA, B, C, D, E
lower-romanСтрочные римские цифрыi, ii, iii, iv, v
upper-romanВерхние римские цифрыI, II, III, IV, V
lower-greekМаркер - нижнегреческийальфа, бета, гамма
lower-latinМаркер - латинскийa, b, c, d, e
upper-latinМаркер - верхний латинскийA, B, C, D, E
hebrewМаркер - это традиционная ивритская нумерация
armenianМаркер - это традиционная армянская нумерация
georgianМаркер - это традиционная грузинская нумерация
cjk-ideographicМаркер - это простые идеографические номера
hiraganaМаркер - хираганаa, i, u, e, o, ka, ki
katakanaМаркер - катаканаA, I, U, E, O, KA, KI
hiragana-irohaМаркер - хирагана-ирохаi, ro, ha, ni, ho, he, to
katakana-irohaМаркер - катакана-ирохаI, 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 указывает, должен ли маркер отображаться внутри или снаружи поля, содержащего точки маркера. Он может иметь один из двух значений -

Свойство Описание
noneНе Доступно
insideЕсли текст перейдет во вторую строку, текст будет помещен под маркером. Он также будет выглядеть отступом до того места, где текст начинался бы, если бы список имел значение снаружи.
outsideЕсли текст переместится во вторую строку, текст будет выровнен с началом первой строки (справа от маркера).

Вот пример -

< html>
   < head>
   < /head>
  
   < body>
      < ul style="list-style-type:circle; list-style-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-style-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-адрес в скобках. Если он не находит заданное изображение, используются пули по умолчанию.

Вот пример -

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

Это приведет к следующему результату -


Свойство list-style

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

Вот пример -

< 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

Свойство 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>

Это приведет к следующему результату -





Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok