Bert
Bos, style activity leadCopyright © 1994–2021 W3C® Privacy policy
Створено 31 Січня 2011;
Останнє оновлення ср, 06-січ-2021 05:40:49
+0000
Це переклад. Він може містити помилки або бути застарілим відносно Англійської версії. Перекладач: Александр/Артлайф
Дивіться також індекс усіх порад.
На цій сторінці:
em, px, pt, cm, in…CSS пропонує декілька різних одиниць для вираження довжини.
Деякі мають свою історію в друкарстві, такі як знак (pt) і піка (pc), інші, відомі з
повсякденного використання, такі як сантиметр (cm) і
дюйм (in). І є також "піксель" одиниця, яка була
винайдена спеціально для CSS: px. Чи означає це, що
різні властивості потребують різних одиниць?
Ні, одиниці не мають нічого спільного з властивостями, але все з виводом медіа на екран чи папір.
Немає обмежень, для використання одиниць. Якщо властивість
приймає значення в 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
Якщо у вас є лінійка ви можете перевірити її точність: тут
вікно висотою 1in (2.54cm): ↑
72pt
↓
Так звані абсолютні одиниці (cm, mm, in, pt and pc) в CSS означають те ж саме, що і скрізь. Довжина
виражена в будь-якій з них буде відображатися так само точно, як і
розмір (у межах точності обладнання і програмного забезпечення).
Вони не рекомендуються для використання на екрані, тому що розміри
екрану часто змінюються. Великий екран може бути 60cm (24in),
маленький, переносний екран, може бути, тільки 8cm. І ви не
дивитесь на них з однакової відстані.
Одиниці em і ex залежать від
шрифту і можуть бути різним для кожного елемента в документі. em це просто розмір шрифту. У елемент із шрифтом 2in, 1em
означає 2in. Вираження таких розмірів, як поля та оббивка, в em означає, що вони пов'язані з розміром шрифту, і якщо
користувач має великий шрифт (наприклад, на великому екрані) або
маленький шрифт (наприклад, на портативному пристрої), розміри
будуть відображатися пропорційно. Такі величини як 'text-indent:
1.5em' та 'margin: 1em' є надзвичайно поширені в CSS.
Одиниця ex використовується рідко. ЇЇ призначення
полягає у вираженні розмірів, які повинні бути пов'язані з
х-висотою шрифту. Х-висота, грубо кажучи, це висота маленьких
літер, таких як, a, c, m, або o. Шрифти, які
мають однаковий розмір (і, таким же чином em) можуть
відрізнятися один від одного розмірами їх маленьких літер, і ще,
важливо, одиниця ex доступна, коли у деяких
зображеннях збігається х-висота.
Одиниця px є особливою одиницею CSS. Вона не
пов'язана з поточним шрифтом, а також не пов'язана з абсолютними
одиницями. Одиниця px визначається як, невелика, але
видима, і така, що горизонтальна лінія шириною 1px може бути
відображена з гострими краями (без згладжування). Що є чітким,
малим і видимим залежить від пристрою і як він використовується: чи
ви тримаєте його близько до очей, як мобільний телефон, на відстані
витягнутої руки, як монітор комп'ютера, або десь посередині, як
книга? Одиниця px таким чином не визначена як
величина постійної довжини, а як щось, що залежить від типу
пристрою і його типового використання.
Щоб зрозуміти звідки з'явилась одиниця px
(піксель), уявіть собі, CRT монітор комп'ютера з 1990-х років:
найменша точка, яку він міг відображати відміряється 1/100-тою
дюйма (0.25мм) або трохи більше. Одиниця px отримала
свою назву від тих екранних пікселів.
В даний час є пристрої, які могли б, в принципі відобразити
менші чіткі крапки (хоча вам може знадобитися лупа, щоб побачити
їх). Але документи з минулого століття, які використовували px в CSS досі виглядають як і раніше, незалежно від того,
які пристрої. Принтери, зокрема, можуть відображати чіткі лінії з
набагато меншими деталями, ніж 1px , але навіть на принтерах, лінія
в 1px виглядає дуже схожою на те, як вона виглядатиме на моніторі
комп'ютера. Пристрої змінюються, але px (пікселі)
завжди мають такий же зовнішній вигляд.
CSS також визначає, що растрові зображення (наприклад,
фотографії) по стандарту, відображаються у співвідношенні: 1
піксель зображення як 1px. Таким чином малюнок з розширенням 600 на
400 буде мати ширину 600px і висоту 400px. Пікселі на фотографії
при цьому не відображають пікселів екрану (який може бути дуже
маленьким), але відображають одиниці px. Це дозволяє
точно вирівняти зображення з іншими елементами документа, до тих
пір, поки ви використовуєте одиницю px у вашій
таблиці стилів, а не одиниці pt, cm,
і т. д.
em або px для
розмірів шрифтуCSS успадкувала з друку такі одиниці pt (знак) та
pc (піка). Друкарі переважно використовували ці та
схожі одиниці в порівнянні з cm (сантиметр) чи in (дюйм). В CSS не обов'язково використовувати pt, використовуйте будь-яку одиницю, якій ви віддаєте
перевагу. Але краще не використовувати ні pt, ні будь-яку іншу абсолютну одиницю, а
використовуйте тільки em та px.
Ось декілька ліній різної товщини. Деякі або всі вони можуть чітко виглядати, але принаймні лінії 1px та 2px повинні бути чіткими і видимими:
0.5pt, 1px, 1pt, 1.5px, 2px
Якщо перші чотири рядки виглядають однаково (або якщо лінія 0.5pt відсутня) ви, ймовірно, дивитесь на монітор комп'ютера, що не може відобразити точку меншу, ніж 1 піксель. Якщо ліній розташовані в порядку збільшення товщини, ви, ймовірно, дивитесь цю сторінку на комп'ютері з високоякісним екраном або на папері. І якщо 1pt виглядає товстішим, ніж 1.5px, то ви, ймовірно, маєте портативний екран.
px (піксель) особлива одиниця CSS, яку часто
добре використовувати, особливо якщо стиль вимагає вирівнювання
тексту на зображення, або просто тому, що все, що має розмір 1px
або кратно ширині 1px, гарантовано має чіткий вигляд.
Але для розмірів шрифту краще використовувати одиницю em. Ідея (1) не задавати розмір шрифту BODY (ТІЛА)
елемента (в HTML), а використовувати за умовчанням розмір пристрою,
тому що це розмір, який читач може легко читати; Ідея (2) виражати
розміри шрифту елементів у em: 'H1 {font-size:
2.5em} (розмір шрифту)' щоб зробити H1 в 2? рази більше від
нормального, шрифту body (тіла).
Єдине місце, де ви могли б використати pt (або
cm, або in) - для встановлення
розміру шрифту в таблицях стилів для друку, якщо вам необхідно
переконатися у точності розміру друкованого шрифту. Але навіть там,
як правило, краще використовувати розмір шрифту за замовчуванням.
Щоб ще більше спростити, потрібно зробили правила стилів, які
залежать тільки від розміру шрифту за замовчуванням, нова одиниця
знаходиться у стадії розробки: rem. rem (“root em”) (кореневий em) це розмір шрифту кореневого елементу
документа. На відміну від em, яка може бути різною
для кожного елемента, rem є постійною для всього
документа.
Інші одиниці, що розробляються, дозволяють вказати розміри
відносно вікна читача. Це - vw і vh.
vw є 1/100-ою ширини вікна і vh є
1/100-ою висоти вікна.
Bert
Bos, style activity leadСтворено 31 Січня 2011;
Останнє оновлення ср, 06-січ-2021 05:40:49
+0000