Иллюстрированный самоучитель по созданию сайтов

Оформление веб-страницы с использованием стилей

Кстати говоря, на самом деле и эта конструкция, и та, что была в старом варианте, не совсем подходит для эпиграфа. Удачно, что эпиграф у нас короткий. А что бы было, если он был бы немного длиннее, например таким:

<P STYLE="text-align: right; font-size: smaller;">&laquo;Ну, погоди!..&raquo; &mdash; что есть мочи закричал Волк, стремительно падая вниз с обрывком веревки в лапе прямо на милицейский мотоцикл, который как раз в этот момент проезжал по дороге. Через мгновение мотоцикл уже увозил его куда-то вдаль.
    <BR>
    <SPAN STYLE="font-style: italic;">
(Из описания мультфильма) </SPAN>
</P>

Результат показан на рис. 4.1.

Иллюстрированный самоучитель по созданию сайтов › Оформление веб-страницы с использованием стилей
Рис. 4.1. Длинный эпиграф при таком, оформлении становится не похожим, на эпиграф

Согласитесь, что это больше похоже не на эпиграф, а на какой-то вводный текст, потому что эпиграф должен оста ваться в правой части экрана. В старом варианте веб-страницы с этой проблемой было бы трудно справиться (пришлось бы либо рисовать невидимую таблицу, либо вручную разбивать текст эпиграфа тегами <BR>, что привело бы к различным результатам при просмотре в окнах разного размера). А при использовании CSS можно просто использовать такие свойства блока, как width и height (ширина и высота). Второе из них нам сейчас не нужно, а вот свойство width как раз пригодится:

<DIV STYLE="text-align: right;">
    <P STYLE="text-align: justify; font-size: smaller; width: 35%;">
        &laquo;Ну, погоди!..&raquo; &mdash; что есть мочи закричал Волк, стремительно падая вниз с обрывком веревки в лапе прямо на милицейский мотоцикл, который как раз в этот момент проезжал по дороге. Через мгновение мотоцикл уже увозил его куда-то вдаль.
        <BR>
        <SPAN STYLE="font-style: italic;">(Из описания мультфильма)</SPAN>
</DIV>

Результат показан на рис. 4.2. Давайте с ним разберемся. Как видно из вышеприведенного кода, просто добавить свойство width: 35%; недоста точно. Действительно, тогда текст блока был бы выровнен по правому краю, но это выравнивание происходило бы внутри блока, а сам блок шириной 35% от полной ширины окна располагался бы слева. Поэтому весь блок, описанный тегом <Р>, пришлось заключить во внешний блок <DIV>, а уже в нем установить выравнивание по правому краю (text-align:right;). Ну, а раз уж выравнивание по правому краю взял на себя внешний блок, внутри текстового блока для лучшего восприятия мы выровняли текст но обоим краям (text-align: justify;).

Иллюстрированный самоучитель по созданию сайтов › Оформление веб-страницы с использованием стилей
Рис. 4.2. Выравнивание эпиграфа с помощью вложенных блоков

Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.