Основы работы с XHTML и CSS


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


Список определений является рядом терминов и определений, отделенных от окружающего текста одиночной пустой строкой. Термины в списке выравниваются по левому полю; определения смещаются вправо и переносятся по словам на следующих строках.

Вспомните,что список определений заключается внутрь тегов <dl> и содержит один или несколько тегов <dt> , перечисляющих определяемые термины. Каждый термин имеет связанный с ним тег <dd> , окружающий его определение. Пример списка определений закодирован ниже и показан в листинге 6.16.

<dl> <dt>Term 1</dt> <dd>Это определение Term 1. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам. </dd> <dt>Term 2</dt> <dd>Это определение Term 2. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам. </dd> </dl>

Листинг 6.15. Код списка определенийTerm 1 Это определение Term 1. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам. Term 2 Это определение Term 2. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам.

Листинг 6.16. Список определений

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

<style type="text/css"> dd {margin-top:10px; margin-bottom:10px} </style>

<dl> <dt>Term 1</dt> <dd>Это определение Term 1. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам.</dd> <dt>Term 2</dt> <dd>Это определение Term 2. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам.</dd> </dl>

Листинг 6.17. Код списка определений с настройками marginTerm 1

Это определение Term 1. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам.

Term 2

Это определение Term 2. Определяемый термин выводится в отдельной строке, за которой следует блок текста определения. Определение смещается относительно определения вправо и переносится по словам.

Листинг 6.18. Список определений с верхним и нижним полями, окружающими элементы списка




Начало  Назад  Вперед