Основы работы с CSS

Списки в CSS

Разбить на страницы
Показывать лекцию целиком

Параметры списков в CSS позволяют разместить и изменять маркеры элементов списка, задавать изображение в качестве маркера элемента списка.

Примеры:

  • Этот пример показывает, как задать различные маркеры элементов списка.
    <html>
<head>
<style type="text/css">
ol.no {list-style-type: none}
ul.ds {list-style-type: disc}
ol.sqr {list-style-type: square}
ul.crl {list-style-type: circle}
</style>
</head>

<body>
<ol class="no">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>

<ul class="ds">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>

<ol class="sqr">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>

<ul class="crl">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>

</body>

</html>
  • Этот пример показывает, как задать различные маркеры элементов списка.
    <html>
<head>
<style type="text/css">
ul.dec {list-style-type: decimal}
ol.lwrm {list-style-type: lower-roman}
ul.uprm {list-style-type: upper-roman}
ol.lwalph {list-style-type: lower-alpha}
ul.upalph {list-style-type: upper-alpha}
</style>
</head>

<body>

<ol class="lwalph">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>

<ul class="upalph">
<li>Первый элемент</li>
<li>Чай</li>
<li>Третий элемент</li>
</ul>

<ol class="lwrm">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>

<ul class="uprm">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>

<ul class="dec">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>

</body>

</html>
  • Этот пример показывает, как задать изображение в качестве маркера элемента списка.
    <html>
<head>
<style type="text/css">
ol 
{
list-style-image: url("http://www.intuit.ru/ssi/html5/img/logo.png")
}
</style>
</head>

<body>
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
</ol>
</body>

</html>
  • Этот пример показывает, как можно задать расположение маркера элемента списка.
    <html>
<head>
<style type="text/css">
ol.in
{
list-style-position: inside
}

ul.out
{
list-style-position: outside
}
</style>
</head>

<body>
<ol class="in">
<li>Это первый элемент списка</li>
<li>Это второй элемент списка</li>
<li>Это третий элемент списка</li>
<pre>Cписок имеет <i><u>list-style-position</u></i> = "<b>inside</b>"</pre>
</ol>

<ul class="out">
<li>Это первый элемент списка</li>
<li>Это второй элемент списка</li>
<li>Это третий элемент списка</li>
</ul>
<pre>Список имеет <i><u>list-style-position</u></i> = "<b>outside</b>"</pre>
</body>
</html>
  • Пример показывает, как задать все параметры списка в одном объявлении.
    <html>
<head>
<style type="text/css">
ol 
{
list-style: disc outside url("http://www.intuit.ru/departament/speciality/image.gif")
}
</style>
</head>

<body>
<ol>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ol>
</body>

</html>
    •

    Параметры списков в CSS

    Как было отмечено выше, параметры списков в CSS позволяют разместить и изменять маркеры элементов списка, задавать изображение в качестве маркера элемента списка.

    Поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.

    Параметр Описание Значения IE F N W3C
    list-style Параметр для задания всех характеристик списка в одном объявлении list-style-type 4 1 6 1
    list-style-position
    list-style-image
    list-style-image Задает изображение в качестве маркера элемента списка none 4 1 6 1
    url
    list-style-position Задает размещение в списке маркера элемента списка inside 4 1 6 1
    outside
    list-style-type Задает тип маркера элемента списка none 4 1 4 1
    disc
    circle
    square
    decimal
    decimal-leading-zero
    lower-roman
    upper-roman
    lower-alpha
    upper-alpha
    lower-greek
    lower-latin
    upper-latin
    hebrew
    armenian
    georgian
    cjk-ideographic
    hiragana
    katakana
    hiragana-iroha
    katakana-iroha
    marker-offset auto 1 7 2
    length

    Списки в CSS: подробное рассмотрение

    Параметр 'list-style'

    Данный параметр определяет все характеристики списка в одном объявлении.

    Наследование:да.

    Может принимать следующие значения:

    Значение Описание
    list-style Задает характеристики списка
    list-style-type
    list-style-position
    list-style-image

    Примеры:

    ol
{
list-style: square inside url("www.intuit.ru/departament/image.gif")
} 

