Содержание
: Элемент акцентирования — HTML
HTML <em>
элемент отмечает акцентируемый текст. Элемент <em>
может быть вложенным, причём каждый уровень вложенности указывает на большую степень акцента.
Категории контента | Потоковый контент, фразовый контент, явный контент. |
---|---|
Допустимый контент | Фразовый контент. |
Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
Допустимые родители | Любой элемент, который принимает фразовый контент. |
Допустимые ARIA-роли | Любые |
DOM-интерфейс | HTMLElement до Gecko 1.9.2 (Firefox 4) включительно Firefox реализует интерфейс HTMLSpanElement (en-US) для этого элемента. |
К этому элементу применимы глобальные атрибуты.
Элемент <em>
предназначен для слов, которые имеют подчёркнутый акцент по сравнению с окружающим текстом, который часто ограничивается словом или словами предложения и влияет на смысл самого предложения.
Обычно этот элемент отображается курсивом. Однако его не следует использовать просто для применения курсивного стиля; для этой цели используйте свойство CSS font-style
. Используйте элемент <cite>
, чтобы пометить название произведения (книги, пьесы, песни и т. д.). Используйте элемент <i>
(en-US), чтобы пометить текст в альтернативном тоне или настроении, который охватывает многие распространённые ситуации курсива, такие как научные имена или слова на других языках. Используйте элемент <strong>
, чтобы пометить текст, который имеет большее значение, чем окружающий текст.
< i> против <em>
Новые разработчики часто путаются, видя несколько элементов, которые дают аналогичные результаты. <em>
и <i>
являются общим примером, поскольку они оба выделяют текст курсивом. Какая разница? Что вы должны использовать?
По умолчанию визуальный результат тот же. Однако смысловое значение здесь другое. Элемент <em>
представляет ударение на его содержании, в то время как элемент <i>
представляет текст, который отличается от обычной прозы, например, иностранное слово, изречения вымышленного персонажа или когда текст ссылается на определение слова вместо представления его семантического значения. (Для названия произведения, например названия книги или фильма, следует использовать <cite>
.)
Это означает, что правильное использование зависит от ситуации. Ни для чисто декоративных целей, это то, для чего предназначен CSS-стиль.
Примером для <em>
может быть: -«Просто сделай это!», или: «Мы должны были что-то с этим сделать». Человек или программа, читающие текст, будут произносить слова, выделенные курсивом, с ударением, используя словесное ударение.
Примером для <i>
может быть: «Королева Мэри отплыла прошлой ночью». Здесь нет никакого дополнительного акцента или важности на слове «Королева Мэри». Просто указывается, что речь идёт не о королеве по имени Мария, а о корабле по имени Королева Мария. Другим примером для <i>
может быть: «Слово ‘the’ это артикль».
Элемент <em>
часто используется для указания неявного или явного контраста.
<p> В HTML 5, что ранее называлось контентом <em>уровня блока</em> теперь называется контентом <em>потока</em>. </p>
Результат
Specification |
---|
HTML Standard # the-em-element |
BCD tables only load in the browser
with JavaScript enabled. Enable JavaScript to view data.
<i>
(en-US)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
Want to get more involved?
Learn how to contribute.
This page was last modified on by MDN contributors.
em, px, pt, cm, in…
Языки
Это перевод. Здесь могут содержаться ошибки или страница может
быть устаревшей по отношению к Английской версии. Переводчик: Илья Стрельцын
См. также оглавление со всеми советами.
На этой странице:
- em, px, pt, cm, in…
- Размеры шрифтов
- Новые единицы: rem,
vw…
em
, px
, pt
, cm
, in
…
Указывать длину в CSS можно в разных единицах. Некоторые из них
пришли из типографской традиции, как пункт (pt
)
и пика (pc
), другие, напр. сантиметр (cm
) и дюйм (in
), знакомы нам в повседневном
обиходе. Есть и «волшебная» единица, придуманная специально для
CSS: px
. Значит ли это, что для разных свойств нужны
разные единицы?
Нет, единицы измерения не имеют отношения к свойствам, но имеют
прямое отношение к средствам отображения: экран или бумага.
Любые единицы измерения можно использовать где угодно. Свойство
со значением в пикселях (margin: 5px
) также
допускает и значения в дюймах или сантиметрах (margin:
), и наоборот.
1.2in; margin: 0.5cm
Но в целом для отображения на экране и для печати лучше
использовать разные наборы единиц измерения. Советы
по использованию единиц собраны в следующей таблице:
Рекомендуются | Можно иногда | Не рекомендуются | |
---|---|---|---|
Экран | em, px, % | ex | pt, cm, mm, in, pc |
Печать | em, cm, mm, in, pt, pc, % | px, ex |
Соотношение между абсолютными единицами таково: 1in = 2. 54cm =
25.4mm = 72pt = 6pc
Если у вас есть под рукой линейка, можете проверить точность
своего устройства. Вот прямоугольник высотой 1 дюйм (2.54cm):
↑
72pt
↓
Так называемые абсолютные единицы (cm
, mm
, in
, pt
и pc
) в CSS означают то же самое, что и везде, но только если
у устройства вывода достаточно высокое разрешение. На лазерном
принтере 1cm должен быть точно равен 1 сантиметру.
Но на устройствах низкого разрешения, вроде компьютерных экранов,
CSS этого не требует. И вправду, разные устройства и разные
реализации CSS норовят отобразить их по-разному. Лучше оставить эти
единицы для устройств высокого разрешения, в частности для печати.
На компьютерных экранах и мобильных устройствах может получиться
не то, что ожидалось.
В прошлом CSS требовал, чтобы абсолютные единицы отображались
правильно даже на компьютерных экранах. Но поскольку неправильных
реализаций было больше, чем правильных, и никаких улучшений
не предвиделось, в 2011-м CSS отказался от этого требования.
Сейчас абсолютные единицы обязаны работать правильно только при
выводе на печать и на устройствах высокого разрешения.
CSS не уточняет, что именно понимается под «высоким
разрешением». Но так как у дешевых принтеров сегодня бывает
не менее 300 точек на дюйм, а у хороших экранов порядка 200 точек
на дюйм, граница, скорее всего, проходит где-то между этими
значениями.
Еще одна причина не использовать абсолютные единицы где-либо,
кроме печати: на разные экраны мы смотрим с разного расстояния.
1 сантиметр на экране настольного компьютера выглядит маленьким.
Но на мобильном экране прямо перед глазами — это много. Лучше
вместо них использовать относительные единицы, напр. em
.
Единицы em
и ex
зависят от размера
шрифта и могут быть свои для каждого элемента в документе. Единица
em
— просто размер шрифта. В элементе, которому
задан шрифт в 2in, 1em и означает эти 2in. Указание размеров
(напр., для отступов) в em
означает, что они
задаются относительно шрифта, и какой бы ни был шрифт
у пользователя — крупный (напр. на большом экране) или мелкий
(напр. на мобильном устройстве), эти размеры останутся
пропорциональными. Объявления наподобие text-indent:
и
1.5emmargin: 1em
в CSS крайне популярны.
Единица ex
используется нечасто. В ней выражаются
размеры, которые должны отсчитываться от x-высоты шрифта.
X-высота — это, грубо говоря, высота строчных букв вроде a, c, m, или o. У шрифтов
с одинаковым размером (и, соответственно, при одинаковом em
) может быть огромная разбежка в размерах строчных букв,
и если важно, чтобы какая-то картинка, например, соответствовала
x-высоте, единица ex
к вашим услугам.
Единица px
в CSS волшебная. Она не связана
с текущим шрифтом, но и с физическими сантиметрами или дюймами
обычно тоже не связана. Единица px
определена как
что-то маленькое, но видимое, т.е. горизонтальную линию толщиной
1px можно было отобразить с четкими краями (без сглаживания). Что
считается четким, маленьким и видимым, зависит от устройства
и способа пользования им: держите ли вы его прямо перед глазами,
как мобильный телефон, на расстоянии вытянутой руки, как монитор,
или где-то на промежуточном расстоянии, как электронную книгу?
Поэтому px
по определению не фиксированная длина,
а нечто, зависящее от типа устройства и его обычного использования.
Чтобы понять, почему единица px
именно такая,
представьте ЭЛТ-монитор из 1990-х: наименьшая точка, которую он мог
отобразить, была размером примерно в 1/100 дюйма (0,25 мм) или чуть
больше. Свое название единица px
получила от тех
экранных пикселей.
Нынешние устройства в принципе могут отображать и более мелкие
четкие точки (хотя их может быть трудно разглядеть без лупы).
Но документы из прошлого века, которые использовали px
в CSS, независимо от устройства выглядят по-прежнему. Принтеры,
в особенности, могут отображать четко отображать линии гораздо
тоньше 1px, но даже на принтерах линия в 1px выглядит почти так же,
как выглядела бы на мониторе. Устройства меняются, но единица px
всегда выглядит одинаково.
На самом деле CSS требует, чтобы 1px
был точно
равен 1/96 дюйма при любом выводе на печать. В CSS считается, что
принтерам, в отличие от экранов, не нужны разные размеры для px
, чтобы отображать четкие линии. Поэтому при печати
px не только одинаково выглядит независимо от устройства,
но и заведомо измеряется одной и той же величиной (совсем как
единицы c
m
, pt
, mm
, in
и pc
, как
объяснялось выше).
CSS также определяет, что растровые изображения (напр.
фотографии) по умолчанию отображаются в масштабе 1 пиксель
изображения на 1px. Фотография разрешением 600 на 400 будет 600px
шириной и 400px высотой. Тем самым пиксели фотографии привязываются
не к пикселям устройства вывода (которые могут быть очень мелкими),
а к единицам px
. Это позволяет точно совмещать
изображения с другими элементами документа, при условии, что
вы используете в своих стилях единицы px
, а не pt
, cm
и т.д.
Используйте
em
или px
для шрифтов
Единицы pt
(пункт) and pc
(пика)
CSS получил в наследство от печатного дела. Там традиционно
применялись эти и подобные единицы, а не сантиметры или дюймы.
В CSS незачем использовать pt
, пользуйтесь любой
единицей на свой выбор. Но есть хорошая причина
не использовать ни pt
, ни других абсолютных
единиц, а использовать только em
и px
.
Вот несколько линий разной толщины. Некоторые из них могут
казаться четкими, но как минимум линии в 1px и 2px должны быть
четкими и видимыми:
0.5pt,
1px,
1pt,
1.5px, 2px
Если первые четыре линии выглядят одинаковыми (либо линия
в 0.5pt пропала), скорее всего вы видите это на мониторе,
не способном отображать точки мельче 1px. Если линии выглядят
возрастающими по толщине, скорее всего вы видите эту страницу
на качественном экране или на бумаге. А если 1pt выглядит толще,
чем 1.5px, то это скорее всего экран мобильного устройства (похоже, последняя фраза описывает ситуацию до правки 2011 года —
прим. перев.).
Волшебная единица CSS, px
, часто бывает удачным
выбором, особенно если нужно выровнять текст с картинками, либо
просто потому, что что-либо толщиной 1px (или кратной 1px) заведомо
будет выглядеть четко.
Но размеры шрифтов еще лучше задавать в em
. Идея
в том, чтобы 1) не задавать размер шрифта для элемента BODY
(в HTML), а использовать размер шрифта по умолчанию для устройства,
поскольку это наиболее удобный для читателя размер; и 2) указывать
размеры шрифта других элементов в em
: h2
, чтобы h2 был в 2½ раза крупнее
{font-size: 2. 5em}
основного шрифта страницы.
Едиственное место, где можно использовать pt
(либо cm
или in
) для размера
шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт
был строго определенного размера. Но даже там чаще всего лучше
использовать размер шрифта по умолчанию.
Таким образом, единица px
избавляет
от необходимости знать разрешение устройства. Независимо
от разрешения устройства вывода (96 dpi, 100 dpi, 220 dpi или
1800 dpi), длина, указанная в виде целого числа px
,
всегда выглядит хорошо и везде достаточно похоже. Но что, если
мы хотим узнать разрешение устройства, например, чтобы
решить, можно ли использовать линию в 0.5px
?
Выход — проверить разрешение с помощью медиавыражений.
Подробности о медиавыражениях — за рамками этой статьи, но вот
небольшой пример:
div. mybox { border: 2px solid } @media (min-resolution: 2dppx) { /* Media with 2 or more dots per px */ div.mybox { border: 1.5px solid } }
Новые единицы измерения в CSS
Чтобы было еще проще писать стилевые правила, зависящие только
от размера шрифта по умолчанию, с 2013 года в CSS есть новая
единица: rem
. Один rem
(от «root em»,
т.е. «корневой em» или «em корневого элемента») — это размер шрифта
корневого элемента в документе. В отличие от em
,
который может быть для каждого элемента свой, rem
для всего документа один и тот же. Например, чтобы задать
элементам P и h2 одинаковый внешний отступ слева, вот для сравнения
CSS-код до 2013 года:
p { margin-left: 1em } h2 { font-size: 3em; margin-left: 0.333em }
и новая версия:
p { margin-left: 1rem } h2 { font-size: 3em; margin-left: 1rem }
Благодаря другим новым единицам стало можно указывать размеры
относительно окна пользователя. Это vw
и vh
. Единица vw
— 1/100 ширины окна, а vh
— 1/100 его высоты. Еще есть vmin
,
соответствующая меньшему из vw
и vh
.
И vmax
(можете догадаться, что она делает).
Поскольку они новые, они еще работают не везде. Но к началу 2015
года многие браузеры уже их поддерживали.
Bos, style activity lead
Copyright © 1994–2021 W3C® Privacy policy
Created 12 Jan 2010;
Last updated Ср 06 янв 2021 05:40:49
: Элемент Emphasis — HTML: Язык гипертекстовой разметки
HTML-элемент
помечает текст с ударением. Элемент
может быть вложенным, причем каждый уровень вложенности указывает на большую степень выделения.
Этот элемент включает только глобальные атрибуты.
Элемент
предназначен для слов с ударением по сравнению с окружающим текстом, который часто ограничивается словом или словами предложения и влияет на смысл самого предложения.
Обычно этот элемент отображается курсивом. Однако его не следует использовать для применения курсивного стиля; используйте для этой цели свойство CSS font-style
. Используйте элемент
для обозначения названия произведения (книги, пьесы, песни и т. д.). Используйте элемент
, чтобы пометить текст с альтернативным тоном или наклонением, который охватывает многие распространенные ситуации для курсива, такие как научные названия или слова на других языках. Используйте
для обозначения текста, который имеет большее значение, чем окружающий текст.
против Некоторых разработчиков может смутить то, что несколько элементов, по-видимому, дают схожие визуальные результаты. По умолчанию визуальный результат такой же. Однако смысловой смысл иной. Это означает, что правильное использование зависит от ситуации. Ни один из них не предназначен для чисто декоративных целей, для этого и нужен стиль CSS. Примером для Примером для
и
— распространенный пример, так как они оба выделяют текст курсивом. Какая разница? Что следует использовать? 9Элемент 0005 представляет ударение в своем содержании, в то время как элемент
представляет текст, который выделяется из обычной прозы, например, иностранное слово, мысли вымышленного персонажа или когда текст вместо этого ссылается на определение слова. представления его смыслового значения. (Название произведения, например название книги или фильма, должно использовать
.)
может быть: «Просто , сделай это уже!» или: «У нас было , чтобы что-то с этим сделать». Человек или программа, читающая текст, произносила слова, выделенные курсивом, с ударением, используя словесное ударение.
может быть: « Queen Mary отплыл прошлой ночью». Здесь нет дополнительного акцента или важности слова «Королева Мария». Просто указано, что речь идет не о царице по имени Мария, а о корабле по имени 9.0047 Королева Мэри
может быть: «Слово the является артиклем».
Элемент
часто используется для обозначения неявного или явного контраста.
В HTML 5 то, что раньше называлось Контент блочного теперь называется потоковым контентом.
Результат
Категории контента | Потоковое содержание, фразовое содержание, ощутимое содержание. |
---|---|
Разрешенный контент | Фразы контента. |
Отсутствие тега | Нет, начальный и конечный теги обязательны. |
Разрешенные родители | Любой элемент, принимающий фразовое содержание. |
Неявная роль ARIA | Нет соответствующей роли |
Разрешенные роли ARIA | Любой |
Интерфейс DOM | HTMLElement До Gecko 1. 9.2 (Firefox 4)включительно, Firefox реализует HTMLSpanElement интерфейс для этого элемента. |
Спецификация |
---|
HTML Standard # EM-ELEMENT | 11111111111111121 BCDEMAL TARER | 1111111111111111111111111134. Включите JavaScript для просмотра данных.Обнаружили проблему с содержанием этой страницы?
Хотите принять более активное участие? Узнайте, как внести свой вклад. Последний раз эта страница была изменена участниками MDN. HTML: тегВ этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом , с синтаксисом и примерами. ОписаниеHTML-тег помечает текст с ударением, которое традиционно означает, что текст отображается в браузере курсивом. Этот тег также часто называют элементом . СинтаксисВ HTML синтаксис тега :
Пример выводаАтрибутыК тегу применяются только глобальные атрибуты. Нет атрибутов, специфичных для тега . Примечание
Совместимость с браузерамиТег имеет базовую поддержку со следующими браузерами:
ПримерМы обсудим тег ниже, исследуя примеры использования тега в HTML5, HTML 4. 01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.
Документ HTML5Если вы создали новую веб-страницу в HTML5, ваш тег может выглядеть следующим образом: <голова> <мета-кодировка="UTF-8"> В этом примере документа HTML5 мы создали тег , заключающий в себе текст «этот текст». Ваш браузер по умолчанию будет отображать «этот текст» курсивом. Вы можете перезаписать это поведение с помощью CSS. HTML 4.01 Transitional DocumentЕсли вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег может выглядеть следующим образом: dtd"> <голова> В этом примере переходного документа HTML 4.01 мы создали тег , заключающий в себе текст «этот текст». Ваш браузер по умолчанию будет отображать «этот текст» курсивом. Вы можете перезаписать это поведение с помощью CSS. Документ XHTML 1.0 TransitionalЕсли вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег может выглядеть следующим образом: <голова> В этом примере переходного документа XHTML 1.0 мы создали тег , заключающий в себе текст «этот текст». Ваш браузер по умолчанию будет отображать «этот текст» курсивом. Вы можете перезаписать это поведение с помощью CSS. XHTML 1.0 Strict DocumentЕсли вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег может выглядеть так: <голова> В этом примере XHTML 1.0 Strict Document мы создали тег , заключающий в себе текст «этот текст». Ваш браузер по умолчанию будет отображать «этот текст» курсивом. Вы можете перезаписать это поведение с помощью CSS. |