Ви можете вирівнювати абзаци або вміст комірок таблиці за допомогою наступних властивостей з вашими власними налаштуваннями. Ці властивості можна застосовувати також до всіх інших елементів, які мають визначену або розраховану висоту або ширину.
Зсув першого рядка
Почнемо з властивості 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 визначається горизонтальне вирівнювання текстових абзаців та інших текс{мати в перегортаючих текстах або інлайн-елементах, що містяться в блок-елементах. Наступні значення можна визначити для 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.
