Határozza meg a CSS segítségével a szenzorgrafikus web megjelenését az IoT-ben

A sorozat előző cikkében hogyan készítsünk állapotgrafikonokat a tárgyak internetéhez kapcsolódó érzékelőkről elmagyarázza az utat HTML-ben fejlesztett weboldalt használjon grafikai struktúraként. A weblapelemek, amelyeket objektumokkal minimálisra csökkentettek <div>, nem határozta meg közvetlenül a megjelenését, helyette utaltak a megjelenési információkat egy stíluslaphoz CSS, amit a sorozat ezen részében elmagyarázunk.

Az általam javasolt megoldásban az IoT-hez csatlakoztatott érzékelők grafikonjainak elkészítésére egy dokumentumot használnak CSS amely a dokumentumból van betöltve HTML. Ha a kód HTML a szerveren lévő alkalmazásból jön létre, például PHP, nagyon egyszerű lenne a weboldalt definiáló kód részeként szerepeltetni ahelyett, hogy onnan töltené be, amit egy hívás mentésével egy kicsit optimalizálni lehetne. Bármelyik opciót is választja, a legkényelmesebb módszert tartalmazza módosítsa a kódot CSS külön dokumentumban, hogy kényelmesebben kezelhessék és újra felhasználhassák. A cikksorozat oktatóanyagában kidolgozott példában a nevet kapta estilo.css.

Ugyanúgy, Komplex projektek kezelésekor ajánlatos több különálló stíluslapot használni a különböző dokumentumokban, hogy bizonyos funkciókat újra lehessen használni anélkül, hogy minden alkalommal be kellene töltenie őket, és könnyebben szerkesztheti a kódot azáltal, hogy a megfelelő logikai struktúra szerint szétosztja a különböző dokumentumokba.

A stílusok CSS Egy weboldal viselkedésének és megjelenésének minden szélsőségét többféle megközelítésből próbálják leírni, amelyek mindegyike egyszerre érvényes, miközben a lehető legnagyobb mértékben tiszteletben tartják a korábbi verzió specifikációival való kompatibilitást. Ez azt jelenti, hogy számos lehetséges megoldás létezik, amelyek ugyanazokat az igényeket oldják meg. valamint a rendelkezésre álló erőforrások (tulajdonságok) nagy száma CSS). A cikk didaktikai megközelítése miatt, és azért, hogy ne keverjük össze az új felhasználókat CSS, csak a tulajdonságok és a végső cél eléréséhez szükséges struktúrákat, amely grafikusan ábrázolja a tárgyak internetéhez csatlakoztatott érzékelők adatait. Ugyanakkor van még a kis bevezető CSS, lépcsőzetes stíluslapok.

A CSS-tulajdonságok formázása

El alapformátum Ez egy tulajdonságnévből, a kettőspont jeléből, a tulajdonság értékéből és a pontosvessző jelből áll. nombre:valor;

CSS lehetővé teszi különböző mértékegységek használatát ugyanabban a dokumentumban beleértve a szerkezettel kapcsolatosakat (az elem tartalmának mérése) százalékos arányban, ahhoz az eszközhöz képest, amelyen ábrázolják, például a pixelhez, vagy abszolút értékben, például centiméterben. Az egységeket az érték után a következő rövidítési kódolás szerint fejezzük ki.

A tervezett alkalmazásnál legalább három stílusegységet figyelembe kell venni. A cikk tárolójának méretéhez viszonyított mérések %-a, a képernyő felbontásának megfelelő pixel és a nyomtatott jelentések készítésének milliméterei (valójában bármilyen abszolút mérés).

Vannak összetett tulajdonságok, vagy kompozit, amelyek több értéktől (pl. szín, méret, stílus...) függenek, az érték jelzésére két lehetőség van a CSS-ben: megfelelő sorrendben írja be az összes szóközökkel elválasztott értékeket, vagy a komplexnek megfelelő egyszerű tulajdonságok összegét használja. Például egy objektum mind a négy margója megadható egyetlen tulajdonságban margin vagy tulajdonságokkal állítható be margin-top, margin-right, margin-bottom y margin-left. Egyébként ezt a sorrendet (az óramutató járásával megegyezően) követik az értékek leírása, amelyek "körbevesznek" egy elemet, mint például a belső (padding) vagy a külső margó, a szegély...

Az eddig kifejtettek alapján most láthatunk néhány példát a tulajdonságokra

Az előző példában A szín meghatározása egy 6 hexadecimális számjegyből álló kóddal történik, amelyek páronként a piros, zöld és kék komponens értékét jelentik.. Ha megtörténik, mint a példában, hogy a két számjegy egyenlő, akkor ez rövidíthető: #F09 (ami egyébként az úgynevezett "webbiztos színeknek" felel meg). A végső javaslatban kerülni fogom e rövidítések használatát a kritériumok egységesítése és olvashatóbbá tétele érdekében. Az összetett tulajdonságok értékeit is lerövidítheti, mint pl margin a példában, amikor minden érték vagy ellentétes pár ismétlődik. Ugyanezen szövegmentés mentén lehetőség van arra is, hogy egy tulajdonság megadásakor elhagyjuk a mértékegységet, ha az érték nulla, mivel ez ebben az esetben irreleváns.

