Как сделать курсивный текст в css
Перейти к содержимому

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

  • автор:

Как сделать текст курсивным. Тег

Тег не предназначен для использования в семантических целях, поскольку не передаёт никакого конкретного значения. Он только выделяет текст курсивом. Чрезмерное использование может сделать документ трудным для чтения и понимания, поэтому используйте тег только по мере необходимости.

В большинстве случаев тег можно заменить тегом . А чтобы специально указать, что текст должен быть выделен курсивом, используйте CSS. Например:

Это очень важно.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Как сделать текст курсивом или полужирным с помощью CSS.

Оформляя текст своих статей, заметок и.т.д. на веб-страницах иногда нужно какой-то фрагмент этого текста выделить от остального текста.

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

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

Итак, чтобы выделить текст полужирным, нужно воспользоваться свойством:

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Чаще всего из этих значений используется значение bold. Остальные значения лишь определяют степень полужирности шрифта.

Чтобы сделать его курсивом, нужно воспользоваться свойством CSS:

font-style: normal | italic | oblique | inherit

Значение italic, как раз отвечает за курсив текста.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Давайте на конкретном практическом примере посмотрим, как работают эти свойства. Есть 3 абзаца. Один из них оставим как есть, другой выделим полужирным шрифтом, а третий курсивом.

Абзац обычный

Абзац полужирным шрифтом

Абзац курсивом

Также выделить особым образом может понадобиться только определенную часть текста внутри абзаца. В этом случае можно воспользоваться элементом span.

Абзац Абзац Абзац Абзац Абзац Абзац Абзац

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

font-style

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

Краткая информация

Значение по умолчанию normal
Наследуется Да
Применяется Ко всем элементам
Анимируется Нет

Синтаксис

font-style: normal | italic | oblique
Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

normal Обычное начертание текста. italic Курсивное начертание. oblique Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путём наклона обычных знаков вправо. В зависимости от шрифта вид наклонного начертания может совпадать с курсивным.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

normal italic oblique

Пример

font-style

Культурный памятник Средневековья

Амазонская низменность неумеренно берёт небольшой провоз кошек и собак, а Хайош-Байа славится красными винами.

Результат данного примера показан на рис. 1.

Применение свойства font-style

Рис. 1. Применение свойства font-style

Объектная модель

Объект.style.fontStyle

Спецификация

Спецификация Статус
CSS Fonts Module Level 3 Возможная рекомендация
CSS Level 2 (Revision 1) Рекомендация
CSS Level 1 Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

4 12 1 7 1 1

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

  • Наклон текста
  • Свойства шрифта в CSS

Рецепты

Практика

  • Выравнивание заголовка таблицы
  • Курсивный текст

Справочник CSS

  • !important
  • ::after
  • ::backdrop
  • ::before
  • ::first-letter
  • ::first-line
  • ::marker
  • ::placeholder
  • ::selection
  • :active
  • :blank
  • :buffering
  • :checked
  • :default
  • :dir
  • :disabled
  • :empty
  • :enabled
  • :first-child
  • :first-of-type
  • :focus
  • :focus-within
  • :fullscreen
  • :hover
  • :in-range
  • :indeterminate
  • :invalid
  • :is()
  • :lang()
  • :last-child
  • :last-of-type
  • :link
  • :muted
  • :not()
  • :nth-child()
  • :nth-last-child()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :paused
  • :placeholder-shown
  • :playing
  • :read-only
  • :read-write
  • :required
  • :root
  • :seeking
  • :stalled
  • :target
  • :valid
  • :visited
  • :volume-locked
  • @charset
  • @document
  • @font-face
  • @import
  • @keyframes
  • @media
  • @page
  • @supports
  • @viewport
  • accent-color
  • align-content
  • align-items
  • align-self
  • all
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • aspect-ratio
  • backdrop-filter
  • backface-visibility
  • background
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-position-x
  • background-position-y
  • background-repeat
  • background-size
  • block-size
  • border
  • border-block
  • border-block-color
  • border-block-end
  • border-block-end-color
  • border-block-end-style
  • border-block-end-width
  • border-block-start
  • border-block-start-color
  • border-block-start-style
  • border-block-start-width
  • border-block-style
  • border-block-width
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-end-end-radius
  • border-end-start-radius
  • border-image
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-start-end-radius
  • border-start-start-radius
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • box-decoration-break
  • box-shadow
  • box-sizing
  • caption-side
  • caret-color
  • clear
  • clip
  • color
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • content
  • counter-increment
  • counter-reset
  • cursor
  • direction
  • display
  • empty-cells
  • filter
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • float
  • font
  • font-family
  • font-kerning
  • font-size
  • font-stretch
  • font-style
  • font-variant
  • font-weight
  • gap
  • height
  • hyphenate-character
  • hyphenate-limit-chars
  • hyphens
  • image-rendering
  • inline-size
  • justify-content
  • left
  • letter-spacing
  • line-clamp
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • marks
  • max-height
  • max-width
  • min-block-size
  • min-height
  • min-width
  • mix-blend-mode
  • object-fit
  • opacity
  • order
  • orphans
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • overflow
  • overflow-x
  • overflow-y
  • padding
  • padding-block
  • padding-block-end
  • padding-block-start
  • padding-bottom
  • padding-inline
  • padding-inline-end
  • padding-inline-start
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • page-break-inside
  • perspective
  • perspective-origin
  • place-content
  • pointer-events
  • position
  • quotes
  • resize
  • right
  • row-gap
  • scroll-behavior
  • tab-size
  • table-layout
  • text-align
  • text-align-last
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-skip-ink
  • text-decoration-style
  • text-emphasis
  • text-emphasis-color
  • text-emphasis-position
  • text-emphasis-style
  • text-fill-color
  • text-indent
  • text-orientation
  • text-overflow
  • text-shadow
  • text-stroke
  • text-stroke-color
  • text-stroke-width
  • text-transform
  • top
  • transform
  • transform-origin
  • transform-style
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • unicode-bidi
  • user-select
  • vertical-align
  • visibility
  • white-space
  • widows
  • width
  • word-break
  • word-spacing
  • word-wrap
  • writing-mode
  • z-index
  • zoom

Работа с текстом. Курсив и полужирный шрифт.

Очень часто на веб-страницах, когда вы будете работать с текстом, нужно выделить какую-то часть текста курсивом или полужирным шрифтом. Каким образом это можно сделать с помощью HTML?

Если нам, например, нужно выделить какое-то слово полужирным шрифтом, в HTML есть специальный тэг, который за это отвечает и этот тэг называется :

Текст, который должен быть выделен полужирным шрифтом

strong — переводится с английского языка как «усиленный». Это парный тэг и в зоне его действия находится тот текст, который должен быть выделен полужирным шрифтом.

Если мы хотим какое-то слово выделить курсивом, для этого тоже есть специальный тэг, который называется em.

Текст, который должен быть выделен курсивным шрифтом

Это тоже парный тэг.

Попробуйте разместить какой-либо текст на вашей веб-странице в эти тэги и посмотреть какой эффект от этого произойдет в браузере.

Дмитрий Ченгаев ��
Занимаюсь заказной веб-разработкой. Подписывайтесь на телеграм канал https://t.me/dchengaev 😉

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

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

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