CSS 文本格式化


文本格式化

这段文本使用了一些文本格式化属性来设置样式。标题使用了 text-align、text-transform 和 color 属性。 该段落设置了缩进、对齐，并指定了字符间距。下划线已从 链接。

Цвет текста

Свойство color используется для установки цвета текста.

Цвета чаще всего задаются через CSS:

  • Шестнадцатеричное значение — например:＃FF0000
  • Значение RGB — например:RGB(255,0,0)
  • Название цвета — например:red

См. такжеЗначения цветов CSSПросмотреть полные значения цветов.

Фоновый цвет веб-страницы относится к выбору внутри body:

Пример

body {color:red;} h1 {color:#0080FF;} h2 {color:rgb(255,0,0);}

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

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

Выравнивание текста

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

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

Когда для text-align задано значение

Пример

h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}

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

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

Свойство text-decoration используется для установки или удаления оформления текста.

С точки зрения дизайна, text-decoration в основном используется для удаления подчёркивания у ссылок:

Пример

a {text-decoration:none;}

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

Также можно оформить текст следующим образом:

Пример

h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;}

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

RemarkМы не рекомендуем выделять текст, который не является ссылкой, поскольку это часто сбивает с толку пользователей.

Преобразование текста

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

Его можно использовать, чтобы сделать все слова прописными или строчными, или чтобы сделать первую букву каждого слова заглавной.

Пример

p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;}

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

Отступ текста

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

Пример

p {text-indent:50px;}

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

Examples

Другие примеры

Задание расстояния между символами
В этом примере показано, как увеличить или уменьшить промежуток между символами.

Задайте расстояние между строками
В этом примере показано, как задать расстояние между строками в абзаце.

Задайте направление текста элемента
Этот пример демонстрирует, как изменить направление текста элемента.

Увеличьте пробел между словами
Этот пример демонстрирует, как увеличить пробел между словами в абзаце.

Отключите перенос текста внутри элемента
Этот пример демонстрирует, как отключить перенос текста внутри элемента.

Вертикальное выравнивание изображения
Этот пример демонстрирует, как задать вертикальное выравнивание текста с изображениями.

Добавить тень текста
Этот пример демонстрирует, как задать тень текста.

Все CSS-свойства текста.

Свойство Описание
color Задать цвет текста
Направление Задать направление текста
letter-spacing Задать межсимвольный интервал
line-height Задаёт высоту строки
text-align Выравнивает текст в элементе.
text-decoration Добавляет оформление к тексту
text-indent Делает отступ первой строки текста в элементе.
text-shadow Устанавливает тень текста
text-transform Управляет буквами в элементе.
unicode-bidi Устанавливает или возвращает, перезаписывается ли текст.
vertical-align Устанавливает вертикальное выравнивание элемента.
white-space Задаёт способ обработки пробельных символов в элементе.
word-spacing Задать межбуквенный интервал
Другие расширения