Néhány értéknek amellett, hogy számszerűen kifejezhető, van neve is ami olvashatóbbá teszi a kódot és lehetővé teszi, hogy jobban emlékezzen rájuk. Például a cél hexadecimális numerikus kódja helyett #FFFFFF (o #FFF), írható white ugyanazzal az eredménnyel. Ily módon a fekete szín, #000000 (o #000), helyettesíthető a black.

is ott az értékeket egy speciális kód, egy név fejezi ki. Például annak jelzésére, hogy az oldalsó margót a böngésző automatikusan beállítja (általában a középső funkciónak felel meg), a speciális értéket használják auto, amelynek nincs numerikus megfeleltetése semmilyen értékkel.

hogy kifejezni egy tulajdonság összetett (összetett) értékeinek sorozatának speciális felhasználási módját CSS A függvényekhez hasonló szintaxisú formátumokat választhat. Például, ha egy színt a piros, zöld és kék összetevő három értékeként szeretne kifejezni (a RGB modell) lenne kiírva color: rgb(128, 255, 64);. Ezen a kifejezésmódon belül lehetőség van egységek használatára is; A fenti példában a színösszetevők 0-tól 255-ig terjedő decimális értékek, de egyszerűbb lehet ezt az egyes színösszetevők összességének százalékában kifejezni, ebben az esetben úgy is felírható, hogy color: rgb(50%, 100%, 25%);.

Értékek kiszámítása CSS-ben

A legújabb verziókban CSS meg lehet tenni egyszerű matematikai műveletek az értékek kiszámításához. Ehhez használja calc az elvégzendő műveletet pedig zárójelben fejezzük ki. Megadhat mértékegységeket, zárójeleket és egyszerű operátorokat, például összeget (+), kivonás (-), szorzás (*) és felosztás (/). A kifejezés a következő típusú lenne width:calc((90%-20px)/2));.

A változók matematikai műveletekben használhatók CSS az egyik ingatlan számításánál egy másik ingatlan értékére utalva var. Annak érdekében, hogy egy változót anélkül tudjunk használni, hogy a stílus tényleges tulajdonságára kellene hivatkozni, megengedett egy nem létező tulajdonság idézése is. CSS formátumot ajánlja --nombre-variable (két kötőjel a kitalált tulajdonság neve előtt). Ily módon egy elem magasságának meghatározása a szélessége felében egy kifejezésben CSS mint height:calc(var(width)/2); és egy új "vastagság" változó meghatározásához (amelyet más tulajdonságok is használhatnak) írjon be pl. --grosor:4px; hogy később úgy hivatkozhassunk rá margin-top:calc(var(--grosor)*4);

Böngészőfüggő CSS-tulajdonságok

CSS Ez a konzorcium által szabványosított specifikáció W3C (World Wide Web Consortium), de sok A tulajdonságok vagy viselkedési stílusok azelőtt érik el a böngészőket, hogy a specifikáció részei lennének egy verzióból.

hogy a kód CSS működik a böngésző jelenlegi szolgáltatásaival, de ne veszítse el az új funkciókkal való kompatibilitást, előtagot használnak. Ez az előtag attól függ renderelő motor amely a hivatkozni kívánt webböngészőt használja (amelyhez a stílus meg van határozva).

Az előtag -webkit Ez alapján működik böngészőknél WebKit mint Safari o króm. Az előtag -moz Azon alapuló böngészőkhöz használatos renderelő motor de Mozillajelenleg GekkóMint Firefox és származékai. hivatkozni EdgeHTML, The renderelő motor böngésző él a Microsofttól (korábban háromágú szigony), az előtag használatos -ms. A böngésző esete Opera egy kicsit különleges, mióta elkezdte használni a sajátját renderelő motor-val hivatkozott -o, de jelenleg azzal működik WebKit, amelyet úgy fejezünk ki -webkit.

Böngészőre utaló tulajdonság használatához írja be a nevét, előtaggal és kötőjellel válassza el, mint a -o-border-radius:10px;, amely lekerekített szegély (lekerekített sarok) beállítására szolgálna a böngésző régebbi verzióiban Opera.

Comments

A kód tisztázása érdekében CSS Használhat megjegyzéseket, amelyek olvashatóbbá teszik, bár azzal a hátránnyal, hogy megnövelik a méretét. A megjegyzések szintaxisa CSS Olyan ez, mint egy többsoros megjegyzés C + + amit már biztosan tud: induló /* és ezzel végződik */, Akárcsak C + +, több sort is elfoglalhat.

Választók

