Сократеното својство 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;
}