ul
{
list-style: circle inside
}

    Параметр 'list-style-image'

    Данный параметр позволяет заменить маркер элемента списка указанным изображением. Необходимо определять параметр "list-style-type" на тот случай, если изображение будет недоступно.

    Наследование:да.

    Может принимать следующие значения:

    Значение Описание
    url Путь доступа к изображению
    None Изображение не выводится

    Пример:

    ul
{
list-style-image: url("www.intuit.ru/speciality/image.gif");
list-style-type: square
}

    Параметр 'list-style-position'

    Параметр определяет способ размещения маркера элемента списка.

    Наследование:да.

    Может принимать следующие значения:

    Значение Описание
    inside Маркер смещен внутрь текста
    outside Маркер располагается слева от текста

    Пример:

    ul
{
list-style-position: outside
}

    Параметр 'list-style-type'

    Данный параметр задает тип маркера элемента списка.

    Наследование:да.

    Может принимать следующие значения:

    ЗначениеОписание
    none Без маркера
    disc Маркер — закрашенный круг
    circle Маркер — окружность
    square Маркер — закрашенный квадрат
    decimal Маркер — число
    decimal-leading-zero Маркер — число с добавленным ведущим нулем (01, 02, 03 и т.д.)
    lower-roman Маркер — римские цифры, представленные строчными буквами (i, ii, iii, iv, v и т.д. )
    upper-roman Маркер — римске цифры, представленные прописными буквами (I, II, III, IV, V и т.д.)
    lower-alpha Маркер — латинские строчные буквы (a, b, c, d, e и т.д.)
    upper-alpha Маркер —- латинские прописные буквы (A, B, C, D, E и т.д.)
    lower-greek Маркер — греческие прописные буквы (альфа, бета, гамма и т.д.)
    lower-latin Маркер — латинские строчные буквы (a, b, c, d, e и т.д.)
    upper-latin Маркер — латинские прописные буквы (A, B, C, D, E и т.д.)
    hebrew Традиционная еврейская нумерация
    armenian Традиционная армянская нумерация
    georgian Традиционная грузинская нумерация (an, ban, gan, и т.д.)
    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 и т.д.

    Примеры:

    ol
{
list-style-type: circle
}

ul
{
list-style-type: decimal
}
    Страницы:

    Параметры списков в CSS позволяют разместить и изменять маркеры элементов списка, задавать изображение в качестве маркера элемента списка.

    Примеры:

  • Этот пример показывает, как задать различные маркеры элементов списка.
    <html>
<head>
<style type="text/css">
ol.no {list-style-type: none}
ul.ds {list-style-type: disc}
ol.sqr {list-style-type: square}
ul.crl {list-style-type: circle}
</style>
</head>

<body>
<ol class="no">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>

<ul class="ds">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>

<ol class="sqr">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>

<ul class="crl">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>

</body>

</html>
  • Этот пример показывает, как задать различные маркеры элементов списка.
    <html>
<head>
<style type="text/css">
ul.dec {list-style-type: decimal}
ol.lwrm {list-style-type: lower-roman}
ul.uprm {list-style-type: upper-roman}
ol.lwalph {list-style-type: lower-alpha}
ul.upalph {list-style-type: upper-alpha}
</style>
</head>

<body>

<ol class="lwalph">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>

<ul class="upalph">
<li>Первый элемент</li>
<li>Чай</li>
<li>Третий элемент</li>
</ul>

<ol class="lwrm">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>

<ul class="uprm">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>

<ul class="dec">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>

</body>

</html>
  • Этот пример показывает, как задать изображение в качестве маркера элемента списка.
    <html>
<head>
<style type="text/css">
ol 
{
list-style-image: url("http://www.intuit.ru/ssi/html5/img/logo.png")
}
</style>
</head>

<body>
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
</ol>
</body>

</html>
  • Этот пример показывает, как можно задать расположение маркера элемента списка.
    <html>
<head>
<style type="text/css">
ol.in
{
list-style-position: inside
}

ul.out
{
list-style-position: outside
}
</style>
</head>

<body>
<ol class="in">
<li>Это первый элемент списка</li>
<li>Это второй элемент списка</li>
<li>Это третий элемент списка</li>
<pre>Cписок имеет <i><u>list-style-position</u></i> = "<b>inside</b>"</pre>
</ol>