A meghatározás tulajdonságok vannak hozzárendelve a dokumentum objektumaihoz HTML válogatókba csoportosítva őket és zárójelbe zárva őket. A választó hivatkozhat egy nyelvi elemre HTML (címke), mint div, egy osztály (hozzárendelt class en HTML) egy azonosító (hozzárendelt id en HTML) vagy az összes (az „univerzális választó”), amelyet a csillag (*). A következő példa az egyes típusok választóját mutatja be:

A címkék HTML a stílusdefinícióban a nevükkel vannak kifejezve, az osztályokat pont a név elé helyezve jelöljük (.) és egy font jel (#) az azonosítókhoz.

Része a nagy hatalmának CSS -ben lakik a szelektorok csoportosításának lehetősége tulajdonságaik meghatározásakor. A kiválasztók csoportosításának többféle módja van. Csoportosításukkal vesszővel elválasztva azt fejezzük ki, hogy az idézett szelektorok mindegyike rendelkezik azokkal a tulajdonságokkal.

Az előző példa azt mutatja, hogy a fogyasztás, a páratartalom és a hőmérséklet osztályok színe, szélessége és magassága megegyezik. Ebben a kódban egy új koncepciót is bevezetnek: A tulajdonságok újradefiniálhatók, és ebben az esetben a legutóbb leírtak érvényesülnek. Ily módon a hőmérsékleti osztály elemeinek magassága végül az őket tartalmazó objektum 50%-a lenne.

Ha a csoportos választókat nem választja el vessző, akkor a tulajdonságokra vonatkozó feltétel kumulatív, vagyis egy elemnek meg kell felelnie minden választónak, hogy elnyerje az általuk meghatározott megjelenést vagy viselkedést. Ha a szelektorok címkékre hivatkoznak HTML Megjelenésük sorrendjének csökkenőnek kell lennie a befogadás szintjén: először a legmagasabb hierarchikus szint, végül a legalacsonyabb.

Az előző példában az elemek definiáltak div amelyek szintén a hőmérsékleti osztályba tartoznak, és azok az elemek, amelyek rendelkeznek hőmérsékleti és fogyasztási osztályokkal (mindkettő egyszerre), mint class="temperatura consumo". Az elemek <div> A kódtól HTML a class="temperatura" 100%-os csúcsuk lenne

CSS-tulajdonságok a szöveg meghatározásához

A szöveg megjelenését befolyásoló tulajdonságok három típusa különböztethető meg: (1) azok, amelyek meghatározzák azt a betűtípust, amellyel megjelenítik, (2) azok, amelyek meghatározzák a literál megjelenését (a szöveg tartalmát). és (3 ) általánosak, azaz olyanok, amelyek a szöveg megjelenését és a többi komponens megjelenését egyaránt befolyásolják. Általánosságban elmondható, hogy az utolsó csoporthoz tartozók magyarázataként elmondottak ugyanazokra a tulajdonságokra is vonatkoznak, amelyek más elemekre vonatkoznak.

Tipográfia (betűtípus)

• font-family az elemhez használt betűtípus nevét jelzi. Írhat egy nevet vagy egy listát, preferencia sorrendben és a neveket vesszővel elválasztva azokról a betűtípusokról, amelyeket alternatív módon használ, ha a kívánt betű nem létezik. Ugyanezen elvek mentén lehetséges általános betűtípusok használata a nevekkel együtt monospace, serif, sans-serif, cursive, fantasy. Ezek közül az általános betűtípusok közül a legfontosabb (az aktuális adatok megjelenítéséhez) az első, amely – ahogy a neve is sugallja – a rendszerben elérhető és a böngésző által előre beállított fix térközű betűtípust fogja használni. A második, serif, az elérhető alapértelmezettet fogja használni serif (befejezés vagy kegyelem). Árverés nélkül, ha a harmadik fel van tüntetve, sans-serif. Kézzel rajzolt írást utánzó cursive (egyértelmű, hogy javítható lenne) és a rendszer dekoratív tipográfiája fantasy, az utolsó az öt közül.

  Ami a kódot illeti CSS A szóközök elválasztóként különleges jelentéssel bírnak, ha a betűcsalád neve több szóközzel elválasztott szóból áll, a félreértés elkerülése végett idézőjelek közé írjuk.

  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;

  A webböngészők képesek helyi betűtípusok (azon a rendszeren telepített betűtípusok, amelyeken működnek) és más, kifejezetten betöltött betűtípusok használatára is alkalmasak, akár átfedésben is a helyileg telepítettekkel. Betűtípus betöltéséhez használja a @font-face feltüntetve a nevét, a definíció letöltési helyét és adott esetben a formátum leírását.

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

  Az előző példa két definíciója közül az elsőben a dokumentum betűjele töltődik be Sircuito-Expanded-Light.eot amely a fő (gyökér) mappán belüli EOT mappában található és családnévként van hozzárendelve CircuitExpandedLight. Egyébként tetszik ez a betűtípus? Ingyenes, megteheti töltse le ingyen a Sircuito betűtípust, amelyet a GranaBot képhez terveztem.

  Amint a példában látható, az url tulajdonság, amely megfelel a egységes erőforrás-kereső, lehetővé teszi a dokumentum helyének megadását a letöltött betűtípussal. A perjel a különböző mappák nevének elválasztására szolgál a betűtípus elérési útjától, kezdve azzal, amelyik a hívást kezdeményező dokumentumot tartalmazza, vagy a gyökértől, ha a URL Kezdje egy bárral.

  A második példa több alternatív dokumentumot használ, így ugyanaz a definíció több böngészőben is működik (mindegyik az általa értelmezhető típust tölti be)

  A definíció utolsó sora tartalmazza a tulajdonságot font-smoothing a betű lágyításához (alkalmazzon a élsimítás). Mivel nem szabványos tulajdonság, az előtag kerül felhasználásra -webkit.

• font-size a betű méretének jelzésére szolgál font-size:12px;

• font-weight Beállítja a betűtípus vastagságát. Kifejezhető számértékként, általában 100 többszöröse 100 és 900 között, a szokásos tipográfiai súlyok szerint, vagy gyakrabban névvel: normal az alap vastagságához, bold a merészeknek, bolder az általában feketének nevezett változathoz, light a bírságért (általános nevén könnyű) és lighter a legvékonyabbaknak (néha vékonynak is nevezik).

  A betűtípus normál verziójának számértéke 400 (egység nélküli), a félkövér változat esetében pedig 700.

  Alapértelmezés szerint, ha nincs más érték megadva, akkor a betűtípus megjelenése a megfelelő normal vagy 400 így, ha nem változott az általános elemben vagy abban a tárolóban, amelyből öröklődik, nem szükséges feltüntetni font-weight a bátorsággal normal.

• font-stretch A betű szélességének jelzésére szolgál, amennyiben a megfelelő családban elérhető. Az ingatlan lehetséges értékei a legszűkebbtől a legszélesebbig rendezve a következők: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. Ugyanazokkal a feltételekkel, amelyeket az előző tulajdonságnál használtunk, az alapértelmezett szélesség a következő normal és nem szükséges kifejezetten jelezni, hacsak nem módosították a meghatározottnál magasabb hierarchikus sorrendben.

• a font-style Megadhatja, hogy egy szöveg ferde vagy ferde betűvel van-e rajzolva, ami befolyásolja a megjelenését, vagy egy speciális jelentést kifejező kurzív betűvel (pl. idegen szavak), vagy kerek betűvel, vagyis az előzőekkel sem. vagy normális. az érték oblique teljesíti az első funkciót, a megjelenés és az érték funkcióját italic a második. Az a tény, hogy mindkettő megjelenése gyakran hasonló, vagy akár ugyanaz, azt jelenti, hogy a használat (a jelentés) néha összekeveredett, ezért érdemes odafigyelni. Más tulajdonságokhoz hasonlóan normal az előző értékek kikapcsolására szolgál.

• text-decoration aláhúzásra szolgál (az értékkel underline), overline (az értékkel overline), át kell húzni (az értékkel line-through) vagy villog (az értékkel blink) azt a szöveget, amelyre ez a tulajdonság hatással van.

• A tipográfiai szempont sorozatának kiegészítéséhez, bár alkalmazásunk szempontjából ez nem túl lényeges, font-variant, lehetővé teszi a jelentkezést kis sapkák (kis nagybetűk) a szövegekhez.

Szöveg

• text-align megmondja a böngészőnek, hogy a szövegblokkot hogyan kell igazítani. A lehetséges igazítások balra vannak (ezt alapértelmezés szerint figyelembe veszik) a kóddal left, középre az értékkel center, helyes használat right és mindkét végén azzal indokolt justify.

• line-height beállítja a szövegsorok elválasztását. Ebben az esetben, ha százalékokat használunk, akkor a 100% érték a szöveg magasságának felel meg, nem pedig a konténer méretének. A szöveghez képest leggyakrabban használt mérték a 120%-nak felel meg. A 100%-os vonal azt jelenti, hogy az egyik sor alja érinti a következő sor tetejét. Bár a tipográfiai tervezés általában tartalmaz némi helyet, gyakori, hogy egy kicsit több margót hagynak a sorok között.

  A sorok közötti elválasztás kifejezésére lehetőség van egy együttható (egység nélküli érték) feltüntetésére is, amellyel a szövegdoboz magassága alapján ki lehet számítani a sor magasságát.

• letter-spacing a szavak betűi közötti térköz értéke, amelyet a tipográfiában ún kerning o követés.

• word-spacing a szavak közötti szóköz mértékét jelenti.

• white-space beállítja a szóközök viselkedését a szövegben. Amikor az értéket használják normal, amely alapértelmezés szerint több üres helyet egyesít a kódban HTML a weblap egyik prezentációjában (amelyet a böngésző jelenít meg), és a szóközöket hivatkozásként veszi a sor törésére, ha nincs szóköz a blokkban.

  Az érték nowrap Az ismétlődő üres helyeket is egyesíti, de nem bontja fel az üres helyeken lévő szövegsorokat akkor sem, ha a sor nem fér el a tárolóban, szükség esetén túlcsordítja a szóközt, és ha kell, kifelé ír. A vonalak kifejezett felosztásához használhatja a címkét <br> de HTML.

  használva pre Sem az üres helyeket nem egyesítik egybe, sem a sorokat a szóközök referenciaként való felosztása.

  pre-line csatlakoztassa az ismételt üres helyeket, és szükség esetén törje meg a sorokat, referenciaként használva az üreseket.

  pre-wrap megőrzi az ismétlődő szóközöket, és szükség esetén megtöri a sorokat, szóközt használva referenciaként.

színek

En CSS színe szerint fejezhető ki RGB színmodell vagy aszerint HSL színes modell és mindkét esetben átlátszósági információ szerepelhet, egy negyedik csatorna értéke, amelyet általában hívnak alfa csatorna o alfa kompozíció, amely az RGBA és a HSLA modelleket eredményezi.

A színek formátumban történő kifejezésére RGB hexadecimális jelöléssel a szintaxis használatos #RRGGBB, ahol RR a piros komponens értéke (elvileg két hexadecimális számjegy használatával), GG a zöld komponens értéke, BB pedig a kék komponens értéke. Ahogy már említettük, ha az egyes komponensek két számjegye azonos értékű, akkor ezt így lehet kifejezni #RGB a rendelkezésre álló színek számának korlátozása az úgynevezett webbiztos színekre

Amellett, hogy ez a színábrázolási mód, a legklasszikusabb és leghasználtabb, úgy fejezhető ki rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) hogy jelezze a formátumban RGB, Hsl és azok megfelelő nyomtatványai az átláthatóság jelzésével (alfa csatorna)

