Definujte pomocou CSS vzhľad webovej senzorovej grafiky v IoT

V predchádzajúcom článku zo série o ako vytvoriť stavové grafy senzorov pripojených k internetu vecí IoT vysvetľuje cestu použiť webovú stránku vyvinutú v HTML ako štruktúru pre grafiku. Prvky webovej stránky, ktoré boli pomocou objektov zredukované na minimum <div>, priamo nedefinovali jeho vzhľad, namiesto toho sa odvolávali na informácie o vzhľade do šablóny štýlov CSS, čo bude vysvetlené v tejto časti seriálu.

V riešení, ktoré navrhujem urobiť grafy senzorov pripojených k IoT, je použitý dokument CSS ktorý sa načíta z dokumentu HTML. Ak kód HTML budú generované z aplikácie na serveri, napríklad v PHP, bolo by veľmi jednoduché zahrnúť ho ako súčasť kódu, ktorý definuje webovú stránku, namiesto toho, aby sa z nej načítala, čo by sa dalo trochu optimalizovať uložením hovoru. Bez ohľadu na to, ktorá možnosť je zvolená, zahŕňa najpohodlnejšiu metódu upraviť kód CSS v samostatnom dokumente, aby ste ho mohli pohodlnejšie spravovať a mohli ho znova použiť. V príklade vyvinutom v návode k tejto sérii článkov dostal názov estilo.css.

Rovnakym sposobom, Pri riešení zložitých projektov bude vhodné použiť niekoľko samostatných štýlov v rôznych dokumentoch, aby bolo možné opätovne použiť špecifické funkcie bez toho, aby ste ich museli zakaždým načítať, a aby sa kód dal ľahšie upravovať jeho distribúciou do rôznych dokumentov podľa zodpovedajúcej logickej štruktúry.

Štýly CSS Snažia sa popísať všetky extrémy správania a vzhľadu webovej stránky z viacerých typov prístupov, všetky súčasne platné, pričom sa snažia v maximálnej možnej miere rešpektovať kompatibilitu so špecifikáciami predchádzajúcej verzie. To znamená, že existuje veľa možných riešení, ktoré riešia rovnaké potreby. ako aj vysoký počet dostupných zdrojov (vlastností CSS). Vzhľadom na didaktický prístup článku a aby nedošlo k zmätku nových používateľov v CSS, len vlastnosti a štruktúry potrebné pre konečný cieľ, ktorý má graficky znázorňovať dáta zo senzorov pripojených k internetu vecí. Zároveň existuje aj a malý úvod do CSS, kaskádové štýly.

Formátovanie vlastností CSS

El základný formát Pozostáva z názvu vlastnosti, dvojbodky, hodnoty vlastnosti a bodkočiarky. nombre:valor;

CSS umožňuje použiť rôzne merné jednotky v tom istom dokumente vrátane tých, ktoré súvisia so štruktúrou (meranie toho, čo prvok obsahuje) ako percentá, relatívne k zariadeniu, na ktorom sú znázornené, napríklad pixel, alebo absolútne, napríklad centimetre. Jednotky sú vyjadrené za hodnotou podľa nasledujúceho kódovania skratkou.

Pre aplikáciu, ktorú budeme robiť, je dôležité zvážiť aspoň tri slohové jednotky. Percento na meranie vo vzťahu k veľkosti obalu položky, pixel na meranie podľa rozlíšenia obrazovky a milimetre (v skutočnosti akékoľvek absolútne meranie) na vytváranie tlačených správ.

Niektoré sú komplexné vlastnosti, alebo kompozit, ktoré závisia od niekoľkých hodnôt (ako je farba, veľkosť, štýl...), na označenie hodnoty sú v CSS dve možnosti: napísať v príslušnom poradí všetky hodnoty oddelené medzerami alebo použite súčet jednoduchých vlastností ekvivalentných komplexu. Napríklad všetky štyri okraje objektu môžu byť špecifikované v jednej vlastnosti margin alebo sa dá nastaviť pomocou vlastností margin-top, margin-right, margin-bottom y margin-left. Mimochodom, toto poradie (v smere hodinových ručičiek) je poradie, za ktorým nasledujú popisy hodnôt, ktoré „obklopujú“ prvok, ako je vnútorný (vypchávka) alebo vonkajší okraj, okraj...

S tým, čo bolo doteraz vysvetlené, môžeme teraz vidieť niekoľko príkladov vlastností

V predchádzajúcom príklade Farba je definovaná pomocou kódu 6 hexadecimálnych číslic, ktoré predstavujú v pároch hodnotu červenej, zelenej a modrej zložky. Keď sa stane, ako v príklade, že sa dve číslice rovnajú, možno to skrátiť ako #F09 (čo mimochodom zodpovedá tzv. „web safe colors“). V konečnom návrhu sa vyhnem používaniu týchto skratiek, aby som zjednotil kritériá a aby bol čitateľnejší. Skrátiť môžete aj hodnoty komplexných vlastností, ako napr margin v príklade, keď sa opakujú všetky hodnoty alebo opačné páry. V rovnakých riadkoch ukladania textu je tiež možné vynechať jednotku pri zadávaní vlastnosti, keď je hodnota nula, pretože v tomto prípade je irelevantná.

