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>Это даст следующий результат -