Font īpašība saīsinājums CSS

Iepriekšējā nodarbībā mēs apskatījām daudzas īpašības tekstam. Bieži vien ir diezgan apgrūtinoši atsevišķi norādīt katru no šīm īpašībām, tāpēc CSS lielākas ērtības labad pastāv īpaša saīsinājuma īpašība font. Šī īpašība ļauj vienlaicīgi iestatīt fonta lielumu, saimi, treknumu, slīprakstu un starplīniju attālumu.

Aprakstītajai īpašībai ir šāda sintakse:

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

Šajā gadījumā īpašību secībai ir nozīme, un obligātas ir font-size un font-family. Pievērsiet uzmanību tam, ka citas īpašības, izņemot iepriekš aprakstītās sintaksē, neietilpst šajā saīsinājuma īpašībā.

Apskatīsim piemērus.

Piemērs

Pieņemsim, ka mums ir šādi stili:

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

Pārrakstīsim tos, izmantojot saīsinājuma īpašību:

p {
	font: 16px Arial;
}

Piemērs

Pieņemsim, ka mums ir šādi stili:

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

Pārrakstīsim tos, izmantojot saīsinājuma īpašību:

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

Piemērs

Pieņemsim, ka mums ir šādi stili:

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

Pārrakstīsim tos, izmantojot saīsinājuma īpašību:

p {
	font: bold 16px Arial;
}

Piemērs

Pieņemsim, ka mums ir šādi stili:

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

Pārrakstīsim tos, izmantojot saīsinājuma īpašību:

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

Praktiskie uzdevumi

Saīsiniet kodu, izmantojot saīsinājuma īpašību font:

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

Saīsiniet kodu, izmantojot saīsinājuma īpašību font:

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

Saīsiniet kodu, izmantojot saīsinājuma īpašību font:

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