Цветът на шрифта може да се зададе с color. Необходим е цветови код за това.
p {
color: red;
}Като стойност може да се посочат цветови думи или шестнадесетичен цветови код.
Задаване на посоката на писане
Чрез свойството direction може да се принуди посоката на писане за елементите. Интересно е обратната посока на писане в контекста на езици, в които се пише отдясно наляво.
Освен това може да се установи на коя страна да се изрязват големи съдържания с overflow.
• 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 се определя хоризонталното подравняване на параграфи и други тексти в блокови елементи. Стандартното настройване е ляво подравняване.
• left – ляво подравняване
• right – дясно подравняване
• center – центрирано
• justify – подравняване на блок текст
Един пример:
<p style="text-align:right;">
Добре дошли
</p>
Резултатът изглежда така:
Вертикално подравняване
Чрез свойството vertical-align се определя вертикалното подравняване на текста в рамките на реда спрямо височината на линията. Указанието винаги се отнася до родителски елемент, който трябва да е inline елемент. Освен това текстът може да бъде подравнен в рамките на таблица.
Следните стойности са налични:
• 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>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 безпроблемно, тъй като неподдържането от браузърите няма отрицателни последици. Текстът ще се показва просто без сянка.
