A font CSS rövidített tulajdonság
Az előző leckében számos szöveges
tulajdonságot vizsgáltunk meg. Gyakran meglehetősen nehézkes
külön-külön megadni ezeket a tulajdonságokat,
ezért a CSS a nagyobb kényelem érdekében tartalmaz egy
különleges rövidített tulajdonságot, a font-ot.
Ez a tulajdonság lehetővé teszi a betűméret, a betűtípus,
a vastagság, a dőlt stílus és a sorköz egyidejű
beállítását.
A leírt tulajdonság szintaxisa a következő:
font-style font-weight font-size / line-height font-family
Ebben a sorrendben a tulajdonságoknak jelentőségük van,
és a kötelezőek a font-size
és a font-family. Figyelj arra, hogy
a fenti szintaxisban leírtakon kívül más tulajdonságok
nem tartoznak ebbe a rövidített tulajdonságba.
Nézzünk példákat.
Példa
Tegyük fel, hogy a következő stílusaink vannak:
p {
font-size: 16px;
font-family: Arial;
}
Írjuk át őket a rövidített tulajdonsággal:
p {
font: 16px Arial;
}
Példa
Tegyük fel, hogy a következő stílusaink vannak:
p {
font-size: 16px;
font-family: Arial;
line-height: 50px;
}
Írjuk át őket a rövidített tulajdonsággal:
p {
font: 16px/50px Arial;
}
Példa
Tegyük fel, hogy a következő stílusaink vannak:
p {
font-size: 16px;
font-family: Arial;
font-weight: bold;
}
Írjuk át őket a rövidített tulajdonsággal:
p {
font: bold 16px Arial;
}
Példa
Tegyük fel, hogy a következő stílusaink vannak:
p {
font-size: 16px;
font-family: Arial;
font-weight: bold;
line-height: 50px;
font-style: italic;
}
Írjuk át őket a rövidített tulajdonsággal:
p {
font: bold italic 16px/50px Arial;
}
Gyakorlati feladatok
Rövidítsd le a kódot a font
rövidített tulajdonság használatával:
p {
font-family: "Times New Roman";
font-size: 13px;
line-height: 20px;
}
Rövidítsd le a kódot a font
rövidített tulajdonság használatával:
p {
width: 300px;
font-family: Arial;
color: red;
font-size: 40px;
font-weight: bold;
}
Rövidítsd le a kódot a font
rövidített tulajdonság használatával:
p {
font-family: Arial;
font-size: 40px;
font-weight: bold;
text-indent: 50px;
font-style: italic;
line-height: 60px;
}