Hacsak az egységutótag hozzáadásával másképp nem kérik, a RGB modell 0 és 255 közötti decimális értékeket használ, a három komponenshez az értéket alfa komponens egy együttható (tizedesjegy nullától egyig) és az első értéke HSL színes modellA színárnyalat egy 0 és 360 közötti tizedesjegy (egységek nélkül), amely egy szöget jelent. A telítettség és a fényerő értékei a HSL modell Általában százalékban fejezik ki.

Mint már elhangzott, bár használata nem túl gyakori, a színeket a formátumban a nevükkel lehet jelezni color:black; helyett color:#000000;. Az első formátum jobban olvasható, de egy rövid értéktáblázatra korlátozódik, amelyet szintén nehezebb számszerűen módosítani egy nyelven írt alkalmazásból. JavaScript.

Az IoT-hez csatlakoztatott érzékelők adatainak grafikus megjelenítésére vonatkozó javaslatunkhoz mindössze három színnel kapcsolatos tulajdonságra lesz szükségünk. Egyszerre szolgálnak a szöveg nevének jelzésére, amelyet most magyarázunk, és jelzik az azt támogató összetevők nevét.

• color az elem színét jelzi HTML és azt, amit tartalmaz (ami örökli), hacsak más színek egyedi hozzárendelésével kifejezetten nem változtatják meg.

