Как правильно использовать сокращенную запись свойств

Важно помнить, что свойство font, поддерживая возможность записи в сокращенном виде, может демонстрировать неожиданные результаты в случае небрежного его применения. Рассмотрим следующие правила:

h1, h2, h3 {font: italic small-caps 250% sans-serif;}
h2 {font: 200% sans-serif;}
h3 {font-size: 150%;}

This is an h1 element


This is an h2 element


This is an h3 element



Текст элемента h2 не стал ни курсивом, ни капителью, и ни один из элементов не выделен полужирным шрифтом? И это правильно. При использовании сокращенной записи свойства font любым опущенным величинам присваиваются значения по умолчанию. Таким образом, предыдущий пример мог бы быть записан следующим образом, что абсолютно эквивалентно:

h1, h2, h3 {font: italic normal small-caps 250% sans-serif;}
h2 {font: normal normal normal 200% sans-serif;}
h3 {font-size: 150%;}

В соответствии с этими правилами стилю и варианту шрифта элемента h2 и свойству font-weight всех трех элементов присваивается значение normal. Это ожидаемое поведение при сокращенной записи свойств. Элемент h3 не постигла та же участь, потому что задано свойство font-size, которое не является сокращенной формой и, следовательно, оказывает влияние только на указанное значение.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Абсолютные размеры
Варианты шрифтов
Загрузка шрифтов
Задание семейства шрифтов
Интеллектуальное сопоставление шрифтов

Вернуться в раздел: CSS / 5. Шрифт