Niektoré hodnoty, okrem toho, že sa dajú vyjadriť číselne, majú aj názov čo robí kód čitateľnejším a umožňuje vám ho lepšie zapamätať. Napríklad namiesto hexadecimálneho číselného kódu cieľa, #FFFFFF (o #FFF), dá sa napísať white s rovnakým výsledkom. Týmto spôsobom čierna farba, #000000 (o #000), možno nahradiť výrazom black.

tiež tam sú hodnoty vyjadrené špeciálnym kódom, názvom. Napríklad na označenie, že bočný okraj je nastavený automaticky prehliadačom (zvyčajne bude zodpovedať funkcii stredu), použije sa špeciálna hodnota auto, ktorý nemá číselnú zhodu so žiadnou hodnotou.

na vyjadruje špeciálny spôsob použitia radu zložených (komplexných) hodnôt vlastnosti CSS Môžete si vybrať formáty so syntaxou podobnou syntaxi funkcií. Napríklad, ak chcete farbu vyjadriť ako tri hodnoty jej červenej, zelenej a modrej zložky ( RGB model) by bolo napísané color: rgb(128, 255, 64);. V rámci tohto štýlu vyjadrovania je možné použiť aj jednotky; Vo vyššie uvedenom príklade sú farebné zložky desatinnou hodnotou od 0 do 255, ale môže byť jednoduchšie vyjadriť to ako percento z celkového počtu každej farebnej zložky, v takom prípade by to mohlo byť napísané aj ako color: rgb(50%, 100%, 25%);.

Výpočet hodnôt v CSS

V najnovších verziách CSS je možné urobiť jednoduché matematické operácie na výpočet hodnôt. Ak to chcete urobiť, použite calc a operácia, ktorá sa má vykonať, je vyjadrená v zátvorkách. Môžete uviesť jednotky, zátvorky a jednoduché operátory, ako napríklad súčet (+), odčítanie (-), násobenie (*) a rozdelenie (/). Výraz by bol typu width:calc((90%-20px)/2));.

Premenné môžu byť použité v matematických operáciách v CSS odvolávajúc sa pri výpočte jednej nehnuteľnosti na hodnotu inej s var. Aby bolo možné použiť premennú bez toho, aby ste museli odkazovať na skutočnú vlastnosť štýlu, je dovolené citovať aj vlastnosť, ktorá neexistuje. CSS odporúča formát --nombre-variable (dva spojovníky pred názvom vynájdenej vlastnosti). Týmto spôsobom definovať výšku prvku ako polovicu jeho šírky výrazu CSS ako height:calc(var(width)/2); a na definovanie novej premennej "hrúbka" (ktorú by mohli použiť iné vlastnosti) by ste napísali napr. --grosor:4px; aby som na to mohol neskôr odkazovať ako margin-top:calc(var(--grosor)*4);

Vlastnosti CSS závislé od prehliadača

CSS Ide o špecifikáciu štandardizovanú konzorciom W3C (World Wide Web Consortium), ale veľa vlastnosti alebo štýly správania sa dostanú do prehliadačov skôr, ako budú súčasťou špecifikácie verzie.

takže kód CSS funguje s aktuálnymi funkciami prehliadača, ale nestrácajte kompatibilitu s novými funkciami, používa sa predpona. Táto predpona závisí od renderovací engine ktorý používa webový prehliadač, na ktorý chcete odkazovať (pre ktorý je definovaný štýl).

Predpona -webkit Funguje pre prehliadače založené na WebKit ako safari o chróm. Predpona -moz Používa sa pre prehliadače založené na renderovací engine de Mozillav súčasnosti JaštericaAko Firefox a jeho deriváty. Odkazovať na EdgeHTML, renderovací engine prehliadač hrana od spoločnosti Microsoft (predtým trojzubec), používa sa predpona -ms. Prípad prehliadača Opera je trochu zvláštny, keďže začal používať svoje vlastné renderovací engine, s odkazom na -o, ale momentálne pracuje s WebKit, ktorý je vyjadrený ako -webkit.

Ak chcete použiť vlastnosť odkazujúcu na prehliadač, napíšte jej názov s predponou a oddeľte ho pomlčkou ako v -o-border-radius:10px;, ktorý by slúžil na nastavenie zaobleného okraja (zaobleného rohu) v starších verziách prehliadača Opera.

komentáre

Na objasnenie kódu CSS Môžete použiť komentáre, vďaka ktorým bude čitateľnejší, aj keď s nevýhodou zväčšenia jeho veľkosti. Syntax komentárov v CSS Je to ako viacriadkové komentáre C + + čo už určite poznáte: začína sa v /* a končiace na */ako v C + +, môže zaberať niekoľko riadkov.

