Sifa ya Kifupi font katika CSS

Katika somo lililopita tulichambua mali nyingi kwa maandishi. Mara nyingi inakuwa gumu kuandika kila moja ya mali hizi kando, kwa hivyo katika CSS kwa urahisi zaidi kuna sifa maalum ya kifupi font. Sifa hii inaruhusu kuweka wakati mmoja ukubwa wa herufi, familia, ujazito, italic na nafasi kati ya mistari.

Sifa inayoelezewa ina sintaksia ifuatayo:

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

Katika hali hii, mpangilio wa mali una umuhimu, na zinazohitajika ni font-size na font-family. Makini na kwamba mali nyingine, isipokuwa zile zilizoelezwa hapo juu kwenye sintaksia, hziingii ndani ya sifa hii ya kifupi.

Tuangalie kwa mifano.

Mfano

Hebu tuchukue kuwa tuna mitindo ifuatayo:

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

Hebu tuyaandike tena kwa kutumia sifa ya kifupi:

cssp {
  font: 16px Arial;
}

Mfano

Hebu tuchukue kuwa tuna mitindo ifuatayo:

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

Hebu tuyaandike tena kwa kutumia sifa ya kifupi:

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

Mfano

Hebu tuchukue kuwa tuna mitindo ifuatayo:

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

Hebu tuyaandike tena kwa kutumia sifa ya kifupi:

cssp {
  font: bold 16px Arial;
}

Mfano

Hebu tuchukue kuwa tuna mitindo ifuatayo:

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

Hebu tuyaandike tena kwa kutumia sifa ya kifupi:

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

Kazi za Vitendo

Задание 1

Fupisha msimbo, ukitumia sifa ya kifupi font:

cssp {
  font-family: "Times New Roman";
  font-size: 13px;
  line-height: 20px;
}
Задание 2

Fupisha msimbo, ukitumia sifa ya kifupi font:

cssp {
  width: 300px;
  font-family: Arial;
  color: red;
  font-size: 40px;
  font-weight: bold;
}
Задание 3

Fupisha msimbo, ukitumia sifa ya kifupi font:

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