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

Автор: | 14 января, 2021

Теперь рассмотрим какие бывают свойства CSS отвечающие за форматирование текста.


Свойство TEXT-ALIGN

Свойство выравнивания текста, аналогичное атрибуту ALIGN применяемому в html. Всего бывает четыре значения:

left – выравнивание по левому краю (значение по умолчанию);
right – выравнивание по правому краю;
center – выравнивание по центру;
justify – выравнивание по ширине.

Пример:

h1{ text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}
p {text-align:justify;}


Свойство TEXT- DECORATION

Можно придать тексту особый дизайн. Бывает четыре значения:

none – значение без оформления;
underline – текст подчеркивается снизу;
line-through – текст перечеркивается;
overlineтекст подчеркивается сверху;

h1 {
text-align:left;
text-decoration:underline;
}
h2 {
text-align:center;
text-decoration:overline;
}
h3 {
text-align:justufy;
text-decoration:line-through;
}

Это свойство в основном применяется при оформлении ссылок, например, чтобы при наведении на нее исчезало подчеркивание.


Свойство TEXT-INDENT

Это свойство необходимо для создания отступов первой строчки, то есть создания абзацев. Задается значение в пикселях:

h1{text-align:justify;}
p {
text-indent: 30px;
}

Или в процентах:

h2{text-align:center;}
p {
text-indent: 5%;
}

Как видите, ничего сложного.


Свойство TEXT-TRANSFORM

Позволяет менять вид текста, а точнее большие буквы на маленькие или наоборот. Существует 4 значения:

capitalize – делает каждую первую букву слова заглавной. Например:”как выиграть миллион” станет “Как Выиграть Миллион”.
Используется иногда для привлечения внимания.

uppercase – меняет все буквы на заглавные. Например: “свойства в css ” станет ” СВОЙСТВА В CSS ”

lowercase – меняет все буквы на маленькие. Например: “TEXT” станет “text”.

none – все остается без изменений;


Свойство LETTER-SPACING

Данное свойство позволяет менять расстояние между буквами. Значения указываются обычно в пикселях:

h1 { letter-spacing: 8px;}
p{ letter-spacing: 3px; }

В данном случае для заголовков мы установили интервал между буквами в 8px, а для параграфов в 3px;


Свойство WORD-SPACING

С помощью этого свойства меняется расстояние между словами:

h2 { word-spacing: 17px;}
p{ word-spacing: 7px; }

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

Следующая – Списки в CSS

Предыдущая  – Шрифты в CSS

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *