CSS Цвет текста
форматирование текста
Этот текст оформлен с помощью некоторых свойств форматирования текста. Заголовок использует свойства text-align (выравнивание текста) text-transform (преобразование текста) и color (цвет). Параграф имеет отступ, выравнивание и пространство между символами. Подчеркивание снимается с цветной ссылки "Редактор кода" ссылка.
Цвет текста
Свойство color используется для определения цвета текста.
С помощью CSS, цвет указан чаще всего:
- Имя -
"red" - Значение HEX-
"#ff0000" - Значение RGB -
"rgb(255,0,0)"
Посмотреть Значений цветов CSS полный список возможных значений цвета.
По умолчанию цвет текста на странице устанавливается в селекторе body.
Примечание: Для W3C совместимости CSS: Если Вы установите свойство color,
необходимо также установить цвет фона background-color.
Выравнивание текста
Свойство text-align используется для горизонтального выравнивания текста.
Текст может быть смещен по левому краю, по правому или по центру.
В следующем примере показано выравнивание текста по центру, слева и справа (по умолчанию если направление текста слева направо, выравнивание текста происходит по левому краю, а если направление текста справа налево, текст по умолчанию будет выравнен справа):
Когда свйство text-align имеет значение "justify",
каждая строка растягивается так, что имеет одинаковую ширину, а левый и правый края равны (как в журналах и газетах):
Оформление текста
Свойство text-decoration используется, чтобы установить или удалить оформление текста.
Свойство со значением text-decoration: none; используется, чтобы удалить подчеркивание ссылки:
Прочие значения свойства text-decoration используются для украшения текста:
Пример
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
h4 {
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 используется для указания расстояния между словами в тексте.
В следующем примере показано, как увеличить или уменьшить расстояния между словами:
Тень текста
Свойство text-shadow добавляет тень к тексту.
Следующий пример определяет положение горизонтальной тени 3 пикселя, положение вертикальной тени 2 пикселя и цвет тени красный:
Еще примеры
Отключить перенос текста внутри элемента
В этом примере показано, как отключить перенос текста внутри элемента.
Установить вертикальное выравнивание изображения
В этом примере показано, как задать вертикальное выравнивание изображения в тексте.
Проверьте себя с помощью упражнений!
Все 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 | Увеличивает или уменьшает пробел между словами в тексте |