Selektory

Vymedzenie pojmu vlastnosti sú priradené objektom v dokumente HTML ich zoskupenie do selektorov a ich uzavretím do zátvoriek. Selektor môže odkazovať na prvok jazyka HTML (štítok), ako div, trieda (priradená s class en HTML) identifikátor (priradený s id en HTML) alebo všetky („univerzálny volič“) reprezentované hviezdičkou (*). Nasledujúci príklad zobrazuje selektor každého typu:

Štítky z HTML sú vyjadrené v definícii štýlu svojim názvom, triedy sú označené bodkou pred názvom (.) a znak libry (#) pre identifikátory.

Časť veľkej sily CSS sídli v možnosť zoskupenia selektorov pri definovaní ich vlastností. Existuje niekoľko spôsobov, ako zoskupiť selektory. Tým, že ich zoskupíte, oddelením čiarkami je vyjadrené, že každý z uvedených selektorov má tieto vlastnosti.

Predchádzajúci príklad naznačuje, že triedy spotreby, vlhkosti a teploty zdieľajú farbu, šírku a výšku. V tomto kóde je tiež zavedený nový koncept: vlastnosti môžu byť predefinované av takom prípade prevládajú tie najnovšie opísané. Takto by prvky teplotnej triedy mali nakoniec výšku 50 % objektu, ktorý ich obsahuje.

Ak zoskupené selektory nie sú oddelené čiarkami, podmienka kladená na vlastnosti je kumulatívna, to znamená, že prvok musí spĺňať všetky selektory, aby získal vzhľad alebo správanie, ktoré definujú. Ak selektory odkazujú na značky HTML Poradie, v ktorom sa objavujú, musí byť klesajúce na úrovni inklúzie: najprv najvyššia hierarchická úroveň a posledná najnižšia.

V predchádzajúcom príklade sú prvky definované div ktoré sú tiež teplotnej triedy a prvky, ktoré majú teplotnú triedu aj triedu spotreby (obe súčasne) ako v class="temperatura consumo". Prvky <div> Kódu HTML s class="temperatura" mali by vysoko 100%

CSS vlastnosti na definovanie textu

Je možné rozlišovať medzi tromi typmi vlastností, ktoré ovplyvňujú vzhľad textu: (1) tie, ktoré určujú typ písma, ktorým je text prezentovaný, (2) tie, ktoré určujú vzhľad literálu (obsah textu) a (3) generické, teda také, ktoré ovplyvňujú vzhľad textu aj vzhľad ostatných komponentov. Vo všeobecnosti platí, že to, čo bolo povedané na vysvetlenie vlastností poslednej skupiny, bude platiť aj pre rovnaké vlastnosti aplikované na iné prvky.

typografia (font)

• font-family označuje názov písma použitého pre prvok. Môžete napísať jeden názov alebo zoznam, v poradí podľa preferencie a oddelením názvov čiarkami, fontov, ktoré sa budú alternatívne používať, ak požadovaný neexistuje. V rovnakom duchu je možné použiť všeobecné písma s názvami monospace, serif, sans-serif, cursive, fantasy. Z týchto všeobecných písiem je najdôležitejšie (na prezentáciu dostupných údajov) prvé, ktoré, ako už názov napovedá, bude používať písmo s pevnými medzerami dostupnými v systéme a prednastavené prehliadačom. Druhy, serif, použije predvolenú dostupnú serif (dokončenie alebo grácia). Bez aukcie, ak je uvedené tretie, sans-serif. Napodobňovanie ručne kresleného písania s cursive (spôsob nazývania, ktorý by sa dal jednoznačne vylepšiť) a dekoratívna typografia systému s fantasy, posledný z piatich.

  Čo sa týka kódu CSS Medzery majú špeciálny význam ako oddeľovač, ak sa názov rodiny písiem skladá z niekoľkých slov oddelených medzerami, píše sa do úvodzoviek, aby nedošlo k zámene.

  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;

  Webové prehliadače sú schopné používať lokálne fonty (tie nainštalované v systéme, na ktorom fungujú), ako aj iné, ktoré sú špecificky načítané, dokonca sa prekrývajú s tými, ktoré sú nainštalované lokálne. Ak chcete načítať písmo, použite @font-face s uvedením jeho názvu, miesta sťahovania jeho definície a prípadne popisu jeho formátu.

  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; }

  V prvej z dvoch definícií v predchádzajúcom príklade sa načíta písmeno dokumentu Sircuito-Expanded-Light.eot ktorý sa nachádza v priečinku EOT v hlavnom (koreňovom) priečinku a je priradený ako priezvisko CircuitExpandedLight. Mimochodom, páči sa vám toto písmo? Je to zadarmo, môžete stiahnite si zadarmo písmo Sircuito, ktoré som navrhol pre obrázok GranaBot.

  Ako je možné vidieť v príklade, vlastnosť url, ktorá zodpovedá jednotný vyhľadávač zdrojov, umožňuje určiť umiestnenie dokumentu s písmom, ktoré sa sťahuje. Lomka sa používa na oddelenie názvov rôznych priečinkov od cesty k písmu, počnúc tým, ktorý obsahuje dokument, z ktorého sa volá, alebo od koreňového adresára, ak URL Začnite s barom.

  Druhý príklad používa niekoľko alternatívnych dokumentov, takže rovnaká definícia funguje pre niekoľko prehliadačov (každý z nich načíta typ, ktorý je schopný interpretovať)

  Posledný riadok definície obsahuje vlastnosť font-smoothing na zmäkčenie písmena (aplikujte a vyhladzovanie). Keďže nejde o štandardnú vlastnosť, používa sa predpona -webkit.

