Определите с помощью CSS внешний вид сети сенсорной графики в Интернете вещей.
В предыдущей статье из серии о как построить графики состояний датчиков, подключенных к Интернету вещей IoT объясняет путь использовать веб-страницу, разработанную в HTML, в качестве структуры для графики. Элементы веб-страницы, которые были сведены к минимуму с помощью объектов. <div>
, не определяли напрямую его внешний вид, вместо этого они ссылались на информация о внешнем виде в таблицу стилей CSS, и именно это будет объяснено в этой части серии.
В решении, которое я предлагаю сделать графики датчиков, подключенных к IoT, используется документ CSS который загружается из документа HTML. Если код HTML будет сгенерировано из приложения на сервере, например в PHP, было бы очень просто включить его как часть кода, определяющего веб-страницу, вместо того, чтобы загружать ее с нее, что можно было бы немного оптимизировать, сохранив вызов. Какой бы вариант ни был выбран, наиболее удобный метод включает в себя редактировать код CSS в отдельном документе, чтобы было удобнее управлять им и иметь возможность его повторно использовать.. В примере, разработанном в руководстве этой серии статей, ему присвоено имя estilo.css
.
Таким же образом При работе со сложными проектами будет целесообразно использовать несколько отдельных таблиц стилей в разных документах., чтобы иметь возможность повторно использовать определенные функции без необходимости каждый раз загружать их все, а также упростить редактирование кода, распределив его по разным документам в соответствии с соответствующей логической структурой.
Стили CSS Они пытаются описать все крайности поведения и внешнего вида веб-страницы с помощью нескольких типов подходов, одновременно действующих, стараясь при этом максимально соблюдать совместимость со спецификациями предыдущих версий. Это означает, что существует множество возможных решений, удовлетворяющих одни и те же потребности. а также большое количество доступных ресурсов (свойств CSS). Ввиду дидактического подхода статьи и чтобы не запутать новых пользователей в CSS, только свойства и структуры, необходимые для достижения конечной цели, который предназначен для графического представления данных от датчиков, подключенных к Интернету вещей. В то же время существует также небольшое введение в CSS, каскадные таблицы стилей.
Форматирование свойств CSS
El основной формат Он состоит из имени свойства, знака двоеточия, значения свойства и знака точки с запятой. nombre:valor;
CSS позволяет использовать разные единицы измерения в одном документе включая те, которые связаны со структурой (измерение того, что содержит элемент) в процентах относительно устройства, на котором они представлены, например, пикселя, или в абсолютном выражении, например, в сантиметрах. Единицы выражаются после значения в соответствии со следующей кодировкой сокращений.
Код | Блок |
% | процент контейнера |
ch | относительно ширины числа ноль |
cm | сантиметров |
em | относительно базового типа контейнера |
ex | относительно высоты буквы х |
in | pulgadas |
mm | мм |
pc | пикас (типографское измерение) |
pt | точки (типографские) |
px | пикселей |
рем | относительно базового типа документа |
vh | относительно 1% высоты глаз (экран мобильного телефона) |
Vmax | относительно 1% наибольшего размера изображения (экран мобильного телефона) |
vмин | относительно 1% наименьшего размера изображения (экран мобильного телефона) |
vw | относительно 1% ширины просмотра (экран мобильного телефона) |
Для приложения, которое мы собираемся делать, важно учитывать как минимум три единицы стиля. % для проведения измерений относительно размера контейнера предмета, пиксель для измерений в соответствии с разрешением экрана и миллиметры (фактически любое абсолютное измерение) для распечатки отчетов.
Есть некоторые сложные свойстваили составные, которые зависят от нескольких значений (например, цвета, размера, стиля...), для обозначения значения в CSS есть две возможности: записать в соответствующем порядке все значения, разделенные пробелами, или использовать сумму простых свойств, эквивалентную комплексным. Например, все четыре поля объекта могут быть указаны в одном свойстве. margin
или может быть установлено с помощью свойств margin-top
, margin-right
, margin-bottom
y margin-left
. Кстати, именно в этом порядке (по часовой стрелке) следуют описания значений, которые «окружают» такой элемент, как внутреннее (отступы) или внешнее поле, граница…
Благодаря тому, что было объяснено до сих пор, мы теперь можем увидеть некоторые примеры свойств.
1 2 3 4 | margin:10px 20px 0 10px; width:500px; height:100%; color:#FF0099; |
В приведенном выше примере Цвет определяется с помощью кода из 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) или все («универсальный селектор»), представленные звездочкой (*
). В следующем примере показан селектор каждого типа:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | * /* El asterisco es el selector universal */ { margin:2px 6px 4px 20px; } div /* div es una etiqueta HTML */ { width:500px; height:200px; } .grafico /* «grafico» es el nombre de una clase que se usará en HTML con class=”grafico” */ { color:#A0B0C0; } #superior /* «superior» es un identificador que se usará en HTML con id=”superior” */ { width:100%; color:#CCCCCC; } |
Этикетки HTML выражаются в определении стиля вместе с их именем, классы отмечаются точкой перед именем (.
) и знак фунта (#
) для идентификаторов.
Часть великой державы CSS проживает в возможность группировки селекторов при определении их свойств. Существует несколько способов группировки селекторов. Группируя их, разделяя их запятыми, выражается, что каждый из приведенных селекторов обладает этими свойствами.
1 2 3 4 5 6 7 8 9 10 11 | .consumo, .humedad, .temperatura { color:#FF00AA; width:100%; height:100%; } .temperatura { height:50%; } |
В предыдущем примере показано, что классы потребления, влажности и температуры имеют одинаковый цвет, ширину и высоту. В этом коде также представлена новая концепция: свойства могут быть переопределены, и в этом случае преобладают те, которые были описаны последними.. Таким образом, элементы температурного класса в конечном итоге будут иметь высоту 50% от объекта, который их содержит.
Если сгруппированные селекторы не разделены запятыми, условие, налагаемое на свойства, является накопительным., то есть элемент должен удовлетворять всем селекторам, чтобы он приобрел внешний вид или поведение, которые они определяют. Если селекторы ссылаются на теги HTML Порядок их появления должен быть нисходящим по уровню включения: сначала самый высокий иерархический уровень и последним самый низкий.
1 2 3 4 5 6 7 8 9 10 11 | div.temperatura { color:#FF00AA; width:100%; height:100%; } .temperatura .consumo { height:50%; } |
В предыдущем примере элементы определены 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 Пробелы имеют особое значение в качестве разделителя; когда название семейства шрифтов состоит из нескольких слов, разделенных пробелами, во избежание путаницы оно пишется в кавычках.
1font-family: DejaVu, Helvetica, Arial, “a palo seco”, sans-serif;Веб-браузеры способны использовать как локальные шрифты (установленные в системе, в которой они работают), так и другие, специально загруженные, даже перекрывающие шрифты, установленные локально. Чтобы загрузить шрифт, используйте
@font-face
с указанием его названия, места загрузки его определения и, если применимо, описания его формата.12345678910111213141516@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
yultra-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
по формату:1filter: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
как ресурс для центрирования объектов в некоторых обстоятельствах.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .caja_chica { box-sizing:border-box; width:400px; height:100px; padding:5px 10px 15px 20px; border:2px solid #000000; margin:10px 10px 10px 10px; } .caja_grande { width:400px; height:100px; padding:5px 10px 15px 20px; border:2px dashed #FF0000; margin:10px 10px 10px 10px; } |
В приведенном выше примере для класса 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;
. Очень интересно узнать об этой альтернативе, чтобы понять код, разработанный третьими лицами, хотя в этом предложении по реализации, чтобы сделать его более читабельным, предлагается указывать повторяющиеся значения.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | .laconica /* Clase lacónica */ { background-color:#00F; /* Equivale a background-color:#0000FF; */ padding:10px 5px; /* Equivale a padding:10px 5px 10px 5px; */ margin:1%; /* Equivale a margin:1% 1%; que equivale a margin:1% 1% 1% 1%; */ border:1px solid #000; /* Lo anterior puede expresarse de forma menos compacta como: border-width:1px; border-style:solid; border-color:#000; */ } .explicita { background-color:#0000FF; padding:10px 5px 10px 5px; margin:1% 1% 1% 1%; border-width:1px 1px 1px 1px; border-style:solid solid solid solid; border-color:#000000 #000000 #000000 #000000; } .locuaz { /* Color de fondo */ background-color:rgb(0,0,255); /* Relleno, dimensiones */ padding-top:10px; padding-right:5px; padding-bottom:10px; padding-left:5px; /* Margen, dimensiones */ margin-top:1%; margin-right:1%; margin-bottom:1%; margin-left:1%; /* Borde, grosor */ border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; /* Borde, estilo */ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; /* Borde, color */ border-top-color:#000000; border-right-color:#000000; border-bottom-color:#000000; border-left-color:#000000; } |
Три класса в предыдущем примере дают один и тот же результат: определение так называемого «лаконичного» является более компактным, а определение так называемого «словарного», которое обычно не просто добавляет ясности чтению, а является формой. используется для изменения некоторого частичного, конкретного аспекта свойства, повторно используя другие значения путем наследования (они предоставляются контейнером или одним из классов, назначенных элементу). Если бы нагрузка, налагаемая на сервер дополнительным текстом такого способа определения свойств и другими обстоятельствами, которые делают код более читабельным, например, комментариями, увеличением размера и, следовательно, трафика, была бы актуальной, можно было бы обработать его (например например) из 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
oright
для определения разделения слева или справа соответственно и сtop
obottom
для разделения выше или ниже края окна браузера (окна просмотра).Используя этот и другие типы позиционирования, объекты могут перекрываться. Объекты, нарисованные первыми (определенные ранее в коде) HTML) могут быть покрыты нарисованными позже (включенными позже в код HTML). Чтобы изменить обычный порядок, вы можете использовать свойство
z-index
, объекты с наибольшим значением вz-index
Они охватывают тех, у кого меньшая ценность. -
position:relative;
Перемещает элемент из его «нормального» положения, указанного в свойствах.left
oright
горизонтально иtop
obottom
вертикально. -
position:absolute;
Размещает элемент в фиксированном положении относительно объекта, который его содержит. Его местоположение выражается, как и в предыдущих случаях, с помощьюleft
,right
,top
ybottom
Название этого типа позиционирования поначалу сбивает с толку, поскольку позиция устанавливается по отношению к объекту, иерархически вышестоящему, чем тот, который использует свойство, абсолютность которого является спорным.
Также важно помнить, что элемент, содержащий объекты
<div>
что мы используем на первом иерархическом уровне, это<body>
, следовательно, если<div>
что ты используешьposition:absolute;
не содержится в другом, его расположение будет «абсолютным» по отношению к веб-странице.
Свойства для конкретных медиа и характеристик (медиа-запросы)
CSS позволяет вам определить в одной и той же таблице стилей различный внешний вид для различных носителей или опор в зависимости от типа используемого устройства (например, экрана или принтера), его размеров, ориентации (вертикальной или альбомной) или разрешения. Это позволяет отображать одну и ту же веб-страницу наиболее подходящим для контекста способом.
Для ссылки на средства массовой информации используйте @media
аналогично тому, что уже объяснялось для шрифтов с @font-face
, заключая в фигурные скобки ({
y }
) определения различных элементов: метки HTML, классы, идентификаторы...
Виды носителей, доступные в CSS3 являются: all
, для обозначения любого носителя (всех), screen
для любого типа экрана (старые версии CSS Они различали телевизор и компьютерные мониторы) print
для вывода на принтер и speech
для аудио-веб-ридеров, которые интерпретируют информацию с помощью голосовых синтезаторов.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | @media screen { .texto { color:#FFFFFF; background-color:#000000; } } @media print { .texto { color:#000000; background-color:#FFFFFF; } } |
В приведенном выше примере элементы текстового класса имеют черный фон и белый текст на экране, но печатаются с белым фоном и черным текстом.
К медиафайлам можно наложить условия для определения различных наборов свойств на основе, например, доступного разрешения или соотношения области просмотра. Эти условия и сами средства можно составить с помощью логических операций. and
, not
y only
требовать от вас выполнения нескольких, невыполнения или только тогда, когда вы выполняете соответственно.
Среди доступных условий мы находим их особенно интересными max-width
(максимальная ширина окна), max-height
(максимальная высота окна), min-width
(минимальная ширина окна), min-height
(минимальная высота окна), orientation
(ориентация, которая может быть landscape
, пейзаж или portrait
, вертикальный), max-resolution
(максимальное разрешение в dpi
, точек на дюйм или в dpcm
, точек на сантиметр) и min-resolution
(минимальное разрешение, также в dpi
o dpcm
).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | @media all { .bloque_principal { background-color:#CCCCCC; } } @media screen and (min-width:320px) { .bloque_principal { width:300px; margin-left:auto; margin-rigth:auto; } } @media screen and (min-width:640px) { .bloque_principal { width:620px; } } @media print { .bloque_principal { background-color:#FFFFFF; } } |
В предыдущем примере мы начинаем с определения цвета фона, чтобы на всех носителях элементы класса main_block имели цвет фона #CCCCCC. При отображении на экране и ширине окна не менее 320 пикселей левое и правое поля будут автоматическими (центрировать блок), а ширина элемента составит 300 пикселей. Если разрешение экрана 640 пикселей, ширина блока будет 620 пикселей. Поскольку второе определение носителя не включает информацию о полях, а устройства, соответствующие второму условию, также будут соответствовать первому, горизонтальное поле по-прежнему будет автоматическим.
Наконец, в примере цвет фона изменен так, что на распечатке он становится белым.
Обычный способ определения стилей для различных носителей обычно начинается с общих, обычно цветов и шрифтов, за которыми следуют наиболее строгие геометрические параметры (размеры устройств с наименьшим количеством пикселей), обычно для смартфонов и планшетов, где, кроме того, Будет важно знать, используются ли они вертикально или горизонтально с orientation
и, конечно, также его разрешение с min-resolution
. Затем указываются разные размеры для больших экранов, и обычно дело заканчивается печатью и голосовыми носителями, которые в примере с графикой IoT опущены.
Utilizar @media
Наложение таких условий, как размеры, разрешение и ориентация, позволяет дизайнеру создать единую веб-страницу, которая с разными стилями будет выглядеть наиболее подходящей для каждого устройства. Такое поведение обычно называют адаптивным дизайном; адаптируемый дизайн, в очень вольном переводе.
CSS для графического контейнера SVG
Благодаря тому, что было объяснено до сих пор, теперь можно определить стили, которые HTML-контейнер SVG-графики с помощью которого можно отобразить состояние датчиков, подключенных к Интернету вещей. В следующем коде представлено предложение, включающее, закомментированное, распределение по столбцам, соответствующее большему количеству графиков, чем те, которые используются в предложении серии статей, чтобы его можно было повторно использовать в других случаях.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 | @font-face /* Descripción del tipo de letra ancho */ { font-family:“SircuitoExpandedLight”;/* Nombre de la tipografía */ /* Documentos con la tipografía en los formatos disponibles */ src: url(‘tipos/Sircuito-Expanded-Light.eot’); src: url(‘tipos/Sircuito-Expanded-Light.eot?iefix’) format(‘eot’), url(‘tipos/Sircuito-Expanded-Light.woff’) format(‘woff’), url(‘tipos/Sircuito-Expanded-Light.ttf’) format(‘truetype’), url(‘tipos/Sircuito-Expanded-Light.svg#webfont’) format(‘svg’); /* Forzar alisado de la tipografía (Normalmente por defecto) */ -webkit-font-smoothing:antialiased; } @font-face /* Descripción del tipo de letra normal */ { font-family:“SircuitoRegularLight”; /* Nombre de la tipografía */ /* Documentos con la tipografía en los formatos disponibles */ src: url(‘tipos/Sircuito-Regular-Light.eot’); src: url(‘tipos/Sircuito-Regular-Light.eot?iefix’) format(‘eot’), url(‘tipos/Sircuito-Regular-Light.woff’) format(‘woff’), url(‘tipos/Sircuito-Regular-Light.ttf’) format(‘truetype’), url(‘tipos/Sircuito-Regular-Light.svg#webfont’) format(‘svg’); /* Forzar alisado de la tipografía (Normalmente por defecto) */ -webkit-font-smoothing:antialiased; } @font-face /* Descripción del tipo de letra comprimido */ { font-family:“SircuitoCondensedLight”; /* Nombre de la tipografía */ /* Documentos con la tipografía en los formatos disponibles */ src: url(‘tipos/Sircuito-Condensed-Light.eot’); src: url(‘tipos/Sircuito-Condensed-Light.eot?iefix’) format(‘eot’), url(‘tipos/Sircuito-Condensed-Light.woff’) format(‘woff’), url(‘tipos/Sircuito-Condensed-Light.ttf’) format(‘truetype’), url(‘tipos/Sircuito-Condensed-Light.svg#webfont’) format(‘svg’); /* Forzar alisado de la tipografía (Normalmente por defecto) */ -webkit-font-smoothing:antialiased; } @font-face /* Descripción del tipo de letra normal de grosor normal */ { font-family:“SircuitoRegularMedium”; /* Nombre de la tipografía */ /* Documentos con la tipografía en los formatos disponibles */ src: url(‘tipos/Sircuito-Regular-Medium.eot’); src: url(‘tipos/Sircuito-Regular-Medium.eot?iefix’) format(‘eot’), url(‘tipos/Sircuito-Regular-Medium.woff’) format(‘woff’), url(‘tipos/Sircuito-Regular-Medium.ttf’) format(‘truetype’), url(‘tipos/Sircuito-Regular-Medium.svg#webfont’) format(‘svg’); /* Forzar alisado de la tipografía (Normalmente por defecto) */ -webkit-font-smoothing:antialiased; } @media all { body { font-family:“SircuitoCondensedLight”; margin:0px; column-count:1; -webkit-column-count:1; /* Viejos Chrome, Opera y Safari */ -moz-column-count:1; /* Viejos Firefox */ column-gap:8px; -webkit-column-gap:8px; -moz-column-gap:8px; background-color:#FFFFFF; } .bloque_sensor, .bloque_titulo, .bloque_descripcion, .bloque_fecha, .bloque_grafico { display:inline-block; box-sizing:border-box; width:100%; color:#205587; } .bloque_sensor { min-width:320px; height:100%; background-color:#EDEDED; } .bloque_titulo { padding:16px 16px 0px 20px; font-size:25px; } .bloque_descripcion { padding:2px 16px 0px 20px; font-size:15px; } .bloque_fecha { padding:2px 16px 8px 20px; font-size:17px; } .bloque_grafico { height:200px; padding:4px 20px 20px 20px; } .grafico { background-color:#A8C3EA; } } @media (min-width:360px) { body { margin:8px 8px 0px 8px; } .bloque_sensor { margin:0px 0px 8px 0px; background-color:#E9E9E9; } } @media (min-width:460px) { body { font-family:“SircuitoRegularLight”; } } @media (min-width:530px) { body { font-family:“SircuitoExpandedLight”; } } @media (min-width:690px) { body { font-family:“SircuitoCondensedLight”; column-count:2; -webkit-column-count:2; /* Viejos Chrome, Opera y Safari */ -moz-column-count:2; /* Viejos Firefox */ } } @media (min-width:870px) { body { font-family:“SircuitoRegularLight”; } } @media (min-width:1010px) { body { font-family:“SircuitoExpandedLight”; } } /* @media (min-width:1020px) { body { font-family:”SircuitoCondensedLight”; column-count:3; -webkit-column-count:3; -moz-column-count:3; } } @media (min-width:1280px) { body { font-family:”SircuitoRegularLight”; } } @media (min-width:1570px) { body { font-family:”SircuitoExpandedLight”; } } */ @media (min-width:1610px) { body { font-family:“SircuitoCondensedLight”; column-count:4; -webkit-column-count:4; /* Viejos Chrome, Opera y Safari */ -moz-column-count:4; /* Viejos Firefox */ } } @media (min-width:1710px) { body { font-family:“SircuitoRegularLight”; } } @media (min-width:2010px) { body { font-family:“SircuitoExpandedLight”; } } /* @media (min-width:2200px) { body { font-family:”SircuitoRegularLight”; column-count:5; -webkit-column-count:5; -moz-column-count:5; } } @media (min-width:2520px) { body { font-family:”SircuitoExpandedLight”; } } */ |
Ниже вы можете увидеть, как будут выглядеть эти стили. HTML-код из предлагаемого контейнера для графики SVG. из предыдущей статьи.
В следующей статье этой серии объясняется как рисовать в SVG Графики данных состояния датчиков, подключенных к Интернету вещей (IoT).
Оставить комментарий