CSSda font xususiyati-qisqartmasi

Oldingi darsda biz matn uchun ko'plab xususiyatlarni ko'rib chiqdik. Ko'pincha bu xususiyatlarning har birini alohida belgilash ancha murakkab, shuning uchun CSSda qulaylik uchun maxsus font xususiyati-qisqartmasi mavjud. Ushbu xususiyat shrift o'lchami, oilasi, qalinligi, kursiv va satrlar orasidagi masofani bir vaqtning o'zida belgilashga imkon beradi.

Tasvirlanayotgan xususiyat quyidagi sintaksisga ega:

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

Bunda xususiyatlarning tartibi muhimdir, va font-size va font-family majburiydir. E'tiboringizni qaratamiz, yuqoridagi sintaksisda tasvirlanganlaradan boshqa xususiyatlar ushbu xususiyat qisqartmasiga kirmaydi.

Keling, misollar orqali ko'rib chiqaylik.

Misol

Faraz qilaylik, bizda quyidagi uslublar mavjud:

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

Keling, ularni xususiyat-qisqartma orqali qayta yozamiz:

p {
	font: 16px Arial;
}

Misol

Faraz qilaylik, bizda quyidagi uslublar mavjud:

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

Keling, ularni xususiyat-qisqartma orqali qayta yozamiz:

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

Misol

Faraz qilaylik, bizda quyidagi uslublar mavjud:

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

Keling, ularni xususiyat-qisqartma orqali qayta yozamiz:

p {
	font: bold 16px Arial;
}

Misol

Faraz qilaylik, bizda quyidagi uslublar mavjud:

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

Keling, ularni xususiyat-qisqartma orqali qayta yozamiz:

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

Amaliy vazifalar

font xususiyati-qisqartmasidan foydalanib, kodni qisqartiring:

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

font xususiyati-qisqartmasidan foydalanib, kodni qisqartiring:

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

font xususiyati-qisqartmasidan foydalanib, kodni qisqartiring:

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