Уласцівасць-скарачэнне font у CSS

У папярэднім уроке мы разбярлі шмат уласцівасцяў для тэксту. Часта дастаткова працаёмка асобна прапісваць кожнае з гэтых уласцівасцяў, таму ў CSS для большага зручнасці існуе спецыяльная ўласцівасць-скарачэнне font. Даная ўласцівасць дазваляе адначасова задаць памер шрыфту, сямейства, тлустасць, курсіў і міжрадковы інтэрвал.

Апісваемая ўласцівасць мае наступны сінтаксіс:

font-style font-weight font-size / line-height font-family

Пры гэтым парадак уласцівасцяў мае значэнне, і абавязковымі з'яўляюцца font-size і font-family. Звярніце ўвагу на тое, што іншыя ўласцівасці, акрамя апісаных вышэй у сінтаксісе, не ўваходзяць у даную ўласцівасць скарачэння.

Давайце паглядзім на прыкладах.

Прыклад

Хай у нас ёсць наступныя стылі:

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

Давайце перапішем іх праз уласцівасць-скарачэнне:

p {
	font: 16px Arial;
}

Прыклад

Хай у нас ёсць наступныя стылі:

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

Давайце перапішем іх праз уласцівасць-скарачэнне:

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

Прыклад

Хай у нас ёсць наступныя стылі:

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

Давайце перапішем іх праз уласцівасць-скарачэнне:

p {
	font: bold 16px Arial;
}

Прыклад

Хай у нас ёсць наступныя стылі:

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;
}