Опубликован: 19.03.2007 | Уровень: для всех | Доступ: платный
Лекция 4:

Форматирование текста

Использование отрицательных значений

При использовании размеров в пикселях часто необходимо использовать отрицательные значения, чтобы добиться желательного результата. Параграф, показанный на рисунке 4.6, применяет отступ первой строки текста в -20px, чтобы создать "выступающий" формат параграфа, часто используемый в отчетах для библиографических записей.

Использование оформления текста для создания библиографических записей

Рис. 4.6. Использование оформления текста для создания библиографических записей

Как показано на листинге 4.11, оформление задается окружающим тегом <div>, который использует класс стиля .biblio для своих параграфов. Левое поле для всех параграфов задается равным 20px. Такая настройка смещает весь параграф, так что задание смещения в -20px смещает первую строку влево до края поля.

<style type="text/css">
  .head   {text-align:center; font-weight:bold; font-size:14pt}
  .biblio {margin-left:20px; text-indent:-20px}
  .book   {font-style:italic}
</style>

<div class="head">Библиография</div>

<div class="biblio">

<p>Duthie, P. A. & MacDonald, M. (2002). <span class="book">ASP.NET in a 
Nutshell: A Desktop Quick Reference</span>. Sebastopol, CA: O`Reilly & 
Associates, Inc.</p>

<p>Goodman, Danny (2002). <span class="book">Dynamic HTML: The Definitive 
Reference.</span>. Sebastopos, CA: O`Reilly & Associates, Inc.</p>

<p>Griffin, J., Morales, C., & Finnegan, J. (2003). <span class=<book<>Web 
Design & Development Using XHTML</span>. Wilsonville, Oregon: Franklin,
Beedle & Associates.</p>

</div>
Листинг 4.11. Код для создания выступающих параграфов

Промежутки между буквами и словами

Вспомните, что свойства letter-spacing и word-spacing могут принимать как положительные, так и отрицательные значения. Строки на рисунке 4.10 заданы с различными значениями промежутков между буквами и словами для демонстрации результатов.

Положительные и отрицательные интервалы между буквами и словами

Рис. 4.7. Положительные и отрицательные интервалы между буквами и словами

Теги стиля шрифта

Символы текста могут использовать такие стили, как bold (полужирный), italic (курсив), underscore (подчеркнутый) и другие для выделения или акцентирования букв и слов. Хотя эти стили можно задавать с помощью таблицы стилей, существуют также автономные теги, которые можно применять для непосредственного обрамления и форматирования символов текста.

Теги физических стилей

Теги физических стилей являются линейными контейнерными тегами, обрамляющими строки символов, которые будут выводиться указанным стилем. Эти теги -общие для всех браузеров и выводятся одинаково во всех браузерах. Теги физических стилей показаны в таблице 4.3.

Таблица 4.3. Теги физических стилей
Тег физического стиля Эквивалент в таблице стилей
<big>big</big> font-size:18px
<b>bold</b> font-weight:bold
<i>italic</i> font-style:italic
<small>small</small> font-size:12px
<tt>typewriter</tt> font-family:courier new
<sub>subscript</sub> vertical-align:sub
<sup>superscript</sup> vertical-align:super
<s>strikeout</s> (исключен) text-decoration:line-through
<u>underscore</u> (исключен) text-decoration:underline

Как показано в приведенной выше таблице, обрамление текстовой строки тегами <b>...</b>, например, преобразует текст в полужирные символы точно того же стиля, что и задание свойства font-weight:bold. Будут ли использоваться эти теги физических стилей или свойства стилей CSS, является вопросом личного предпочтения. Отметим, что теги strikeout и underscore исключены и порождают ошибки при проверке на соответствие XHTML Strict.

Эти теги могут иметь также связанные с ними свойства стиля. Например, объявление в таблице стилей b {color:red} связывает color с селектором b. Поэтому любой текст, задаваемый полужирным с помощью тега <b>, будет также выводиться красным цветом.

Теги логических стилей

Теги логических стилей не имеют стандартных значений во всех браузерах, и XHTML точно не определяет, как они должны выводиться. Однако они применяются более широко, чем теги физических стилей, делая возможным как визуальное, так и невизуальное представление стилей.

Для людей с ослабленным зрением, например, тег физического стиля <b> может быть бессмысленным, так как он выводит текст визуально полужирными символами. Однако при использовании визуально сопоставимого тега логического стиля <strong> человек с помощью специальной программы воспроизведения слышит текст с выделением громкостью звука.

Следующая таблица содержит теги логических стилей. Их вывод может несущественно отличаться от применяемого по умолчанию стиля в браузере. Некоторые браузеры могут поддерживать не все стили.

Таблица 4.4. Теги логических стилей
Тег логического стиля Назначение
<abbr>abbreviation</abbr> Указывает сокращение
<acronym>acronym</acronym> Указывает акроним
<cite>citation</cite> Содержит цитату или ссылку на другие источники
<code>code</code> Указывает фрагмент кода программы
<dfn>definition</dfn> Указывает, что это пример определения термина
<em>emphasis</em> Указывает на выделение
<strong>strong</strong> Указывает на более сильное выделение
<kbd>keyboard</kbd> Указывает текст, вводимый пользователем
<samp>sample</samp> Определяет пример вывода программы, сценария и т.д.
<var>variable</var> Указывает экземпляр переменной или аргумента программы

Теги логических стилей созданы для ситуаций, в которых визуальное представление текста в браузере необходимо расширить другим специальным представлением или информационным контентом. Для вывода в стандартном браузере, однако, можно ограничиться тегами физических стилей или их эквивалентами CSS.

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Владислав Нагорный
Владислав Нагорный

Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки?

Спасибо!

Наталья Алмаева
Наталья Алмаева
Россия
Светлана Казьмина
Светлана Казьмина
Россия, Волгодонск