Пример 3
<html>
<head>
<style type="text/css">
.booktitle {
font-family: "Times New Roman", Times, serif;
font-style: italic;
}
blockquote {
font-family: Arial, Helvetica, serif;
font-style: italic;
}
</style>
</head>
<body>
<br>
<h1 class="booktitle"> Введение </h1>
<p><i>Электронная коммерция- </i> является одним …...</p>
<blockquote>
<p>Инструментарий </p>
<p>Microsoft </p>
<p>и электронная коммерция </p>
</blockquote>
</body>
</html>
Рис.4. Использование курсива в тексте
В примере 3 класс booktitle и все абзацы в <blockquote> выделены курсивом. Заголовок использует шрифт serif, поэтому мы видим курсивный шрифт, блокнот использует шрифт sans-serif, который является наклонным, даже если вы его задаете как курсив.
Толщина шрифта
В стандартном HTML шрифт может быть либо полужирным, либо обычным. CSS позволяет установить несколько уровней «жирности» шрифта, используя способность многих шрифтов иметь разную толщину.
Пример 4
<html>
<head>
<style type="text/css">
.bolder {
font-weight: bolder;
}
p i {
font-weight: normal;
}
</style>
</head>
<body>
<b>Электронная <i>коммерция</i></b>
<p span class="bolder">Является одним из самых … <i>во всех отраслях бизнеса</i>. Она открывает новые возможности …..</p>
<p span class="bolder">Инструментарий <i>Microsoft и электронная коммерция</i> </p>
</body>
</html>
Рис.5. Определение толщины шрифта
В примере 4 создается класс bolder, который делает линии шрифта толще.
Создание Small caps
Small caps полезны для выделения заголовков. С помощью Small caps строчные буквы переводятся в заглавные, размер которых меньше, чем у обычных прописных букв (рис.6).
Рис.6. Все буквы заглавные, но первая – больше остальных
Пример 5
<html>
<head>
<style type="text/css">
body {
font-size: 24px;
font-family: "Times New Roman", Times, serif;
}
h2 {
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Электронная коммерция</h2>
<p>Является одним из самых модных течений практически во всех отраслях бизнеса. Она открывает новые возможности в любой сфере,
независимо от того, ориентируетесь ли вы на конечного покупателя или работаете с деловыми партнерами.</p>
</body>
</html>
Рис.7. Применение small-caps
В примере 5 тег заголовка второго уровня отображает текст маленькими заглавными буквами (small-caps).
Определение нескольких значений шрифта одновременно
Свойства шрифта можно определять независимо, но лучше записать все элементы шрифта в одном определении, используя свойство font.
В примере 6 определяется заголовок первого уровня и класс copy, который затем применяется к абзацам в тексте. С помощью специального стиля описывается тег заголовка третьего уровня.
Определение в правиле нескольких атрибутов
1. Введите свойство font: и поставьте двоеточие. Затем укажите следующие значения:
<font-family>
<font-style>
<font-variant>
<font-weight>
<font-size>
<font-height>
<visitor-style>
2. Укажите значение font-weight и нажмите клавишу пробела
bold
3.Укажите значение font-style и нажмите клавишу пробела
italic
4. Определите значение font-variant и нажмите клавишу пробела
small-caps
5. Введите значение font-size
26px
6. Введите слэш (/), значение line-height и пробел
/3em
7. Укажите значение font-family
"milion web", Georgia, "Times New Roman", Times, serif;