Курсивный текст в html и CSS

Рассмотрим все способы как можно сделать курсив через html и CSS. Существует два варианта:

  • Через html тег <i> и <em>
  • Через свойство CSS font-style

Курсив через html тег <i> и <em>

Весь текст заключенные в теги <i></i> и <em></em> становится курсивным. Необычное название тега в виде буквы “i” произошло от сокращения “italic” (курсив).

Приведем пример через теги <i></i> и <em></em>

<p>Обычный текст. <i>Курсивный текст через тег i</i></p>
<p>Обычный текст. <em>Курсивный текст через тег em</em></p>

Преобразуется на странице в

Обычный текст. Курсивный текст через тег i

Обычный текст. Курсивный текст через тег em





Курсив через свойство CSS font-style

В CSS есть свойство font-style, которое отвечает за написание букв.

Синтаксис CSS font-style

font-style: normal | italic | oblique | inherit;

Где

  • normal — обычное начертание (по умолчанию)
  • italic — курсивный текст
  • oblique — наклонное текст (немного меньше, чем курсив)
  • inherit — применяется значение родительского элемента

Мы можем применить свойство italic или oblique. Однако разница все же есть. Курсив — это особый шрифт, который является аналогом рукописного текста, а наклонный формируется посредством наклона обычного шрифта вправо.

Пример CSS font-style:

<html>
<head>
<style>
.italic{
font-style: italic;
}
.oblique{
font-style: oblique;
}
</style>
</head>
<body>
<div class="italic">Текст со свойством font-style: italic</div>
<div class="oblique">Текст со свойством font-style: oblique</div>
</body>
</html>

Преобразуется на странице в

Текст со свойством font-style: italic

Текст со свойством font-style: oblique

Более подробно про форматирование шрифтов читайте в статье свойство

  • CSS font




Читайте также:

• Подробное описание свойства CSS border

• Подчеркнутый текст через теги html и свойства CSS

• Жирный шрифт html

• Как сделать фон для сайта (background css)

• Фреймы html

• Декларация !important

• Свойство CSS display

• Свойство CSS transform

• Свойство CSS transition

• Зачеркнутый шрифт html


← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.