... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Списки (стр. 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 - 2018 г. Все права защищены