• font-size slúži na označenie veľkosti písmena ako v font-size:12px;

• font-weight Nastavuje hrúbku písma. Môže byť vyjadrená ako číselná hodnota, zvyčajne násobkom 100 medzi 100 a 900, podľa obvyklých typografických váh, alebo častejšie s názvom: normal pre hrúbku základne, bold pre odvážnych, bolder pre verziu, ktorá sa zvyčajne nazýva čierna, light za pokutu (bežne nazývanú svetlo) a lighter pre najtenšie (niekedy nazývané tenké).

  Číselná hodnota normálnej verzie písma je 400 (bez jednotiek) a 700 pre tučnú verziu.

  V predvolenom nastavení, ak nie je uvedená iná hodnota, zodpovedá vzhľad písma normal alebo 400, takže ak nebol zmenený vo generickom prvku alebo v kontajneri, z ktorého sa dedí, nie je potrebné uvádzať font-weight s hodnotou normal.

• font-stretch Používa sa na označenie šírky písmena, pokiaľ je k dispozícii v príslušnej skupine. Možné hodnoty, ktoré môže mať nehnuteľnosť, zoradené od najužšej po najširšiu, sú: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. Pri rovnakých kritériách, aké boli použité v predchádzajúcej vlastnosti, je predvolená šírka normal a nie je potrebné ho výslovne uvádzať, pokiaľ nebol zmenený vo vyššom hierarchickom poradí, ako je ten, ktorý je definovaný.

• s font-style Môžete označiť, či je text nakreslený šikmým alebo šikmým písmenom, čo ovplyvňuje jeho vzhľad, alebo kurzívou, ktorá vyjadruje osobitný význam (napríklad cudzie slová), alebo okrúhlym písmenom, teda ani predchádzajúcim alebo normálne. hodnota oblique plní prvú funkciu, vzhľad a hodnotu italic druhy. Skutočnosť, že vzhľad oboch je často podobný alebo dokonca rovnaký, znamená, že použitie (význam) je niekedy zamieňané, takže stojí za to venovať pozornosť. Rovnako ako u iných nehnuteľností, normal Používa sa na deaktiváciu predchádzajúcich hodnôt.

• text-decoration slúži na podčiarknutie (s hodnotou underline), prečiarknuté (s hodnotou overline), prečiarknite (s hodnotou line-through) alebo blikať (s hodnotou blink) text, ktorý táto vlastnosť ovplyvňuje.

• Na dokončenie série typografického aspektu, aj keď pre našu aplikáciu to nie je veľmi dôležité, font-variant, vám umožňuje podať žiadosť malé čiapky (malé veľké písmená) k textom.

Text

• text-align informuje prehliadač, ako má byť blok textu zarovnaný. Možné zarovnania sú vľavo (čo sa štandardne zvažuje) s kódom left, stred s hodnotou center, správne používať right a odôvodnené na oboch koncoch s justify.

• line-height nastavuje oddelenie medzi riadkami textu. V tomto prípade, ak sa použijú percentá, hodnota 100 % zodpovedá výške textu namiesto rozmeru kontajnera. Najpoužívanejšia miera v pomere k textu zodpovedá 120 %. Čiara 100 % by znamenala, že spodná časť jednej čiary sa dotýka hornej časti ďalšej. Hoci typografický dizajn zvyčajne zahŕňa určitý priestor, je bežné ponechať medzi riadkami trochu väčší priestor.

  Na vyjadrenie oddelenia medzi riadkami je tiež možné uviesť koeficient (bezjednotkovú hodnotu), pomocou ktorého sa vypočíta výška riadku na základe výšky textového poľa.

• letter-spacing je hodnota medzery medzi písmenami slov, ktorá je v typografii známa ako vyrovnanie párov o sledovanie.

• word-spacing predstavuje mieru medzier medzi slovami.

