A font CSS rövidített tulajdonság

Az előző leckében számos szöveges tulajdonságot vizsgáltunk meg. Gyakran meglehetősen nehézkes külön-külön megadni ezeket a tulajdonságokat, ezért a CSS a nagyobb kényelem érdekében tartalmaz egy különleges rövidített tulajdonságot, a font-ot. Ez a tulajdonság lehetővé teszi a betűméret, a betűtípus, a vastagság, a dőlt stílus és a sorköz egyidejű beállítását.

A leírt tulajdonság szintaxisa a következő:

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

Ebben a sorrendben a tulajdonságoknak jelentőségük van, és a kötelezőek a font-size és a font-family. Figyelj arra, hogy a fenti szintaxisban leírtakon kívül más tulajdonságok nem tartoznak ebbe a rövidített tulajdonságba.

Nézzünk példákat.

Példa

Tegyük fel, hogy a következő stílusaink vannak:

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

Írjuk át őket a rövidített tulajdonsággal:

p {
	font: 16px Arial;
}

Példa

Tegyük fel, hogy a következő stílusaink vannak:

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

Írjuk át őket a rövidített tulajdonsággal:

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

Példa

Tegyük fel, hogy a következő stílusaink vannak:

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

Írjuk át őket a rövidített tulajdonsággal:

p {
	font: bold 16px Arial;
}

Példa

Tegyük fel, hogy a következő stílusaink vannak:

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

Írjuk át őket a rövidített tulajdonsággal:

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

Gyakorlati feladatok

Rövidítsd le a kódot a font rövidített tulajdonság használatával:

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

Rövidítsd le a kódot a font rövidített tulajdonság használatával:

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

Rövidítsd le a kódot a font rövidített tulajdonság használatával:

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