Колір тексту можна налаштувати за допомогою властивості color. Вказується значення кольору.
p {
color: red;
}Як значення можна вказати кольорові слова або шістнадцяткове значення кольору.
Визначення напрямку тексту
За допомогою властивості direction можна примусово встановити напрямок письма елементів. Цікавим є зворотнє напрямок в контексті мов, де пишуть зправа наліво.
Додатково можна визначити позицію обрізки великих вмістів з переповненням.
• ltr – зліва направо
• rlt – справа наліво
У наступному прикладі показано, як можна використовувати цю властивість.
.normal {direction:ltr;}
.rueckwaerts {direction:rtl;}
Тут були визначені два класи.
<p class="normal">Текст, який пишеться зліва направо. 1 2 3 4 5 6 7 8 9 0</p> <p class="rueckwaerts">Текст, який пишеться справа наліво. 1 2 3 4 5 6 7 8 9 0</p>
Результат у браузері виглядає наступним чином:
Горизонтальне вирівнювання текстів
За допомогою властивості text-align встановлюється горизонтальне вирівнювання текстових абзаців та інших тексових або вбудованих елементів у блокових елементах. Додатково, зауважується, що за замовчуванням встановлене вирівнювання по лівому краю.
• left – вирівнювання вліво
• right – вирівнювання вправо
• center – по центру
• justify – вирівнювання за ширину
Приклад:
<p style="text-align:right;">
Ласкаво просимо
</p>
Отриманий результат виглядає наступним чином:
Вертикальне вирівнювання
За допомогою властивості vertical-align встановлюється вертикальне вирівнювання тексту в межах рядка відносно висоти рядка. Вказівка завжди відноситься до батьківського елемента, який має бути вбудованим елементом. При цьому можна також вирівнювати текст у межах таблиці.
Для використання доступні такі значення:
• sub – підрядкове позиціювання
• super – надрядкове позиціювання
• baseline – вирівнювання за базовою лінією
• top – вирівнювання по верхньому краю батьківського елемента
• bottom – вирівнювання по нижньому краю батьківського елемента
• middle – по центру між верхнім і нижнім краєм батьківського елемента
• text-top – вгорі тексту
• text-bottom – внизу тексту
• Значення у відсотках – додатнє або від'ємне значення зсуває елемент вище або нижче базової лінії.
Приклад:
.baseline {
vertical-align: baseline;
}
Зверніть увагу, що значення vertical-align може бути дуже неоднозначно інтерпретоване різними браузерами. Тому обов'язково тестуйте результати перед тим, як розміщувати сторінки в Інтернеті.
Визначення оформлення тексту
text-decoration використовується для надання додаткових властивостей текстам або гіперпосиланням.
• none – без підкреслення
• underline – підкреслення
• overline – надкреслення
• line-through – перекреслення
• blink – миготливість
Також приклад:
a:link {
text-decoration: none;
}
Таким чином, посилання на сторінці більше не підкреслені.
Розмір пробілу між окремими словами можна також вказати явно.
<span style="word-spacing:0.5em">Ласкаво просимо до PSD-Tutorials.de!</span><br /> <span style="word-spacing:1em"> Ласкаво просимо до PSD-Tutorials.de!</span>
Очікується числове значення. Процентні значення тут не можливі.
Схожа на word-spacing є властивість letter-spacing. Однак через letter-spacing встановлюється відстань між окремими буквами тексту. Тут також можливі числові значення, але не відсотки.
<span style="letter-spacing:0.1em">Приклад тексту з відстані між знаками 0.1em</span><br> <span style="letter-spacing:0.3em">Приклад тексту з відстані між знаками 0.3em</span><br>
За допомогою властивості text-transform можна вказати, чи текст буде великим чи малим шрифтом. Це можливо незалежно від фактичної нотації вихідного тексту. Додатково можна вимагати капітальних букв.
• lowercase – великі букви
• uppercase – малі букви
• capitalize – початок слова великою літерою
• none – без трансформації тексту
Приклад:
.klein {
text-transform: lowercase;
}У браузері цей результат виглядає наступним чином:
Пробіли та розриви рядків
За допомогою властивості white-space визначається, як пробіли та розриви рядків, які містяться в початковому коді, повинні відображатися в браузері.
• normal – автоматично вставляється розрив рядка. Крім того, декілька пробілів об'єднуються у один.
• pre – розриви рядків відображаються так, як вони знаходяться у початковому коді.
• nowrap – автоматичний розрив рядка не відбувається.
• pre-line – декілька пробілів об'єднуються у один. Крім того, відбувається перенесення рядка, якщо область для відображення недостатньо велика.
• pre-wrap – відбувається перенесення рядка, якщо область для відображення недостатньо велика.
Це також приклад:
<pre class="brush:xml;"><!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Абзац 1</p>
<p>Абзац 2</p>
<p>Абзац 3</p>
<div>
<p>Абзац 4</p>
</div>
</body>
</html></pre>У браузері це виглядає наступним чином:
Реалізація тіней
За допомогою властивості text-shadow можна використовувати тінь для тексту. Майте на увазі, що ця властивість підтримується тільки в дещо новіших браузерах. Браузери, які не можуть інтерпретувати text-shadow, показують текст без тіні.text-shadow використовується наступним чином:
text-shadow: hV vV blur #xxxxxx;
І це значать значення:
• hV – Горизонтальний зсув
• vV – Вертикальний зсув
• blur – Розмитість
• #xxxxxx – Колір тіні
Наступний приклад показує типове застосування для text-shadow.
.schatten {
color: #444;
font-size: 34px;
text-shadow: 2px 2px 3px #333;
}
Застосовується визначений клас на заголовок першого порядку.
<h1 class="schatten">PSD-Tutorials.de</h1>
І ось ще один погляд на результат:
Як вже було описано, ви можете легко використовувати text-shadow, оскільки невикористання цієї властивості браузерами не має негативних наслідків. Текст просто відображується без тіні.