• white-space nastavuje správanie bielych miest v texte. Keď sa použije hodnota normal, ktorý sa používa štandardne, spája niekoľko prázdnych miest v kóde HTML v jednej z prezentácií na webovej stránke (zobrazenej prehliadačom) a berie biele miesta ako odkaz na prerušenie riadku, ak v bloku nie je žiadne miesto.

  Hodnota nowrap Tiež spája opakujúce sa prázdne miesta do jedného, ​​ale nerozdeľuje riadky textu v medzier, aj keď sa riadok nezmestí do kontajnera, v prípade potreby prepĺňa priestor a v prípade potreby píše mimo. Na jednoznačné rozdelenie čiar môžete použiť štítok <br> de HTML.

  použitím pre Ani prázdne miesta nie sú zjednotené ich spojením do jednej, ani riadky nie sú rozdelené pomocou medzier ako referencie.

  pre-line spojte opakované polotovary a v prípade potreby prerušte riadky pomocou polotovarov ako referenciu.

  pre-wrap zachováva opakované medzery a v prípade potreby láme riadky pomocou medzery ako referencie.

Farba

En CSS farba môže byť vyjadrená podľa RGB farebný model alebo podľa HSL farebný model a v oboch prípadoch môžu byť zahrnuté informácie o transparentnosti, hodnota štvrtého kanála, ktorý sa zvyčajne volá alfa kanál o alfa zloženie, z čoho vznikajú modely RGBA a HSLA.

Na vyjadrenie farby vo formáte RGB pri použití hexadecimálneho zápisu sa používa syntax #RRGGBB, pričom RR je hodnota červenej zložky (v princípe s použitím dvoch hexadecimálnych číslic), GG je hodnota zelenej zložky a BB je hodnota modrej zložky. Ako už bolo povedané, ak majú dve číslice každej zložky rovnakú hodnotu, môže byť vyjadrená ako #RGB obmedzenie počtu dostupných farieb na takzvané webové bezpečné

Okrem tohto spôsobu znázornenia farby, najklasickejšieho a najpoužívanejšieho, sa dá vyjadriť ako rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) uviesť ho vo formáte RGB, HSL a ich príslušné formy s označením transparentnosti (alfa kanál)

Ak sa pridaním prípony jednotky nevyžaduje inak, RGB model používa desatinné hodnoty od 0 do 255, pre tri zložky je to hodnota alfa zložka je koeficient (desatinné od nuly do jedna) a prvá hodnota HSL farebný model, odtieň, je desatinná hodnota v rozsahu od 0 do 360 (bez jednotiek) predstavujúca uhol. Hodnoty saturácie a svietivosti HSL model Zvyčajne sú vyjadrené v percentách.

Ako už bolo povedané, aj keď jeho použitie nie je príliš frekventované, farby môžu byť označené ich názvom vo formáte color:black; namiesto color:#000000;. Prvý formát je čitateľnejší, ale obmedzuje sa na stručnú tabuľku hodnôt, ktorá sa tiež ťažšie upravuje číselne z aplikácie napísanej v jazyku JavaScript.

Pre náš návrh grafického znázornenia dát zo senzorov pripojených k IoT nám budú stačiť tri vlastnosti súvisiace s farbou. Budú slúžiť na označenie názvu textu, ktorý je teraz vysvetlený, ako aj na označenie akéhokoľvek komponentu, ktorý ho podporuje.

• color označuje farbu prvku HTML a toho, čo obsahuje (ktoré to zdedí), pokiaľ nie je výslovne zmenené individuálnym priradením iných farieb.

• background-color Používa sa na definovanie farby pozadia prvku HTML. Okrem označenia farby ako hodnoty RGB o HSL môžete použiť špeciálnu hodnotu transparent aby objekt nemal žiadnu farbu pozadia a bolo možné vidieť, čo sa nachádza za ním, to znamená, že nezakrýva prvky, na ktorých je nakreslený.

• opacity umožňuje nastaviť nepriehľadnosť (nepriamo, priehľadnosť) prvku a celého jeho obsahu (nezamieňať s priehľadnosťou pozadia). Ak je priehľadnosť priradená prvkom obsiahnutým v iných, ktoré sú samy o sebe priehľadné, zvýši sa, nebude fungovať samostatne. Objekt obsiahnutý v priehľadnom objekte nemôžete urobiť viac nepriehľadným. Hodnota opacity Vyjadruje sa ako koeficient opacity:0.5; na označenie 50% nepriehľadnosti.

  Staršie verzie prehliadača od Microsoftu túto vlastnosť nepoužívali, ale mali ju filter (filter), ktorý by okrem iných hodnôt mohol podporovať alfa (pre alfa kanál), ktorému možno priradiť percento nepriehľadnosti opacity podľa formátu:

  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 */

Opatrenia

En CSS, meranie prvkov <div>, ktorý sme zvolili na zostavenie grafického kontajnera, je nastavený width (šírka) a height (alt).

medzi obsahom <div> a na jej obvode sa nachádza výplňová plocha, ktorá je určená hodnotou padding. Po obvode objektu je hrana, ktorej rozmer je špecifikovaný vlastnosťou border. Oddelenie exteriéru objektu <div> z ostatných okolitých objektov je priestor, ktorého meranie je určené margin.

