НОУ ИНТУИТ | Основы работы с CSS. Лекция 9: Списки в CSS

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 31.10.2006 | Доступ: свободный | Студентов: 12243 / 4805 | Оценка: 4.35 / 4.14 | Длительность: 08:43:00

Темы: Интернет-технологии, Программирование

Специальности: Программист, Разработчик интернет-проектов

|

Вам нравится? Нравится 78 студентам

| Поделиться |

Поддержать курс

| Скачать электронную книгу

Аннотация: Рассматриваются параметры списков в CSS и способы задания маркеров для элементов списка.

Ключевые слова: css, 'list-style-type', 'list-style-position', 'list-style-image', decimal-leading-zero, lower-roman, upper-roman, lower-greek, 'lower-latin', upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, 'marker-offset', BAN, GAN

Параметры списков в 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

Примеры:

Вопросы и ответы