Как сделать курсив css

CSS: Курсив

Для выделения цитат или терминов часто используют курсивное написание. Для этих целей в CSS существует правило font-style , имеющее три значения:

  • normal — обычный вывод текста.
  • italic — курсивное начертание
  • oblique — косое начертание

Можно заметить, что значения italic и oblique вывелись одинаковым образом. Почему? Дело в том, что при значении italic в шрифте, который используется на странице, ищутся специальные курсивные символы, а при значении oblique берётся текущий шрифт и наклоняется.

Если в шрифте отсутствуют символы, необходимые для italic , то автоматически правило ведёт себя также, как и oblique , в связи с чем italic является распространённым вариантом использования свойства font-style .

Задание

Добавьте в редактор параграф с классом italic-type и установите начертание oblique . Стили добавьте в тег style .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Курсив CSS

В прошлой статье мы обсуждали спецификацию выделения текста жирным шрифтом. В текущей статье мы поговорим о том, как выделить текст курсивом HTML. Как и в случае с жирным текстом, курсивный текст можно сделать тремя способами:

  • Тег i HTML;
  • Тег em HTML;
  • CSS-свойство font-style.

Рассмотрим все три варианта, как можно сделать курсив в HTML, обсудим тонкости этого вопроса и какие способы удобнее и правильнее использовать в тех или иных ситуациях.

Курсивный текст: тег <i>

Тег i (italic), по аналогии с тегом b для жирного текста, служит для физического выделения курсивного текста (это означает, что изменяется только начертание текста). Применение тега i:

Таким образом, нужная часть текста помещается между тегами <i></i>.

Курсивный текст: тег <em>

Хотя тег i остается валидным, с точки зрения оптимизации сайта лучше использовать тег em для выделения логически важных участков текста. Это означает, что поисковые роботы учитывают важность текста, помещенного между тегами <em></em>:

Конструктор сайтов "Нубекс"

Но не стоит забывать, что текст, заключенный в теги i и em, хоть и отображаются практически одинаково (во всех современных браузерах), по своей сути являеются не совсем идентичными, как уже отмечалось выше. Поэтому использовать теги нужно по мере необходимости: тегом em HTML обрамлять важные участки текста, а визуальное курсивное оформление применять с помощью тега i или CSS-стилей. Рассмотрим теперь использование CSS-стилей для курсивного выделения текста.

Курсивный текст силами CSS

Для установления стилей отображения шрифтов в CSS применяется свойство font-style, которое может принимать значения: oblique (наклонный текст), italic (курсив) и normal (обычный шрифт).

Стоит помнить о том, что курсивный шрифт и наклонный, по своей сути, не являются одним и тем же. Курсив — это особый шрифт, который является аналогом рукописного текста, а наклонный формируется посредством наклона обычного шрифта вправо.

Применение атрибута font-style на практике:

Но необходимо помнить, что некоторые браузеры текст со свойством font-style: oblique; могут интерпретировать не как наклонный текст, а как курсивный.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *