Визначте за допомогою CSS зовнішній вигляд веб-сенсорної графіки в IoT

У попередній статті циклу про як створити графіки стану датчиків, підключених до Інтернету речей IoT пояснює шлях використовувати веб-сторінку, розроблену в HTML, як структуру для графіки. Елементи веб-сторінки, які були зведені до мінімуму за допомогою об’єктів <div>, прямо не визначали його вигляд, натомість посилалися на інформацію про зовнішній вигляд до таблиці стилів CSS, про що йтиметься в цій частині серії.

У рішенні, яке я пропоную для створення графіків датчиків, підключених до IoT, використовується документ CSS який завантажується з документа HTML. Якщо код HTML буде згенеровано з програми на сервері, наприклад у PHP, було б дуже просто включити його як частину коду, який визначає веб-сторінку, замість того, щоб завантажувати її з неї, що можна трохи оптимізувати, зберігши виклик. Який би варіант не був обраний, найзручніший метод включає редагувати код CSS в окремому документі, щоб зручніше керувати ним і мати можливість використовувати його повторно. У прикладі, розробленому в підручнику цієї серії статей, йому було дано назву estilo.css.

Так само, При роботі зі складними проектами доцільно використовувати кілька окремих таблиць стилів у різних документах, щоб мати можливість повторно використовувати певні функції без необхідності кожного разу завантажувати їх усі, а також легше редагувати код, розповсюджуючи його в різних документах відповідно до відповідної логічної структури.

Стилі CSS Вони намагаються описати всі екстремуми поведінки та зовнішнього вигляду веб-сторінки за допомогою кількох типів підходів, усі одночасно дійсні, при цьому намагаючись якомога більше дотримуватися сумісності зі специфікаціями попередньої версії. Це означає, що існує багато можливих рішень, які вирішують однакові потреби. а також велику кількість доступних ресурсів (властивості CSS). Завдяки дидактичному підходу статті та щоб не заплутувати нових користувачів CSS, тільки властивості і структури, необхідні для досягнення кінцевої мети, яка має графічно представляти дані з датчиків, підключених до Інтернету речей. Водночас існує також а невеликий вступ до CSS, Каскадні таблиці стилів.

Форматування властивостей CSS

El основний формат Він складається з імені властивості, знака двокрапки, значення властивості та знака крапки з комою. nombre:valor;

CSS дозволяє використовувати різні одиниці вимірювання в одному документі у тому числі пов’язані зі структурою (вимірювання того, що містить елемент) у відсотках, відносно пристрою, на якому вони представлені, наприклад, піксель, або абсолютні значення, наприклад сантиметри. Одиниці виражаються після значення відповідно до наступного скороченого кодування.

Для програми, яку ми збираємося робити, важливо розглянути принаймні три одиниці стилю. % для проведення вимірювань відносно розміру контейнера елемента, піксель для вимірювань відповідно до роздільної здатності екрана та міліметрів (фактично, будь-яке абсолютне вимірювання) для створення друкованих звітів.

Є кілька комплексні властивостіабо складені, які залежать від кількох значень (таких як колір, розмір, стиль...), щоб вказати значення, у CSS є дві можливості: написати у відповідному порядку всі значення, розділені пробілами або використовувати суму простих властивостей, еквівалентних складним. Наприклад, усі чотири поля об’єкта можна вказати в одній властивості margin або можна встановити за допомогою властивостей margin-top, margin-right, margin-bottom y margin-left. До речі, за цим порядком (за годинниковою стрілкою) йдуть описи значень, які «оточують» елемент, наприклад внутрішнє (заповнення) або зовнішнє поле, межа...

Завдяки тому, що було пояснено досі, ми можемо побачити кілька прикладів властивостей

У попередньому прикладі Колір визначається за допомогою коду з 6 шістнадцяткових цифр, які попарно представляють значення червоного, зеленого та синього компонентів. Якщо трапиться, як у прикладі, що дві цифри рівні, це можна скоротити як #F09 (що, до речі, відповідає так званим «веб-безпечним кольорам»). В остаточній пропозиції я уникатиму використання цих абревіатур, щоб уніфікувати критерії та зробити її більш зрозумілою. Ви також можете скорочувати значення складних властивостей, наприклад margin у прикладі, коли повторюються всі значення або протилежні пари. Подібно до тих самих рядків збереження тексту, також можна опустити одиницю під час вказівки властивості, коли значення дорівнює нулю, оскільки в цьому випадку воно не має значення.

