HTML верстка, HTML коды, Каскадные таблицы стилей, Форматированные списки, Гиперссылки и Сети, Мультимедийные елементы Каскадные таблицы стилей, Форматированные списки, Гиперссылки и Сети, Мультимедийные елементы

Хотя можно приложить свойства списков к любому элементу, они подействуют только на те элементы, для которых свойство display имеет значение list-item. Обычно единственным тегом, удовлетворяющим такому условию, является тег <li>.

Однако это не должно оттолкнуть вас от использования подобных свойств где либо еще, особенно с тегами <ul> и <ol>. Поскольку они наследуются от родительских элементов, в которых были установлены, модифицируя свойства списков для тегов <ol> и <ul>, вы модифицируете их и для тегов <li>, содержащихся в соответствующем списке. Это значительно облегчает создание списков с определенным внешним видом. читать далее

Свойство list-style – это компактная версия для всех других характеристик стиля списков. Оно принимает любые значения, допустимые для свойств list-style-type, list-style-position и list-style-image, которые можно указывать в произвольном порядке, применяя значения,
подходящие для типа списка, на который они действуют. Вот допустимые объявления свойства list-style:

li {list-style: disc}
li {list-style: lower-roman-inside}
li {list-style:
url(http://www.site.ru/images/tiny-quat.gif) square} читать далее

Свойство list-style-type выполняет двойную задачу в том смысле, что определяет способ, которым выводятся элементы как упорядоченных, так и неупорядоченных списков броузерами, поддерживающими стили. Оно действует на элементы списков так же, как атрибут type.

Свойство list-style-type применяется к элементам неупорядоченного списка и принимает одно из четырех значений: disc, circle, square или none. Броузер помечает элемент списка одним из этих маркеров. По умолчанию для элементов самого внешнего списка принимается значение disc; броузеры изменяют применяемое по умолчанию значение
в зависимости от глубины вложения списка. читать далее

Существует два способа разместить маркер, ассоциированный с элементом списка, – внутри связанного с элементом блока или за его пределами. В соответствии с этим свойство list-style-position допускает одно из двух значений: inside или outside.

По умолчанию принимается outside, означающее, что маркер будет висеть слева от элемента примерно так:

•       Это маркированный список
с маркером «outside»

Значение inside «вдвигает» маркер в элемент списка, который обтекает его примерно так же, как текст обтекает плавающее изображение:

•      Это маркированный список
с маркером «inside»

Отметьте, что вторая строка текста выводится без отступа и выравнивается по левому краю маркера.

Текущие версии популярных броузеров полностью поддерживают свойство list-style-position.

Свойство list-style-image определяет изображение, которым броузер будет отмечать элемент списка. Значением этого свойства служит URL файла с изображением или ключевое слово none, принимаемое по умолчанию.

Такое изображение будет маркером, предваряющим содержимое пунктов списка. Если оно доступно, броузер отобразит его вместо любого другого иначе определенного маркера. Если изображение недоступно или пользователь отключил его автоматическую загрузку, будет применяться маркер, определенный свойством list-style-type.

Авторы могут употреблять свойство list-style-image для определения типовых маркеров своих неупорядоченных списков. Хотя допустимо использование любых изображений в качестве маркеров, мы рекомендуем применять GIF- или JPEG-изображения небольшого размера, чтобы гарантировать привлекательный вид ваших списков.

К примеру, если вы хотите употребить в качестве маркера изображение из файла mybullet.gif, хранящегося на вашем сервере, можно написать:

li {list-style-image: url(pics/mybullet.gif); list-style-type: square}

В этом случае изображение будет использовано, если броузер успешно загрузит mybullet.gif. Иначе применяется традиционный квадратный маркер.