<ul class="out">
<li>Это первый элемент списка</li>
<li>Это второй элемент списка</li>
<li>Это третий элемент списка</li>
</ul>
<pre>Список имеет <i><u>list-style-position</u></i> = "<b>outside</b>"</pre>
</body>
</html>
  • Пример показывает, как задать все параметры списка в одном объявлении.
    <html>
<head>
<style type="text/css">
ol 
{
list-style: disc outside url("http://www.intuit.ru/departament/speciality/image.gif")
}
</style>
</head>

<body>
<ol>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ol>
</body>

</html>
    •

    Параметры списков в CSS

    Как было отмечено выше, параметры списков в CSS позволяют разместить и изменять маркеры элементов списка, задавать изображение в качестве маркера элемента списка.

    Поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.

    Параметр Описание Значения IE F N W3C
    list-style Параметр для задания всех характеристик списка в одном объявлении list-style-type 4 1 6 1
    list-style-position
    list-style-image
    list-style-image Задает изображение в качестве маркера элемента списка none 4 1 6 1
    url
    list-style-position Задает размещение в списке маркера элемента списка inside 4 1 6 1
    outside
    list-style-type Задает тип маркера элемента списка none 4 1 4 1
    disc
    circle
    square
    decimal
    decimal-leading-zero
    lower-roman
    upper-roman
    lower-alpha
    upper-alpha
    lower-greek
    lower-latin
    upper-latin
    hebrew
    armenian
    georgian
    cjk-ideographic
    hiragana
    katakana
    hiragana-iroha
    katakana-iroha
    marker-offset auto 1 7 2
    length

    Списки в CSS: подробное рассмотрение

    Параметр 'list-style'

    Данный параметр определяет все характеристики списка в одном объявлении.

    Наследование:да.

    Может принимать следующие значения:

    Значение Описание
    list-style Задает характеристики списка
    list-style-type
    list-style-position
    list-style-image

    Примеры:

    ol
{
list-style: square inside url("www.intuit.ru/departament/image.gif")
} 

ul
{
list-style: circle inside
}

    Параметр 'list-style-image'

    Данный параметр позволяет заменить маркер элемента списка указанным изображением. Необходимо определять параметр "list-style-type" на тот случай, если изображение будет недоступно.

    Наследование:да.

    Может принимать следующие значения:

    Значение Описание
    url Путь доступа к изображению
    None Изображение не выводится

    Пример:

    ul
{
list-style-image: url("www.intuit.ru/speciality/image.gif");
list-style-type: square
}

    Параметр 'list-style-position'

    Параметр определяет способ размещения маркера элемента списка.

    Наследование:да.

    Может принимать следующие значения:

    Значение Описание
    inside Маркер смещен внутрь текста
    outside Маркер располагается слева от текста

    Пример:

    ul
{
list-style-position: outside
}

    Параметр 'list-style-type'

    Данный параметр задает тип маркера элемента списка.

    Наследование:да.

    Может принимать следующие значения:

    ЗначениеОписание
    none Без маркера
    disc Маркер — закрашенный круг
    circle Маркер — окружность
    square Маркер — закрашенный квадрат
    decimal Маркер — число
    decimal-leading-zero Маркер — число с добавленным ведущим нулем (01, 02, 03 и т.д.)
    lower-roman Маркер — римские цифры, представленные строчными буквами (i, ii, iii, iv, v и т.д. )
    upper-roman Маркер — римске цифры, представленные прописными буквами (I, II, III, IV, V и т.д.)
    lower-alpha Маркер — латинские строчные буквы (a, b, c, d, e и т.д.)
    upper-alpha Маркер —- латинские прописные буквы (A, B, C, D, E и т.д.)
    lower-greek Маркер — греческие прописные буквы (альфа, бета, гамма и т.д.)
    lower-latin Маркер — латинские строчные буквы (a, b, c, d, e и т.д.)
    upper-latin Маркер — латинские прописные буквы (A, B, C, D, E и т.д.)
    hebrew Традиционная еврейская нумерация
    armenian Традиционная армянская нумерация
    georgian Традиционная грузинская нумерация (an, ban, gan, и т.д.)
    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 и т.д.

    Примеры:

    ol
{
list-style-type: circle
}

ul
{
list-style-type: decimal
}
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^