Форматирование текста CSS
Мы с Вами недавно изучали тему форматирования текста в HTML, в которой рассматривали три html тега, при помощи которых можно выделить текст жирным шрифтом, курсивом, а также задать подчеркивание. Сегодня мы изучим css свойства, при помощи которых можно получить абсолютно такой же результат. Первое css свойство font-weight, при его использовании тексту можно задавать определенную жирность. Оно может принимать значения от 100 до 900, а также значение bold, normal. Где bold, является жирным начертанием, а normal, имеет обычное начертание. Но, как правило, в основном применяют последних два значения, т.к., браузеры не очень корректно отображают числовые значения данного свойства.
Второе css свойство - font-style, с его помощью, мы можем задать курсивное начертание для нашего текста. Данное свойство принимает значение italic, для курсивного начертания, normal, для обычного начертания. Этих значений Вам будет вполне достаточно.
Последнее css свойство - text-decoration, и как вы уже догадались при его помощи можно подчекивать определенный текст, однако помимо этого, текст может быть зачеркнут, а также можно провести линию вверху текста. Первое значение - underline, задает подчеркивание для текста. line-through, предназначено для того, чтобы текст выглядел зачеркнутым. overline, задает линию вверху текста. Честно говоря, использовал ли я данное значение, сказать не могу, т.к., реального его применения я не помню. И последнее значение - none, оно отменяет все эти значения, и текст будет без украшений.
Теперь рассмотрим примеры для этих свойств:
<html>
<head>
<title>Свойство font-weight, font-style, text-decoration</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<p class="bold">Жирный шрифт</p>
<p class="normal">Обычный шрифт</h2>
<p class="italic">Курсивный шрифт</h2>
<p class="underline">Подчеркнутый шрифт</h2>
<p class="mixed">Смешанный шрифт</h2>
</body>
</html>
Применяем к нашим классам css стили:
.bold {
font-weight: bold;
}
.normal {
font-weight: normal;
}
.italic {
font-style: italic;
}
.underline {
text-decoration: underline;
}
.mixed {
font-weight: bold;
font-style: italic;
text-decoration: line-through;
}
Здесь все прозрачно и ясно, мы просто применяли определенные стили для наших классов, а в последнем, смешанном стиле, мы применили все, изученные нами стили. Можете посмотреть на результат:
На этом мы заканчиваем изучение этих свойств. В дальнейшем они Вам обязательно пригодятся.
