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