Lastnost okrajšava font v CSS
V prejšnji lekciji smo obravnavali številne
lastnosti za besedilo. Pogosto je preveč naporno
posebej navajati vsako od teh lastnosti,
zato v CSS za večjo udobje obstaja
posebna lastnost-okrajšava font.
Ta lastnost omogoča hkratno nastavitev
velikosti pisave, družine, debelosti, ležečega pisava
in medvrstnega razmika.
Opisana lastnost ima naslednjo sintakso:
font-style font-weight font-size / line-height font-family
Pri tem je vrstni red lastnosti pomemben,
in obvezni sta font-size
in font-family. Bodite pozorni na to, da
druge lastnosti, razen zgoraj opisanih v sintaksi,
ne sodelujejo v tej lastnosti okrajšavi.
Poglejmo si primere.
Primer
Recimo, da imamo naslednje sloge:
p {
font-size: 16px;
font-family: Arial;
}
Prepišimo jih z lastnostjo-okrajšavo:
p {
font: 16px Arial;
}
Primer
Recimo, da imamo naslednje sloge:
p {
font-size: 16px;
font-family: Arial;
line-height: 50px;
}
Prepišimo jih z lastnostjo-okrajšavo:
p {
font: 16px/50px Arial;
}
Primer
Recimo, da imamo naslednje sloge:
p {
font-size: 16px;
font-family: Arial;
font-weight: bold;
}
Prepišimo jih z lastnostjo-okrajšavo:
p {
font: bold 16px Arial;
}
Primer
Recimo, da imamo naslednje sloge:
p {
font-size: 16px;
font-family: Arial;
font-weight: bold;
line-height: 50px;
font-style: italic;
}
Prepišimo jih z lastnostjo-okrajšavo:
p {
font: bold italic 16px/50px Arial;
}
Praktične naloge
Skrajšajte kodo z uporabo lastnosti-okrajšave
font:
p {
font-family: "Times New Roman";
font-size: 13px;
line-height: 20px;
}
Skrajšajte kodo z uporabo lastnosti-okrajšave
font:
p {
width: 300px;
font-family: Arial;
color: red;
font-size: 40px;
font-weight: bold;
}
Skrajšajte kodo z uporabo lastnosti-okrajšave
font:
p {
font-family: Arial;
font-size: 40px;
font-weight: bold;
text-indent: 50px;
font-style: italic;
line-height: 60px;
}