CSS

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

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

h1, h2, h3 {font: italic small-caps 250% sans-serif;}
h2 {font: 200% sans-serif;}
h3 {font-size: 150%;}
<h1>This is an h1 element</h1>
<h2>This is an h2 element</h2>
<h3>This is an h3 element</h3>


Текст элемента 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, которое не является сокращенной формой и, следовательно, оказывает влияние только на указанное значение.
Теги:
шрифт
Добавлено: 17 Июля 2018 22:06:59 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...