Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. В табл. 1 показаны варианты выравнивания блока текста.
Табл. 1. Способы выравнивания текста
Выравнивание по левому краю
Выравнивание по правому краю
Выравнивание по центру
Выравнивание по ширине
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Наиболее распространенный вариант — выравнивание по левому краю, когда слева текст сдвигается до края, а правый остается неровным. Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. Следует иметь в виду, что при использовании выравнивания по ширине в тексте между словами могут появиться большие интервалы, что не очень красиво.
Для установки выравнивания текста обычно используется тег абзаца
Табл. 2. Выравнивание текста с помощью параметра align
Код HTML
Описание
Добавляет новый абзац текста, по умолчанию выровненный по левому краю. Перед абзацем и после него автоматически добавляются небольшие вертикальные отступы.
Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что align=»left» можно опустить.
Отличие между абзацем (тег
Атрибут align достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде
. В примере 1 показано, как в подобном случае устанавливать выравнивание.
Пример 1. Выравнивание текста
Результат примера показан на рис. 1.
Рис. 1. Выравнивание текста по правому и левому краю
В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю.
Рис. 3.42. Значения свойств left, right, top и bottom при абсолютном позиционировании
Для режима характерны следующие особенности.
Пример 3.31. Создание аналога фреймов
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 3.43. Слой header выводится в потоке как обычно, а для слоёв sidebar и content установлено абсолютное позиционирование.
Рис. 3.43. Применение абсолютного позиционирования
Абсолютное позиционирование также применяется для создания различных эффектов, например, всплывающей подсказки к фотографиям. В отличие от атрибута title тега который также выводит текст подсказки, через стили можно управлять видом текста выводимого с помощью скрипта.
Пример 3.32. Стиль для всплывающей подсказки
Сам скрипт состоит из двух функций — moveTip() отслеживает движение мыши и в соответствии с координатами курсора меняет положение слоя, и toolTip() управляет видимостью слоя и выводит в нём желаемый текст (пример 3.33).
Пример 3.33. Скрипт для вывода слоя
Для удобства и универсальности скрипт следует вынести в отдельный файл и подключать его через атрибут src тега
‘ + ‘Объектив: Canon EF 24-105 f/4L IS USM ‘ + ‘Вспышка: Canon Speedlite 580 EX ‘ + ‘Выдержка: 1/125 Диафрагма: 5.6′)» onmouseout=»toolTip()» />
Выравнивание элементов на веб-странице может оказаться не такой легкой задачей, особенно если речь идет об выравнивание текста по вертикали. Этот вопрос часто встречается на форумах, и особую трудность решение этого вопроса вызывает у начинающих пользователей. Но на самом деле здесь сложного ничего нет. Все что нужно, это немного владеть знаниями каскадной таблицы стилей CSS. Так как это все делается за счет ее правил.
Выравнивание текста по вертикали можно добиться по меньшей мере пятью разными способами. Каждый из них по-своему хорош, учитывая обстоятельства и детали ситуации. Мы рассмотрим несколько примеров, а вы исходя из условий, подберете себе подходящее ращение.
Первый метод с line-height
первый пример. демо №1
Выравнивание со свойством position
Этот метод широко используется во многих задачах CSS, не исключая и нашей поставленной задачки. Но следует отметить, что он не полностью совершенен и имеет свои побочные эффекты. Это связано с тем, что центрирование элемента, задаваемое в процентах, будет центрироваться по левому верхнему краю внутреннего блока.
Поэтому нужно задать отрицательное значение к внешним отступам. Размер отступа сверху должен соответствовать половине высоты внутреннего блока, а отступ слева — на половину ширины. Таким образом, получим абсолютный центр.
В этом варианте, пожалуй, обязательно знать точную высоту и ширину дочернего элемента. Иначе, может возникнуть некорректность центрирования.
Выравнивание со свойством table
Выравнивание со свойством flex
Это идет уже более специфичный вариант со свойствами, которые не так часто встречаются в верстке сайта. Но, тем не менее они в редких случаях очень полезны.
За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по горизонтали и вертикали, расширяются возможности по управлению положением элементов относительно друг друга. Таблицы позволяют задавать выравнивание изображений, текста, полей формы и других элементов относительно друг друга и веб-страницы в целом. Вообще, выравнивание в основном необходимо для установки зрительной связи между разными элементами, а также их группирования.
Центрирование по вертикали
Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).
Пример 1. Центрирование рисунка
В данном примере выравнивание по горизонтали устанавливается с помощью параметра align=»center» тега
, а по вертикали содержимое ячейки можно не центрировать, поскольку это положение задано по умолчанию.
Использование ширины и высоты на всю доступную область веб-страницы гарантирует, что содержимое таблицы будет выравниваться строго по центру окна браузера, независимо от его размеров.
Выравнивание по горизонтали
За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега
, допустимо устанавливать несколько видов положений элементов относительно друг друга. На рис. 1 показаны способы выравнивания элементов по горизонтали.
Рис. 1. Выравнивание элементов по горизонтали
Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.
Выравнивание по верхнему краю
Для указания выравнивания содержимого ячеек по верхнему краю, для тега
требуется установить атрибут valign со значением top (пример 2).
Пример 2. Использование valign
В данном примере характеристики ячеек управляются с помощью параметров тега
, но тоже удобнее изменять через стили. В частности, выравнивание в ячейках указывается свойствами vertical-align и text-align (пример 3).
Пример 3. Применение стилей для выравнивания
Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.
Выравнивание по центру
По умолчанию содержимое ячейки выравнивается по центру их вертикали, поэтому в случае разной высоты колонок требуется задавать выравнивание по верхнему краю. Иногда все-таки нужно оставить исходный способ выравнивания, например, при размещении формул, как показано на рис. 2.
Рис. 2. Добавление формулы в документ
В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.
Пример 4. Выравнивание формулы
В данном примере первая ячейка таблицы оставлена пустой, она служит лишь для создания отступа, который, кстати, может быть установлен и с помощью стилей.
Выравнивание элементов формы
С помощью таблиц удобно определять положение полей формы, особенно, когда они перемежаются с текстом. Один из вариантов оформления формы, которая предназначена для ввода комментария, показан на рис. 3.
Рис 3. Расположение полей формы и текста
Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).
Замечание. Если в Блокноте при наборе текста вы начали писать текст с новой строки, то в браузере этот текст все равно будет расположен на одной строчке. Чтобы перенести строку внутри одного абзаца требуется поставить тэг в конце строки.
Пример:
Результат:
Как выровнять текст
Для выравнивания текст у тэга Р есть атрибут ALIGN. Но не достаточно просто написать
. У атрибута должен быть указан параметр. Так атрибут ALIGN имеет следующие параметры:
LEFT – выравнивание текста по левому краю
RIGHT – выравнивание текста по правому краю
CENTER – выравнивание текста по центру
JUSTIFY – выравнивание текста по ширине
Чтобы выровнять название стихотворения по центру необходимо сделать следующую запись:
Пример:
Замечание. Обратите внимание, что при закрытии тэга его атрибуты не пишутся.
Результат:
Самостоятельно сделайте выравнивание строки «Александр Пушкин» по правому краю.
Использование заголовков
В нашем примере очень хотелось бы, чтобы название и автор стихотворения были бы выделены. Для этого можно использовать заголовки. У заголовка существуют уровни: H1 – самый первый уровень и, соответственно, текст, заключенный в контейнер
всегда начинается с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
также имеется атрибут.
ALIGN определяет выравнивание заголовка. Параметр ALIGN такие же как и у атрибута ALIGN тэга P.
Сделаем в нашем примере название стихотворения заголовком первого уровня и выравнивание по центру, а автора – вторым уровнем и выравнивание по правому краю.
Пример:
Результат:
Использование горизонтальных разделителей
У тэга HR есть параметры:
Пример:
WIDTH – устанавливает ширину линии в пикселах или процентах.
Пример:
COLOR – задает линии определенный цвет.
Пример:
ALIGN определяет выравнивание линии.
Пример:
Вставим горизонтальный разделитель после стихотворения с толщиной в 2 пикселя и желтым цветом.
Пример:
Замечание. Если для одного тэга мы применяем несколько атрибутов, то достаточно перечислить их через пробел.
Результат:
Как установить шрифт текста
У этого атрибута есть свои параметры:
Слово «текст» будет иметь шрифт Times New Roman – с засечками.
Слово «текст» будет иметь шрифт Arial – без засечек.
Зададим стихотворению шрифт Arial.
Пример:
. А закрываем мы тэги в обратном порядке: сначала тэг
Результат:
Как изменить размер текста
Тэг представляет собой контейнер не только для изменения гарнитуры, но и для установки таких характеристик шрифта как размер и цвет.
Для изменения размера шрифта используется атрибут SIZE, который задает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size=»4″), так и относительной (например, size=»+1″, size=»-1″). В последнем случае размер изменяется относительно текущего.
Изменим размер стихотворения на 5 условных единиц.
Пример:
Результат:
Как задать цвет текста
Для изменения цвета шрифта тэг FONT имеет атрибут COLOR. Значение цвета можно задавать двумя способами. по его названию или по шестнадцатеричному значению.
Зададим для текста цвет FF9900, для этого нужно сделать следующую запись:
Пример:
Обратите внимание, что при использовании шестнадцатеричного кода для указания цвета перед ним обязательно нужно вставить знак решетка #.
Пример:
Результат:
Тэги изменения начертания шрифта
Создадим новый документ.
Пример:
Пример:
Пример:
Результат:
Тэг отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.
Тэг отображает шрифт в виде верхнего индекса. Текст при этом располагается выше базовой линии остальных символов строки и уменьшенного размера.
‘ + ‘Объектив: Canon EF 24-105 f/4L IS USM