Za normálnych podmienok je to meranie priestoru, ktorý objekt využíva <div> možno vypočítať ako súčet jeho šírky alebo výšky plus vypchávky (padding) plus orámovanie (border) plus marža (margin). Keď je príslušným meraním stanovený užitočný vnútorný priestor objektu <div>, toto zloženie je veľmi praktické, ale ak je známe, je celkové dostupné meranie dá sa toto správanie zmeniť, predvolene nastavené tak, aby celková šírka a výška bola taká, aká je označená width (šírka) a height (výška) tak, že sa od nej namiesto pridania odpočítajú rozmery výplne, okraja a okraja. Ak chcete použiť tento režim, priraďte vlastnosť box-sizing hodnota border-box (predvolené je content-box)

Nasledujúci diagram graficky zobrazuje hodnoty vyplývajúce z width (šírka) a height (vysoká), ak sa používa box-sizing:border-box; (celkom) respbox-sizing:content-box; (vnútri)

Hodnoty meraní sú vyjadrené v jednotkách, ktoré už boli vysvetlené. Pokiaľ ide o vlastnosti definované niekoľkými hodnotami, čísla vyjadrené rôznymi typmi priemerov sa môžu miešať. Okrem toho existujú niektoré špeciálne hodnoty, ktoré sú relevantné pre použitie, ktoré použijeme pri tejto implementácii senzorových grafov v IoT. Konkrétne môžeme použiť hodnotu auto na pozemku margin ako zdroj na vycentrovanie objektov za určitých okolností.

