Дефинирайте с CSS външния вид на сензорната графична мрежа в IoT

В предишната статия от поредицата за как да направите графики на състоянието на сензори, свързани към интернет на нещата IoT обяснява начина използвайте уеб страница, разработена в HTML като структура за графики. Елементите на уеб страницата, които са сведени до минимум с помощта на обекти <div>, не определиха директно външния му вид, вместо това се позоваха на информация за външния вид към стилов лист CSS, което ще бъде обяснено в тази част от поредицата.

В решението, което предлагам за създаване на графики на сензори, свързани към IoT, се използва документ CSS който се зарежда от документа HTML. Ако кодът HTML ще се генерира от приложение на сървъра, например в PHP, би било много лесно да се включи като част от кода, който дефинира уеб страницата, вместо да се зарежда от нея, което може да се оптимизира малко чрез запазване на повикване. Който и вариант да бъде избран, най-удобният метод включва редактирайте кода CSS в отделен документ, за да го управлявате по-удобно и да можете да го използвате повторно. В примера, разработен в урока от тази поредица от статии, му е дадено името estilo.css.

По същия начин, Когато работите със сложни проекти, ще бъде препоръчително да използвате няколко отделни таблици със стилове в различни документи, както за да можете да използвате повторно конкретни функционалности, без да се налага да ги зареждате всеки път, така и за да редактирате кода по-лесно, като го разпространявате в различни документи според съответната логическа структура.

Стиловете CSS Те се опитват да опишат всички крайности на поведението и външния вид на уеб страница от няколко вида подходи, всички едновременно валидни, като същевременно се опитват да зачитат съвместимостта със спецификациите на предишната версия, доколкото е възможно. Това означава, че има много възможни решения, които решават едни и същи нужди. както и голям брой налични ресурси (свойства CSS). Поради дидактичния подход на статията и за да не се объркват новите потребители в CSS, само свойствата и структурите, необходими за крайната цел, който трябва да представя графично данни от сензори, свързани към Интернет на нещата. В същото време има и a малко въведение към 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); и за да дефинирате нова променлива "дебелина" (която могат да използват други свойства), вие ще напишете, например, --grosor:4px; за да можете по-късно да го наречете като margin-top:calc(var(--grosor)*4);

Зависещи от браузъра CSS свойства

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

така че кодът CSS работи с текущите функции на браузъра, но не губете съвместимост с нови функции, използва се префикс. Този префикс зависи от рендеринг двигател който използва уеб браузъра, който искате да посочите (за който стилът е дефиниран).

Префиксът -webkit Работи за браузъри, базирани на WebKit като сафари o Chrome. Префиксът -moz Използва се за браузъри, базирани на рендеринг двигател de Mozilla, в момента ГущерКато 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 за омекотяване на буквата (приложете a заглаждане). Тъй като не е стандартно свойство, префиксът се използва -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 (височина), като извадите от него измерването на подложката, границата и полето, вместо да го добавите. За да използвате този режим, задайте propiedad 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; въпреки че това със сигурност предполага. оставете част от колоната неизползвана.

Posicionamiento

За да установи местоположението на елементите на уеб страницата, CSS използва няколко режима на позициониране, които могат да бъдат различни за всеки елемент, тоест е възможно да се смесват различни критерии за позициониране на един и същи уебсайт.

• position:static; Това е позиционирането по подразбиране (не е необходимо да го посочвате, ако не е било променено преди това). Този тип позициониране следва "естествения" поток на страницата: един елемент след друг започва отляво, расте, докато има място отдясно и отгоре надолу. Той не използва хоризонтални или вертикални координати, за да установи местоположението си, той следва позицията, която съответства на реда на обекта.

• position:fixed; Използва се за поставяне на обект във фиксирана позиция в прозореца на браузъра (като меню например).Местоположението на елемента се определя хоризонтално с left o right за определяне на разделянето съответно отляво или отдясно и със top o bottom за разделяне над или под ръба на прозореца на браузъра (viewport).

  Използвайки този и други видове позициониране, обектите могат да се припокриват. Първи се изчертават обекти (дефинирани по-рано в кода 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 графики са пропуснати.

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

CSS за SVG графичен контейнер

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

По-долу можете да видите как биха изглеждали тези стилове. HTML код от предложения контейнер за SVG графики от предишната статия.

Следващата статия от тази серия обяснява как да рисувате с SVG Графики с данни за състоянието на сензори, свързани с Интернет на нещата (IoT).