Понедельник, 17 Ноябрь 2014 00:00

Стиль отображения текста в HTML

Работая с блогами и их владельцами, часто обращаю внимание на то, что они не всегда спешат следить за грамотностью, оно и понятно, им ведь не платят за их «работу» миллионы, так чего они будут делать всё правильно и красиво, да? Но в то же время нередко и сам не заморачивался такими стилистическими особенностями, как высота строки и или отступ в начале абзаца, который по умолчанию почему-то отсутствует. Изначально программисты не задумывались о красоте и потому с приходом стилистики все, конечно же, изменилось, но все эти изменения нужно указывать самому, а не ждать, что оно будет всё сделано сразу.

Итак, первое, с чего бы хотелось начать, это отступ в начале строки. Раньше не зная этого свойства, я банально пользовался «пробелами», но это не было выходом из сложившейся ситуации, поскольку отступы в итоге не всегда были ровными.

И моей радости не было предела, когда я узнал про свойство indent, пример:

.sim
{
  text-indent: 20px;
}

Это позволит всему, что имеет класс «sim», сделать отступ в 20 пикселей в начале абзаца.

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

.sim
{
  line-height: 20px;
}

Высота строки станет ровна минимум 20 пикселей, почему минимум, потому что если размер шрифта будет равен, скажем 50 пикселей, то высота строки уже не сможет быть меньше 50.

И если уж зашёл разговор о расстоянии между буквами по вертикали, то стоит ещё упомянуть о расстоянии между буквами по горизонтали. За изменение значения высоты строки символов отвечает свойство letter-spacing, пример:

.sim
{
  letter-spacing: 5px;
}

Расстояние между буквами будет равно 5 пикселям.

Ещё одно свойство, которое может иногда оказаться полезным, изменение значения регистра. За это отвечает свойство text-transform, оно имеет несколько значений:

  • capitalize — первые буквы всех слов будут большие;
  • uppercase — все буквы будут большими;
  • lowercase — все буквы будут маленькими;
  • inherit — значение родительского элемента;
  • none — не меняет регистра символов.

Данное свойство можно рассмотреть на примере:

.sim
{
  text-transform: uppercase;
}

И весь текст в контейнере со свойством sim будет написан большими буквами.

Спонсоры: