Форматирование текста в CSS


назад вперед

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

Этот текст отформатирован с помощью текстовых свойств CSS. Заголовок выровнен по центру, строчные буквы заголовка заменены на заглавные, изменен цвет букв.

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


Цвет текста

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

Цвет текста для всей страницы задается в селекторе body.

Пример

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

Посмотреть

Совет: в соответствии со стандартами W3C если вы указали цвет текста, вы должны указать также цвет фона.


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

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

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

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

Пример

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;}
h4 {text-decoration:blink;}

Посмотреть

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


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

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

Это свойство можно использовать для того, чтобы преобразовать все буквы текста в заглавные/строчные буквы, или изменить первые буквы каждого слова на заглавные (капитализация):

Пример

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

Посмотреть


Красная строка

В CSS есть свойство, которое может автоматически выводить красную строку в параграфах. Это свойство называется text-indent:

Пример

p {text-indent:50px;}

Посмотреть


Примеры

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

Пример демонстрирует изменение расстояния между символами.

Расстояние между строками

Пример демонстрирует, как вы можете задать расстояние между строками в параграфе.

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

Демонстрация изменения направления текста в элементе.


Все свойства текста — справка CSS

Число в столбце "CSS" указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).

Свойство Описание Значения CSS
color Цвет текста цвет 1
direction Направление текста ltr
rtl
2
line-height Расстояние между строками normal
число
длина
%
1
letter-spacing Расстояние между символами normal
длина
1
text-align Горизонтальное выравнивание текста left
right
center
justify
1
text-decoration Оформление текста none
underline
overline
line-through
blink
1
text-indent Красная строка длина
%
1
text-shadow   none
color
length
 
text-transform Трансформация символов текста none
capitalize
uppercase
lowercase
1
unicode-bidi   normal
embed
bidi-override
2
vertical-align Вертикальное выравнивание текста baseline
sub
super
top
text-top
middle
bottom
text-bottom
длина
%
1
white-space Переносы в тексте normal
pre
nowrap
1
word-spacing Расстояние между словами в тексте normal
length
1


Поисковой портал Jooble - позволяет в один клик найти любую интересующую вакансию по всему интернету.

Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта