list-style-position | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 11.12.2016
Главная » Справочник CSS3 » Свойства списка


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


list-style-position | Свойство CSS

Свойство list-style-position позиционирует маркер списка.




Свойство list-style-position устанавливает положение маркера относительно текста.Маркеры могут быть в зоне содержательной части,или вынесены за её пределы.Имейте в виду,свойство автоматически добавляет отступы.Дополнительно,существует порядок установки расширенных свойств.Порядок установки расширенных свойств:
1.list-style-type
2.list-style-position
3.list-style-image
Свойство применимо к элементам списка,создано в версии CSS1 но проходит валидацию согласно версии CSS3.




Дополнительные свойства list-style-position


Свойство
Описание
list-style-typeУстанавливает стиль списку на основании именных значений
list-style-imageМаркером служит изображение



Дополнительные значения list-style-position


Значение
Описание
outsideМаркеры позиционируются вне содержания
insideМаркеры позиционируются внутри содержания
inheritМаркеры позиционируются относительно родительского элемента


Свойство работает в браузерах




Пример применения свойства



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство list-style-position</title>
<meta charset="utf-8">
<style type="text/css">
<!--
ul {
list-style-image: url(http://delaisait.ucoz.ru/img/marker/6.gif);
list-style-position: inside;
color:green;
text-decoration:blink;
font-size:18px;
}
ol {
list-style-image: url(http://delaisait.ucoz.ru/img/marker/6.gif);
list-style-position: outside;
color:orange;
text-decoration:blink;
font-size:18px;
}
-->
</style>
</head>
<body>
<p>Добавляем списку значение inside</p>
<ul>
<li>Добавляем</li>
<li>Маркер</li>
<li>При подобно заданном значении дополнительно существующий текст будет находится с маркером в одной зоне и существующий контент будет облегать маркер</li>
</ul>
<p>Добавляем списку значение outside</p>
<ol>
<li>Добавляем</li>
<li>Маркер</li>
<li>При подобно заданном значении дополнительно существующий текст будет находится с маркером в разных зонах и существующий текст будет отделён от маркера</li>
</ol>
</body>
</html>

Пример в действии




Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position
Категория: Свойства списка | Добавил: IZOTOP (14.04.2012) | Автор: Меренков Михаил E W
Просмотров: 506 | Теги: списка, css, это, list-style-position, свойство, style, что, чего, для | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]