Цвет текста можно задать с помощью свойства color. Требуется указать цветовое значение.
p {
color: red;
}В качестве значения вы можете указать название цвета или шестнадцатеричное значение цвета.
Установка направления записи
Свойство direction позволяет принудительно устанавливать направление записи элементов. Интересно установить обратное направление записи в контексте языков, в которых пишут справа налево.
Кроме того, по этому свойству можно определить, с какой стороны будут обрезаться содержимое с большим объемом при переполнении.
• ltr – слева направо
• rtl – справа налево
В следующем примере показано, как использовать это свойство.
.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 устанавливает горизонтальное выравнивание параграфов текста и других элементов текcта, находящихся в блочных элементах. Значением по умолчанию является выравнивание по левому краю.
• 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 определяет расстояние между отдельными буквами текста. Здесь также допускаются числовые значения, но не проценты.
<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>Absatz 1</p>
<p>Absatz 2</p>
<p>Absatz 3</p>
<div>
<p>Absatz 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 без проблем, поскольку нераспознание браузерами не имеет негативных последствий. Текст просто будет отображаться без тени.
