Основы работы с XHTML и CSS
Применение свойств текста
Результаты действия некоторых свойств текста можно видеть ниже, как показано на рисунке 4.5. Вывод организован так, чтобы напоминать печатный отчет.
Рис. 4.5. Использование оформления для создания отчета
Большая часть оформления находится во встроенной таблице стилей, определяющей классы стиля, которые применяются тегами <span> и <div>. Линейные таблицы стилей используются в одном определенном разделе страницы для одноразовых стилей, которые не применяются в других разделах документа. Используемый по умолчанию формат страницы задается селектором тега <body>: полуторный (1 1/2) межстрочный интервал, отступ первой строки параграфа и выравнивание текста по ширине.
Листинг 4.7. Код создания отчета (html, txt)
Уместен, вероятно, комментарий относительно воспроизведенного здесь следующего раздела вывода областей <div> и <span>.
Практический 4 3 2 1 1 2 3 4 Эмоциональный Факты 4 3 2 1 1 2 3 4 Чувства Действие 4 3 2 1 1 2 3 4 Обсуждение
Листинг 4.8. Использование span внутри div (html, txt)
По умолчанию тег <div> расширяет ширину страницы, охватывая три блока текста. Являясь блочным, тег <div> создает также перенос строки, чтобы отделить свое содержимое от окружающего текста.
<div class="offset"> <span style="width:80px; text-align:left"> Практический<br/> Факты<br/> Действие<br/> </span> <span style="width:100px; text-align:center; font-weight:bold"> 4 3 2 1 1 2 3 4<br/> 4 3 2 1 1 2 3 4<br/> 4 3 2 1 1 2 3 4<br/> </span> <span style="width:80px; text-align:right"> Эмоциональный<br/> Чувства<br/> Обсуждение<br/>
</span> </div>
Листинг 4.9. Код вложения span в div (html, txt)
Тег <span> является линейным тегом, не задающим перенос строки или дополнительные пустые строки перед или после тега. Поэтому несколько тегов <span>, закодированные один за другим, выводятся браузером на одной строке. Хотя слова и числа внутри тегов <span> выводятся на разных строках, содержимое самих тегов появляется рядом на одной строке внутри окружающего тега <div>.
В этом примере теги <span> задают также фиксированную ширину и различное выравнивание, чтобы равномерно распределить свое содержимое. Это пример использования свойства width, которое применялось ранее для задания размеров горизонтальных линеек и графических изображений, для определения точных размеров блока текста. Другие примеры определения размеров блоков текста будут представлены далее.
Еще одно замечание относительно тегов <span>: тег не может появиться в строке сам по себе. То есть, тег <span> должен быть ограничен блочным тегом, таким, как тег <p> или <div>. Обратите внимание на код, создающий разделительную линию для сноски внизу предыдущего отчета.
<div><span class="line">_________________</span></div>
Листинг 4.10. Вложение тега <span> в блочный тег (html, txt)
Если этот тег <span> будет закодирован не внутри своего контейнерного тега <div>, то он не пройдет проверку (валидацию) XHTML 1.1, хотя и может выводиться браузером правильно.
