Начнем с изучения свойств CSS, которые применяются к тексту для изменения его вида, размеров, цвета, отступов и т.п.

Свойство Font

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

font: italic 12px arial;

Но обычно свойства font расписывают отдельно:

font-family — указывается имя (тип) шрифта. Можно указать через запятую, тогда — если у пользователя нет 1-го шрифта, то применится следующий.

font-family: verdana, times new roman;

font-size — размер шрифта, можно указывать в px, em, процентах или через постоянные значения — xx-small, x-small, small, medium, large, x-large-xx-large.

font-size:1.3em;

font-style — выбор способа вида шрифта — курсив (italic), наклонный (oblique) и обычный (normal)

font-style: italic;

font-variant — определение строчных букв — нормальное (normal) и small-caps (строчные буквы, как уменьшенные заглавные)

font-variant: small-caps;

font-weight — определние жирности шрифта. Можно указывать от 100 до 900 или с помощью слов: bold, bolder, lighter и normal.

font-weight: bold;

Изменения между символами

letter-spacing — отступ между символами. Можно указывать в отрицательном значении в px, in, pt и т.п. Для обычного интервала — normal.

letter-spacing:5px;

line-height — отступ между строками. Можно указывать в px, % или normal. Нельзя указать отрицательное значение.

line-height:50%;

word-spacing — отступ между словами. Указывается в px, in, pt и т.п. или normal.

word-spacing:5pt;

Положение и декор текста

text-align — положение теста по центру (center), по левому (left) или по правому (right) краям:

text-align:center;

vertical-align — положение текста по вертикали, относительно родителя. Устанавливается с помощью слов:

  • bottom — по нижнему краю родителя
  • middle — по середине
  • top — по верхнему краю родителя
  • sub — текст показывается по нижнему индексу
  • super — текст располагается по верхнему индексу

Также можно указывать в мерах длины и процентах с учетом того, что при положительном значении — смещение вверх,  а при отрицательном — вниз.

vertical-align:sub;

text-decoration — добавление декора к тексту с помощью подчеркивания снизу (underline), сверху (overline), перечеркивания (line-through) и мигание (blink). Значение none — отменяет декорирование, даже подчеркивание ссылок.

text-decoration:overline;

text-indent — определение отступа первой строки абзаца. Указывается в любой мере длины.

text-indent:20px;

text-shadow — тень к тексту. Сначала указывается смещение по x, затем по у и радиус размытия тени. В конце можно указать цвет тени.

text-shadow:2px 2px 5px red;

text-transform — управление заглавными и строчными буквами с помощью слов:

  • capitalize — у каждого слова 1-й символ заглавный
  • lowercase — все символы будут строчными
  • uppercase — все символы станут заглавными
  • none — по-умолчанию

text-transform:lowercase;

white-space — выбор отображения пробелов с помощью слов:

  • normal — значение по-умолчанию
  • nowrap — текст располагается в одну строку, перенос только с <br>
  • pre — учитываются все пробелы и переносы
  • pre-line — разрешаются переносы строк
  • pre-wrap — перенос строки, если не вмещается по ширине

 

0

Автор публикации

не в сети 2 месяца

GOOD WEBMASTER

50
В наличии любые плагины и темы последних версий от компании AIT THEMES

Поддержать проект монетой можно так: https://money.yandex.ru/to/410012768487959
Комментарии: 6Публикации: 262Регистрация: 17-12-2017