Деякі значення, окрім того, що їх можна виразити чисельно, мають назву що робить код більш читабельним і дозволяє краще їх запам'ятати. Наприклад, замість шістнадцяткового числового коду цілі, #FFFFFF (o #FFF), можна записати white з таким же результатом. Таким чином, чорний колір, #000000 (o #000), можна замінити на black.

також там значення виражаються спеціальним кодом, назвою. Наприклад, щоб вказати, що бічне поле встановлюється браузером автоматично (зазвичай воно відповідає центральній функції), використовується спеціальне значення auto, яка не має числової відповідності з жодним значенням.

в виражають особливий спосіб використання ряду складених (комплексних) значень властивості CSS Ви можете вибрати формати з синтаксисом, подібним до синтаксису функцій. Наприклад, щоб виразити колір як три значення його червоного, зеленого та синього компонентів (the Модель RGB) було б написано color: rgb(128, 255, 64);. У цьому стилі висловлювання також можна використовувати одиниці; У наведеному вище прикладі колірні компоненти є десятковим значенням від 0 до 255, але це може бути легше виразити у відсотках від загальної кількості кожного колірного компонента, і в цьому випадку це також можна записати як color: rgb(50%, 100%, 25%);.

Розрахунок значень в CSS

В останніх версіях CSS це можливо зробити прості математичні операції для обчислення значень. Для цього використовуйте calc і операція, яку потрібно виконати, виражена в дужках. Ви можете вказати одиниці, дужки та прості оператори, такі як сума (+), віднімання (-), множення (*) і поділ (/). Вираз буде такого типу width:calc((90%-20px)/2));.

Змінні можна використовувати в математичних операціях в CSS звертаючись при розрахунку однієї властивості до вартості іншої с var. Щоб мати можливість використовувати змінну без необхідності посилатися на фактичну властивість стилю, також дозволено цитувати властивість, яка не існує. CSS рекомендує формат --nombre-variable (два дефіси перед назвою вигаданої властивості). Таким чином, щоб визначити висоту елемента як половину його ширини, вираз у CSS як height:calc(var(width)/2); і щоб визначити нову змінну "thickness" (яку можуть використовувати інші властивості), ви повинні написати, наприклад, --grosor:4px; щоб мати можливість пізніше посилатися на це як margin-top:calc(var(--grosor)*4);

Залежні від браузера властивості CSS

CSS Це специфікація, стандартизована консорціумом W3C (World Wide Web Consortium) але багато властивості або стилі поведінки досягають браузерів, перш ніж стати частиною специфікації версії.

так що код CSS працює з поточними функціями браузера, але не втрачають сумісності з новими функціями, використовується префікс. Цей префікс залежить від візуалізація двигуна який використовує веб-браузер, на який ви хочете посилатися (для якого визначено стиль).

Префікс -webkit Це працює для браузерів на основі WebKit як Safari o Chrome. Префікс -moz Він використовується для браузерів на основі візуалізація двигуна de Mozillaв даний час GeckoТакий як Firefox та його похідні. Посилатися на EdgeHTML, то візуалізація двигуна браузер край від Microsoft (раніше тризуб), використовується префікс -ms. Корпус браузера Opera трохи особливий, оскільки він почав використовувати свій власний візуалізація двигуна, згадується с -o, але зараз працює з WebKit, що виражається як -webkit.

Щоб використати властивість, що посилається на браузер, напишіть його ім’я, додавши до нього префікс і розділивши його дефісом, як у -o-border-radius:10px;, який слугуватиме для встановлення округленої межі (заокругленого кута) у старіших версіях браузера Opera.

Коментарі

Для уточнення коду CSS Ви можете використовувати коментарі, що зробить його більш читабельним, але з недоліком збільшення його розміру. Синтаксис коментарів в CSS Це як багаторядкові коментарі C + + який, я впевнений, ви вже знаєте: починаючи з /* і закінчуючись на */, як у C + +, може займати кілька рядків.

Селектори

Визначення властивості призначаються об’єктам у документі HTML групуючи їх у селектори і взяти їх у дужки. Селектор може посилатися на елемент мови HTML (мітка), як div, клас (присвоєний с class en HTML) ідентифікатор (присвоєний id en HTML) або всі («універсальний селектор»), представлені зірочкою (*). У наступному прикладі показано селектор кожного типу:

