CSS-i font-omaduse lühend

Eelmises õppetükis uurisime paljusid tekstiga seotud omadusi. Tihti on piisavalt koormav eraldi määrata kõik need omadused, seetõttu on CSS-is suurema mugavuse huvides olemas spetsiaalne lühendatud omadus font. See omadus võimaldab korraga määrata fondi suuruse, perekonna, paksuse, kaldkirja ja reavahet.

Kirjeldataval omadusel on järgmine süntaks:

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

Sel juhul on omaduste järjekord oluline, ja kohustuslikud on font-size ja font-family. Pange tähele, et muud omadused, peale ülalkirjeldatud süntaksis toodud, ei kuulu sellesse lühendatud omadusse.

Vaatame näidete varal.

Näide

Oletame, et meil on järgmised stiilid:

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

Kirjutame need ümber kasutades lühendatud omadust:

p {
	font: 16px Arial;
}

Näide

Oletame, et meil on järgmised stiilid:

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

Kirjutame need ümber kasutades lühendatud omadust:

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

Näide

Oletame, et meil on järgmised stiilid:

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

Kirjutame need ümber kasutades lühendatud omadust:

p {
	font: bold 16px Arial;
}

Näide

Oletame, et meil on järgmised stiilid:

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

Kirjutame need ümber kasutades lühendatud omadust:

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

Praktilised ülesanded

Lühendage koodi, kasutades lühendatud omadust font:

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

Lühendage koodi, kasutades lühendatud omadust font:

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

Lühendage koodi, kasutades lühendatud omadust font:

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