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;
}