мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Свойство-сокращение font

В предыдущем уроке мы с вами разобрали много свойств для текста. Зачастую достаточно накладно отдельно прописывать каждое из этих свойств, поэтому в CSS для большего удоства существует специальное свойство-сокращение font. Данное свойство позволяет одновременно задать размер шрифта, семейство, жирность, курсив и межстрочный интервал.

Описываемое свойство имеет следующий синтаксис:

курсив жирность размер_шрифта / межстрочный_интервал семейство

При этом порядок свойств имеет значение, и обязательными являются "размер_шрифта" и "семейство". Обратите внимание на то, что другие свойства, кроме описанных выше в синтаксисе, не входят в данное свойство сокращение.

Давайте посмотрим на примерах.

Пример 1

Пусть у нас есть следующие стили:

p { font-size: 16px; font-family: Arial; }

Давайте перепишем их через свойство-сокращение:

p { font: 16px Arial; }

Пример 2

Пусть у нас есть следующие стили:

p { font-size: 16px; font-family: Arial; line-height: 50px; }

Давайте перепишем их через свойство-сокращение:

p { font: 16px/50px Arial; }

Пример 3

Пусть у нас есть следующие стили:

p { font-size: 16px; font-family: Arial; font-weight: bold; }

Давайте перепишем их через свойство-сокращение:

p { font: bold 16px Arial; }

Пример 4

Пусть у нас есть следующие стили:

p { font-size: 16px; font-family: Arial; font-weight: bold; line-height: 50px; font-style: italic; }

Давайте перепишем их через свойство-сокращение:

p { font: bold italic 16px/50px Arial; }

Практические задачи

Сократите код, используя свойство-сокращение font:

p { font-family: "Times New Roman"; font-size: 13px; line-height: 20px; }

Сократите код, используя свойство-сокращение font:

p { width: 300px; font-family: Arial; color: red; font-size: 40px; font-weight: bold; }

Сократите код, используя свойство-сокращение font:

p { font-family: Arial; font-size: 40px; font-weight: bold; text-indent: 50px; font-style: italic; line-height: 60px; }