Рейтинг:  3 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда не активнаЗвезда не активна
 

Текст в CSS.  Свойства

Здесь мы рассмотрим основные свойства которые могут влиять на текст в CSS или его расположение.

- TEXT-ALIGN
- TEXT- DECORATION
- TEXT-INDENT
- TEXT-TRANSFORM
- LETTER-SPACING
- WORD-SPACING

Поехали!

text-align

Выравнивание текста на странице. Имеет 4 значения:

left - выравнивание по левому краю (по умолчанию)
center - выравнивание по центру
right - по правому краю
justify - по ширине экрана ( от левого до правого краёв экрана)

Пример:

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

В итоге, заголовки <h1> будут выравнены по центру,<h2> будут по левому краю,<h3> справа, а параграфы <p> будут по ширине экрана.

 


text-decoration

Применяет оформление к тексту. Имеет 4 значения.
none - значение по умолчанию, обычный текст
underline - подчёркнутый текст
overline - надчёркнутый сверху
line-through - перечёркнутый текст

Например:

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

 

 

 


text-indent

Абзац, красная строка. Позволяет сделать отступ например для параграфа. Удобней задавать в пикселях, но можно и в процентах от длины строки. Пример:

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

Для всех параграфов абзац будет равен 30 пикселям.

 


text-transform

С его помощью можно менять регистр букв. Имеет 4 значения:

none - значение по умолчанию,  ничего не делает
capitalize - Все Первые Буквы Слов Делает Заглавными
uppercase - ДЕЛАЕТ ВСЕ БУКВЫ ЗАГЛАВНЫМИ
lowercase - делает все буквы строчными

h1
{text-align: center;
text-transform: capitalize;}

 

 

 


letter-spacing

Определяет расстояние между буквами. Задаётся в пикселях.

h2
{text-align: center;
letter-spacing: 10px; }

Для заголовков <h2> расстояние между буквами будет 10 пикселей.

 


word-spacing

Определяет расстояние между словами в пикселях.

h1
{word-spacing: 20 px; }

расстояние между словами в заголовках <h1> будет 20 пикселей.

С форматированием текста в CSS всё, теперь о шрифтах.

Перейти к следующему уроку
Шрифты в CSS

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!