Элементы dt и dd — главная и подчиненная части списка определений

Главная часть списка определений обозначается элементом dt. Его содержанием могут быть только символьные данные и строчные элементы. А вот для подчиненной части, элемента dd, набор разрешенного содержания также широк как и для элемента li.

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

<dl>

<dt>Генеральный директор</dt>

<dd>Иван Иванов</dd>

<dt>Менеджеры</dt>

<dd>Петр Петров</dd>

<dd>Василий Пупкин</dd>

</dl>

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

Для управления оформлением списков в CSS присутствует специальное собирательное свойство list-style. Оно состоит из трех частных свойств:

• list-style-type — вид маркеров списка. Стандартный набор маркеров для списков достаточно скудный: круглый и квадратные маркеры, а также разные вариации для числовых значений (можно нумеровать числами и буквами).

• list-style-position — положение маркеров списка. Свойство имеет всего два значения: outside (по умолчанию) — маркер списка стоит слева отдельно от содержимого, inside — маркер списка вносится в содержимое и ведет себя как первый символ содержания элемента li.

• list-style-image — маркер-изображение. Вместо стандартных текстовых маркеров можно задать собственные маркеры изображения. Для этого нужно указать ресурс с изображением, используя функционал url, например:

li {

list-style-image: url(marker.png);

}

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

ul {

list-style: square;

}

Хотя у элемента ul нет маркеров, значение свойства list-style наследуется дочерними элементами. В результате будет достигнут нужный результат.

Элемент img — изображение

Элемент img позволяет помещать на веб-страницу изображения. Он является замещаемым элементом. Это означает, что вместо себя он отображает указанное изображение, для которого порождается область. Без изображения порождается область для отображения замещающего текста (значение атрибута alt).

Элемент img относится к строчным элементам (Inline), поэтому не может быть вложен в элементы, требующие блочное содержание, например, body.

Пример внедрения изображения:

<img src=”logo.png” alt=”Логотип” style=”width: 150px; height: 100px;” />

Атрибут src — адрес изображения

Атрибут src является одним из обязательных атрибутов элемента img и хранит в себе адрес изображения. Адреса могут быть трех видов:

• Абсолютные — указывают на изображение в любом месте интернета;

• Относительные — указывают на изображения, доступные на текущем сайте;

• Схема data — позволяет задавать изображение в виде HEX-кода. Шаблон такого адреса:

src=“data:image/png;base64,HEX-код”

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

Атрибут alt — альтернативное описание

Атрибут alt содержит в себе текст, который показывается вместо изображения, когда оно не отображено. Данный атрибут является обязательным. Он также является полезным с точки зрения продвижения сайта — его значение индексируется поисковыми системами.