Вы можете выравнивать абзацы или содержимое ячеек таблиц с помощью следующих свойств в соответствии со своими желаниями. Эти свойства также можно применять к любым другим элементам, которым может быть назначена определенная или рассчитанная высота или ширина.
Отступ первой строки
Начинаем с свойства text-indent. Определите, как должна быть смещена первая строка абзаца. Также возможно отступление влево. Для этого используется отрицательное значение text-indent. (Подробная информация о том, когда может быть полезно использовать такое экстремальное отступление, будет представлена в дальнейшем). Ожидается числовое значение.
Пример:
.absatz { text-indent: 2em; }
В браузере это выглядит следующим образом:
Если вы используете отрицательное значение, происходит вытеснение текста в первой строке.
.absatz {
text-indent: -2em;
}
И конечно взглянем на результат в браузере:
Также это возможно. Но при определении отступов обратите внимание, чтобы содержимое оставалось читаемым, если это необходимо. На самом деле свойство text-indent также может стать интересным в контексте оптимизации для поисковых систем. Например, иногда проще отображать изображения вместо текста.
Однако, если текст должен быть доступен поисковым системам, возникает дилемма. Эту дилемму можно решить с помощью свойства text-indent. Поскольку это свойство, как известно, позволяет смещать текст. Таким образом, вы можете сделать текст невидимым для посетителей.
Преимущество варианта с text-indent: Текст, который должен быть заменен графикой, остается неизменным в исходном тексте.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
С помощью этого синтаксиса фоновая графика назначается элементу h1. (background был уже представлен в этой серии). С помощью text-indent: -99999px текст заголовка смещается на 99999 пикселей влево. Текст становится невидимым. Теперь отображается только графика.
Если отключить таблицу стилей, текст снова будет виден в нормальном состоянии.
Установка высоты строки
Я уже упоминал о высоте строки в связи с общим свойством font. Теперь немного подробнее о данной теме. Определение высоты строки в связи с размером шрифта (font-size) может быть интересным.
Высота строки определяется с помощью свойства line-height. Допустимы числовые значения. Процентные значения также допустимы. Они относятся к размеру шрифта элемента, для которого задана высота строки. Перед определением высоты строки также обратите внимание на следующее: Бывает, что браузер/устройство предоставляют приоритет высоте строки перед другими свойствами и могут отображать элементы такими, как они высоки. Это может быть неприятным, особенно в случае с графикой. Так что перед публикацией страницы проведите тестирование результатов.
Приведен пример использования line-height.
<p style="line-height:1.4em; font-size:1em;">Иногда у вас отличный макет, но вам еще не хватает фотографий, и если вы используете только пустые рамки, макет выглядит довольно голым. Но можно сделать лучше:<br /> В этом видеокурсе я покажу вам лучшие веб-ссылки, чтобы быстро получить бесплатные плейсхолдеры для изображений. Пример списка можно найти, например, по ссылке <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">здесь</a>.</p> <p style="line-height:2em;font-size:1em;">Иногда у вас отличный макет, но вам еще не хватает фотографий, и если вы используете только пустые рамки, макет выглядит довольно голым. Но можно сделать лучше:<br /> В этом видеокурсе я покажу вам лучшие веб-ссылки, чтобы быстро получить бесплатные плейсхолдеры для изображений. Пример списка можно найти, например, по ссылке <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">здесь</a>.</p> <p style="line-height:1em; font-size:1em;">Иногда у вас отличный макет, но вам еще не хватает фотографий, и если вы используете только пустые рамки, макет выглядит довольно голым. Но можно сделать лучше:<br /> В этом видеокурсе я покажу вам лучшие веб-ссылки, чтобы быстро получить бесплатные плейсхолдеры для изображений. Пример списка можно найти, например, по ссылке <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">здесь</a>.</p>
Здесь определены три текстовых абзаца, каждому из которых назначена разная высота строки.
Как видите, высота строки может сильно влиять на читабельность текса. Поэтому осторожно используйте line-height.
Наконец, возникает вопрос, какую высоту строки следует выбрать. Обычно выбирают высоты строк от 130 до 150 процентов.
p {
line-height: 150%;
}
Однако хорошая читабельность в основном зависит от ширины шрифта. Здесь действует правило: чем длиннее строки текста, тем больше должна быть высота строки. Поэтому обязательно проверьте страницу на то, чтобы читабельность была сохранена.
Горизонтальное выравнивание текста
Свойством text-align определяется горизонтальное выравнивание текста в параграфах и других текствых блоках или элементах Inline, содержащихся в блочных элементах. Для text-align можно установить следующие значения:
• left – выравнивание по левому краю
• right – выравнивание по правому краю
• center – по центру
• justify – выравнивание по ширине
Снова приведем пример:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<h2>PSD-Tutorials.de</h2>
<h3>PSD-Tutorials.de</h3>
</body>
</html>Вот как это выглядит в браузере:
Обратите внимание, что свойство text-align относится не только к тексту. Фактически, оно относится ко всем встроенным элементам. Таким образом, если вставляется изображение, определение text-align также распространяется на этот элемент.
Еще одно замечание: технически, по официальной спецификации CSS, text-align не должно влиять на блочные элементы. (Хотя есть браузеры, которые также это применяют к блочным элементам). Если вы хотите выровнять блочные элементы, в таких случаях используйте уже представленные свойства margin.
