Za pomocą właściwości font oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech czcionki tekstu interesującego nas elementu HTML.
/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */
/* REGUŁA - 1 */
div {
font:italic small-caps bold 24px /36px Arial, Verdana, sans-serif;
}
/* REGUŁA - 2 */
div {
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:24px;
line-height:36px;
font-family:Arial, Verdana, sans-serif;
}
- style
-
Składnik style nie jest wymaganym składnikiem grupy wartości właściwości font. Składnik style określa wartość właściwości font-style, czyli dodatkowy styl czcionki tekstu interesującego nas elementu HTML.
- variant
-
Składnik variant nie jest wymaganym składnikiem grupy wartości właściwości font. Składnik variant określa wartość właściwości font-variant, czyli dodatkowy wariant czcionki tekstu interesującego nas elementu HTML.
- weight
-
Składnik weight nie jest wymaganym składnikiem grupy wartości właściwości font. Składnik weight określa wartość właściwości font-weight, czyli grubość czcionki tekstu interesującego nas elementu HTML.
- size
-
Składnik size jest wymaganym składnikiem grupy wartości właściwości font. Składnik size określa wartość właściwości font-size, czyli rozmiar czcionki tekstu interesującego nas elementu HTML.
- /line-height
-
Składnik line-height nie jest wymaganym składnikiem grupy wartości właściwości font. Składnik line-height określa wartość właściwości line-height, czyli rozmiar wysokości wierszy interesującego nas elementu HTML.
- family
-
Składnik family jest wymaganym składnikiem grupy wartości właściwości font. Składnik family określa wartość właściwości font-family, czyli rodzaj czcionki tekstu interesującego nas elementu HTML.
font:italic small-caps bold 24px /30px Arial, Verdana, sans-serif;
cechy czcionki tekstu tego elementu "div" zostały zmienione (czcionka tekstu jest pochylona, małe litery tekstu zostały zamienione na duże litery o małym rozmiarze, czcionka tekstu jest pogrubiona, rozmiar czcionki tekstu wynosi 24 piksele, rozmiar wysokości wierszy wynosi 30 pikseli, ponadto czcionka tekstu jest rodzaju "Arial"), ponieważ do tego elementu "div" została dodana właściwość "font" wraz z następującą grupą wartości: "italic small-caps bold 24px /30px Arial, Verdana, sans-serif"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
font:italic small-caps bold 24px /30px Arial, Verdana, sans-serif;
padding:1em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
cechy czcionki tekstu tego elementu "div" zostały zmienione (czcionka tekstu jest pochylona, małe litery tekstu zostały zamienione na duże litery o małym rozmiarze, czcionka tekstu jest pogrubiona, rozmiar czcionki tekstu wynosi 24 piksele, rozmiar wysokości wierszy wynosi 30 pikseli, ponadto czcionka tekstu jest rodzaju "Arial"), ponieważ do tego elementu "div" została dodana właściwość "font" wraz z następującą grupą wartości: "italic small-caps bold 24px /30px Arial, Verdana, sans-serif"
</div>
</body>
</html>
