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