...

Изучив материалы, представленные на сайте CSS-Style.SU, Вы уверенно будете пользоваться всеми возможностями технологий каскадных таблиц стилей Cascading Style Shett

Поиск по сайту:

	Главная

	Синтаксис CSS

	Свойства CSS

	Форматирование блоков
	Списки

	Пример применения стилей

	Оптимизация стилей

	Оформление текстов

	Использование блоков

	Позиционирование

	Слои в CSS

	Готовые решения

	Дополнительные возможности CSS


	Программа TopStyle

	Таблица цветов

Все свойства CSS !important after background background-attachment background-color background-image background-position background-repeat before border border-bottom border-bottom-color border-bottom-style border-bottom-width border-collapse border-color border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-style border-top-width border-width bottom caption-side clear clip color content cursor display float font font-family font-size font-style font-variant font-weight height left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-width min-width opacity overflow padding padding-bottom padding-left padding-right padding-top position quotes right table-layout text-align text-decoration text-indent text-transform top vertical-align visibility white-space width word-spacing z-index



статьи 1 2 3 4

Списки (стр. 2)

Свойство list-style-type

С помощью этого свойства можно в качестве маркера списка указать произвольное изображение. Таким образом, это свойство предоставляет авторам Web-страниц совершенно новые возможности, поскольку теперь варианты создания маркированных списков ограничиваются только фантазией создателя страницы.

Допустим, мы имеем некоторое изображение маркера и хотим, чтобы при создании списка оно использовалось в качестве маркера. Тогда следует написать такое правило:

UL { list-style-image: url{marker.gif); }

В HTML нет аналога этого свойства, списки с маркерами произвольного вида можно создать только с помощью CSS.

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

Это свойство позволяет указать положение маркера. Значение свойства задается с помощью следующих ключевых слов:

outside - за пределами основного блока элемента списка;
inside - внутри основного блока списка.

Проиллюстрируем сказанное выше примерами. Рассмотрим CSS-правило:

UL { list-style-position: outside }

UL { list-style-position: inside }

Впервом случае, если текст элементов списка обвести воображаемым прямоугольником, то маркер будет находиться за пределами этого прямоугольника, что и соответствует значению outside.

Во втором случае, если текст элементов списка обвести воображаемым прямоугольником, то маркер будет находиться в пределах этого прямоугольника, что и соответствует значению inside.

Аналога свойства list-style-position в HTML не существует, следовательно, управлять положением маркера в этом языке невозможно.

Свойство list-style

Стенографическое свойство, позволяющее в сокращенной форме задать значения свойств list-style-type, list-style-image и list-style-position. Приведем примеры. Правило:

UL { list-style-type: circle; list-style-image: url(images/marker2.gif); list-style-position: inside }

можно записать в сокращенном виде:

UL { list-style: circle url(images/marker2.gif) inside }

Краткое описание всех свойств управления характеристиками списков в SCC приведено в таблице:

Свойства CSS для управления характеристиками списков
Свойство	Описание	Пример
list-style-type	Определяет внешний вид маркера либо нумератора disc \| circle \| square \| decimal \| decimal-leading-zero lower-roman \| upper-roman lower-greek \| lower-alpha lower-latin \| upper-alpha upper-latin	UL {list-style-type: square;} OL {list-style-type: lower-roman;}
list-style-image	Определяет URL для изображения маркера	UL {list-style-image: url(bullet3.gif) ; }
list-style-position	Определяет положение маркеров внутри или снаружи основного структурного блока inside \| outside	LI {list-style-position: outside}
list-style	Стенографическое свойство, позволяющее одновременно задать значения всех предыдущих свойств.	UL {list-style: square url(bullet3.gif) outside;}

Страница: - 1 - | - 2 -


Уроки CSS © 2007 - 2012 г. Все права защищены