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