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


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



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


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

Свойство list-style-image устанавливает изображение маркеру.




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




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


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


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


Значение
Описание
URLВы можете указать полный или относительный адрес к изображению
noneИзображение отсутствует,должно быть указано свойство list-style-type иначе список примет умолчания для свойства list-style-type
inheritНаследуется значение родителя

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




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



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство list-style-image</title>
<meta charset="utf-8">
<style type="text/css">
<!--
ul {
list-style-image: url(http://delaisait.ucoz.ru/img/marker/6.gif);
}
ol {
list-style-image: url(/img/marker/6.gif);
}
-->
</style>
</head>
<body>
<p>Добавляем изображение с полным адресом</p>
<ul>
<li>Добавляем</li>
<li>Маркер</li>
<li>Списку</li>
</ul>
<p>Добавляем изображение с относительным адресом</p>
<ol>
<li>Добавляем</li>
<li>Маркер</li>
<li>Списку</li>
</ol>
</body>
</html>

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



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





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






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

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

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