ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Текст


Зачем нужно форматирование текста?

Форматирование текста осуществляют для придания веб-странице более привлекательного вида и большей оригинальности. При этом можно выравнивать параграфы, менять семейство шрифта, размер шрифта, его начертание, цвет, добавлять тень к тексту и т.д.

форматирование текста

Этот текст имеет некоторые свойства форматирования текста. В заголовке используются свойства text-align, text-transform и color. Параграф с отступом, выровнен и между символами указан пробел. Подчеркивание удалено из этой цветной ссылки "Попробуйте сами".


Попробуйте сами »

Text Color - Цвет текста

Свойство color используется для установки цвета текста. Цвет может быть указан:

  • название цвета - например "red" (красный)
  • в значении HEX - например "#ff0000"
  • в значении RGB - например "rgb(255,0,0)"

Посмотрите CSS значения цветов для получения полного списка возможных значений цвета.

Цвет текста по умолчанию для страницы определяется в селекторе body.

Пример

body {
  color: blue;
}

h1 {
  color: green;
}
Попробуйте сами »

Примечание: Для CSS, совместимого с W3C: если вы определяете свойство color вы также должны определить background-color.


Text Alignment - Выравнивание текста

Свойство text-align используется для горизонтального выравнивания текста.

Текст может быть выровнен по левому или правому краю, центрирован или выровнен по ширине.

В следующем примере показано выравнивание по центру и выравнивание по левому и правому краям (выравнивание по левому краю по умолчанию, если направление текста слева направо, и выравнивание по правому краю по умолчанию, если направление текста справа налево):

Пример

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}
Попробуйте сами »

Если для свойства text-align установлено значение "justify", каждая строка растягивается, так что каждая строка имеет одинаковую ширину, а левые и правые поля будут выровнены (как в журналах и газетах):

Пример

div {
  text-align: justify;
}
Попробуйте сами »

Text Decoration - Оформление текста

Свойство 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 Transformation - Преобразование текста

Свойство text-transform используется для указания прописных и строчных букв в тексте.

С его помощью можно превратить все в прописные или строчные буквы или использовать заглавные буквы в каждом слове:

Пример

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}
Попробуйте сами »

Text Indentation - Отступ текста

Свойство text-indent используется для указания отступа первой строки текста:

Пример

p {
  text-indent: 50px;
}
Попробуйте сами »

Letter Spacing - Межбуквенное расстояние

Свойство letter-spacing используется для указания пробела между символами в тексте.

В следующем примере показано, как увеличить или уменьшить расстояние между символами:

Пример

h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}
Попробуйте сами »

Line Height - Высота строки

Свойство line-height используется для указания пробела между строками:

Пример

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}
Попробуйте сами »

Text Direction - Направление текста

Свойство direction используется для изменения направления текста элемента:

Пример

p {
  direction: rtl;
}
Попробуйте сами »

Word Spacing - Расстояние между словами

Свойство word-spacing используется для указания пробела между словами в тексте.

В следующем примере показано, как увеличить или уменьшить расстояние между словами: 

Пример

h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}
Попробуйте сами »

Text Shadow - Тень текста

Свойство text-shadow добавляет тень к тексту.

В следующем примере указывается положение горизонтальной тени (3 пикселя), положение вертикальной тени (2 пикселя) и цвет тени (красный):

Пример

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 Увеличивает или уменьшает расстояние между словами в тексте