codemotion (codemotion) wrote,
codemotion
codemotion

Выравнивание / Неделя 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>

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

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

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

Опубликовано на сайте ДвижКод.

Tags: html, Технологии
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 1 comment