SNK Software
Web Studio Монополия Metaproducts Утилиты Игры
Монополию Web Studio Библиотека
Вебмастер Дельфи Работа на ПК Самоучитель
Для PHP Для Delphi
Веб-дизайн Программирование Компьютеры Девайсы Заметки
SNK Software Индустрия hardware Индустрия software
О студии Портфолио Сопровождение сайтов

Новые материалы

Девайсы:
Сравнительный обзор Nokia Lumia 920 и HTC 8X
Девайсы:
Обзор Nokia Lumia 820 – смартфона на WP8
Вебмастеру:
Настройка Apache, PHP и MySQL для Linux-VPS
Вебмастеру:
VPS на домашнем ПК: настройка сети в VM VirtualBox и Debian
Вебмастеру:
VPS на домашнем ПК: устанавливаем Linux Debian 6
Вебмастеру:
VPS на домашнем ПК: установка VM VirtualBox
Работа на компьютере:
Иные возможности текстового процессора Word
Работа на компьютере:
Вставка объектов
Работа на компьютере:
Таблицы в Word
Работа на компьютере:
Печать и сохранение документов
Работа на компьютере:
Сноски, колонтитулы, оглавление и указатели в Word

Шрифты и оформление

В этой главе:

  1. Элементы стиля шрифта
  2. Изменения шрифта – элементы FONT и BASEFONT
  3. Горизонтальный разделитель HR
  4. Элемент 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. Их описание приводится ниже:

ПРИМЕЧАНИЕ
Последние три элемента полностью удалены из спецификации 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.

Таблица 2.22 Атрибуты элементов FONT и BASEFONT
АтрибутПримечаниеОписание
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.

Таблица 2.23 Атрибуты элемента HR
АтрибутПримечаниеОписание
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 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !

Избранное

SNK GSCP
SNK GSCP - новая библиотека для PHP 5!
Web Studio
Web Studio и Visual Workshop
Библиотека:
Стандарты на web-технологии
Монополия
Монополия Android
Загрузки:
скачать программы
Продукция:
программы и книги
Техподдержка / Связаться с нами
Copyright © 1999-2013 SNK. Все права защищены.
При использовании материалов с сайта ссылка на источник обязательна.
Рейтинг@Mail.ru