• background-color Egy elem háttérszínének meghatározására szolgál HTML. A szín értékként való feltüntetése mellett RGB o Hsl speciális értéket használhat transparent hogy az objektumnak ne legyen háttérszíne, és látható legyen, mi van mögötte, vagyis nem fedi le azokat az elemeket, amelyekre rárajzolták.

• opacity lehetővé teszi egy elem és annak teljes tartalmának átlátszatlanságának (közvetetten, átlátszóságának) beállítását (nem tévesztendő össze a háttér átlátszóságával). Ha az átlátszóságot olyan elemekhez rendeljük hozzá, amelyek maguk is átlátszóak, akkor ez megnő, külön nem működik. Egy átlátszó objektumban lévő objektumot nem lehet átlátszatlanabbá tenni. Az értéke opacity Hasonló együtthatóként van kifejezve opacity:0.5; 50%-os átlátszatlanság jelzésére.

  A Microsoft böngészőjének régebbi verziói nem használták ezt a tulajdonságot, de rendelkeztek ezzel a tulajdonsággal filter (szűrő), amely más értékek mellett támogathatja az alfát (a alfa csatorna), amelyhez százalékos átlátszóságot lehetett rendelni opacity formátum szerint:

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

Intézkedések

En CSS, az elemek mérése <div>, amelyet a grafikus tároló összeállításához választottunk, be van állítva width (szélesség) és height (alt).

tartalma között <div> kerületében pedig egy töltési terület van, amelyet értékével határozunk meg padding. Az objektum kerületét veszi körül az az él, amelynek a mérete a tulajdonsággal van megadva border. Az objektum külsejének elválasztása <div> a többi környező objektum közül van egy tér, amelynek méretét az határozza meg margin.

