Определите с помощью CSS внешний вид сети сенсорной графики в Интернете вещей.

В предыдущей статье из серии о как построить графики состояний датчиков, подключенных к Интернету вещей 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 Вы можете выбрать форматы с синтаксисом, аналогичным синтаксису функций. Например, чтобы выразить цвет как три значения его красного, зеленого и синего компонентов (т. Модель 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); и чтобы определить новую переменную «толщина» (которую могут использовать другие свойства), вы должны написать, например, --grosor:4px; чтобы иметь возможность позже ссылаться на него как на margin-top:calc(var(--grosor)*4);

Свойства CSS, зависящие от браузера

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

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

Префикс -webkit Он работает для браузеров на основе WebKit в качестве Safari o Chrome. Префикс -moz Он используется для браузеров на основе движок рендеринга de Mozilla, в настоящее время ГекконКак Firefox и его производные. Ссылаясь на EdgeHTML, el движок рендеринга браузер Edge от 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 con 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 внутри основной (корневой) папки и назначается фамилией ЦепьРасширенныйСвет. Кстати, вам нравится этот шрифт? Это бесплатно, вы можете скачать бесплатно шрифт 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 и соответствующие им формы с указанием прозрачности (альфа-канал)

Если иное не требуется путем добавления суффикса единицы измерения, Модель RGB использует десятичные значения от 0 до 255, для трех компонентов значение альфа-компонент — коэффициент (десятичный от нуля до единицы) и первое значение Цветовая модель HSL, оттенок, представляет собой десятичное значение в диапазоне от 0 до 360 (без единиц измерения), представляющее угол. Значения насыщенности и яркости модель HSL Обычно они выражаются в процентах.

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

Для нашего предложения по графическому представлению данных от датчиков, подключенных к Интернету вещей, нам понадобятся всего три свойства, связанные с цветом. Они будут служить как для указания названия текста, который сейчас поясняется, так и для указания имени любого компонента, который его поддерживает.

• 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 y a 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 для аудио-веб-ридеров, которые интерпретируют информацию с помощью голосовых синтезаторов.

В приведенном выше примере элементы текстового класса имеют черный фон и белый текст на экране, но печатаются с белым фоном и черным текстом.

К медиафайлам можно наложить условия для определения различных наборов свойств на основе, например, доступного разрешения или соотношения области просмотра. Эти условия и сами средства можно составить с помощью логических операций. 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 опущены.

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

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

Благодаря тому, что было объяснено до сих пор, теперь можно определить стили, которые HTML-контейнер SVG-графики с помощью которого можно отобразить состояние датчиков, подключенных к Интернету вещей. В следующем коде представлено предложение, включающее, закомментированное, распределение по столбцам, соответствующее большему количеству графиков, чем те, которые используются в предложении серии статей, чтобы его можно было повторно использовать в других случаях.

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

В следующей статье этой серии объясняется как рисовать в SVG Графики данных состояния датчиков, подключенных к Интернету вещей (IoT).