Войти
» » » Текст в CSS

Текст в CSS

Текст в 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 - текст подчеркивается снизу;
overline - текст надчеркивается сверху;
line-through - текст перечеркивается;

Пример использования данного свойства:
h1 {text-decoration:underline;} – текст будет подчёркнут снизу;
h2 {text-decoration:overline;} – текст будет надчёркиваться сверху;
h3 {text-decoration:line-through;} – текс будет зачёркнутым.

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

TEXT-INDENT

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

Пример:
p {text-indent: 40px;} – отступ будет 40 пикселей;
p {text-indent: 10%;} – отступ будет 10 процентов от ширины блока.

TEXT-TRANSFORM

Это свойство позволяет менять заглавные буквы на маленькие и наоборот
capitalize - меняет регистр первых букв каждого слова так, чтобы они были заглавными. Например:"Сделать сайт самому" будет "Сделать Сайт Самому".
uppercase - делает из всех букв заглавные. Например: "Сделать сайт самому" будет "СДЕЛАТЬ САЙТ САМОМУ"
lowercase - делает из всех букв маленькие. Например: " Сделать сайт самому" будет "сделать сайт самому".
none - не производит смены регистра; это значение используется по умолчанию.
Как правило, такие функции очень редко используют.

LETTER-SPACING

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

Пример:
p{ letter-spacing: 4px; }
p{ letter-spacing: 1%; }

WORD-SPACING

Это свойство позволяет менять расстояние между словами, можно использовать как пиксели, так и проценты. Не рекомендуется им пользоваться, так как самые оптимальные значения уже выставлены в самих шрифтах.

Пример:
p{ word-spacing: 10px; }
p{ word-spacing: 3%; }

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