CSS šrifto sutrumpintoji savybė font

Ankstesnėje pamokoje išnagrinėjome daugybę teksto savybių. Dažnai gana varginantiška atskirai aprašyti kiekvieną iš šių savybių, todėl CSS, siekiant didesnio patogumo, egzistuoja speciali sutrumpintoji savybė font. Ši savybė leidžia vienu metu nustatyti šrifto dydį, šeimą, storį, kursyvą ir tarpus tarp eilučių.

Aprašoma savybė turi tokį sintaksę:

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

Be to, savybių tvarka yra svarbi, ir privalomos yra font-size ir font-family. Atkreipkite dėmesį, kad kitos savybės, išskyrus aukščiau sintaksėje aprašytas, neįeina į šią sutrumpintąją savybę.

Pažiūrėkime pavyzdžiais.

Pavyzdys

Tarkime, kad turime šiuos stilius:

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

Perrašykime juos naudodami sutrumpintąją savybę:

p {
	font: 16px Arial;
}

Pavyzdys

Tarkime, kad turime šiuos stilius:

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

Perrašykime juos naudodami sutrumpintąją savybę:

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

Pavyzdys

Tarkime, kad turime šiuos stilius:

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

Perrašykime juos naudodami sutrumpintąją savybę:

p {
	font: bold 16px Arial;
}

Pavyzdys

Tarkime, kad turime šiuos stilius:

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

Perrašykime juos naudodami sutrumpintąją savybę:

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

Praktinės užduotys

Sutrumpinkite kodą, naudodami sutrumpintąją savybę font:

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

Sutrumpinkite kodą, naudodami sutrumpintąją savybę font:

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

Sutrumpinkite kodą, naudodami sutrumpintąją savybę font:

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