Содержание
font-style | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | normal |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/fonts.html#propdef-font-style |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Определяет начертание шрифта — обычное, курсивное или наклонное. Когда
для текста установлено курсивное или наклонное начертание, браузер обращается
к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер
использует специальный алгоритм для имитации нужного вида текста.
Результат
и качество при этом могут получиться неудовлетворительными, особенно при печати
документа.
Синтаксис
font-style: normal | italic | oblique | inherit
Значения
- normal
- Обычное начертание текста.
- italic
- Курсивное начертание.
- oblique
- Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно
и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же
образуется путем наклона обычных знаков вправо. - inherit
- Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-style</title>
<style>
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif; /* Рубленый шрифт заголовка */
}
p {
font-family: 'Times New Roman', Times, serif; /* Шрифт с засечками */
font-style: italic; /* Курсивное начертание */
}
</style>
</head>
<body>
<h2>Duis te feugifacilisi</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства font-style
Объектная модель
[window.]document.getElementById(«elementID»).style.fontStyle
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
Браузеры текст со
значением oblique всегда отображают как курсив (italic).
Шрифт
CSS по теме
- font-style
Статьи по теме
- Свойства текста
Рецепты CSS
Курсив | CSS | CodeBasics
Для выделения цитат или терминов часто используют курсивное начертание шрифта. В отличие от изменения насыщенности, курсив позволяет акцентировать внимание на участке текста, но не выделять его так, чтобы он сразу бросался в глаза.
Для изменения начертания шрифта используется свойство font-style, которое может принимать одно из значений:
normal— обычный вывод текста.italic— курсивное начертаниеoblique— косое начертание
Текст с обычным начертанием шрифта
Текст с курсивным начертанием шрифта
Текст с косым начертанием шрифта
Обратите внимание, что текст со значением italic и oblique могут выглядеть совершенно одинаково. В чём же здесь дело? При использовании значения italic ищется специальная курсивная версия шрифта, а oblique лишь программно наклоняет символы в шрифте. Не все шрифты имееют отдельную версию для курсива, поэтому, визуально, оба значения будут выглядеть одинаково.
Используйте значение italic для создания курсива — это самый распространённый вариант
<p>Курсивный текст</p>
.italic {
font-style: italic;
}
Курсивный текст
Добавьте в редактор параграф с классом italic-type и установите начертание oblique. Стили добавьте в тег <style>
Упражнение не проходит проверку — что делать? 😶
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях».
Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя 🤔
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно 🙄
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно.
Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
←Предыдущий
Следующий→
Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
Элементы цитаты HTML
❮ Предыдущая
Далее ❯
В этой главе мы рассмотрим
,
,,,,
иэлементов HTML.Пример
Вот цитата с сайта WWF:
Вот уже 60 лет WWF помогает людям и природе процветать.
ведущая природоохранная организация, WWF работает почти в 100 странах. Каждый раз
уровне, мы сотрудничаем с людьми по всему миру для разработки и доставки
инновационные решения, которые защищают сообщества, дикую природу и места в
которым они живут.Попробуйте сами »
HTML
для котировок
Элемент HTML
определяет раздел, который
цитируется из другого источника.Браузеры обычно делают отступ
элементов.
Пример
Вот цитата с сайта WWF:
За 60 лет WWF работал, чтобы помочь людям и природе процветать. как в мире
ведущая природоохранная организация, WWF работает почти в 100 странах. Каждый раз
уровне, мы сотрудничаем с людьми по всему миру для разработки и доставки
инновационные решения, которые защищают сообщества, дикую природу и места в
которым они живут.Попробуйте сами »
HTML
для кратких цитатТег HTML
определяет краткую цитату.Браузеры обычно заключают цитату в кавычки.
Пример
Цель WWF:
Построить будущее, в котором люди будут жить в гармонии с
природа.Попробуйте сами »
HTML
для сокращений
Тег HTML
определяет аббревиатуру или акроним, например «HTML»,
«CSS», «Мистер»,
«Доктор», «Как можно скорее», «Банкомат».Маркировка аббревиатур может дать полезную информацию браузерам, перевод
системы и поисковые системы.Совет: Используйте глобальный атрибут title для
показать описание к
аббревиатура/аббревиатура при наведении курсора на элемент.Пример
ВОЗ была основана в
1948.Попробуйте сами »
HTML
для контактной информацииТег HTML
определяет контактную информацию для автора/владельца документа
или статья.Контактная информация может быть адресом электронной почты, URL-адресом, физическим адресом, телефоном
номер, идентификатор социальной сети и т. д.Текст в элементе
обычно отображается курсивом ,
и браузеры будут
всегда добавляйте разрыв строки до и после<адрес>элемент.Example
Автор: John Doe.Посетите нас по адресу:
Example.com
Box 564, Disneyland
USA
Try Это сами »
HTML
для названия работы
Тег HTML
определяет заголовок
творческая работа (например, книга, стихотворение, песня, фильм, картина, скульптура и т. д.).Примечание: Имя человека не является названием произведения.
Текст в элементе
обычно отображается курсивом .Пример
The Scream Эдварда Мунка.
Попробуйте сами »
HTML
для двунаправленного переопределения
BDO означает двунаправленное переопределение.
Тег HTML
используется для переопределения
текущее направление текста:Пример
Этот текст будет написан справа налево
Попробуйте сами »
HTML-упражнения
Проверьте себя с помощью упражнений
Упражнение:
Используйте элемент HTML, чтобы добавить кавычки вокруг букв «круто».
<р>
Я такой классный.Начать упражнение
Элементы цитат и цитирования HTML
Тег Описание <сокращение> Определяет аббревиатуру или акроним <адрес> Определяет контактную информацию для автора/владельца документа Определяет направление текста <цитата> Определяет раздел, цитируемый из другого источника <цитировать> Определяет название произведения Определяет короткую встроенную цитату Полный список всех доступных тегов HTML см.
❮ Предыдущий
Далее ❯Как применить курсив в HTML — Инструкции
Как применить курсив в HTML с помощью CSS
В этом руководстве показано, как применять курсив в HTML. Чтобы применить курсив в HTML, вы должны использовать правило стиля CSS и свойство «font-style». При необходимости вы можете применить стиль CSS, используя встроенный, внутренний или внешний CSS, хотя встроенный стиль обычно не рекомендуется. Свойство «font-style» также зависит от свойства CSS «font-family», которое установлено в данный момент, так как шрифты для выделения курсивом должны иметь доступный курсив. Однако, если они этого не делают, вы также можете попытаться выделить шрифты курсивом, используя наклонное значение.
CSS-свойство font-style использует текстовые значения «курсив», «наклон» или «обычный». Чтобы применить курсив к шрифтам, имеющим вариант курсива, используйте значение italic. Чтобы имитировать появление курсива для шрифтов, у которых нет варианта курсива, вы можете использовать наклонное значение.
Чтобы применить курсив в HTML с помощью CSS, поместите курсор метки вставки в то место во внешнем, внутреннем или встроенном стиле CSS, куда вы хотите добавить свойство font-style. Затем введите имя свойства font-style. Затем введите символ двоеточия. Наконец, введите либо текстовое значение «italic», если семейство шрифтов для выделения курсивом имеет доступный курсив, либо введите «oblique», если семейство шрифтов для выделения курсивом не имеет доступного курсива.
В следующих примерах показано, как применить курсив в HTML, применив свойство font-style в качестве встроенного стиля CSS к тегу абзаца и тегу span. В примере тега абзаца используется текстовое значение «курсив» в стиле шрифта. В примере span используется «наклонное» текстовое значение в стиле шрифта.
Недвижимость: стиль шрифта Значение: Либо «курсив», либо «наклонный», либо «обычный» Пример 1: Это абзац шрифта без засечек с курсивом.
Пример 2: Это предложение в абзаце моноширинным шрифтом с курсивом , примененным к одному слову.< /p>
Результат 1: Это абзац шрифтом без засечек с курсивом.
Результат 2: Это предложение, выделенное моноширинным шрифтом в абзаце с курсивом, примененным к одному слову.
Изображение, показывающее, как применить курсив в HTML с помощью встроенного стиля CSS.
Как применить курсив в HTML с помощью тега курсива
Кроме того, вы можете использовать старые HTML-теги курсива и для обозначения курсивного текста в HTML, который большинство веб-браузеров все еще интерпретируют правильно. Технически этот тег теперь называется идиоматическим текстовым тегом. В HTML5 вы можете использовать набор тегов и для отображения смещенного текста внутри обычного текста.
Чтобы применить курсив с помощью тега курсив в HTML, введите текст абзаца. Затем введите тег там, где вы хотите начать выделенный курсивом текст. Затем введите текст, который нужно выделить курсивом. Затем введите тег там, где вы хотите, чтобы курсив остановился. Затем продолжайте вводить обычный текст предложения. В следующем примере показан пример использования старых курсивных тегов в HTML для обозначения научного названия растения.
Начальный тег: <я> Конечный тег: Пример: Научное название одуванчика – Taraxacum officinale.
Результат: Научное название одуванчика Taraxacum officinale .
Как применить курсив в HTML с помощью тега выделения
В качестве альтернативы, чтобы выделить текст, выделенный курсивом в HTML, лучше использовать набор тегов выделения из и .
Чтобы применить курсив с помощью тега выделения в HTML, введите текст абзаца. Затем введите тег в том месте, где вы хотите начать выделенный текст. Затем введите текст для выделения. Затем введите тег в том месте, где вы хотите остановить выделение. Затем продолжайте вводить обычный текст предложения. В следующем примере показано, как использовать тег выделения, чтобы показать, что человек, произносящий предложение, подчеркнул слово «делать», произнося его вслух.
Начальный тег: <эм> Конечный тег: Пример: Что делать вы хотите?
Результат: Что делать вы хотите?
Инструкции по применению курсива в HTML с помощью CSS:
- Чтобы применить курсив в HTML с помощью CSS , поместите курсор метки вставки в то место во внешнем, внутреннем или встроенном стиле CSS, где вы хотите добавьте свойство стиля шрифта.
- Затем введите имя свойства стиля шрифта.
- Затем введите двоеточие.
- Наконец, введите либо текстовое значение «italic», если семейство шрифтов для выделения курсивом имеет доступный курсив, либо введите «oblique», если семейство шрифтов для выделения курсивом не имеет доступного курсива.
Инструкции по применению курсива в HTML с помощью тега курсив:
- Кроме того, чтобы применить курсив с помощью тега курсив в HTML , введите текст абзаца.
- Затем введите тег в том месте, где вы хотите начать выделенный курсивом текст.
- Введите текст курсивом.
- Затем введите тег в том месте, где должен заканчиваться курсив.
- Затем продолжайте вводить обычный текст предложения.
Инструкции по применению курсива в HTML с использованием тега выделения:
- Чтобы применить курсив с помощью тега выделения в HTML , введите текст абзаца.
как в мире
Нарисовано в 1893 году.
в нашем справочнике по тегам HTML.
Наклонное значение пытается наклонить шрифты без определенной вариации курсива. Вместо этого, чтобы указать обычное начертание шрифта, используйте значение normal.
Например, вы можете использовать это, чтобы показать техническое имя, идиому иностранного языка или мысль в обычном предложении.
Эти теги применяют визуальный курсивный стиль, но также указывают веб-браузерам, чтобы подчеркнуть важность текста. Средства чтения с экрана выделяют текст, отмеченный тегами выделения, при чтении вслух.
