Шрифты и оформление
В этой главе:
- Элементы стиля шрифта
- Изменения шрифта – элементы FONT и BASEFONT
- Горизонтальный разделитель HR
- Элемент BLINK
До принятия HTML 4.0 существовало множество элементов и атрибутов для оформления текста: выбор шрифтов, их начертания и оформления, и даже некоторые спецэффекты. Они постоянно вводились в новые версии ведущих браузеров, причем некоторые из них попросту игнорировались конкурентом. С появлением таблиц стилей ситуация стала проясняться, и необходимость во многих из подобных элементов отпала. Так, объявлены устаревшими элементы FONT, S, U и STRIKE. Даже не упоминается про BLINK. В качестве компромисса пока что сохранены лишь часто применяемые на практике элементы TT, B, I, BIG и SMALL. Здесь же мы рассмотрим еще один элемент оформления из средств HTML – элемент HR, а так же не вошедшие в стандарт фирменные расширения Netscape и Microsoft.
Элементы стиля шрифта
Иногда для форматирования шрифта, помимо таблиц стилей, можно использовать элементы TT, B, I, BIG и SMALL, а в случае использования переходного типа разметки (Transitional) – также S, U и STRIKE. Их описание приводится ниже:
- TT – Указывает на то, что заключенный в этот контейнер текст должен быть выведен моноширинным шрифтом (например, Courier).
- I – Указывает на то, что текст должен быть наклонным.
- B – Указывает, что текст должен быть выделен жирным шрифтом.
- BIG – Выводит текст более крупным кеглем.
- SMALL – Выводит текст более мелким кеглем.
- STRIKE, S –Указывают, что текст должен быть зачеркнут.
- U – Указывает, что текст должен быть подчеркнут.
ПРИМЕЧАНИЕ
Последние три элемента полностью удалены из спецификации XHTML 1.1, а все оставшиеся будут отменены в XHTML 2.0. Следовательно, если вы создаете сайт с прицелом на будущее, избегайте использовать стилевые теги.
Все рассматриваемые здесь элементы являются строковыми, и использовать их достаточно просто. Важно лишь помнить, что порядок закрытия тегов должен обратно соответствовать порядку их открытия:
<tt>моноширинный текст</tt>
<i>Наклонный текст</i>
<b>Жирный текст</b>
<b><i>Жирный наклонный текст</i></b>
<big>большой</big> и <small>маленький</small> текст
ВНИМАНИЕ
Еще раз обратите внимание на расположение открывающих и закрывающих тегов у элементов B и I во второй строке. Теги равнозначных элементов всегда должны закрываться в порядке, обратном открытию!
На самом деле, форматирование лучше доверить либо CSS, либо использовать элементы фразы (STRONG, SITE и т.д.). Действительно, если уж текст выделен полужирным начертанием, то, наверное, он имеет важное значение! Соответственно, будет логически верным использовать элемент STRONG. Аналогично, курсивом чаще всего выделяют цитирование – так используйте CITE, а не I. Ну а уж если понадобится изменить начертание из чисто эстетических соображений, то таблицы стилей всегда к нашим услугам.
Поскольку все шрифтовые элементы самодостаточны по своей сути, то никаких специфических атрибутов у них нет, определены лишь повсеместные id, class, lang, dir, title, style и атрибуты поведения. Здесь следует отметить, что сочетание шрифтовых элементов с атрибутом STYLE – далеко не лучшая идея, поскольку в таких случаях следует использовать элемент SPAN.
Свойства TT, I, B, BIG, SMALL. STRIKE, U
Закрывающий тег: требуется.
Совместимость: все (STRIKE, S и U не могут применяться в HTML 4.0 Strict и выше).
Вложение: допустимо.
Уникальные: нет.
Изменения шрифта – элементы FONT и BASEFONT
Эти элементы были введены в те далекие времена, когда таблиц стилей еще не было, и представляют собой устаревший способ для оформления текста. Соответственно, для документов, оформленных по правилам HTML 4.01 Strict, XHTML 1.0 Strict и XHTML 1.1 эти элементы не должны использоваться: для подобных целей правильнее и удобнее применять таблицы стилей. В частности, для задания какого-либо форматирования для слова или фразы вместо FONT теперь применяют элемент SPAN в сочетании с атрибутом STYLE. Так, если надо выделить фрагмент текста крупным шрифтом, используя гарнитуру Arial, то в стиле HTML 3.2 это будет выглядеть примерно таким образом:
<font face="Arial" size="+1">Крупный текст, набранный шрифтом Arial</font>
Современный же вариант выглядит так:
<span style=”font: large Arial”>Точно такой же текст</span>
В обоих случаях текст будет выведен браузером с одинаковым оформлением. Возможно, этот пример и не иллюстрирует всех преимуществ CSS, но в ряде случаев, при правильном подходе удается убрать до 90%(!) тегов из документа, особенно если вопрос касается табличного представления информации. Впрочем, к таблицам мы еще вернемся, а пока рассмотрим элемент BASEFONT, который используется для определения основных параметров шрифта для всего документа. Он имеет точно такой же синтаксис, как и FONT, но при этом является пустым элементом:
<basefont size="4" color="red" />
Здесь мы определили размер шрифта 4-го условного размера (изначально принято значение 3, что в большинстве браузеров соответствует размеру 12 пунктов) и красный цвет. Таким образом, весь текст на странице будет именно таким, за исключением тех мест, где он будет явно переопределен при помощи элемента FONT или любым другим способом. В современных документах параметры оформления, которые должны быть применены ко всему документу, назначают для элемента BODY при помощи CSS:
<style type="text/css">
body {font-size: 16pt; color: red; }
</style>
Таким образом, мы уже знаем все три собственных атрибута элементов FONT и BASEFONT. Соберем их вместе в таблице 2.22.
Атрибут | Примечание | Описание |
---|---|---|
id | Общие | Определяет имя элемента. |
class | Только для FONT | Определяет класс или набор классов элемента |
lang, dir | Только для FONT | Информация о языке и направление текста |
title, style | Только для FONT | Определяет заголовок и стиль элемента |
face | - | Определяет гарнитуру шрифта |
size | - | Определяет размер шрифта. Может принимать абсолютные значения – от 1 до 7, либо относительные, например +2 (т.е. на 2 размера больше, чем задано по умолчанию). |
color | - | Определяет цвет текста |
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup | Только для FONT | Определяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя |
Свойства FONT и BASEFONT
Закрывающий тег: требуется.
Совместимость: все (но не могут применяться в HTML 4.0 Strict и выше).
Вложение: FONT – допустимо, BASEFONT – нет (пустой элемент).
Уникальные: FONT – нет, BASEFONT – да.
Горизонтальный разделитель HR
Для создания визуальных разрывов между абзацами иногда полезно использовать горизонтальные линейки, или разделители. В этих целях используют элемент HR:
<hr />
Как видно, элемент HR является пустым. Он имеет несколько устаревших атрибутов, применяемых для изменения внешнего вида, перечисленных, вместе со стандартным набором, в таблице 2.23.
Атрибут | Примечание | Описание |
---|---|---|
id, class | Общие | Идентификаторы элемента |
lang, dir | Общие | Информация о языке и направление текста |
title, style | Общие | Определяют заголовок и стиль элемента |
align | Устаревший | Определяет выравнивание разделителя. Может принимать значения left, right и center. |
size | Устаревший | Определяет высоту («толщину») разделителя в пикселях |
width | Устаревший | Определяет ширину разделителя в пикселях или в процентах по отношению к ширине окружающего блока |
noshade | Устаревший | Если указан этот атрибут, то линейка должна выводиться плоской, иначе она выводится объемной |
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup | Общие | Определяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя |
Остановимся подробнее на собственных атрибутах HR. Итак, за выравнивание в окне отвечает атрибут ALIGN, который может принимать одно из трех значений – left, right или center, что заставляет браузер выравнивать черту по левому краю, правому, и по центру соответственно. При этом последнее значение принято по умолчанию.
ПРИМЕЧАНИЕ
В CSS для замены атрибута ALIGN у элемента HR следует использовать свойство float, а не text-align, как в случае с P или DIV.
При помощи атрибута SIZE можно указать, какой толщины должна быть линия, WIDTH задает ее ширину, а NOSHADE определяет внешний вид разделителя. Примеры приведены в листинге 2.24 (файл hr.html).
Листинг 2.24. Горизонтальные разделители
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Разделители</title>
</head>
<body>
Линейка по умолчанию:
<hr>
Линейка шириной 50% от окна, выровненная по центру:
<hr width="50%" align="center">
Линейка толщиной 5 пикселей и шириной в 250, выровненная по правому краю:
<hr size="5" width="250" align="right">
Плоская линейка толщиной 5 пикселей и шириной в 250, выровненная по правому краю:
<hr noshade size="5" width="250" align="right">
</body>
</html>
Свойства FONT, BASEFONT
Закрывающий тег: только для XHTML.
Совместимость: все.
Вложение: недопустимо (пустой элемент).
Уникальный: нет.
Элемент BLINK
Некогда заслуживший дурную славу элемент BLINK был введен компанией Netscape. Он заставляет мигать текст, заключенный в этот контейнер. Вся беда в том, что начинающие разработчики иногда настолько увлекались использованием этого эффекта, что созданные ими, сплошь мигающие, страницы были трудными для восприятия.
Использование этого элемента аналогично тому, как это делается в B, I, TT и им подобными тегами – достаточно вложить текст в контейнер BLINK и он получит искомый эффект, в данном случае – мигание:
<blink>Осторожно!</blink>
ПРИМЕЧАНИЕ
Такое мерцающее слово допустимо, когда оно одно на всю страницу. В любом случае элемент BLINK не следует применять, поскольку будет правильнее определить “text-decoration: blink” в таблице стилей.
Свойства BLINK
Закрывающий тег: требуется.
Совместимость: Netscape, Mozilla, Opera.
Вложение: недопустимо.
Уникальный: нет.
2011-06-01 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !