Оформление текста
Текст на HTML-странице должен не только "вписываться" в
основной дизайн, но еще и удобно читаться. Кроме правильного выбора
гарнитуры и размера, немалую роль играют и другие параметры текста. Все
они пришли в Web из полиграфии и нашли здесь достойное применение. У нас
не так уж много средств, позволяющих оформить текст и расставить в нем
акценты: начертание, междустрочные интервалы, расстояние между буквами, выравнивание, отступы - вот, собственно, и все. Попробуем разобраться, в каких случаях следует применять эти параметры для оформления текста.
Предположим, необходимо оформить некоторый довольно большой фрагмент
текста. Допустим, это некая книга или статья. Сразу хочется отметить -
все, что можно применять для заголовков, чаще всего неприменимо для
оформления основного текста статьи.
В тексте самой статьи при необходимости можно выделить ключевые
фразы. Для этого уместнее всего использовать жирное начертание
(полужирное, чаще его называют именно так) или курсив. При этом надо
учитывать, что полужирное начертание визуально выделяет фрагмент в
тексте. Читатель, как правило, обращает на него внимание еще до того,
как дочитает текст до места выделения. Поэтому полужирное начертание
больше подходит для оформления заголовков и подзаголовков. Даже без
увеличения размера заголовка его полужирный шрифт визуально выделяет его
из основной массы текста.
Если же требуется выделить некоторые фрагменты, но при этом не
нарушать визуальную равномерность строки, то лучше пользоваться
курсивом. На него читатель обратит внимание, только приблизившись
вплотную к фрагменту.
На новостных лентах часто используется такой прием: первый абзац
текста выделяется курсивом, а последующие имеют обычное начертание. В
тексте, полностью набранном курсивом, фрагмент текста можно выделить
обычным начертанием.
Давайте попробуем реализовать это при помощи CSS. Запишем
таблицу стилей для оформления статьи. В ней будет немного правил. Одно
правило будет задавать стиль заголовка статьи - размер заголовка будет в
1,4 раза больше основного текста. Второй стиль, задающий гарнитуру
Arial для шрифта, будет для текста абзаца. Для первого абзаца придется
определить отдельный класс "firstp", меняющий начертание с обычного на
курсивное. И последнее правило будет менять начертание внутри элемента
ЕМ для первого абзаца с курсивного на обычное. Итак, получим таблицу
стилей:
Н3{font:1.4em Arial, sans-serif}
P{font-family: Arial, sans-serif}
P.firstp{font-style:italic}
P.firstp EM{font-style:normal}
|
А теперь наберем текст самой статьи:
<НЗ>Заголовок статьи</НЗ>
<Р class="firstp">Первый абзац <ЕМ>полностью</ЕМ>
набирается курсивом, чтобы выделить основную мысль текста и обратить на
себя дополнительное внимание.</ Р>
<Р>Основной текст новостной статьи. Оформляется обычным
начертанием. Выделение внутри создается <ЕМ>курсивом</ЕМ>,
чтобы не поменять оптическую насыщенность строки и раньше времени не
привлечь к себе внимание.
</Р>
<Р>Еще один абзац статьи, в нем выделение будет создано при помощи
<STRONG>полужирного</STRONG> начертания, оно будет сразу
бросаться в глаза!</Р>
|
В браузере такая статья будет выглядеть так, как показано на рисунке:
|
Заголовок статьи
Первый параграф полностью набирается курсивом, чтобы выделить основную мысль текста и обратить на себя дополнительное внимание.
Основной текст новостной статьи. Оформляется обычным начертанием.
Выделение внутри создается курсивом, чтобы не поменять оптическую
насыщенность строки и раньше времени не привлечь к себе внимание.
Еще один параграф статьи, в нем выделение будет создано при помощи полужирного начертания, оно будет сразу бросаться в глаза!
|
При этом внешний вид текста можно еще улучшить. Давайте рассмотрим несколько примеров.
В первую очередь, хочется изменить выравнивание абзацев. Сейчас
для них установлено выравнивание по левому краю, что является значением
по умолчанию. Для такого рода статьи больше подойдет выравнивание по
ширине, тогда текст будет смотреться аккуратнее и колонка текста будет
ровнее. Делается это заданием свойства text-align:justify, при этом незначительно увеличатся расстояния между словами в строке, чтобы выровнять общую длину строк.
|
Р{font-family: Arial, sans-serif; text-align: justify;}
|
He всегда хорошо смотрится наличие абзацных отступов между абзацами. В HTML мы не имеем возможности регулировать размер таких отступов или удалять их совсем. При помощи CSS это можно сделать довольно легко. Вспомним, что абзац - это блок, и у него есть поля (margin), которым можно придать даже отрицательные значения. Таким образом, если в CSS-правило
мы допишем свойство, отвечающее за размеры полей, то сможем
регулировать абзацные отступы. Давайте удалим отступы, для этого
воспользуемся краткой записью свойства margin:0. Теперь правило примет вид:
|
Р{font-family:Arial, sans-serif; text-align:justify; margin:0}
|
После этого абзацы будут следовать друг за другом, без отступов, с выравниванием по ширине:
|
Заголовок статьи
Первый параграф полностью набирается курсивом, чтобы выделить основную мысль текста и обратить на себя дополнительное внимание.
Основной текст новостной статьи. Оформляется обычным начертанием.
Выделение внутри создается курсивом, чтобы не поменять оптическую
насыщенность строки и раньше времени не привлечь к себе внимание.
Еще один параграф статьи, в нем выделение будет создано при помощи полужирного начертания, оно будет сразу бросаться в глаза!
|
Аналогичным образом можно уменьшить отступ после заголовка, чтобы он
ближе примкнул к основному тексту. Для заголовка достаточно
отрегулировать только нижнее поле элемента Н3, дописав в правило свойство margin-bottom:0.2em:
|
Н3{font:1.4em Arial, sans-serif; margin-bottom:0.2em;}
|
При этом, чтобы первый абзац все-таки больше выделялся в тексте, после
него надо оставить небольшой абзацный отступ, который исчез вместе с
остальными отступами. Для первого абзаца дополним правило свойством
margin-bottom: 0 . 5em следующим образом:
|
P.firstp{font-style:italic; margin-bottom:0.5em}
|
Полученный в итоге результат в окне браузера Internet Explorer показан на рисунке.
|
Заголовок статьи
Первый параграф полностью набирается курсивом, чтобы выделить основную мысль текста и обратить на себя дополнительное внимание.
Основной текст новостной статьи. Оформляется обычным начертанием.
Выделение внутри создается курсивом, чтобы не поменять оптическую
насыщенность строки и раньше времени не привлечь к себе внимание.
Еще один параграф статьи, в нем выделение будет создано при помощи полужирного начертания, оно будет сразу бросаться в глаза!
|
Как видите, второй и третий абзацы сливаются, и снова хочется их
разделить. При этом абзацные отступы нас не устраивают, но есть еще одна
возможность - создать отступ первой строки, так называемую "красную строку". При этом желательно, чтобы красная строка отсутствовала у первого абзаца. Для этого дополним правило, используя свойство text-indent:
|
Р{font-family: Arial, sans-serif; text-align:justify; text-indent:2em; margin:0}
|
В результате красная строка появится и у первого абзаца - согласно
принципам наследования, но мы легко можем это исправить в правиле для
первого абзаца:
|
Р.firstp{font-style:italic; margin-bottom:0.5em; text-indent:0}
|
Теперь наша статья будет выглядет так:
|
Заголовок статьи
Первый параграф полностью набирается курсивом, чтобы выделить основную мысль текста и обратить на себя дополнительное внимание.
Основной текст новостной статьи. Оформляется обычным начертанием.
Выделение внутри создается курсивом, чтобы не поменять оптическую
насыщенность строки и раньше времени не привлечь к себе внимание.
Еще один параграф статьи, в нем выделение будет создано при помощи полужирного начертания, оно будет сразу бросаться в глаза!
|
|