Normál körülmények között az objektum által használt tér mérése <div> kiszámítható a szélessége vagy magassága plusz a párnázás összege (padding) plusz szegély (border) plusz margó (margin). Amikor a megállapított releváns mérés az objektum hasznos belső tere <div>, ez az összetétel nagyon praktikus, de ha mi ismert az elérhető teljes mérés megváltoztatható-e ez a viselkedés, alapértelmezés szerint beállítva, így a teljes szélesség és magasság méretét a jel jelzi width (szélesség) és height (magasság) úgy, hogy az összeadás helyett kivonjuk belőle a kitöltés, a szegély és a margó méretét. Ennek az üzemmódnak a használatához rendelje hozzá a tulajdon box-sizing az érték border-box (alapértelmezett content-box)

Az alábbi diagram grafikusan mutatja a kapott értékeket width (szélesség) és height (magas), ha használja box-sizing:border-box; (a teljes) illbox-sizing:content-box; (belül)

A mérések értékeit a már ismertetett mértékegységekkel fejezzük ki. Ha több értékkel definiált tulajdonságokról van szó, akkor a különböző típusú átlagokkal kifejezett számadatok keverhetők. Ezen kívül van néhány speciális érték, amelyek relevánsak a szenzorgrafikonok IoT-ben történő megvalósítása során történő felhasználáshoz. Konkrétan használhatjuk az értéket auto az ingatlanon margin mint erőforrás bizonyos körülmények között az objektumok központosítására.

