Выравнивание текста

Выравнивание текста определяет не только внешний вид сайта. Но и что самое главное - удобочитаемость :) Как выровняете текст, так ваш сайт и будут читать. Ведь в принципе это и есть его прямое предназначение - доносить информацию до людей. Наверное встречали сайты, где текст выравнивают, то по серединке, то сожмут всё в кучу, то растянут во всю ширину сайта, то ещё что то устроят. А результат? А в результате людям не удобно читать. Значит меньше посещаемость и т.д. Да и вообще надо хоть иногда о здоровье людей задумываться, что бы не ломали глаза, придя на ваш сайт.

Для примера ткну пальцем в свой сайт. Уменьшите масштаб в браузере, если у вас монитор с большим разрешением, то не надо. Заметили, текст разделился на колонки. Удобнее читать, чем одну строчку, длиной в десять километров? Конечно удобнее. А теперь наоборот увеличьте масштаб, или соберите браузер по ширине, тем у кого мониторы с маленьким разрешением, на этот раз ни чего делать не надо :) Как видите у текста осталась минимальная ширина, его не сдавило, хоть и сайт резиновый. А верхнее меню наоборот в кучку собралось, что бы не искать его. То есть хоть растянете сайт, хоть сожмёте, а читать и переходить по сайту можно. А для большинства людей не просто можно, а именно удобно, что собственно говоря от сайта и требуется. Не только выдать информацию, но и донести её до читателя.


Давайте для начала научимся просто выравнивать текст:

align="center" - выравнивание текста по центру.

align="left" - выравнивание по левому краю.

align="right" - по правому краю.

align="justify" - по ширине.

Эти теги можно использовать и в таблицах CSS и включить прямо в абзац. Пример - <p align="center">Текст</p> Где новый абзац делается этими тегами - <p>абзац</p> Но лучше прописывать данное свойство сразу в свойствах таблицы, или дива - <div align="left">Текст</div> Что бы не добавлять каждый раз к новому абзацу. Просто некоторые любят поиздеваться над народом и каждый новый абзац выравнивает по разному. Кому то это кажется креативом, кому то весёлым, а кого то и бесит очень сильно. Поэтому лучше выравнивайте весь текст одинаково.


Теперь другая ситуация. У многих сейчас мониторы с большим разрешением. Поэтому сайты у них сильно растягиваются. Конечно если сайт резиновый и не поставлена максимальная ширина. И получается что текст растягивается в эдакую портянку, которую читать просто невозможно. В этом случае, да и не только в этом можно поделить текст на колонки, как в газетах:

.column {
column-count: #; /* На сколько колонок разбивать текст */
column-width: 600px; /* Ширина колонки */
column-gap: 60px; /* Расстояние между колонками */
column-rule: 1px solid #999; /* Стиль границы между колонками */
-moz-column-width: 600px;
-moz-column-gap: 60px;
-moz-column-rule: 1px solid #999;
-webkit-column-width: 600px;
-webkit-column-gap: 60px;
-webkit-column-rule: 1px solid #999;
}

Это кусок кода из моей таблицы CSS. Тут можно разбить текст на определённое количество колонок. column-count: #; - вместо решётки пропишите нужное количество колонок. Или что бы по мере увеличения разрешения монитора, текст делился на колонки. Для этого достаточно просто прописать ширину колонки. И получится, что чем больше разрешение, тем больше колонок у вас на сайте. В общем кому как нравится.


Так же текст можно разделить при помощи горизонтальных линий - <hr> И задать им свойства в таблице CSS. Причём не надо присваивать ни какого класса. А прописать свойства прямо для тега. Кстати, так можно прописывать не только свойства горизонтальных линий, но и заголовков и т.д. Пример:

hr {
border: none; /* Убираем границу для браузера Firefox */
color: #999; /* Цвет линии для браузера Internet Explorer */
background-color: #999; /* Цвет линии для браузера Firefox и Opera */
height: 1px; /* Толщина линии */
width: 90%; /* Ширина линии */
margin-left: 0px; /* Выравнивание по левому краю */
}

Как видите тут можно задать любую ширину, толщину и выровнять по любому краю, или по середине.


Я тут немного затронул ширину сайта:

min-width - минимальная ширина.

max-width - максимальная.

Эти свойства можно присваивать как отдельным абзацам, так и целому сайту. Ширину можно задавать в пикселях - получится фиксированная ширина. Или в процентах, тогда ширина сайта будет зависеть от разрешения монитора. Чем больше разрешение, тем сильнее растянется сайт и наоборот.

И не забывайте про шрифт, не мельчите, но и слоновьи буквы лучше не делать :)

Немного рекламы :)

Copyright, design, ideas © Mihail. При копировании материалов, ссылка на сайт "Seozar.ru" обязательна. Контакты - admin@halych.ru
Тариф «Первый»: 2 сайта, 1 Гб, 2 MySQL, 2 FTP