Етикетки HTML виражаються у визначенні стилю своєю назвою, класи позначаються крапкою перед назвою (.) і знак фунта (#) для ідентифікаторів.

Частина великої держави CSS проживає в можливість групування селекторів при визначенні їх властивостей. Існує кілька способів групування селекторів. Групуючи їх, розділяючи їх комами, виражається, що кожен із цитованих селекторів має ці властивості.

Попередній приклад показує, що класи споживання, вологості та температури поділяють колір, ширину та висоту. У цьому коді також представлено нову концепцію: властивості можна перевизначати, і в цьому випадку переважатимуть останні описані. Таким чином, елементи температурного класу нарешті матимуть висоту 50% об’єкта, який їх містить.

Якщо згруповані селектори не розділені комами, умова, накладена на властивості, є сукупною, тобто елемент повинен задовольняти всі селектори, щоб він набув вигляду або поведінки, які вони визначають. Якщо селектори посилаються на теги HTML Порядок, у якому вони з’являються, має бути за спаданням рівня включення: спочатку найвищий ієрархічний рівень, а останнім – найнижчий.

У попередньому прикладі визначено елементи div які також належать до температурного класу та елементи, які мають як температурний клас, так і клас споживання (обидва одночасно), як у class="temperatura consumo". елементи <div> коду HTML з class="temperatura" вони мали б максимум 100%

Властивості CSS для визначення тексту

Можна розрізнити три типи властивостей, які впливають на зовнішній вигляд тексту: (1) ті, що встановлюють шрифт, яким він представлений, (2) ті, що визначають зовнішній вигляд літералу (вмісту тексту) і (3) загальні, тобто ті, що впливають як на зовнішній вигляд тексту, так і на зовнішній вигляд інших компонентів. Загалом, те, що було сказано для пояснення властивостей останньої групи, також застосовуватиметься до тих самих властивостей, що застосовуються до інших елементів.

Типографіка (шрифт)

• font-family вказує назву шрифту, який використовується для елемента. Ви можете написати одну назву або список, у порядку переваги та розділяючи назви комами, шрифтів, які використовуватимуться альтернативно, якщо потрібного не існує. У цьому ж ключі можна використовувати загальні шрифти з назвами monospace, serif, sans-serif, cursive, fantasy. З цих загальних шрифтів найважливішим (для представлення наявних даних) є перший, який, як випливає з назви, використовуватиме шрифт із фіксованим інтервалом, доступний у системі та попередньо встановлений браузером. Другий, serif, він використовуватиме доступний за умовчанням засічки (обробка або витонченість). Без аукціону, якщо вказано третє, sans-serif. Імітація намальованого письма з cursive (спосіб назвати це, очевидно, можна покращити) та декоративну типографіку системи з fantasy, останній із п’яти.

  Щодо коду CSS Пробіли мають особливе значення як роздільник; якщо назва сімейства шрифтів складається з кількох слів, розділених пробілами, вона пишеться в лапках, щоб уникнути плутанини.

  CSS font-tamily ejemplo de uso

  CSS

  <br /> font-family: DejaVu, Helvetica, Arial, “a palo seco”, sans-serif;

  1	font-family: DejaVu, Helvetica, Arial, “a palo seco”, sans-serif;

  Веб-браузери можуть використовувати локальні шрифти (ті, що встановлені в системі, на якій вони працюють), а також інші, які спеціально завантажуються, навіть перекриваючи ті, що встановлені локально. Щоб завантажити шрифт, використовуйте @font-face із зазначенням його назви, місця завантаження його визначення та, якщо застосовно, опису його формату.

  CSS Ejemplo de descarga de la definición de una tipografía con @font-face

  CSS

  <br /> @font-face<br /> {<br /> font-family:”SircuitoExpandedLight”;<br /> src: url(‘/EOT/Sircuito-Expanded-Light.eot’);<br /> }</p> <p>@font-face<br /> {<br /> font-family:”SircuitoRegularMedium”;<br /> src: url(‘tipos/Sircuito-Regular-Medium.eot’);<br /> src: url(‘tipos/Sircuito-Regular-Medium.eot?iefix’) format(‘eot’),<br /> url(‘tipografia/Sircuito-Regular-Medium.woff’) format(‘woff’),<br /> url(‘tipografia/Sircuito-Regular-Medium.ttf’) format(‘truetype’),<br /> url(‘tipografia/Sircuito-Regular-Medium.svg#webfont’) format(‘svg’);<br /> -webkit-font-smoothing:antialiased;<br /> }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  @font-face { font-family:“SircuitoExpandedLight”; src: url(‘/EOT/Sircuito-Expanded-Light.eot’); }   @font-face { font-family:“SircuitoRegularMedium”; src: url(‘tipos/Sircuito-Regular-Medium.eot’); src: url(‘tipos/Sircuito-Regular-Medium.eot?iefix’) format(‘eot’), url(‘tipografia/Sircuito-Regular-Medium.woff’) format(‘woff’), url(‘tipografia/Sircuito-Regular-Medium.ttf’) format(‘truetype’), url(‘tipografia/Sircuito-Regular-Medium.svg#webfont’) format(‘svg’); -webkit-font-smoothing:antialiased; }

  У першому з двох визначень у попередньому прикладі завантажується буква документа Sircuito-Expanded-Light.eot який знаходиться в папці EOT всередині основної (кореневої) папки та призначений як прізвище CircuitExpandedLight. До речі, вам подобається цей шрифт? Це безкоштовно, ви можете завантажте безкоштовно шрифт Sircuito, який я створив для зображення GranaBot.

  Як видно з прикладу, властивість url, яка відповідає Уніфікований покажчик інформаційного ресурсу, дозволяє вказати місце розташування документа зі шрифтом, який завантажується. Слеш використовується для відокремлення назви різних папок від шляху до шрифту, починаючи з папки, що містить документ, з якого здійснюється виклик, або з кореня, якщо URL Почніть з планки.

  У другому прикладі використовується кілька альтернативних документів, так що те саме визначення працює для кількох браузерів (кожен із яких завантажуватиме тип, який він здатний інтерпретувати)

  Останній рядок визначення містить властивість font-smoothing щоб пом'якшити букву (застосувати а антиалізинг). Оскільки це не стандартна властивість, використовується префікс -webkit.

• font-size служить для позначення розміру літери, як у font-size:12px;

• font-weight Встановлює товщину шрифту. Воно може бути виражене числовим значенням, зазвичай кратним 100 між 100 і 900, відповідно до звичайних типографських ваг, або частіше за допомогою назви: normal для товщини основи, bold для сміливих, bolder для версії, яка зазвичай називається чорною, light для штрафу (зазвичай називають легким) і lighter для найтонших (іноді їх називають тонкими).

  Числове значення звичайної версії шрифту становить 400 (без одиниць) і 700 для жирної версії.

  За замовчуванням, якщо не вказано інше значення, зовнішній вигляд шрифту є таким, якому відповідає normal або 400, тому, якщо він не був змінений у загальному елементі або в контейнері, від якого він успадковується, вказувати не потрібно font-weight з мужністю normal.

• font-stretch Він використовується для позначення ширини літери, якщо він доступний у відповідному сімействі. Можливі значення, які властивість може прийняти, у порядку від найвужчого до найширшого: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. За тим самим критерієм, що використовувався в попередній властивості, ширина за замовчуванням становить normal і немає необхідності прямо вказувати це, якщо воно не було змінено у вищому ієрархічному порядку, ніж визначений.

• з font-style Ви можете вказати, чи написаний текст похилою або похилою літерою, що впливає на його зовнішній вигляд, або скорописом, що виражає особливе значення (наприклад, іноземні слова), чи круглою літерою, тобто ні попередніми, ні або нормальний. значення oblique виконує першу функцію — зовнішність і вартість italic другий. Той факт, що зовнішній вигляд обох часто схожий або навіть однаковий, означає, що використання (значення) іноді плутається, тому варто звернути увагу. Як і з іншими властивостями, normal служить для деактивації попередніх значень.

• text-decoration служить для підкреслення (зі значенням underline), надкреслення (зі значенням overline), закреслити (зі значенням line-through) або спалах (зі значенням blink) текст, на який впливає ця властивість.

• Щоб завершити серію аспектів типографіки, хоча для нашої програми це не дуже актуально, font-variant, дозволяє застосувати маленькі ковпачки (малі великі літери) до текстів.

Текст

• text-align повідомляє браузеру, як має бути вирівняний блок тексту. Можливі вирівнювання ліворуч (що враховується за замовчуванням) від коду left, центр із значенням center, право використання right і виправдано з обох кінців с justify.

• line-height встановлює відстань між рядками тексту. У цьому випадку, якщо використовуються відсотки, значення 100% відповідає висоті тексту, а не розміру контейнера. Найбільш використовувана міра відносно тексту відповідає 120%. Лінія 100% означає, що нижня частина одного рядка торкається верхньої частини наступного. Незважаючи на те, що типографічний дизайн зазвичай передбачає певний простір, зазвичай залишають трохи більше поля між рядками.

  Щоб виразити відстань між рядками, також можна вказати коефіцієнт (безодиничне значення), за допомогою якого обчислюється висота рядка на основі висоти текстового поля.

• letter-spacing це значення інтервалу між літерами слів, яке в типографіці називається кернінг o відстеження.

• word-spacing являє собою міру пробілів між словами.

• white-space встановлює поведінку пробілів у тексті. Коли використовується значення normal, який береться за замовчуванням, об’єднує кілька пробілів у коді HTML в одній із презентацій на веб-сторінці (відображеній у браузері) і використовує пробіли як посилання, щоб розірвати рядок, якщо в блоці немає місця.

  Значення nowrap Він також об’єднує повторювані порожні простори в один, але не розділяє рядки тексту в порожніх просторах, навіть якщо рядок не поміщається в контейнері, переповнюючи простір, якщо необхідно, і записуючи за його межами, якщо необхідно. Щоб чітко розділити лінії, можна скористатися міткою <br> de HTML.

  Використання pre Ані порожні місця не об’єднуються шляхом об’єднання в один, ані рядки не розділені за допомогою пробілів як посилання.

  pre-line з’єднайте повторювані пропуски та розірвіть лінії, якщо необхідно, використовуючи пропуски як орієнтир.

  pre-wrap зберігає повторювані пробіли та розриває рядки, якщо необхідно, використовуючи пробіли як посилання.

Колір

En CSS колір може бути виражений відповідно до Колірна модель RGB або відповідно до Колірна модель HSL і в обох випадках інформація про прозорість може бути включена, значення четвертого каналу, який зазвичай викликається альфа-канал o альфа-композиція, що дає початок моделям RGBA та HSLA.

Виражати колір у форматі RGB з використанням шістнадцяткового запису використовується синтаксис #RRGGBB, де RR – це значення червоного компонента (в принципі, з використанням двох шістнадцяткових цифр), GG – значення зеленого компонента, а BB – значення синього компонента. Як уже було сказано, якщо дві цифри кожного компонента мають однакове значення, це можна виразити як #RGB обмеження кількості кольорів, доступних для так званих веб-безпечних кольорів

На додаток до цього способу представлення кольору, найбільш класичного та використовуваного, його можна виразити як rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) щоб вказати його у форматі RGB, HSL та їх відповідні форми із зазначенням прозорості (альфа-канал)

Якщо інше не вимагається шляхом додавання суфікса одиниці вимірювання, the Модель RGB використовує десяткові значення від 0 до 255, для трьох компонентів значення альфа-компонент є коефіцієнтом (десятковий від нуля до одиниці) і першим значенням Колірна модель HSL, відтінок, це десяткове значення в діапазоні від 0 до 360 (без одиниць), що представляє кут. Значення насиченості і яскравості Модель HSL Зазвичай вони виражаються у відсотках.

Як уже було сказано, хоча його використання не дуже часте, кольори можуть бути позначені їх назвою у форматі color:black; замість color:#000000;. Перший формат є більш читабельним, але обмежений короткою таблицею значень, яку також важче змінити чисельно з програми, написаної на JavaScript.

Для нашої пропозиції щодо графічного представлення даних від датчиків, підключених до IoT, нам знадобляться лише три властивості, пов’язані з кольором. Вони слугуватимуть як для вказівки назви тексту, який зараз пояснюється, так і для вказівки назви будь-якого компонента, який його підтримує.

• color вказує на колір елемента HTML і те, що він містить (що його успадковує), якщо воно не змінено явно шляхом призначення інших кольорів окремо.

• background-color Використовується для визначення кольору фону елемента HTML. На додаток до вказівки кольору як значення RGB o HSL можна використовувати спеціальне значення transparent щоб об'єкт не мав фонового кольору і було видно те, що знаходиться за ним, тобто він не закривав елементи, на яких він намальований.

• opacity дозволяє встановити непрозорість (опосередковано прозорість) елемента та всього його вмісту (не плутати з прозорістю фону). Якщо прозорість призначається елементам, що містяться в інших, які самі є прозорими, це буде збільшено, це не працюватиме окремо. Ви не можете зробити об'єкт, що міститься в прозорому об'єкті, більш непрозорим. Значення opacity Він виражається у вигляді коефіцієнта opacity:0.5; щоб вказати 50% непрозорість.

  Старіші версії браузера Microsoft не використовували цю властивість, але вона була filter (фільтр), який, серед інших значень, може підтримувати альфа (для альфа-канал), яким можна призначити відсоток непрозорості opacity за форматом:

  CSS para dar opacidad en los antiguos navegadores web de Microsoft

  CSS

  <br /> filter:alpha(opacity=50); /* Opacidad del 50% en una versión 8.0 o anterior de Microsoft Internet Explorer */

  1	filter:alpha(opacity=50); /* Opacidad del 50% en una versión 8.0 o anterior de Microsoft Internet Explorer */

Заходи

En CSS, вимірювання елементів <div>, який ми вибрали для створення графічного контейнера, встановлюється за допомогою width (ширина) і height (альт).

між змістом <div> і по його периметру є площа заповнення, яка визначається величиною padding. Навколо периметра об’єкта розташована грань, вимірювання якої вказано властивістю border. Виділення екстер'єру об'єкта <div> з інших оточуючих об'єктів є простір, вимірювання якого визначається margin.

За нормальних умов вимірювання простору, який використовується об’єктом <div> можна обчислити як суму його ширини або висоти плюс відступ (padding) плюс рамка (border) плюс маржа (margin). Коли відповідне вимірювання встановлено, це корисний внутрішній простір об'єкта <div>, ця композиція дуже практична, але якщо те, що відомо, це загальне доступне вимірювання чи можна змінити цю поведінку, установлено за замовчуванням, щоб вимірювання загальної ширини та висоти відповідало позначенню width (ширина) і height (висота) шляхом віднімання вимірювання відступу, рамки та полів замість додавання. Щоб використовувати цей режим, призначте власність box-sizing Значення border-box (за замовчуванням content-box)

Наступна діаграма графічно показує значення, отримані в результаті width (ширина) і height (високий), якщо використовується box-sizing:border-box; (загальний) абоbox-sizing:content-box; (всередині)

Значення вимірювань виражаються в одиницях, які вже були пояснені. Коли мова йде про властивості, визначені декількома значеннями, цифри, виражені різними типами середніх, можуть бути змішаними. Крім того, є деякі спеціальні значення, які мають відношення до використання, яке ми збираємося використовувати в цій реалізації сенсорних графіків в IoT. Зокрема, ми можемо використовувати значення auto на майні margin як ресурс для центрування об’єктів за деяких обставин.

У наведеному вище прикладі для класу «small_box» визначено межу товщиною 2 пікселі, намальовану чорним штрихом (#000000) безперервний (solid). У класі “big_box” лінія, яка використовується для кордону, пунктирна (dashed) і червоний колір (#FF0000). Щоб виразити ці значення окремо, ми можемо використовувати border-width для товщини, border-style для інсульту і border-color для кольору. Ці властивості країв, у свою чергу, є складовими і утворюються верхньою, правою, нижньою та лівою частинами, що рухаються за годинниковою стрілкою, як пояснено вище.

Два класи, які були визначені, мають однакові вимірювання, але перший менший, оскільки використовується значення border-box за майно box-sizing, відступи, рамки та поля малюються всередині об’єкта, а не навколо вмісту, як за замовчуванням. У класі "big_box" воно не вказано, тому значення береться за замовчуванням content-box що спричиняє збільшення відступу, меж і полів до розміру, зазначеного width y height.

Значення поля класу в наведеному вище прикладі становить 10 пікселів зверху, справа, знизу та зліва, тому його можна виразити як одне значення margin:10px;. Дуже цікаво знати цю альтернативу, щоб зрозуміти код, розроблений третіми сторонами, хоча в цій пропозиції впровадження, щоб зробити його більш читабельним, пропонується вказувати повторювані значення.

Три класи в попередньому прикладі дають той самий результат, визначення так званого «лаконічного» є більш компактним, а не так званого «балакучого», яке, більше ніж для того, щоб додати чіткості читання, є звичайною формою використовується для зміни деяких часткових, конкретних аспектів властивості, повторно використовуючи інші значення шляхом успадкування (вони надаються контейнером або надаються одним із класів, призначених елементу). Якби навантаження на сервер через додатковий текст такого способу визначення властивостей та інші обставини, які, щоб зробити код більш читабельним, наприклад коментарі, збільшили розмір і, отже, трафік, були б актуальними, можна було б обробити його (наприклад, наприклад) з PHP як частину стратегії створення коду з цієї мови.

Розміри коробкової моделі в основному впливають на елементи <div> але можна змусити цю поведінку інших елементів за допомогою властивості display і значення block. Щоб зробити елемент плавним, як текст у рядку, використовуйте display:inline; обидві моделі поведінки, вимірювання та потік, можна комбінувати display:inline-block;

Значення none на майні display, використовується як display:none;, також дозволяє приховувати об’єкти, що служитиме для їх «вмикання» та «вимкнення». JavaScript.

Якщо розміри елемента не вказані, він приймає будь-які розміри, необхідні для того, щоб його вміст відповідав (насправді, це робить вміст відповідним без необхідності встановлення розміру). Але якщо розміри вказані, може статися, що містяться предмети не підходять; у такому випадку розміри не дотримуються, вони збільшуються, щоб увесь вміст був видимим.

Щоб елементи, що містяться в іншому фіксованому вимірі, обрізалися, коли вони перевищують розмір, використовується властивість overflow з мужністю hidden. зі значенням scroll, об’єкти, які переповнюють контейнер, також вирізаються, як це відбувається з hidden але відображається смуга прокрутки, яку можна побачити під час її переміщення. Значення auto робить так, щоб смуга прокрутки з’являлася лише тоді, коли це необхідно, залежно від розміру вмісту.

Ви також можете встановити мінімальний розмір, щоб контейнери займали цей простір, навіть якщо вміст цього не потребує, і не обмежуючи їхні розміри для збільшення, коли цього вимагає вміст. Властивості, які відповідають за це завдання, є min-width для ачо і min-height для високого. У протилежному сенсі, max-width встановити максимальну ширину та max-height максимальна висота, яка компенсується width вже height.

Потік елементів на веб-сторінці

Прямокутники (блоки), які ми визначили елементами <div>, за умовчанням вони розміщені один під одним. Щоб змінити цю поведінку, ви можете скористатися властивістю float, вказуючи left o right як значення, так що вони перетікають зліва направо або справа наліво відповідно. Навпаки, щоб запобігти «плаванню» одного об'єкта праворуч або ліворуч від іншого, можна використовувати властивість clear зі значеннями left, right o both, які перекривають потік зліва направо, справа наліво або обидва.

На відміну від того, що відбувається в інших обставинах, вироблений потік float не змінює автоматично розміри контейнера, тому його корисно включити в його властивості overflow:auto; примусово змінювати розмір (висоту) контейнера, коли об’єкт переповнює його через його розташування float.

Інший спосіб налаштувати потік вмісту елемента - розділити його на стовпці з властивістю column-count (що на даний момент має супроводжуватися -webkit-column-count і -moz-column-count) Розмір колонок можна вказати (фактично запропонувати) за допомогою column-width (-webkit-column-width -moz-column-width) і поділ між колонками с column-gap (-webkit-column-gap -moz-column-gap)

Щоб блоки не були розділені, а їх вміст розподілявся по кількох колонках, можна використовувати display:inline-block; хоча це, звичайно, означає. залишити частину колонки невикористаною.

Позиціонування

Щоб встановити розташування елементів на веб-сторінці, CSS використовує кілька режимів позиціонування, які можуть бути різними для кожного елемента, тобто можна комбінувати різні критерії позиціонування на одному веб-сайті.

• position:static; Це позиціонування за замовчуванням (необов’язково вказувати його, якщо воно не було попередньо змінено). Цей тип позиціонування слідує «природному» потоку сторінки: один елемент за іншим, починаючи зліва, зростаючи, доки є простір, праворуч і зверху вниз. Він не використовує горизонтальні або вертикальні координати для встановлення свого місцезнаходження, він дотримується положення, яке відповідає порядку розташування об’єкта.

• position:fixed; Використовується для розміщення об’єкта у фіксованому положенні у вікні браузера (наприклад, меню). Розташування елемента вказується горизонтально за допомогою left o right визначити поділ відповідно ліворуч або праворуч і с top o bottom для поділу над або під краєм вікна браузера (вікно перегляду).

  Використовуючи цей та інші типи позиціонування, об’єкти можуть перекриватися. Першими намальовані об’єкти (визначено раніше в коді HTML) можуть бути охоплені тими, що намальовані пізніше (ті, що включені пізніше в код HTML). Щоб змінити звичайний порядок, ви можете скористатися властивістю z-index, об’єкти з найбільшою вартістю в z-index Вони охоплюють тих, хто має меншу цінність.

• position:relative; Переміщує елемент із його «нормального» положення, як зазначено у властивостях left o right горизонтально і top o bottom по вертикалі.

• position:absolute; Розміщує елемент у фіксованому положенні відносно об’єкта, який його містить. Його розташування виражається, як і в попередніх випадках, с left,right, top y bottom

  Назва цього типу позиціонування спочатку викликає плутанину, оскільки позиція встановлюється по відношенню до об’єкта, ієрархічно вищого за той, який використовує властивість, яка є спірною щодо того, чи є вона абсолютною.

  Також важливо пам'ятати, що елемент, який містить об'єкти <div> який ми використовуємо на першому ієрархічному рівні <body>, отже, якщо <div> що ти використовуєш position:absolute; не міститься в іншому, його позиціонування буде «абсолютним» щодо веб-сторінки.

Властивості для певних носіїв і характеристики (медіа-запити)

CSS дозволяє визначати в тій самій таблиці стилів різні види для різних носіїв або підтримки залежно від типу використовуваного пристрою (наприклад, екран або принтер), його розмірів, його орієнтації (вертикальна або альбомна) або його роздільної здатності. Це слугує для того, щоб мати можливість відобразити ту саму веб-сторінку найбільш відповідним для контексту способом.

Для посилання на ЗМІ використовуйте @media подібно до того, що вже було пояснено для шрифтів з @font-face, у дужках ({ y }) визначення різних елементів: мітки HTML, класи, ідентифікатори...

Типи медіа, доступні в CSS3 звук: all, посилатися на будь-які ЗМІ (все), screen для будь-якого типу екрану (старіші версії CSS Розрізняли телевізор і комп'ютерні монітори) print для виведення на принтер і speech для аудіо веб-читачів, які інтерпретують інформацію за допомогою голосових синтезаторів.

У наведеному вище прикладі елементи класу text мають чорний фон і білий текст на екрані, але друкуються з білим фоном і чорним текстом.

Умови можуть бути накладені на носії для визначення різних наборів властивостей на основі, наприклад, доступної роздільної здатності або співвідношення вікна перегляду. Ці умови та самі засоби можна скласти за допомогою логічних операцій and, not y only вимагати виконання кількох, відповідно не виконання або лише виконання.

Серед доступних умов ми вважаємо їх особливо цікавими max-width (максимальна ширина вікна), max-height (максимальна висота вікна), min-width (мінімальна ширина вікна), min-height (мінімальна висота вікна), orientation (орієнтація, яка може бути landscape, пейзаж або portrait, вертикальний), max-resolution (максимальна роздільна здатність в dpi, точок на дюйм або дюйм dpcm, пунктів на сантиметр) і min-resolution (мінімальна роздільна здатність, також у форматі dpi o dpcm).

У попередньому прикладі ми починаємо з визначення кольору фону, щоб у всіх носіях елементи класу main_block мали колір фону #CCCCCC. Якщо вікно відображається на екрані та має ширину принаймні 320 пікселів, ліве та праве поля будуть автоматичними (по центру блоку), а ширина елемента становитиме 300 пікселів. Якщо роздільна здатність екрана 640 пікселів, то ширина блоку буде 620 пікселів. Оскільки друге визначення носія не включає інформацію про поле, а пристрої, які відповідають другій умові, відповідатимуть і першому, горизонтальне поле все одно буде автоматичним.

Нарешті, у прикладі колір фону змінено так, що на роздруківці він стане білим.

Звичайний спосіб визначення стилів для різних медіа зазвичай полягає в тому, щоб почати із загальних, як правило, кольорів і шрифтів, після чого йдуть найбільш обмежені геометрії (розміри пристроїв із найменшою кількістю пікселів), як правило, для смартфонів і планшетів, де, крім того, Важливо знати, чи використовуються вони вертикально чи горизонтально orientation і, безсумнівно, також його дозвіл с min-resolution. Потім вказуються різні розміри для більших екранів, і це зазвичай закінчується друкованими та голосовими носіями, які у прикладі графіки IoT були опущені.

Використовуйте @media Встановлення таких умов, як розміри, роздільна здатність і орієнтація, дозволяє дизайнеру створити єдину веб-сторінку, яка з різними стилями виглядатиме якнайкраще для кожного пристрою. Така поведінка зазвичай називається адаптивним дизайном; адаптований дизайн у дуже вільному перекладі.

CSS для графічного контейнера SVG

Завдяки тому, що було пояснено досі, тепер можна визначити стилі, які Графічний HTML-контейнер SVG за допомогою якого можна представити стан датчиків, підключених до IoT. У наступному коді є пропозиція, що включає, прокоментовано, розподіл у стовпцях, що відповідає більшій кількості графіків, ніж ті, які використовує пропозиція серії статей, так що його можна повторно використовувати в інших випадках.

Нижче ви можете побачити, як виглядатимуть ці стилі. HTML-код із запропонованого контейнера для графіки SVG з попередньої статті.

Наступна стаття цієї серії пояснює як малювати за допомогою SVG Графіки даних про стан датчиків, підключених до Інтернету речей (IoT).