Атрибуты стиля (CSS attributes)

Шрифт и текст

Описание шрифта и форматирования текста состоит из целого ряда отдельных атрибутов. Многие термины здесь почерпнуты из типографской практики.

Font-family (гарнитура) задает название используемого шрифта. Поскольку нет полной уверенности, что указанный шрифт установлен и доступен в любом браузере и на любой клиентской машине, разработчик может задать список альтернативных шрифтов в порядке убывания предпочтительности, разделив список запятыми. Если название шрифта содержит пробелы, оно должно быть заключено в кавычки. Пример:

p {font-family: 'Times New Roman', Times, serif;}

Font-size (кегль) задает размер шрифта в абсолютных или относительных единицах или относительно пользовательских предпочитаемых размеров.

Пример:

.p1 {
    font-size: small;
  }
  /* варианты: xx-small, x-small, small, medium, large, x-large, xx-large */
  .p2 {
    font-size: larger;
  }
  /* варианты: larger, smaller */
  .p3 {
    font-size: 10pt;
  }
  /* абсолютный размер 10 пунктов */
  .p3 {
    font-size: 10px;
  }
  /* размер 10 пикселей. Зависит от разрешения экрана или принтера */
  .p3 {
    font-size: 120%;
  }
  /* 120% от размера шрифта родительского элемента */

Font-style (начертание) переключает между обычным (normal) и курсивным (italic).

h3 {font-style: italic;} /* курсив */

Font-weight задает насыщенность (жирность) шрифта. Возможные значения:

• normal – обычный
• bold – жирный
• bolder – жирнее родительского
• lighter – светлее родительского
• 100 – самый светлый
• 200
• 300
• 400 – то же что normal
• 500
• 600
• 700 – то же что bold
• 800
• 900 – самый жирный

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

li {font-weight: bold;}

Font-variant переключает шрифт между обычным (normal) и малыми заглавными буквами (small-caps).

p:first-line {font-variant: small-caps;}

Line-height задает межстрочный интервал в размерных единицах или процентах межстрочного интервала родительского объекта.

p {line-height: 8mm;}

Перечисленные выше атрибуты могут быть объединены в составной атрибут font в следующем порядке: font-style, font-variant, font-weight, font-size, line-height, font-family.

Пример:

p {
    font: italic normal 400 12px/14px Arial;
  }
  /* выделенные жирным значения обязательны, остальные могут быть опущены */

Эквивалентно

p {
    font-style: italic;
    font-variant: normal; /* значение по умолчанию можно опустить*/
    font-weight: 400; /* значение по умолчанию можно опустить*/
    font-size: 12px;
    line-height: 14px;
    font-family: Arial;
  }

Значения font-size и font-family должны всегда присутствовать в объявлении font и быть расположены в установленном порядке. Если какое-либо из них будет пропущено, то все правило будет признано недействительным.

Text-decoration допускает следующие значения: none (без декорирования), underline (подчеркнутый), overline (надчеркнутый), line-through (перечеркнутый), а также их сочетания.

li {text-decoration: underline line-through;}

Text-transform задает преобразование текста следующим образом: none (нет преобразования, по умолчанию), capitalize (делает первую букву каждого слова заглавной), uppercase (все заглавные), lowercase (все строчные).

h1 {text-transform: capitalize;}

Text-align задает выравнивание текста внутри блока влево ( left ), вправо ( right ), по центру ( center ) или по ширине ( justify ). Text-indent определяет отступ первой строки текста от левой границы блока.

p {
    text-align: justify;
    text-indent: 20px;
  }
  /* допускаются положительные и отрицательные значения */

letter-spacing регулирует расстояние между буквами. Значения: любая единица измерения CSS (обычно em или px), хотя проценты для этого свойства не работают в большинстве браузеров. Допускаются отрицательные значения. Значение normal сбрасывает letter-spacing в стандартное значение.

Vertical-align устанавливает базовую линию элемента относительно базовой линии окружающего содержимого. С помощью этого свойства можно немного поднять или опустить символ относительно окружающего текста. При применении к ячейке таблицы значения top, middle, bottom и baseline управляют вертикальным размещением содержимого внутри ячейки.

color устанавливает цвет текста. Значение: любое корректное значение цвета.

p {
      font: 14px Verdana;
    }
  ...
  <p>
    Ко всем абзацам данного примера применено стилевое правило, устанавливающее
    кегль 14px и гарнитуру Verdana. Данный абзац демонстрирует эти свойства
    в чистом виде.
  </p>
  <p style="font-size: larger">
    Текст этого абзаца крупнее, поскольку к нему применен встроенный стиль
    со значением свойства font-size:larger.
  </p>
  <p style="line-height: 200%; color: Red">
    В этом абзаце увеличен межстрочный интервал путем задания свойства стиля
    line-height: 200%, что означает удвоенную высоту строки. Кроме того, тексту
    назначен красный цвет.
  </p>
  <p>
    Эффект <span style="letter-spacing: 3px">разреженного текста </span>достигается
    путем применения свойства letter-spacing.
  </p>

Рис. 4.1. Свойства шрифта и текста