CSS-ի font հատկության հապավումը

Նախորդ դասում մենք ուսումնասիրեցինք տեքստի համար նախատեսված բազմաթիվ հատկություններ: Հաճախ բավականին դժվար է առանձին-առանձին նշել այս հատկություններից յուրաքանչյուրը, ուստի 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;
}