CSS Text - текст
Форматирование текста
Этот текст стилизован под некоторые свойства форматирования текста. Заголовок использует свойства выравнивания текста, преобразования текста и цвета. Абзац имеет отступ, выравнивается, и задается пробел между символами. Подчеркивание удаляется из этого цветного.
Цвет текста
Свойство color используется для задания цвета текста.
Цвет задается:
- a color name - like "red"
- a HEX value - like "#ff0000"
- an RGB value - like "rgb(255,0,0)"
Посмотрите на значения цвета CSS для полного списка возможных значений цвета.
Цвет текста по умолчанию для страницы определяется в селекторе Body.
Пример
body {
color: blue;
}
h1 {
color: green;
}
Примечание: Для CSS, совместимого с W3C: Если вы определите свойство color , необходимо также определить background-color.
Выравнивание текста
Свойство text-align используется для задания выравнивания текста по горизонтали.
Текст может быть выровнен по левому или правому краю, центрирован или выровнен.
Следующий пример показывает выравнивание по центру, а левый и правый выровненный текст (выравнивание по левому краю по умолчанию, если направление текста слева направо, а выравнивание по правому краю по умолчанию, если направление текста справа налево):
Пример
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
Если свойство text-align имеет значение "выравнивание", каждая строка растягивается так, чтобы каждая строка имела одинаковую ширину, а левое и правое поля были прямыми (как в журналах и газетах):
Пример
div {
text-align: justify;
}
Оформление текста
Свойство text-decoration используется для задания или удаления элементов оформления из текста.
Значение text-decoration: none; часто используется для удаления подстрочных ссылок:
Пример
a {
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 используется для указания отступа первой строки текста:
Пример
p {
text-indent: 50px;
}
Интервал между буквами
Свойство letter-spacing используется для указания пробела между символами в тексте.
В следующем примере показано, как увеличить или уменьшить пространство между символами:
Пример
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
Высота линии
Свойство line-height используется для задания промежутка между строками:
Пример
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
Направление текста
Свойство direction используется для изменения направления текста элемента:
Пример
p {
direction: rtl;
}
Интервал между словами
Свойство word-spacing используется для указания промежутка между словами в тексте.
В следующем примере показано, как увеличить или уменьшить интервал между словами:
Пример
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
Тень текста
Свойство text-shadow добавляет тень к тексту.
В следующем примере указывается положение горизонтальной тени (3px), положение вертикальной тени (2px) и цвет тени (красный):
Пример
h1 {
text-shadow: 3px 2px red;
}
Другие примеры
Отключение переноса текста внутри элемента
В этом примере демонстрируется отключение переноса текста внутри элемента.
Вертикальное выравнивание изображения
В этом примере показано, как задать вертикальное выравнивание изображения в тексте.
Совет: Перейдите в раздел «шрифты 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 | Увеличивает или уменьшает расстояние между словами в тексте |