A fenti példában a „small_box” osztályhoz egy 2 pixel vastag szegély van megadva, fekete körvonallal (#000000) folyamatos (solid). A „big_box” osztályban a szegélyhez használt vonal szaggatott (dashed) és a piros szín (#FF0000). Ezen értékek külön kifejezésére használhatjuk border-width vastagsághoz, border-style a stroke és border-color színért. Ezek az éltulajdonságok viszont összetettek, és a felső, jobb, alsó és bal oldali elemek alkotják, az óramutató járásával megegyező irányban, a fentebb leírtak szerint.

A két definiált osztálynak ugyanazok a méretei, de az első kisebb, mivel az érték használatakor border-box ingatlanért box-sizing, a kitöltés, a szegély és a margó az alapértelmezés szerint az objektumon belül, nem a tartalom körül rajzolódik meg. A "big_box" osztályban nincs feltüntetve, így alapértelmezés szerint az értéket veszik fel content-box ami miatt a párnázás, a szegély és a margó a jelzett méretre nő width y height.

A fenti példában az osztálymargó értéke 10 pixel felül, jobb, lent és bal oldalon, így egyetlen értékként is kifejezhető margin:10px;. Nagyon érdekes megismerni ezt az alternatívát a harmadik felek által kifejlesztett kód megértéséhez, bár ebben a megvalósítási javaslatban az olvashatóbbá tétel érdekében javasolt az értékek megismétlése.

Az előző példában szereplő három osztály ugyanazt az eredményt adja: az úgynevezett "lakonikus" definíciója tömörebb, és kevésbé az úgynevezett "beszédű" definíciója, amely nem csak az olvasás tisztázását szolgálja, hanem a szokásos forma. egy tulajdonság bizonyos részleges, konkrét aspektusának módosítására szolgál, a többi érték öröklődés útján történő újrafelhasználásával (ezeket a tároló biztosítja, vagy az elemhez rendelt osztályok egyike biztosítja). Ha relevánsak lennének azok a tulajdonságok és egyéb körülmények, amelyek a kód olvashatóbbá tétele érdekében, mint például a megjegyzések, növelik a méretet és ezáltal a forgalmat, a kiszolgálót ezen definíciós mód extraszövege által okozott terhelés, akkor lehetséges lenne feldolgozza (például) innen PHP az ebből a nyelvből származó kódgenerálási stratégia részeként.

A dobozmodell méretei elsősorban az elemekre hatnak <div> de a tulajdonsággal más elemekre is rákényszeríthető ez a viselkedés display és az érték block. Ha egy elemet úgy szeretne folyni, mint a szöveg egy sorban, használja a display:inline; és mindkét viselkedés, a mérések és az áramlás kombinálható display:inline-block;

Az érték none az ingatlanon display, használva, mint display:none;, lehetővé teszi az objektumok elrejtését is, ami arra szolgál, hogy „bekapcsolja” és „kikapcsolja” őket JavaScript.

Ha egy elem méretei nincsenek megadva, akkor bármilyen méretre van szükség ahhoz, hogy a tartalom illeszkedjen (valójában a tartalmat úgy alakítja ki, hogy nem kell méretet megállapítania). De ha a méretek fel vannak tüntetve, előfordulhat, hogy a benne lévő tárgyak nem férnek el; ilyenkor a méreteket nem veszik figyelembe, megnövelik, hogy minden tartalom látható legyen.

Annak érdekében, hogy egy másik rögzített mérésben szereplő elemek levágásra kerüljenek, amikor túllépik a méretet, a tulajdonságot használják overflow a bátorsággal hidden. az értékkel scroll, a tárolót túlcsorduló tárgyak is kivágásra kerülnek, ahogy az a hidden de megjelenik egy görgetősáv, amely mozgatásakor látható. Az érték auto A görgetősáv csak akkor jelenik meg, ha a tartalom mérete alapján szükséges.

Megállapíthat egy minimális méretet is, hogy a tárolók akkor is elfoglalják ezt a helyet, ha a tartalomnak nincs rá szüksége, és méretük korlátozása nélkül növekedjen, amikor a tartalom igényli. Azok a tulajdonságok, amelyek ezt a feladatot látják el min-width az acho és min-height a magasért. Ellenkező értelemben, max-width állítsa be a maximális szélességet és max-height egy maximális magasság, amely kioltja width ya height.

Elemek áramlása a weboldalon

Az általunk elemekkel meghatározott téglalapok (blokkok). <div>, alapértelmezés szerint egymás alá kerülnek. Ennek a viselkedésnek a megváltoztatásához használhatja a tulajdonságot float, jelezve left o right értékként, hogy balról jobbra, illetve jobbról balra folyjanak. Éppen ellenkezőleg, annak megakadályozására, hogy egy objektum "lebegjen" a másiktól jobbra vagy balra, használhatja a tulajdonságot clear az értékekkel left, right o both, amelyek felülírják a balról jobbra, jobbról balra vagy mindkettőt.

Ellentétben azzal, ami más körülmények között történik, az áramlás létrejött float nem módosítja automatikusan a tároló méreteit, ezért célszerű a tulajdonságai közé belefoglalni overflow:auto; a tartály méretének (magasságának) megváltoztatására kényszeríteni, amikor egy tárgy túlcsordul rajta a helye miatt float.

Egy másik módja annak, hogy konfigurálhassa egy elem tartalmának folyamatát, ha oszlopokra osztja a tulajdonsággal column-count (amihez jelen pillanatban együtt kell járnia -webkit-column-count és -moz-column-count) Az oszlopok mérete a -val jelezhető (valójában javasolt). column-width (-webkit-column-width -moz-column-width) és az oszlopok közötti elválasztást a column-gap (-webkit-column-gap -moz-column-gap)

Annak érdekében, hogy a blokkok ne legyenek felosztva, és tartalmuk több oszlopra oszlik el, használhatja display:inline-block; bár ez biztosan azt jelenti. hagyja kihasználatlanul az oszlop egy részét.

Helymeghatározás

Az elemek weblapon való elhelyezkedésének megállapításához a CSS többféle pozicionálási módot használ, amelyek elemenként eltérőek lehetnek, azaz lehetőség van ugyanazon a weboldalon különböző pozicionálási kritériumok keverésére.

• position:static; Ez az alapértelmezett pozicionálás (nem szükséges feltüntetni, ha korábban nem módosították) Ez a fajta pozicionálás az oldal „természetes” folyását követi: egyik elem a másik után indul balról, növekszik, mindaddig, amíg van hely, jobbra és fentről lefelé. Helyének megállapításához nem használ vízszintes vagy függőleges koordinátákat, az objektum sorrendjének megfelelő pozíciót követi.

• position:fixed; Egy objektum fix pozícióba helyezésére szolgál a böngészőablakban (például menüben). Az elem helye vízszintesen adható meg left o right a bal vagy jobb oldali elválasztás meghatározásához, illetve a top o bottom a böngészőablak (nézetablak) széle felett vagy alatt történő elválasztáshoz.

  Ezzel és más típusú helymeghatározással az objektumok átfedhetik egymást. Az elsőként rajzolt objektumok (a kódban korábban meghatározva HTML) lefedhetők a később kihúzottak (a kódban később szereplők). HTML). A normál sorrend megváltoztatásához használhatja az ingatlant z-index, a legnagyobb értékű objektumok z-index Lefedik a kisebb értékűeket.

• position:relative; Elmozdítja az elemet a "normál" helyzetéből a tulajdonságok szerint left o right vízszintesen és top o bottom függőlegesen.

• position:absolute; Rögzített pozícióba helyezi az elemet az azt tartalmazó objektumhoz képest. Helyét, mint az előző esetekben, azzal fejezzük ki left,right, top y bottom

  Ennek a pozícionálási típusnak az elnevezése elsőre zavaró, hiszen a pozíciót a tulajdonságot használónál hierarchikusan magasabb rendű objektumhoz képest állapítják meg, ami vitatható, hogy abszolút-e.

  Azt is fontos megjegyezni, hogy az objektumokat tartalmazó elem <div> amelyet az első hierarchikus szinten használunk az <body>, ezért ha a <div> mit használsz position:absolute; más nem tartalmazza, elhelyezése "abszolút" lesz a weboldalhoz képest.

