Изменение шрифта на сайте: полужирный шрифт, курсив, регистр и высота строки с помощью свойств font-weight, font-style, font-variant, text-transform, line-height.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bold, italics, case, and line-height</title>
<style>
body {
font-size: 25px;
}
p {
margin: 50px 0;
}
code {
color: #c00;
}
#p1 {
font-weight: bold;
}
#p2 {
font-style: italic;
}
#p3 {
font-variant: small-caps;
}
#p4 {
text-transform: uppercase;
}
#p5 {
line-height: 2;
}
</style>
</head>
<body>
<p id="p1"><a href="https://foxyforex.ru/css/svojstvo-css-font-weight"><code>font-weight</code></a>: Bold or light text. Eg. <code>font-weight: bold;</code></p>
<p id="p2"><a href="https://foxyforex.ru/css/svojstvo-css-font-style"><code>font-style</code></a>: Italic or oblique text. Eg. <code>font-style: italic;</code></p>
<p id="p3"><a href="https://foxyforex.ru/css/svojstvo-css-font-variant"><code>font-variant</code></a>: Small capitals. Replaces lowercase letters with uppercase letters that are a similar height to the original lowercase ones. Eg. <code>font-variant: small-caps;</code></p>
<p id="p4"><a href="https://foxyforex.ru/css/svojstvo-css-text-transform"><code>text-transform</code></a>: Converts the case of letters, to uppercase, lowercase, or capitalized. Eg. <code>text-transform: uppercase;</code></p>
<p id="p5"><a href="https://foxyforex.ru/css/svojstvo-css-line-height"><code>line-height</code></a>: The minimal height for a line of text. Apparnet in longer lines, such as "The green seed of the white-flowering climbing leguminous papilionaceous plant, <em>Pisum sativum</em>, has become a dining-table favourite for good reason. The <strong>perfect</strong> accompaniment to any meal, the diminutive spherical vegetables brings joy to billions worldwide, be they fresh, frozen, canned or dried." Eg. <code>line-height: 2;</code></p>
</body>
</html>Страницы в тему:
- Семейства шрифтов
- Текст (Урок CSS для начинающих)
