CSS-də font qısaltma xassəsi

Əvvəlki dərsdə biz mətni üçün çoxlu xassələri nəzərdən keçirdik. Çox vaxt bu xassələrin hər birini ayrıca yazmaq kifayət qədər çətin ola bilər, ona görə də CSS-də daha çox rahatlıq üçün xüsusi qısaltma xassəsi font mövcuddur. Bu xassə eyni zamanda fontun ölçüsünü, ailəsini, qalınlığını, italik formasını və sətirlararası intervalı təyin etməyə imkan verir.

Təsvir olunan xassə aşağıdakı sintaksisə malikdir:

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

Bu zaman xassələrin sırası əhəmiyyətlidir, və məcburi olanlar font-size və font-family-dir. Diqqət edin ki, yuxarıdakı sintaksisdə təsvir olunanlardan başqa digər xassələr bu qısaltma xassəsinə daxil deyil.

Gəlin nümunələrə baxaq.

Nümunə

Tutaq ki, bizdə aşağıdakı stillər var:

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

Gəlin onları qısaltma xassəsi vasitəsilə yenidən yazaq:

p {
	font: 16px Arial;
}

Nümunə

Tutaq ki, bizdə aşağıdakı stillər var:

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

Gəlin onları qısaltma xassəsi vasitəsilə yenidən yazaq:

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

Nümunə

Tutaq ki, bizdə aşağıdakı stillər var:

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

Gəlin onları qısaltma xassəsi vasitəsilə yenidən yazaq:

p {
	font: bold 16px Arial;
}

Nümunə

Tutaq ki, bizdə aşağıdakı stillər var:

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

Gəlin onları qısaltma xassəsi vasitəsilə yenidən yazaq:

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

Praktiki Tapşırıqlar

Kodu font qısaltma xassəsindən istifadə edərək qısaldın:

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

Kodu font qısaltma xassəsindən istifadə edərək qısaldın:

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

Kodu font qısaltma xassəsindən istifadə edərək qısaldın:

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