De CSS font shorthand eigenschap
In de vorige les hebben we veel
teksteigenschappen behandeld. Het is vaak behoorlijk omslachtig
om elk van deze eigenschappen apart op te schrijven,
daarom bestaat er in CSS voor meer gemak een
speciale shorthand eigenschap font.
Deze eigenschap maakt het mogelijk om tegelijkertijd
de lettergrootte, familie, dikte, cursief
en regelafstand in te stellen.
De beschreven eigenschap heeft de volgende syntaxis:
font-style font-weight font-size / line-height font-family
Hierbij is de volgorde van de eigenschappen van belang,
en zijn font-size
en font-family verplicht. Let op dat
andere eigenschappen, behalve de hierboven in de syntaxis beschreven,
niet in deze shorthand eigenschap zitten.
Laten we naar voorbeelden kijken.
Voorbeeld
Stel we hebben de volgende stijlen:
p {
font-size: 16px;
font-family: Arial;
}
Laten we ze herschrijven met de shorthand eigenschap:
p {
font: 16px Arial;
}
Voorbeeld
Stel we hebben de volgende stijlen:
p {
font-size: 16px;
font-family: Arial;
line-height: 50px;
}
Laten we ze herschrijven met de shorthand eigenschap:
p {
font: 16px/50px Arial;
}
Voorbeeld
Stel we hebben de volgende stijlen:
p {
font-size: 16px;
font-family: Arial;
font-weight: bold;
}
Laten we ze herschrijven met de shorthand eigenschap:
p {
font: bold 16px Arial;
}
Voorbeeld
Stel we hebben de volgende stijlen:
p {
font-size: 16px;
font-family: Arial;
font-weight: bold;
line-height: 50px;
font-style: italic;
}
Laten we ze herschrijven met de shorthand eigenschap:
p {
font: bold italic 16px/50px Arial;
}
Praktische opdrachten
Verkort de code door gebruik te maken van de shorthand eigenschap
font:
p {
font-family: "Times New Roman";
font-size: 13px;
line-height: 20px;
}
Verkort de code door gebruik te maken van de shorthand eigenschap
font:
p {
width: 300px;
font-family: Arial;
color: red;
font-size: 40px;
font-weight: bold;
}
Verkort de code door gebruik te maken van de shorthand eigenschap
font:
p {
font-family: Arial;
font-size: 40px;
font-weight: bold;
text-indent: 50px;
font-style: italic;
line-height: 60px;
}