• доступно о веб-разработке
02.11.2012 HTML, Технологии

Выравнивание / Неделя HTML

Мы, люди, любим, чтобы все было ровно. Но ровно, конечно, бывает не всегда. Ежели мы говорим о работе с текстом, то, разумеется, на вашем сайте он должен быть удобен для восприятия его посетителем.  Убежден, что уже не осталось «гениев-от-веб-дизайна», которые красными буквами на черном фоне. Такой «вырви глаз» заставляет посетителя сайта терять не только внимание, но и интерес к самому ресурсу. Все знают золотое правило типографа — черный текст на белом фоне. Добавим к этому еще несколько слов про выравнивание текста и HTML-элементов.

Простая задача. Вы хотите, чтобы в вашем абзаце текст был выравнен по правому краю. Как это сделать? Двумя способами.

Первый, старый и традиционный, указать параметр align, что в переводе на русский и означает «выравнивание». Он может принимать три значения — left, center и right.

Посмотрим на примере:

Съешь еще этих мягких французских булок, да выпей чаю.

<p align="left">Съешь еще этих мягких французских булок, да выпей чаю.</p>

Съешь еще этих мягких французских булок, да выпей чаю.

<p align="center">Съешь еще этих мягких французских булок, да выпей чаю.</p>

Съешь еще этих мягких французских булок, да выпей чаю.

<p align="right">Съешь еще этих мягких французских булок, да выпей чаю.</p>

Выравнивание по ширине:

Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю.

<p align="justify">Съешь еще этих мягких французских булок, да выпей чаю. Съешь еще этих мягких французских булок, да выпей чаю.</p>

Понятно, что выравнивание происходит внутри указанного блока.

Все тоже самое мы можем сделать вторым способом, при помощи CSS.

p {
 text-align: left | center | right; // или-или
}

Только  в данном случае правило стиля будет действовать на все теги p, поэтому лучше воспользоваться классами.

Несмотря на то, что параметр align будет работать в браузерах, он является устаревшим и не рекомендуется к использованию в HTML5.

Поэтому, например, я делаю так в своих проектах:

.t_l {
  text-align: left;
}

.t_c {
  text-align: center;
}

.t_r {
  text-align: right;
}
.t_j {
  text-align: justify;
}

Создают три класса-помощника, называя их коротко для быстроты использования, а после использую их где это необходимо.

<p class="intro about t_c">Тут какой-то отцентрованный текст…</p>

Но не думайте, что эти правила стиля действуют только на текст.

Вы можете выравнивать и другие блоки (например, изображения) внутри элементов.

Задание следующее. Сделайте несколько блоков с текстом и другими блоками внутри, и попробуйте через стили задать разное выравнивание текста в разных элементах.

Поделиться

Комментарии Правила дискуссии

Читайте ранее:
Позиционирование / Видеурок №5

Как и было обещано вчера, предлагаю вашему вниманию видеоурок по позиционированию элементов на странице. httpv://www.youtube.com/watch?v=VPGT28NdX9w

Закрыть