Adott adathordozók és jellemzők tulajdonságai (médialekérdezések)

CSS lehetővé teszi, hogy ugyanazon a stíluslapon különböző megjelenéseket határozzon meg a különböző médiákhoz vagy támogatásokhoz a használt eszköz típusától (például képernyő vagy nyomtató), méretétől, tájolásától (függőleges vagy fekvő) vagy felbontásától függően. Ez arra szolgál, hogy ugyanazt a weboldalt a kontextusnak legmegfelelőbb módon tudjuk megjeleníteni.

A médiára való hivatkozáshoz használja a @media hasonló módon, mint amit a betűtípusoknál már elmagyaráztunk @font-face, kapcsos zárójelbe zárva ({ y }) a különböző elemek meghatározásai: címkék HTML, osztályok, azonosítók...

A rendelkezésre álló médiatípusok CSS3 hang: all, bármilyen médiára hivatkozni (minden), screen bármilyen típusú képernyőhöz (régebbi verzióihoz CSS Megkülönböztették a tévét és a számítógép-monitort) print nyomtató kimenethez és speech audio webolvasók számára, amelyek hangszintetizátorokkal értelmezik az információkat.

A fenti példában a szövegosztály elemei fekete háttérrel és fehér szöveggel jelennek meg a képernyőn, de fehér háttérrel és fekete szöveggel vannak nyomtatva.

Feltételek szabhatók a médiára különböző tulajdonságkészletek meghatározásához, például a rendelkezésre álló felbontás vagy nézetarány alapján. Ezek a feltételek és maguk az eszközök logikai műveletekkel összeállíthatók and, not y only többnek betartását követelni, nem vagy csak akkor, amikor megfelel, ill.

Az elérhető feltételek közül különösen érdekesnek találjuk őket max-width (maximális ablakszélesség), max-height (maximális ablakmagasság), min-width (minimális ablakszélesség), min-height (minimális ablakmagasság), orientation (az orientáció, ami lehet landscape, táj, ill portrait, függőleges), max-resolution (maximális felbontás in dpi, pont per hüvelyk, vagy inch dpcm, pont per centiméter) és min-resolution (minimális felbontás, szintén be dpi o dpcm).

Az előző példában a háttérszín meghatározásával kezdjük, hogy minden adathordozóban a main_block osztály elemei #CCCCCC háttérszínnel rendelkezzenek. Ha egy képernyőn jelenik meg, és az ablak legalább 320 pixel széles, a bal és jobb margó automatikus lesz (a blokk közepére), az elem szélessége pedig 300 pixel. Ha a képernyő felbontása 640 pixel, akkor a blokk szélessége 620 pixel lesz. Mivel a második adathordozó definíció nem tartalmazza a margóinformációkat, és a második feltételnek megfelelő eszközök megfelelnek az elsőnek is, a vízszintes margó továbbra is automatikus lesz.

Végül a példában a háttérszínt úgy változtatjuk meg, hogy az fehér legyen a nyomtatásban.

A stílusok meghatározásának szokásos módja a különböző médiákhoz általában az elterjedtekkel, általában színekkel és betűtípusokkal kezdődik, majd ezt követik a leginkább korlátozó geometriák (a legalacsonyabb pixelszámmal rendelkező eszközök mérései), általában okostelefonok és táblagépek esetében, ahol ráadásul Fontos lesz tudni, hogy függőlegesen vagy vízszintesen használják orientation és minden bizonnyal a felbontását is min-resolution. Ezután a nagyobb képernyők különböző méreteit jelzik, és általában a nyomtatással és a hanghordozókkal végződik, amelyek az IoT-grafikák példájában kimaradtak.

használat @media Az olyan feltételek, mint a méretek, a felbontás és a tájolás, lehetővé teszi a tervező számára, hogy egyetlen weboldalt hozzon létre, amely különböző stílusokkal minden eszköz számára a legmegfelelőbbnek tűnik. Ezt a viselkedést általában reszponzív tervezésnek nevezik; adaptálható design, nagyon szabad fordításban.

CSS SVG grafikus tárolóhoz

Az eddig kifejtettekkel most már meg lehet határozni azokat a stílusokat, amelyeket a SVG grafikus HTML tároló amellyel az IoT-hez csatlakoztatott szenzorok állapotát ábrázolják. A következő kódban a javaslat olyan oszlopokban történő elosztását tartalmazza kommentálva, amely több grafikonnak felel meg, mint a cikksorozat javaslata, így más esetekben újra felhasználható.

Alább láthatja, hogyan néznek ki ezek a stílusok. HTML-kód az SVG-grafikákhoz javasolt tárolóból az előző cikkből.

A sorozat következő cikke elmagyarázza hogyan rajzoljunk SVG-vel Adatgrafikonok a dolgok internetéhez (IoT) kapcsolódó érzékelők állapotáról.