- 15 Выравнивание, стили шрифта и горизонтальные линии
- 15.1.2 Выравнивание
- Что за прелесть эта мерзость!
- Что за прелесть эта мерзость!
- 15.1.3 Плавающие объекты
- » Всплывание» объекта
- Обтекание текста вокруг объекта
- 15.2 Шрифты
- 15.2.1 Элементы стиля шрифта: TT , I , B , BIG , SMALL , STRIKE , S и U
- 15.2.2 Элементы модификатора шрифта: FONT и BASEFONT
- 15.3 Горизонтальные линии: элемент HR
- Атрибут align
- Синтаксис
- Значения
- Значение по умолчанию
- Пример
- Примечание
- Браузеры
15 Выравнивание, стили шрифта
и горизонтальные линии
bgcolor = color [CI] Не рекомендуется. Этот атрибут устанавливает цвет фона документа или ячеек таблицы.
Этот атрибут устанавливает цвет фона «канвы» тела документа (элемент BODY ) или таблицы (элементы TABLE , TR , TH и TD ). Дополнительные атрибуты, устанавливающие цвет текста, могут использоваться с элементом BODY .
Этот атрибут не рекомендуется использовать для определения цвета фона. Лучше использовать таблицы стилей.
15.1.2 Выравнивание
Можно выравнивать блок элементов (таблицы, изображения, объекты, параграфы и т.п.) на «канве» с помощью атрибута align . Хотя этот атрибут может быть установлен для многих элементов HTML, диапазон его значений может отличаться, в зависимости от элемента. Здесь мы обсуждаем только значение атрибута «выравнивание» для текста.
- left : строки текста выравниваются по левому краю;
- center : строки текста выравниваются по центру;
- right : строки текста выравниваются по правому краю;
- justify : строки текста выравниваются по обоим полям.
Значение по умолчанию зависит от базового направления текста. Для направления слева направо — это align=left , для направления справа налево — по умолчанию align=right .
НЕ РЕКОМЕНДУЕТСЯ:
Здесь заголовок центрируется.
Что за прелесть эта мерзость!
Используя CSS (каскадные таблицы стилей), например, Вы можете достичь того же эффекта следующим образом:
Что за прелесть эта мерзость! H1Что за прелесть эта мерзость!
Учтите, что это будет действовать на все элементы H1 . Вы можете ограничить область видимости стиля, установив атрибут class элемента:
Что за прелесть эта мерзость! H1.wood
НЕ РЕКОМЕНДУЕТСЯ:
также, для того, чтобы выровнять вправо параграф на «канве» атрибутом HTML align , Вы могли бы записать:
что в таблице стиля могло бы быть:
Что за прелесть эта мерзость! P.mypar
НЕ РЕКОМЕНДУЕТСЯ:
Чтобы выровнять вправо несколько параграфов, сгруппируйте их элементом DIV :
. текст первого параграфа. . текст второго параграфа. . текст третьего параграфа.
В таблице стиля свойство выравнивания текста наследуется от предка, поэтому Вы можете использовать:
Что за прелесть эта мерзость! DIV.mypars. текст первого параграфа. . текст второго параграфа. . текст третьего параграфа..
Чтобы выровнять по центру весь документ:
Что за прелесть эта мерзость! BODY . тело выровнено по центру.
Элемент CENTER полностью эквивалентен определению элемента DIV с атрибутом align , установленным в «center». Элемент CENTER не рекомендуется.
15.1.3 Плавающие объекты
Изображения и объекты могут появляться непосредственно «in-line» или «всплывать» к одной из сторон страницы, изменяя временно поля текста, который может обтекать объект по любой его стороне.
» Всплывание» объекта
Атрибут align объектов, изображений, таблиц, фрэймов и т.п. заставляет объект прижиматься к левому или правому полю страницы. Плавающие объекты обычно начинают новую строку. Этот атрибут принимает следующие значения:
- left: прижимает объект к левому краю. Последующий текст обтекает объект справа.
- right: прижимает объект к правому краю. Последующий текст обтекает объект слева.
ПРИМЕР НЕ РЕКОМЕНДУЕМОГО ИСПОЛЬЗОВАНИЯ:
Пример показывает. как элемент IMG «всплывает» к левому краю «канвы».
Некоторые атрибуты выравнивания также допускают значение «center», которое не вызывает всплывания, а центрирует объект по отношению к краям. В то же время, у элементов P и DIV , значение «center» вызывает центрирование содержимого элементов.
Обтекание текста вокруг объекта
Ещё один атрибут, определённый для элемента BR , управляет обтеканием текста вокруг «всплывающего» объекта.
- none: следующая строка начнётся нормально. Это значение по умолчанию.
- left: следующая строка начнётся в ближайшей строке под любым плавающим объектом у левого края.
- right: следующая строка начнётся в ближайшей строке под любым плавающим объектом у левого края.
- all: следующая строка начнётся в ближайшей строке под любым плавающим объектом у любого края.
Посмотрите на этот рисунок. Текст обтекает изображение по правому краю до обрыва строки элементом BR :
Если атрибут clear установлен в none , линия, следующая после BR , начнётся сразу под ним у правого края изображения:
НЕ РЕКОМЕНДУЕТСЯ:
Если атрибут clear установлен в left или all , следующая строка появится так:
Используя таблицы стилей, Вы можете установить, чтобы все обрывы строки вели себя одинаково для объектов (изображений, таблиц и т.д.), «всплывая» у левого края. В таблице стилей Вы можете записать:
Чтобы определить такое поведение для конкретного элемента BR , нужно скомбинировать информацию о стиле и атрибут id :
15.2 Шрифты
Последующие элементы HTML специфицируют информацию о шрифте. Хотя они и не относятся к не рекомендуемым, их использование менее предпочтительно, чем таблиц стилей.
15.2.1 Элементы стиля шрифта: TT , I , B , BIG , SMALL , STRIKE , S и U
I | B | BIG | %fontstyle;|%phrase;) - - (%inline;)*> %fontstyle;|%phrase;) %attrs; -- %coreattrs, %i18n, %events -- >
Начальный тег: необходим, Конечный тег: необходим
Атрибуты, определённые в другом месте
Представление элементов стиля шрифта зависит от пользовательского агента (ПА). Следующее описание является лишь информативным.
TT: моноширинный текст, телетайп. I: курсив. B: полужирный. BIG: «большой» шрифт. SMALL: «малый» шрифт. STRIKE и S: не рекомендуются, зачёркнутый текст. U: не рекомендуется, подчёркнутый.
Вот несколько примеров определения шрифта:
bold, italic, bold italic, teletype text, and big and small text.
Можно применить более сложные варианты отображения шрифтов, используя таблицы стилей. Чтобы отобразить голубой курсив в параграфе с помощью таблицы стилей (CSS):
Элементы стиля шрифта должны вкладываться соответствующим образом. Отображение вложенных элементов стиля шрифта зависит от ПА.
15.2.2 Элементы модификатора шрифта: FONT и BASEFONT
См. формальное определение в разделе Переходное ОТД.
- Целое число от 1 до 7. Устанавливает шрифт в определённый фиксированный размер, представление которого зависит от ПА. Не все ПА могут отобразить все семь размеров.
- Относительное увеличение размера шрифта. «+1» означает: на один размер больше. «-3» означает: на три размера меньше. Все размеры находятся в пределах шкалы от 1 до 7.
Атрибуты, определённые в другом месте
Элемент FONT изменяет размер шрифта и цвет текста своего содержимого.
Элемент BASEFONT устанавливает базовый размер шрифта (используя атрибут size ). Размер шрифта, определяемый FONT , является относительным по отношению к BASEFONT . Если BASEFONT не используется, размер базового шрифта составляет 3.
НЕ РЕКОМЕНДУЕТСЯ:
В этом примере показана разница между шрифтами семи размеров элемента FONT :
size=1 size=2 size=3 size=4 size=5 size=6 size=7
А это пример относительного изменения размера шрифта с использованием базового размера 3:
Базовый размер шрифта не применяется к заголовкам/headings, за исключением тех случаев, когда заголовки изменены с использованием относительного изменения размера в элементе FONT .
15.3 Горизонтальные линии: элемент HR
Начальный тег: необходим, Конечный тег: запрещён
- left : линия выравнивается влево.
- center : линия выравнивается по центру.
- right : линия выравнивается вправо.
noshade [CI] Не рекомендуется. Если этот булев атрибут установлен, он требует, чтобы ПА отображал горизонтальную линию сплошным цветом, а не традиционно с двухцветной «тенью». size = pixels [CI] Не рекомендуется. Определяет высоту линии. Значение по умолчанию зависит от ПА. width = length [CI] Не рекомендуется. Определяет ширину линии. Ширина по умолчанию — 100%, т.е. линия растянута по ширине всей «канвы».
Атрибуты, определённые в другом месте
Элемент HR отображает горизонтальную линию в ПА.
Величина свободного пространства под и над горизонтальной линией зависит от ПА.
НЕ РЕКОМЕНДУЕТСЯ:
В этом примере линия центрируется, размер установлен в половину доступной ширины между краями страницы. Верхняя линия имеет толщину по умолчанию, а две нижние — по 5 пикселов. Нижняя линия должна отображаться сплошным цветом без тени:
Эти линии должны выглядеть примерно так:
Атрибут align
Данный атрибут устарел, вместо него используйте стили.
Синтаксис
Значения
center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на вертикальную невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придаёт официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объёмом не более трёх строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краям. Чтобы произвести это действие браузер добавляет пробелы между словами.
Значение по умолчанию
Пример
Результат данного примера показан на рис. 1.
Рис. 1. Выравнивание элементов с помощью атрибута align
Примечание
Для выравнивания текста внутри используйте стилевое свойство text-align.
Текст
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.