Списки очень полезны при передаче набора нумерованных или маркеров. В этой главе рассказывается о том, как управлять типом, положением, стилем и т.д., Используя 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-zero | 0 до номера | 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>
Это приведет к следующему результату -
