форматирование текста
Этот текст оформлен с некоторыми из свойств форматирования текста. Заголовок использует text-align, text-transform , и color свойства. Абзац с отступом, выровнен, и пространство между символами указан. Подчеркивание удаляется из этого цвета "Попробуйте сами" ссылку.
Цвет текста
color свойство используется , чтобы установить цвет текста.
С помощью CSS, цвет чаще всего определяется:
- название цвета - как "red"
- значение HEX - как "#ff0000"
- Значение RGB - как "rgb(255,0,0)"
Посмотрите на CSS Цвет Значения для полного списка возможных значений цвета.
цвет текста по умолчанию для страницы определяется в селекторе тела.
 | Примечание: Для W3C совместимый CSS: Если вы определяете color собственности, необходимо также определить background-color свойство. |
|---|
Выравнивание текста
text-align свойство используется для установки горизонтального выравнивания текста.
Текст может быть оставлено или выравнивание по правому краю, по центру или оправдан.
Следующий пример показывает выровнен по центру, а также левый и выравнивание по правому краю текста (выравнивание по левому краю по умолчанию, если направление текста влево-вправо, и выравнивание по правому краю по умолчанию, если направление текста справа налево):
Когда text-align свойство имеет значение "justify" , каждая линия растягивается так , что каждая линия имеет одинаковую ширину, а также левый и правый края являются прямыми (например , в журналах и газетах):
Текст украшения
text-decoration свойство используется для установки или удаления украшений из текста.
Значение text-decoration: none; часто используется , чтобы удалить подчеркивание из ссылок:
Другие text-decoration значения используются для украшения текста:
пример
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
} Попробуй сам " | Примечание: Не рекомендуется , чтобы подчеркнуть текст , который не является ссылкой, как это часто сбивает с толку читателя. |
|---|
Преобразование текста
text-transform свойство используется для указания прописные и строчные буквы в тексте.
Он может быть использован, чтобы превратить все в верхний или нижний регистр букв, или первые буквы каждого слова:
пример
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
} Попробуй сам " Текст Отступы
text-indent свойство используется для задания отступа первой строки текста:
Межбуквенное расстояние
letter-spacing свойство используется , чтобы указать расстояние между символами в тексте.
В следующем примере показано, как увеличить или уменьшить расстояние между символами:
Высота линии
line-height свойство используется , чтобы указать расстояние между строками:
Направление текста
direction свойство используется для изменения направления текста элемента:
Слово Разнос
word-spacing свойство используется , чтобы указать пространство между словами в тексте.
Следующий пример демонстрирует, как увеличить или уменьшить пространство между словами:
Еще примеры
Отключить перенос текста внутри элемента
Этот пример демонстрирует, как отключить перенос текста внутри элемента.
Вертикальное выравнивание изображения
Этот пример показывает, как установить вертикальную выравнивание изображения в тексте.
Добавить тень в текст
Этот пример демонстрирует, как добавить тень к тексту.
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »
Все свойства CSS Текст
| Имущество | Описание |
|---|---|
| color | Устанавливает цвет текста |
| direction | Определяет направление текста / направление написания |
| letter-spacing | Увеличивает или уменьшает пространство между символами в тексте |
| line-height | Устанавливает высоту строки |
| text-align | Определяет горизонтальное выравнивание текста |
| text-decoration | Определяет украшение добавляется к тексту |
| text-indent | Определяет отступ первой строки в текстовом блоке |
| text-shadow | Определяет эффект тени добавляется к тексту |
| text-transform | Управляет капитализации текста |
| unicode-bidi | Используется вместе с направлением собственности , чтобы установить или вернуться , должен ли текст быть перекрыты для поддержки нескольких языков в одном документе |
| vertical-align | Устанавливает вертикальное выравнивание элемента |
| white-space | Определяет, как бело-пространство внутри элемента обрабатывается |
| word-spacing | Увеличивает или уменьшает пространство между словами в тексте |