Основы работы с 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, хотя и может выводиться браузером правильно.
<div class="offset"> Вполне возможно, что имеется доминирующий квадрант, или один из квадрантов составляет большую часть четырехугольника. Можно видеть, что студент имеет некоторую область/предпочтения/способности для каждого вида мышления и что можно усилить эти способности, изучая необходимые в каждой из этих областей навыки. <span class="super">1</span> </div>
<p><span class="head2">Оценочный тест</span></p>
<p>Тест состоит из 60 пар слов, из которых студенты выбирают ту, которая им больше нравится или лучше всего их описывает. Примеры пар слов включают:</p>
<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>
<p>Значение между 1 (слабое предпочтение) и 4 (сильное предпочтение) присваивается одной из пар слов. Эти значения суммируются по всем позициям и изображаются в квадранте для создания познавательного профиля.</p>
<div><span class="line">_________________</span></div> <div class="footnote"> <span class="super">1</span> Краус, Луис Брюер, <span class="ital">Как учиться, и почему мы этого не делаем</span>, Cincinnati: Thomson Learning, 2000 (p. 19). </div>
</body> </html>
Листинг 4.7. Код создания отчета
Уместен, вероятно, комментарий относительно воспроизведенного здесь следующего раздела вывода областей <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
По умолчанию тег <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
Тег <span> является линейным тегом, не задающим перенос строки или дополнительные пустые строки перед или после тега. Поэтому несколько тегов <span>, закодированные один за другим, выводятся браузером на одной строке. Хотя слова и числа внутри тегов <span> выводятся на разных строках, содержимое самих тегов появляется рядом на одной строке внутри окружающего тега <div>.
В этом примере теги <span> задают также фиксированную ширину и различное выравнивание, чтобы равномерно распределить свое содержимое. Это пример использования свойства width, которое применялось ранее для задания размеров горизонтальных линеек и графических изображений, для определения точных размеров блока текста. Другие примеры определения размеров блоков текста будут представлены далее.
Еще одно замечание относительно тегов <span>: тег не может появиться в строке сам по себе. То есть, тег <span> должен быть ограничен блочным тегом, таким, как тег <p> или <div>. Обратите внимание на код, создающий разделительную линию для сноски внизу предыдущего отчета.
<div><span class="line">_________________</span></div>
Листинг 4.10. Вложение тега <span> в блочный тег
Если этот тег <span> будет закодирован не внутри своего контейнерного тега <div>, то он не пройдет проверку (валидацию) XHTML 1.1, хотя и может выводиться браузером правильно.
