Таблицы стилей для веба Советы и хитрости по CSS
Указывать длину в CSS можно в разных единицах. Некоторые из них пришли из типографской традиции, как пункт ( pt ) и пика ( pc ), другие, напр. сантиметр ( cm ) и дюйм ( in ), знакомы нам в повседневном обиходе. Есть и «волшебная» единица, придуманная специально для CSS: px . Значит ли это, что для разных свойств нужны разные единицы?
Нет, единицы измерения не имеют отношения к свойствам, но имеют прямое отношение к средствам отображения: экран или бумага.
Любые единицы измерения можно использовать где угодно. Свойство со значением в пикселях ( margin: 5px ) также допускает и значения в дюймах или сантиметрах ( margin: 1.2in; margin: 0.5cm ), и наоборот.
Но в целом для отображения на экране и для печати лучше использовать разные наборы единиц измерения. Советы по использованию единиц собраны в следующей таблице:
Соотношение между абсолютными единицами таково: 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.5em и margin: 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 : H1 , чтобы H1 был в 2½ раза крупнее основного шрифта страницы.
Едиственное место, где можно использовать pt (либо cm или in ) для размера шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт был строго определенного размера. Но даже там чаще всего лучше использовать размер шрифта по умолчанию.
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 и H1 одинаковый внешний отступ слева, вот для сравнения CSS-код до 2013 года:
p < margin-left: 1em >h1
p < margin-left: 1rem >h1
Благодаря другим новым единицам стало можно указывать размеры относительно окна пользователя. Это vw и vh . Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin , соответствующая меньшему из vw и vh . И vmax (можете догадаться, что она делает).
Поскольку они новые, они еще работают не везде. Но к началу 2015 года многие браузеры уже их поддерживали.
Навигация по сайту
Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy
Created 12 Jan 2010;
Last updated Ср 06 янв 2021 05:40:49
Как обозначаются дюймы в тексте
Чтобы отобразить на экране ключевые символы языка HTML, а также символы, для которых нет клавиш на клавиатуре (или коды этих клавиш интерпретируются неоднозначно) в HTML предусмотрено специальное кодирование.
Не для всех символов в стандарте HTML предусмотрены мнемонические имена. Но любой символ можно закодировать с помощью его числового кода так:
Коды некоторых символов приведены в таблице:
| Название символа | Изображение | Мнемоника | Код |
|---|---|---|---|
| Меньше | < | < | |
| Больше | > | > | > |
| Амперсанд | & | & | & |
| Неразрывный пробел | |||
| Копирайт | © | © | © |
| Тире | — | — | — |
| Левая ёлочка | « | « | « |
| Правая ёлочка | » | » | » |
| Нижняя лапка | „ | „ | |
| Левая лапка | “ | “ | |
| Правая лапка | ” | ” | |
| Многоточие | … | … | … |
| Параграф | § | § | § |
| Номер | № | № |
Все буквы, составляющие имя специального символа, должны быть строчными (т. е. маленькими). Использование таких обозначений, как &NBSP и &, не допускается!
Дефис, тире, дюймы, кавычки
Дефис используется как знак переноса и для соединения частей сложного слова. Тире же, наоборот, вставляет в текст как бы небольшую паузу. Это разные знаки! Тире должно быть длиннее дефиса раза в три!
Дефис гораздо короче: посмотри-ка!
Ниже показана разница между кавычками и знаком дюйма:
Дискета 3.5″
“Текст в кавычках”
«И этот текст в кавычках»
Слева от тире в середине предложения ставится неразрывный пробел, а справа — обычный.
Код предыдущего абзаца записывается так:
Слева от тире в середине предложения ставится неразрывный пробел, а справа — обычный.
Неразрывный пробел
Пробел потому и называется неразрывным, что браузеру запрещается использовать его место для разрыва строки при автоматическом форматировании текста.
Вот характерные случаи использования этого символа (рекомендации Дмитрия Кирсанова):
Между инициалом и фамилией:
| Вид | Код |
|---|---|
| И. Сидоров | И. Сидоров |
| А. А. Дуванов | А. А. Дуванов |
В многословных сокращениях:
| Вид | Код |
|---|---|
| т. д. | т. д. |
| т. п. | т. п. |
Между знаком номера или параграфа и числом, относящимся к нему:
| Вид | Код |
|---|---|
| № 13 | № 13 |
| § 1 | § 1 |
Между маркером пункта и текстом, следующим за ним:
| Вид | Код |
|---|---|
| a) Первый пункт | a) Первый пункт |
| 1. Первый пункт | 1. Первый пункт |
Между числом и единицей измерения, относящейся к нему:
| Вид | Код |
|---|---|
| 220 В | 220 В |
| 1024 байт | 1024 байт |
| XXI век | XXI век |
| 2007 г. | 2007 г. |
Перед тире в середине предложения (после тире идет обычный пробел):
| Вид | Код |
|---|---|
| Пиксел — это точка на экране. | Пиксел — это точка на экране. |
Между классами многозначных чисел, начиная с пятизначных:
| Вид | Код |
|---|---|
| 32 541 | 32 541 |
| 4 937 543 246 | 4 937 543 246 |
Перед номерами версий программных продуктов и частями их названий:
| Вид | Код |
|---|---|
| Windows XP | Windows XP |
| Photoshop 9 | Photoshop 9 |
Значение слова «дюйм»
Источник (печатная версия): Словарь русского языка: В 4-х т. / РАН, Ин-т лингвистич. исследований; Под ред. А. П. Евгеньевой. — 4-е изд., стер. — М.: Рус. яз.; Полиграфресурсы, 1999; (электронная версия): Фундаментальная электронная библиотека
- Дюйм (русское обозначение: дюйм; международное: inch, in или ″ — двойной штрих; от нидерл. duim — большой палец) — неметрическая единица измерения расстояния и длины в некоторых системах мер. В настоящее время под дюймом обычно подразумевают используемый в США английский дюйм (англ. inch), в точности равный 2,54 см. Международная организация законодательной метрологии (МОЗМ) в своих рекомендациях относит дюйм к тем единицам измерения, «которые должны быть изъяты из обращения как можно скорее там, где они используются в настоящее время, и которые не должны вводиться, если они не используются». В Российской Федерации дюйм допускается к применению в качестве внесистемной единицы без ограничения срока с областью применения «промышленность».
- ДЮЙМ, а, м. [гол. duim]. Единица меры длины, одна двенадцатая фута, ок. 25 миллиметров.
Источник: «Толковый словарь русского языка» под редакцией Д. Н. Ушакова (1935-1940); (электронная версия): Фундаментальная электронная библиотека
дюйм
Делаем Карту слов лучше вместе
Привет! Меня зовут Лампобот, я компьютерная программа, которая помогает делать Карту слов. Я отлично умею считать, но пока плохо понимаю, как устроен ваш мир. Помоги мне разобраться!
Спасибо! Я стал чуточку лучше понимать мир эмоций.
Вопрос: сочетанный — это что-то нейтральное, положительное или отрицательное?
Нейтральное
Положительное
Отрицательное
Ассоциации к слову «дюйм»
Синонимы к слову «дюйм»
Предложения со словом «дюйм»
- Затем у самых своих ног он увидел другого маленького зверька, всего в несколько дюймов длиной – крохотного детёныша ласки, который рискнул непослушно, как он сам, уйти из дома.
Цитаты из русской классики со словом «дюйм»
- В этом отношении декорацию пополняет еще одно великолепное растение из семейства зонтичных, которое, кажется, не имеет на русском языке названия: прямой ствол вышиною до десяти футов и толщиною в основании три дюйма, пурпурово-красный в верхней части, держит на себе зонтик до одного фута в поперечнике; около этого главного зонта группируются 4–6 зонтов меньшего размера, придающие растению вид канделябра.
Сочетаемость слова «дюйм»
- на квадратный дюйм
на целый дюйм
последний дюйм - в дюйме от лица
в дюйм толщиной
в дюйме от головы - пара дюймов
четверть дюйма
на долю дюйма - приоткрылась на пару дюймов
приоткрыть дверь на дюйм
опуститься на дюйм - (полная таблица сочетаемости)
Каким бывает «дюйм»
Понятия со словом «дюйм»
Дюйм (русское обозначение: дюйм; международное: inch, in или ″ — двойной штрих; от нидерл. duim — большой палец) — неметрическая единица измерения расстояния и длины в некоторых системах мер. В настоящее время под дюймом обычно подразумевают используемый в США английский дюйм (англ. inch), в точности равный 2,54 см.
Отправить комментарий
Дополнительно
- Как правильно пишется слово «дюйм»
- Склонение существительного «дюйм» (изменение по числам и падежам)
- Разбор по составу слова «дюйм» (морфемный разбор)
- Цитаты со словом «дюйм» (подборка цитат)
- Перевод слова «дюйм» и примеры предложений (английский язык)
- Definition of «inch» at WordTools.ai (английский язык)
Смотрите также
Предложения со словом «дюйм»
- Затем у самых своих ног он увидел другого маленького зверька, всего в несколько дюймов длиной – крохотного детёныша ласки, который рискнул непослушно, как он сам, уйти из дома.
- Его страшные когти мелькали в воздухе в каких-нибудь нескольких дюймах расстояния от молодой девушки.
- Я зажмурился, чтобы прийти в себя, а когда открыл глаза, увидел на расстоянии двух дюймов два злобных глаза, вытаращенных на меня.
- (все предложения)
Синонимы к слову «дюйм»
Ассоциации к слову «дюйм»
Сочетаемость слова «дюйм»
- на квадратный дюйм
- в дюйме от лица
- пара дюймов
- приоткрылась на пару дюймов
- (полная таблица сочетаемости. )
Каким бывает «дюйм»
Морфология
- Склонение существительного «дюйм»
- Разбор по составу слова «дюйм»
Правописание
Карта слов и выражений русского языка
Онлайн-тезаурус с возможностью поиска ассоциаций, синонимов, контекстных связей и примеров предложений к словам и выражениям русского языка.
Справочная информация по склонению имён существительных и прилагательных, спряжению глаголов, а также морфемному строению слов.
Сайт оснащён мощной системой поиска с поддержкой русской морфологии.
Таблица перевода дюйм в мм
Дюйм (русское обозначение: дюйм; международное: inch, in или ″ — двойной штрих; от нидерл. duim — большой палец) — неметрическая единица измерения расстояния и длины в некоторых системах мер. В настоящее время под дюймом обычно подразумевают используемый в США английский дюйм (англ. inch), в точности равный 2,54 см. Подробнее можно почитать в Википедии.
| дюйм | мм | дюйм | мм |
| 1/32 | 0,7938 | 1-3/4 | 44,45 |
| 1/16 | 1,5875 | 1-25/32 | 45,2438 |
| 3/32 | 2,3812 | 1-13/16 | 46,0375 |
| 1/8 | 3,175 | 1-27/32 | 46,8312 |
| 5/32 | 3,9688 | 1-7/8 | 47,625 |
| 3/16 | 4,7625 | 1-29/32 | 48,4188 |
| 7/32 | 5,5562 | 1-15/16 | 49,2125 |
| 1/4 | 6,35 | 1-31/32 | 50,0062 |
| 9/32 | 7,1438 | 2 | 50,8 |
| 5/16 | 7,9375 | 2-1/32 | 51,594 |
| 11/32 | 8,7312 | 2-1/16 | 52,388 |
| 3/8 | 9,525 | 2-3/32 | 53,181 |
| 13/32 | 10,3188 | 2-1/8 | 53,975 |
| 7/16 | 11,1125 | 2-5/32 | 54,769 |
| 15/32 | 11,9062 | 2-3/16 | 55,563 |
| 1/2 | 12,7 | 2-7/32 | 56,356 |
| 17/32 | 13,4938 | 2-1/4 | 53,15 |
| 9/16 | 14,2875 | 2-9/32 | 57,944 |
| 19/32 | 15,0812 | 2-5/16 | 58,738 |
| 5/8 | 15,875 | 2-11/32 | 59,531 |
| 21/32 | 16,6688 | 2-3/8 | 60,325 |
| 11/16 | 17,4625 | 2-13/32 | 61,119 |
| 23/32 | 18,2562 | 2-7/16 | 61,9125 |
| 3/4 | 19,05 | 2-15/32 | 62,7062 |
| 25/32 | 19,8438 | 2-1/2 | 63,5 |
| 13/16 | 20,6375 | 2-17/32 | 64,2938 |
| 27/32 | 21,4312 | 2-9/16 | 65,0875 |
| 7/8 | 22,225 | 2-19/32 | 65,8812 |
| 29/32 | 23,0188 | 2-5/8 | 66,675 |
| 15/16 | 23,8125 | 2-21/32 | 67,4688 |
| 31/32 | 24,6062 | 2-11/16 | 68,2625 |
| 1 | 25,4 | 2-23/32 | 69,0562 |
| 1-1/32 | 26,1938 | 2-3/4 | 69,85 |
| 1-1/16 | 26,9875 | 2-25/32 | 70,6438 |
| 1-3/32 | 27,7812 | 2-13/16 | 71,4375 |
| 1-1/8 | 28,575 | 2-27/32 | 72,2312 |
| 1-5/32 | 29,3688 | 2-7/8 | 73,025 |
| 1-3/16 | 30,1625 | 2-29/32 | 73,8188 |
| 1-7/32 | 30,9562 | 2-15/16 | 74,6125 |
| 1-1/4 | 31,75 | 2-31/32 | 75,4062 |
| 1-9/32 | 32,5438 | 3 | 76,2 |
| 1-5/16 | 33,3375 | 3-1/32 | 76,9938 |
| 1-11/32 | 34,1312 | 3-1/16 | 77,7875 |
| 1-3/8 | 34,925 | 3-3/32 | 7835812 |
| 1-13/32 | 35,7188 | 3-1/8 | 79,375 |
| 1-7/16 | 36,5125 | 3-5/32 | 80,1688 |
| 1-15/32 | 37,3062 | 3-3/16 | 80,9625 |
| 1-1/2 | 38,1 | 3-7/32 | 81,7562 |
| 1-17/32 | 38,8938 | 3-1/4 | 82,55 |
| 1-9/16 | 39,6875 | 3-9/32 | 83,3438 |
| 1-19/32 | 40,4812 | 3-5/16 | 84,1375 |
| 1-5/8 | 41,275 | 3-11/32 | 84,9312 |
| 1-21/32 | 42,0688 | 3-3/8 | 85,725 |
| 1-11/16 | 42,8625 | 3-13/32 | 86,5188 |
| 1-23/32 | 43,6562 | 3-7/16 | 87,31,25 |
Карта сайта
Отправить запрос
Если Вы не нашли нужные запчасти, или Вам требуется помощь в подборе, отправьте нам запрос — мы Вам поможем