CSS, - HTML5
Для багатьох властивостей CSS потрібна вказівка довжини. У кількох прикладах ми працюємо з властивістю width, яка використовується для визначення ширини елемента, і з властивістю font-size, яка використовується для вказівки розміру шрифту, який використовується для відображення вмісту елемента. У лістингу 4-19 показаний стиль, який використовує обидві ці властивості.
Коли ви вказуєте довжину, ви об'єднуєте кількість одиниць та ідентифікатор одиниць без пробілів та інших символів між ними. У лістингу я вказав значення властивості width 5cm , що позначає 5 одиниць, представлених ідентифікатором cm (сантиметрів). Так само я вказав значення властивості font-size в 20pt , що означає 20 одиниць, представлених ідентифікатором pt (пунктів, про які ми поговоримо в наступних розділах). CSS визначає два види одиниць довжини: абсолютні та відносні (по відношенню до іншої властивості). Я поясню їх у наступних розділах.
Робота з абсолютними одиницями виміру довжини
У попередньому лістингу використовував величини cm і pt , які є прикладом абсолютних одиниць вимірювання (абсолютних величин). Ці величини є реальними засобами виміру. CSS підтримує п'ять типів абсолютних величин, описаних у таблиці 4-6.
Рада
Ви можете бути здивовані, що пікселі не знаходяться у таблиці абсолютних одиниць виміру. Насправді CSS намагається зробити пікселі відносними одиницями вимірювання, хоча, як я поясню пізніше в цьому розділі, не все виходить гладко. Більше ви можете дізнатись у розділі "Робота з пікселями".
Робота з відносними одиницями виміру довжини
Відносні одиниці виміру довжини складніше визначити і реалізувати, ніж абсолютні, і вони вимагають жорсткого ікороткої мови, щоб їхній зміст був визначений однозначно. Відносні одиниці вимірюються у межах інших одиниць (відносно іншим одиницям). На жаль, мова специфікації CSS не є достатньо точною (проблема, яка переслідує CSS багато років). Це означає, що CSS визначає широкий спектр цікавих та корисних відносних одиниць виміру, але ви не можете використовувати деякі з них, тому що вони не мають широкої та послідовної підтримки браузерів. У таблиці 4-7 показані відносні одиниці виміру, визначені CSS, які працюють в основних браузерах.
У наступних розділах я покажу вам, як використовувати ці одиниці виміру, щоб виразити довжину.
Робота з відносними одиницями вимірювання розміру шрифту
При використанні відносних одиниць ви фактично вказуєте величину іншої одиниці виміру. Перші відносні одиниці вимірювання, на які ми подивимося, стосуються розміру шрифту. У лістингу 4-20 показаний приклад.
У цьому прикладі я вказав значення для властивості height, що дорівнює 2em , що позначає, що р елементи повинні оброблятися таким чином, що висота елемента на екрані вдвічі більше розміру шрифту. Ця величина розраховується для кожного елемента, що відображається. Я визначив розмір шрифту ( font-size ) за умовчанням 15pt в елементі style і вказав внутрішнє значення 12pt для другого елемента р в документі. Ви можете побачити, як браузер відображає ці елементи на малюнку 4-15.
Ви можете використовувати відносну одиницю, щоб виразити величину іншої відносної одиниці. У лістингу 4-21 показаний приклад, де властивість height виявляється у одиницях em . Ці одиниці em є похідними від значення властивості font-size , яке висловив, використовуючи одиниці rem .
Одиниця вимірювання rem відносна до розміру шрифту елемента HTML, також відомого як кореневий елемент. У цьому прикладі я призначив абсолютний розмір шрифту 0,2 дюйма, використовуючи стиль (хоча я також міг створити внутрішній стиль, визначивши атрибут style для елемента html безпосередньо). Значення для font-size в іншому стилі виражається в 2rem, що означає, що розмір шрифту в кожному елементі, для якого застосовується це значення, буде вдвічі більшим, ніж розмір шрифту кореневого елемента, тобто 0,4 дюйма. Властивість height в тому ж стилі визначається як 2em, тобто знову вдвічі більше. Це означає, що браузер буде відображати p елемент, використовуючи шрифт висотою 0,4 дюйма, а в цілому весь елемент буде 0,8 дюйма висотою. Ви можете побачити, як браузер обробляє ці стилі на малюнку 4-16.
Третя пов'язана зі шрифтами відносна одиниця – це ex , яка є поточною х-висотою шрифту. Ця відстань від базової лінії (основи) шрифту до середньої лінії, але часто за еталон беруть висоту символух (звідси назва). Як правило, 1ex це приблизно 0.5em.
Робота з пікселями
Пікселі в CSS – це, можливо, не те, чого ви очікували. Звичайне значення терміна піксель відноситься до найменшої видимої величини на дисплеї: одному елементу (або точці) зображення. CSS визначає піксель наступним чином:
Еталонний піксель – це візуальне відображення одного пікселя на пристрої із щільністю пікселів 96dpi на дистанції витягнутої руки від читача.
Це приклад ще одного невиразного пояснення, "бича" CSS. Я не хочу бути пафосним, але специфікації, які залежать від довжини руки користувача, для мене є сумнівними. На щастя, основні браузери ігнорують різницю між пікселями, як визначено в CSS, тапікселями на дисплеї та розглядають 1 піксель як 1/96 дюйма. (Це стандартна щільність пікселів для Windows; браузери для інших платформ з відмінною від цієї щільністю пікселів використовують перерахунок з одних одиниць в інші, тому там піксель теж приблизно дорівнює 1/96 дюйма).
Рада
Хоча від цього і не буде надто багато користі, але ви можете прочитати про CSS пікселі на www.w3.org/TR/CSS21/syndata.html#length-units.
Результат цього такий, що хоч і передбачається, що CSS пікселі будуть оброблятися як відносні одиниці виміру, браузери працюють з ними як з абсолютними величинами. У лістингу 4-22 показано використання пікселів у стилі CSS.
У цьому прикладі я висловив обидві властивості, font-size і width, в пікселях (властивість width є доповненням до властивості height і встановлює ширину елемента). На малюнку 4-17 можна побачити, як браузер використав ці стилі.
Рада
Хоча я часто використовую пікселі як одиниці виміру в CSS, все ж таки я залишаюся людиною звички. Я вважаю, що одиниці вимірювання em більш гнучкі. Це тому, що мені доводиться змінювати розмір шрифту лише тоді, коли я вношу зміну, а решта стилю працює без проблем. Важливо запам'ятати, що хоча пікселі CSS були задумані як відносні величини, на практиці вони абсолютні величини, і як наслідок, вони можуть бути негнучкими.
Робота з відсотками
Можна виразити одиницю виміру у відсотковому співвідношенні до іншої величини (до значення іншої властивості). Це можна зробити, використовуючи величину, виражену у % (відсотках), як показано у лістингу 4-23.
Є дві складності у роботі з відсотковими величинами. Перше у тому, що не всі властивості можуть бути виражені таким чином. А друге полягаєу тому, що для кожної властивості, яка може бути виражена у відсотковому співвідношенні, визначається по-своєму, від якої іншої властивості обчислюватиметься це відсоткове співвідношення. Наприклад, властивість font-size використовує успадковане значення font-size батьківського елемента, а властивість width використовує значення width блоку, що містить.
Це не так заплутано, як може здатися. Я поясню, що таке містить блок у розділі 16. (Це важлива концепція, що повторюється). Я також розповім вам, які властивості CSS підтримують відсоткові одиниці вимірювання і як розраховується відсоток кожної властивості CSS, про яку йтиметься, починаючи з глави 19.
Одиниці вимірювання CSS без широкої браузерної підтримки
На додаток до відносних одиниць, які я перерахував, CSS визначає деякі одиниці, які ще мають отримати широку браузерну підтримку. У таблиці 4-8 перераховані нові одиниці виміру. Вони будуть корисні, коли їх реалізація стане широкою та послідовною, але доти слід уникати їх використання.