Vo vyššie uvedenom príklade je pre triedu „small_box“ definovaný okraj s hrúbkou 2 pixely nakreslený čiernym ťahom (#000000) nepretržité (solid). V triede „big_box“ je riadok použitý na ohraničenie prerušovaný (dashed) a červená farba (#FF0000). Na vyjadrenie týchto hodnôt oddelene môžeme použiť border-width pre hrúbku, border-style pre mŕtvicu a border-color pre farbu. Tieto vlastnosti hrán sú zase kompozitné a sú tvorené hornými, pravým, spodným a ľavým prvkom v smere hodinových ručičiek, ako je vysvetlené vyššie.

Dve triedy, ktoré boli definované, majú rovnaké rozmery, ale prvá z nich je odvtedy pri použití hodnoty menšia border-box za majetok box-sizing, výplň, orámovanie a okraj sú nakreslené vo vnútri objektu namiesto okolo obsahu, ako je to predvolené. V triede "big_box" to nie je uvedené, takže hodnota sa berie štandardne content-box čo spôsobí, že výplň, okraj a okraj sa zväčšia na veľkosť označenú symbolom width y height.

Hodnota okraja pre triedy vo vyššie uvedenom príklade je 10 pixelov hore, vpravo, dole a vľavo, takže by sa dala vyjadriť ako jedna hodnota margin:10px;. Je veľmi zaujímavé poznať túto alternatívu, aby sme porozumeli kódu vyvinutému tretími stranami, hoci v tomto návrhu implementácie, aby bola čitateľnejšia, sa odporúča uvádzať, opakovať, hodnoty.

Tri triedy v predchádzajúcom príklade poskytujú rovnaký výsledok, pričom definícia takzvaného „lakonického“ je kompaktnejšia a menej ako definícia takzvaného „loquacious“, čo viac než len na zvýšenie jasnosti čítania je normálna forma používa sa na úpravu niektorého čiastočného konkrétneho aspektu vlastnosti, pričom sa znova používajú ostatné hodnoty dedením (poskytuje ich kontajner alebo ich poskytuje jedna z tried priradených prvku). Ak by záťaž, ktorú na server kladie dodatočný text tohto spôsobu definovania vlastností a iných okolností, ktoré by boli relevantné, aby bol kód čitateľnejší, ako sú komentáre, zväčšiť veľkosť a tým aj návštevnosť, bolo by možné spracovať ho (napríklad) z PHP ako súčasť stratégie generovania kódu z tohto jazyka.

Rozmery krabicového modelu ovplyvňujú najmä prvky <div> ale je možné toto správanie vynútiť iným prvkom s vlastnosťou display a hodnota block. Ak chcete, aby prvok plynul ako text na riadku, použite display:inline; a obe správanie, merania a prietok, možno kombinovať s display:inline-block;

Hodnota none na pozemku display, používaný ako display:none;, tiež umožňuje skryť objekty, ktoré poslúžia na ich „zapnutie“ a „vypnutie“. JavaScript.

Ak rozmery prvku nie sú špecifikované, sú potrebné akékoľvek rozmery, aby sa jeho obsah zmestil (v skutočnosti sa zmestí do obsahu bez toho, aby bolo potrebné určiť rozmer). Ak sú však uvedené rozmery, môže sa stať, že obsiahnuté predmety nebudú sedieť; v takom prípade sa rozmery nerešpektujú, zväčšia sa, aby bolo možné vidieť všetok obsah.

Aby sa prvky obsiahnuté v inom z pevných meraní orezali, keď presiahnu veľkosť, použije sa vlastnosť overflow s hodnotou hidden. s hodnotou scroll, predmety, ktoré pretečú nádobu, sú tiež vyrezané, ako sa to stáva pri hidden ale zobrazí sa posuvná lišta, ktorú je možné vidieť pri pohybe. Hodnota auto spôsobí, že sa posuvná lišta zobrazí iba v prípade potreby na základe veľkosti obsahu.

Môžete tiež stanoviť minimálnu veľkosť, aby kontajnery zaberali tento priestor, aj keď to obsah nepotrebuje, a bez obmedzenia ich rozmerov, aby sa zväčšili, keď si to obsah vyžaduje. Vlastnosti, ktoré majú túto úlohu na starosti, sú min-width pre acho a min-height pre toho vysokého. V opačnom zmysle, max-width nastavte maximálnu šírku a max-height maximálna výška, ktorá sa ruší width už height.

Tok prvkov na webovej stránke

Obdĺžniky (bloky), ktoré sme definovali pomocou prvkov <div>, sú štandardne umiestnené pod sebou. Ak chcete zmeniť toto správanie, môžete použiť vlastnosť float, čo naznačuje left o right ako hodnotu, takže prúdia zľava doprava alebo sprava doľava. Naopak, aby ste zabránili tomu, aby sa jeden predmet „vznášal“ napravo alebo naľavo od druhého, môžete použiť vlastnosť clear s hodnotami left, right o both, ktoré prepíšu tok zľava doprava, sprava doľava alebo oboje.

Na rozdiel od toho, čo sa deje za iných okolností, tok produkoval float neupravuje automaticky rozmery kontajnera, preto je užitočné zahrnúť do jeho vlastností overflow:auto; vynútiť zmenu veľkosti (výšky) kontajnera, keď ho objekt pretečie kvôli jeho umiestneniu s float.

Ďalším spôsobom, ako nakonfigurovať tok obsahu prvku, je rozdeliť ho do stĺpcov s vlastnosťou column-count (ktoré by momentálne malo byť sprevádzané -webkit-column-count a -moz-column-count) Veľkosť stĺpcov môže byť označená (v skutočnosti navrhovaná) pomocou column-width (-webkit-column-width -moz-column-width) a oddelenie medzi stĺpcami s column-gap (-webkit-column-gap -moz-column-gap)

Aby bloky neboli rozdelené a ich obsah bol rozdelený do niekoľkých stĺpcov, môžete použiť display:inline-block; aj keď to určite znamená. ponechajte časť stĺpca nevyužitú.

Umiestnenie

Na určenie umiestnenia prvkov na webovej stránke používa CSS niekoľko režimov určovania polohy, ktoré sa môžu pre každý prvok líšiť, to znamená, že na tej istej webovej lokalite je možné kombinovať rôzne kritériá umiestnenia.

• position:static; Ide o predvolené umiestnenie (nie je potrebné ho uvádzať, ak nebolo predtým upravené). Tento typ umiestnenia sleduje „prirodzený“ priebeh stránky: jeden prvok za druhým začína zľava, rastie, pokiaľ je priestor, vpravo a zhora nadol. Na určenie polohy nepoužíva horizontálne ani vertikálne súradnice, riadi sa polohou, ktorá zodpovedá poradiu objektu.

• position:fixed; Používa sa na umiestnenie objektu na pevnú pozíciu v okne prehliadača (ako napríklad menu). Umiestnenie prvku je určené horizontálne pomocou left o right na určenie oddelenia vľavo alebo vpravo a s top o bottom na oddelenie nad alebo pod okrajom okna prehliadača (výrez).

  Pomocou tohto a iných typov polohovania sa môžu objekty prekrývať. Objekty nakreslené ako prvé (definované skôr v kóde HTML) môžu byť pokryté tými, ktoré sú nakreslené neskôr (tie, ktoré sú zahrnuté neskôr v kóde HTML). Ak chcete zmeniť normálne poradie, môžete použiť nehnuteľnosť z-index, objekty s najvyššou hodnotou v z-index Pokrývajú tie s menšou hodnotou.

• position:relative; Presunie prvok z jeho "normálnej" pozície, ako je to označené vlastnosťami left o right horizontálne a top o bottom vertikálne.

• position:absolute; Umiestňuje prvok do pevnej polohy vzhľadom na objekt, ktorý ho obsahuje. Jeho umiestnenie je vyjadrené, ako v predchádzajúcich prípadoch, s left,right, top y bottom

  Názov tohto typu polohovania je spočiatku mätúci, keďže pozícia je stanovená vzhľadom na objekt hierarchicky nadradený objektu, ktorý vlastnosť využíva, pričom je diskutabilné, či je absolútna.

  Je tiež dôležité mať na pamäti, že prvok, ktorý obsahuje objekty <div> ktorý používame na prvej hierarchickej úrovni je <body>, teda ak <div> čo používaš position:absolute; nie je obsiahnutý v inom, jeho umiestnenie bude „absolútne“ vzhľadom na webovú stránku.

Vlastnosti pre konkrétne médiá a charakteristiky (dotazy na médiá)

CSS umožňuje definovať v rovnakej šablóne štýlov rôzne vzhľady pre rôzne médiá alebo podpory v závislosti od typu použitého zariadenia (napríklad obrazovky alebo tlačiarne), jeho rozmerov, jeho orientácie (vertikálne alebo na šírku) alebo jeho rozlíšenia. To slúži na to, aby bolo možné zobraziť tú istú webovú stránku najvhodnejším spôsobom pre kontext.

Ak chcete odkazovať na médiá, použite @media podobným spôsobom, ako už bolo vysvetlené pre písma s @font-face, uzavreté v zátvorkách ({ y }) definície rôznych prvkov: štítky HTML, triedy, identifikátory...

Typy médií dostupné v CSS3 Sú to: all, odkazovať na akékoľvek médiá (všetky), screen pre akýkoľvek typ obrazovky (staršie verzie CSS Rozlišovali medzi televíznymi a počítačovými monitormi) print pre výstup na tlačiareň a speech pre zvukové webové čítačky, ktoré interpretujú informácie pomocou hlasových syntetizátorov.

Vo vyššie uvedenom príklade majú prvky triedy text čierne pozadie a biely text na obrazovke, ale sú vytlačené s bielym pozadím a čiernym textom.

Na médiá možno uložiť podmienky na definovanie rôznych skupín vlastností, napríklad na základe dostupného rozlíšenia alebo pomeru výrezov. Tieto podmienky a samotné prostriedky možno skladať pomocou logických operácií and, not y only požadovať, aby ste splnili viaceré, že nevyhoviete alebo až keď splníte, resp.

Medzi dostupnými podmienkami ich považujeme za obzvlášť zaujímavé max-width (maximálna šírka okna), max-height (maximálna výška okna), min-width (minimálna šírka okna), min-height (minimálna výška okna), orientation (orientácia, ktorá môže byť landscape, krajinka, príp portrait, vertikálne), max-resolution (maximálne rozlíšenie v dpi, bodov na palec alebo in dpcm, bodov na centimeter) a min-resolution (minimálne rozlíšenie, aj v dpi o dpcm).

V predchádzajúcom príklade začneme definovaním farby pozadia tak, aby na všetkých médiách mali prvky triedy main_block farbu pozadia #CCCCCC. Keď je okno zobrazené na obrazovke a má šírku aspoň 320 pixelov, ľavý a pravý okraj bude automatický (v strede bloku) a šírka prvku bude 300 pixelov. Ak je rozlíšenie obrazovky 640 pixelov, šírka bloku bude 620 pixelov. Keďže druhá definícia média nezahŕňa informácie o okrajoch a zariadenia, ktoré spĺňajú druhú podmienku, budú spĺňať aj prvú, horizontálny okraj bude stále automatický.

Nakoniec sa v príklade zmení farba pozadia tak, aby bola vo výtlačku biela.

Zvyčajným spôsobom definovania štýlov pre rôzne médiá je zvyčajne začať s bežnými, zvyčajne farbami a typmi písma, po ktorých nasledujú najobmedzujúcejšie geometrie (merania zariadení s najnižším počtom pixelov), zvyčajne pre smartfóny a tablety, kde navyše Bude dôležité vedieť, či sa používajú vertikálne alebo horizontálne orientation a určite aj jeho rozlíšenie s min-resolution. Potom sú uvedené rôzne veľkosti pre väčšie obrazovky a zvyčajne to končí pri tlači a hlasových médiách, ktoré boli v príklade grafiky IoT vynechané.

použitie @media Uloženie podmienok, ako sú rozmery, rozlíšenie a orientácia, umožňuje dizajnérovi vytvoriť jednu webovú stránku, ktorá s rôznymi štýlmi bude vyzerať najvhodnejšie pre každé zariadenie. Toto správanie sa zvyčajne nazýva responzívny dizajn; prispôsobivý dizajn, vo veľmi voľnom preklade.

CSS pre grafický kontajner SVG

S tým, čo bolo doteraz vysvetlené, je teraz možné definovať štýly, ktoré SVG grafický HTML kontajner pomocou ktorých reprezentovať stav senzorov pripojených k IoT. V nasledujúcom kóde je návrh vrátane komentovaného rozdelenia v stĺpcoch, ktoré zodpovedá väčšiemu počtu grafov, ako používa návrh série článkov, aby bolo možné ho opätovne použiť v iných prípadoch.

Nižšie môžete vidieť, ako by tieto štýly vyzerali. HTML kód z navrhovaného kontajnera pre grafiku SVG z predchádzajúceho článku.

Ďalší článok tejto série vysvetľuje ako kresliť pomocou SVG Dátové grafy stavu senzorov pripojených k internetu vecí (IoT).