Оформление веб-страницы с использованием стилей
Кроме того, в нашем блоке присутствует тег <В>, также относящийся к оформлению, хотя почему-то и не отмененный в HTML 4.0. В CSS ему соответствует свойство font-weight: bold;. Однако мы не можем написать вместо:
<B>Сергей Сергеев</B>…следующее:
<DIV STYLE="font-weight: bold;">Сергей Сергеев</DIV>…поскольку в этом случае следующий текст будет перенесен на новую строку. Поэтому вместо тега <DIV> здесь следует использовать тег <SPAN>:
<SPAN STYLE="font-weight: bold;">Сергей Сергеев</SPAN>Этот тег, кстати, бессмысленно применять без атрибутов, поскольку тогда вообще не будет никакого эффекта. Как правило, он применяется именно с атрибутом STYLE= (либо с атрибутами CLASS=, ID=, LANG= или обработчиками событий, о которых речь пойдет ниже).
Свойство font-weight (“жирность” шрифта), кстати, может принимать не только значения bold (полужирный) и normal (обычный), но и любое числовое значение от 100 до 900 (правда, имеют смысл только значения, кратные 100) – то есть, от самого тонкого до самого жирного шрифта. При этом значение 400 – это то же самое, что normal, а 700 – то же, что bold. Можно также употреблять относительные значения bolder и lighter.
Пойдем далее. После этого текстового блока у нас на веб-странице была горизонтальная линия <HR > с отмененным атрибутом W1DTH=, вместо которого следует использовать стилевое свойство width:
<HR STYLE="width: 75%;">Кроме того, если помните, для организации вертикального отступа между текстом и горизонтальной чертой мы использовали не очень красивую конструкцию <BR> . В CSS имеется свойство margin, с помощью кото рого можно регулировать отступы (“поля”) со всех сторон элемента; а для индивидуальной регулировки отступов с каждой стороны можно исполь зовать свойства margin-top (отступ сверху), margin-bottom (отступ снизу), margin-left (отступ слева) и margin-right (отступ справа). Поскольку мы намеревались удалить горизонтальную черту от текста на расстояние, примерно равное одной строке, давайте напишем так:
<HR STYLE="margin-top: 24px; width: 75%;">Интервал, определенный свойством margin-top, составляет 24 пиксела.
Далее центрируем заголовки рассказов с помощью уже знакомого нам свойства text-align. Но у нас есть еще подзаголовки, выделенные курсивом:
<I>сказка</I>Поскольку тег <I> тоже относится к оформлению (хоть и не отменен), заме ним его стилевым свойством font-style: italic;, применив уже знакомый тег <SPAN>:
<SPAN STYLE="font-style: italic;">сказка</SPAN>Кроме значений normal (обычный) и italic (курсив) это свойство может при нимать значение oblique (наклонный шрифт). Различие между наклонным шрифтом и курсивом состоит в том, что буквы курсива имеют иное начертание. Правда, при использовании определенных шрифтов большинство браузеров пока что "халтурят" – используют курсив, если нет готового варианта наклонного шрифта.
Стилевое позиционирование
Теперь исправим конструкцию для эпиграфа:
<P ALIGN="right"> <FONT SIZE="-1">Ну, погоди!.. <BR> <I>(Из мультфильма)</I> </FONT></P>Вместо атрибута ALIGN=, а также тегов <FONT> и <I> применим уже знакомые конструкции:
<P STYLE="text-align: right; font-size: smaller;">Ну, погоди!.. <BR> <SPAN STYLE="font-style: italic;"> (Из мультфильма) </SPAN></P>