S CSS definirajte videz spleta senzorske grafike v IoT

V prejšnjem članku iz serije o kako narediti grafe stanja senzorjev, povezanih z internetom stvari IoT pojasnjuje pot uporabite spletno stran, razvito v HTML, kot strukturo za grafiko. Elementi spletne strani, ki so bili z uporabo objektov zmanjšani na minimum <div>, do njegovega videza niso neposredno opredelili, temveč se sklicevali na informacije o videzu v slogovni list CSS, kar bo razloženo v tem delu serije.

V rešitvi, ki jo predlagam za izdelavo grafov senzorjev, povezanih z IoT, je uporabljen dokument CSS ki se naloži iz dokumenta HTML. Če je koda HTML bo ustvarjen iz aplikacije na strežniku, na primer v PHP, bi bilo zelo preprosto, če bi ga vključili kot del kode, ki definira spletno stran, namesto da bi jo naložili z nje, kar bi lahko nekoliko optimizirali s shranjevanjem klica. Ne glede na izbrano možnost vključuje najprimernejša metoda uredite kodo CSS v ločenem dokumentu za udobnejše upravljanje in ponovno uporabo. V primeru, razvitem v vadnici te serije člankov, je dobil ime estilo.css.

Na enak način, Pri zapletenih projektih je priporočljivo, da v različnih dokumentih uporabite več ločenih slogovnih listov, da bi lahko znova uporabili določene funkcionalnosti, ne da bi jih bilo treba vsakokrat naložiti, in da bi kodo lažje urejali z razdelitvijo v različne dokumente v skladu z ustrezno logično strukturo.

Slogi CSS Poskušajo opisati vse ekstreme obnašanja in videza spletne strani z več vrstami pristopov, ki so vsi hkrati veljavni, pri tem pa poskušajo čim bolj spoštovati združljivost s specifikacijami prejšnje različice. To pomeni, da obstaja veliko možnih rešitev, ki rešujejo iste potrebe. kot tudi veliko število razpoložljivih virov (lastnosti CSS). Zaradi didaktičnega pristopa članka in da ne bi zmedli novih uporabnikov v CSS, samo lastnosti in strukture, potrebne za končni cilj, ki naj bi grafično predstavljal podatke iz senzorjev, povezanih z internetom stvari. Hkrati obstaja tudi a majhen uvod v CSS, kaskadne slogovne liste.

Oblikovanje lastnosti CSS

El osnovni format Sestavljen je iz imena lastnosti, znaka dvopičja, vrednosti lastnosti in znaka podpičja. nombre:valor;

CSS omogoča uporabo različnih merskih enot v istem dokumentu vključno s tistimi, ki so povezani s strukturo (meritev tega, kar element vsebuje) v odstotkih, glede na napravo, na kateri so predstavljeni, kot je slikovna pika, ali absolutno, kot so centimetri. Enote so izražene za vrednostjo v skladu z naslednjim kodiranjem okrajšav.

Za aplikacijo, ki jo bomo izvajali, je pomembno upoštevati vsaj tri slogovne enote. % za merjenje glede na velikost vsebnika predmeta, piksel za meritve glede na ločljivost zaslona in milimetri (pravzaprav katera koli absolutna meritev) za izdelavo natisnjenih poročil.

Obstaja nekaj kompleksne lastnosti, ali sestavljene, ki so odvisne od več vrednosti (kot so barva, velikost, slog ...), za označevanje vrednosti sta v CSS dve možnosti: v ustreznem vrstnem redu napišite vse vrednosti, ločene s presledki, ali uporabite vsoto enostavnih lastnosti, enakovrednih zapletenim. Na primer, vse štiri robove predmeta lahko podate v eni sami lastnosti margin ali pa se lahko nastavi z lastnostmi margin-top, margin-right, margin-bottom y margin-left. Mimogrede, ta vrstni red (v smeri urinega kazalca) je tisti, ki mu sledijo opisi vrednosti, ki "obkrožajo" element, kot je notranji (oblazinjenje) ali zunanji rob, obroba ...

S tem, kar je bilo razloženo do sedaj, lahko zdaj vidimo nekaj primerov lastnosti

V zgornjem primeru Barva je definirana s kodo 6 šestnajstiških števk, ki v parih predstavljajo vrednost rdeče, zelene in modre komponente. Ko se zgodi, kot v primeru, da sta števki enaki, se lahko skrajša kot #F09 (ki, mimogrede, ustreza tako imenovanim "web varnim barvam"). V končnem predlogu se bom izogibal uporabi teh okrajšav, da bi poenotil merila in ga naredil bolj berljivega. Prav tako lahko skrajšate vrednosti kompleksnih lastnosti, kot je npr margin v primeru, ko se ponovijo vse vrednosti ali nasprotni pari. Po enakih vrsticah shranjevanja besedila je možno tudi izpustiti enoto pri podajanju lastnosti, ko je vrednost nič, saj je v tem primeru nepomembna.

Nekatere vrednosti imajo poleg tega, da jih je mogoče številčno izraziti, ime zaradi česar je koda bolj berljiva in vam omogoča, da si jih bolje zapomnite. Na primer, namesto šestnajstiške številčne kode cilja, #FFFFFF (o #FFF), lahko zapišemo white z enakim rezultatom. Na ta način črna barva, #000000 (o #000), lahko nadomestite z black.

prav tako tam so vrednosti izražene s posebno kodo, imenom. Na primer, za označevanje, da brskalnik samodejno nastavi stranski rob (običajno bo ustrezal sredinski funkciji), se uporabi posebna vrednost auto, ki nima številčne korespondence z nobeno vrednostjo.

za izražajo poseben način uporabe niza sestavljenih (kompleksnih) vrednosti lastnosti CSS Izberete lahko formate s sintakso, podobno sintaksi funkcij. Na primer, da izrazite barvo kot tri vrednosti njene rdeče, zelene in modre komponente ( RGB model) bi bilo zapisano color: rgb(128, 255, 64);. Znotraj tega stila izražanja je možna tudi uporaba enot; V zgornjem primeru so barvne komponente decimalne vrednosti od 0 do 255, vendar je to morda lažje izraziti kot odstotek vsote vsake barvne komponente, v tem primeru pa bi jo lahko zapisali tudi kot color: rgb(50%, 100%, 25%);.

Izračun vrednosti v CSS

V najnovejših različicah CSS to je mogoče storiti preproste matematične operacije za izračun vrednosti. Če želite to narediti, uporabite calc in operacija, ki jo je treba izvesti, je izražena v oklepaju. Označite lahko enote, oklepaje in preproste operatorje, kot je vsota (+), odštevanje (-), množenje (*) in delitev (/). Izraz bi bil tipa width:calc((90%-20px)/2));.

Spremenljivke se lahko uporabljajo v matematičnih operacijah v CSS ki se pri izračunu ene nepremičnine nanaša na vrednost druge z var. Da bi lahko uporabili spremenljivko, ne da bi se morali sklicevati na dejansko lastnost sloga, je dovoljeno navesti tudi lastnost, ki ne obstaja. CSS priporoča obliko --nombre-variable (dva vezaja pred imenom izmišljene lastnosti). Na ta način za določitev višine elementa kot polovice njegove širine izraz v CSS kot height:calc(var(width)/2); in za definiranje nove spremenljivke "debelina" (ki bi jo lahko uporabljale druge lastnosti) bi zapisali, na primer, --grosor:4px; da bi ga lahko pozneje imenovali kot margin-top:calc(var(--grosor)*4);

Lastnosti CSS, odvisne od brskalnika

CSS Gre za specifikacijo, ki jo je standardiziral konzorcij W3C (World Wide Web Consortium), ampak veliko lastnosti ali slogi obnašanja dosežejo brskalnike, preden postanejo del specifikacije različice.

tako da koda CSS deluje s trenutnimi funkcijami brskalnika, vendar ne izgubi združljivosti z novimi funkcijami, uporablja se predpona. Ta predpona je odvisna od upodabljajoči motor ki uporablja spletni brskalnik, na katerega se želite sklicevati (za katerega je definiran slog).

Predpona -webkit Deluje za brskalnike, ki temeljijo na WebKit kot Safari o Krom. Predpona -moz Uporablja se za brskalnike, ki temeljijo na upodabljajoči motor de Mozillatrenutno GeckoKot Firefox in njegove izpeljanke. Za sklicevanje na EdgeHTMLje upodabljajoči motor brskalnik Edge od Microsofta (prej Trident), se uporablja predpona -ms. Primer brskalnika deluje je malce poseben, odkar je začel uporabljati svojega upodabljajoči motor, omenjeno z -o, vendar trenutno sodeluje z WebKit, ki se izraža kot -webkit.

Če želite uporabiti lastnost, ki se nanaša na brskalnik, napišite njeno ime, predpono in ločite z vezajem kot v -o-border-radius:10px;, ki bi v starejših različicah brskalnika služil za nastavitev zaobljene meje (zaobljenega kota). deluje.

Komentarji

Za pojasnitev kode CSS Uporabite lahko komentarje, zaradi česar bo bolj berljiv, čeprav s pomanjkljivostjo povečanja njegove velikosti. Sintaksa komentarjev v CSS To je kot večvrstični komentar C + + kar zagotovo že poznate: začetek v /* in konča na */kot v C + +, lahko zavzame več vrstic.

Izbirniki

Opredelitev lastnosti so dodeljene predmetom v dokumentu HTML združevanje v izbirnike in jih zapreti v oklepaje. Izbirnik se lahko sklicuje na jezikovni element HTML (oznaka), všeč div, razred (dodeljen z class en HTML) identifikator (dodeljen z id en HTML) ali vsi (»univerzalni izbirnik«), ki jih predstavlja zvezdica (*). Naslednji primer prikazuje izbirnik vsake vrste:

Oznake za HTML so v slogovni definiciji izraženi s svojim imenom, razredi so označeni s piko pred imenom (.) in znak funta (#) za identifikatorje.

Del velike moči CSS prebiva v možnost združevanja izbirnikov pri definiranju njihovih lastnosti. Izbirnike lahko združite na več načinov. Če jih združite v skupine, če jih ločimo z vejicami, je izraženo, da ima vsak od navedenih izbirnikov te lastnosti.

Prejšnji primer kaže, da si razredi porabe, vlažnosti in temperature delijo barvo, širino in višino. V tej kodi je predstavljen tudi nov koncept: lastnosti je mogoče redefinirati in v tem primeru prevladajo nazadnje opisane. Na ta način bi imeli elementi temperaturnega razreda končno višino 50 % objekta, ki jih vsebuje.

Če združeni izbirniki niso ločeni z vejicami, je pogoj, naložen lastnostim, kumulativen, kar pomeni, da mora element zadovoljiti vse izbirnike, da pridobi videz ali obnašanje, ki ga definirajo. Če se izbirniki nanašajo na oznake HTML Vrstni red, v katerem se pojavljajo, mora biti padajoč po stopnji vključenosti: najprej najvišja hierarhična raven in nazadnje najnižja.

V prejšnjem primeru so elementi definirani div ki so tudi temperaturnega razreda in elementi, ki imajo tako temperaturni razred kot razred porabe (oba hkrati) kot pri class="temperatura consumo". Elementi <div> Kode HTML z class="temperatura" imeli bi visoko 100 %

Lastnosti CSS za definiranje besedila

Ločimo lahko med tremi vrstami lastnosti, ki vplivajo na videz besedila: (1) tiste, ki določajo pisavo, s katero je predstavljeno, (2) tiste, ki določajo videz dobesednega (vsebine besedila) in (3 ) generične, torej tiste, ki vplivajo tako na videz besedila kot na videz drugih sestavin. Na splošno bo tisto, kar je bilo rečeno za razlago tistih iz zadnje skupine, veljalo tudi za iste lastnosti, ki se uporabljajo za druge elemente.

Tipografija (pisava)

• font-family označuje ime pisave, uporabljene za element. Napišete lahko posamezno ime ali seznam pisav, ki bodo uporabljene alternativno, če želena ne obstaja, po prednostnem vrstnem redu in imena ločite z vejicami. V istem smislu je mogoče uporabiti generične pisave z imeni monospace, serif, sans-serif, cursive, fantasy. Od teh generičnih pisav je najpomembnejša (za predstavitev podatkov, ki so pri roki) prva, ki bo, kot pove že njeno ime, uporabljala pisavo s fiksnimi razmiki, ki je na voljo v sistemu in jo prednastavi brskalnik. Drugi, serif, bo uporabil privzetega, ki je na voljo serif (finishing ali grace). Brez dražbe, če je naveden tretji, sans-serif. Posnemanje ročno narisanega pisanja z cursive (jasno je, da bi ga lahko še izboljšali) in okrasno tipografijo sistema s fantasy, zadnji od petih.

  Kar se tiče kode CSS Presledki imajo poseben pomen kot ločilo; kadar je ime družine pisav sestavljeno iz več besed, ločenih s presledki, je zapisano med narekovaji, da se izognemo zmedi.

  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;

  Spletni brskalniki lahko uporabljajo lokalne pisave (tiste, ki so nameščene v sistemu, v katerem delujejo), pa tudi druge, ki so posebej naložene, celo prekrivajo tiste, ki so nameščene lokalno. Če želite naložiti pisavo, uporabite @font-face z navedbo njegovega imena, lokacije prenosa njegove definicije in, če je primerno, opisa njegove oblike.

  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 prvi od dveh definicij v prejšnjem primeru je naložena črka dokumenta Sircuito-Expanded-Light.eot ki se nahaja v mapi EOT znotraj glavne (korenske) mape in je dodeljeno kot družinsko ime CircuitExpandedLight. Mimogrede, vam je všeč ta pisava? Brezplačno je, lahko brezplačno prenesite pisavo Sircuito, ki sem jo oblikoval za sliko GranaBot.

  Kot je razvidno iz primera, lastnost url, ki ustreza enotni iskalnik virov, vam omogoča, da določite lokacijo dokumenta s pisavo, ki je prenesena. Poševnica se uporablja za ločevanje imen različnih map od poti do pisave, začenši s tisto, ki vsebuje dokument, iz katerega je klic izveden, ali od korena, če URL Začnite s palico.

  Drugi primer uporablja več alternativnih dokumentov, tako da ista definicija deluje za več brskalnikov (od katerih bo vsak naložil tip, ki ga je sposoben interpretirati)

  Zadnja vrstica definicije vključuje lastnost font-smoothing za zmehčanje črke (uporabi a antializirajoče). Ker ni standardna lastnost, se uporablja predpona -webkit.

• font-size služi za označevanje velikosti črke kot v font-size:12px;

• font-weight Nastavi debelino pisave. Lahko se izrazi kot številska vrednost, običajno večkratnik 100 med 100 in 900, glede na običajne tipografske teže ali pogosteje z imenom: normal za debelino podlage, bold za drzne, bolder za različico, ki se običajno imenuje črna, light za globo (običajno imenovano lahka) in lighter za najtanjše (včasih imenovane tanke).

  Številčna vrednost običajne različice pisave je 400 (brez enot) in 700 za krepko različico.

  Privzeto, če ni navedena nobena druga vrednost, je videz pisave tisti, ki ustreza normal ali 400 torej, če ni bil spremenjen v generičnem elementu ali v vsebniku, iz katerega deduje, ni treba navesti font-weight z vrednostjo normal.

• font-stretch Uporablja se za označevanje širine črke, če je na voljo v ustrezni družini. Možne vrednosti, ki jih lastnost lahko sprejme, razvrščene od najožje do najširše, so: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. Z istimi merili, ki so bila uporabljena v prejšnji lastnosti, je privzeta širina normal in ga ni treba izrecno navesti, razen če je bil spremenjen v višjem hierarhičnem redu od definiranega.

• z font-style Označite lahko, ali je besedilo narisano s poševno ali poševno črko, kar vpliva na videz, ali s kurzivno črko, ki izraža poseben pomen (npr. tuje besede), ali z okroglo črko, torej niti s prejšnjimi. ali normalno. vrednost oblique izpolnjuje prvo funkcijo, funkcijo videza in vrednosti italic drugi. Dejstvo, da je videz obeh pogosto podoben ali celo enak, pomeni, da se raba (pomen) včasih zamenjuje, zato je vredno biti pozoren. Kot pri drugih lastnostih, normal služi za deaktiviranje prejšnjih vrednosti.

• text-decoration služi za podčrtavanje (z vrednostjo underline), prečrtano (z vrednostjo overline), prečrtaj (z vrednostjo line-through) ali bliskavico (z vrednostjo blink) besedilo, na katerega vpliva ta lastnost.

• Za dokončanje serije tipografskega vidika, čeprav za našo aplikacijo to ni zelo pomembno, font-variant, omogoča prijavo majhne kapice (male velike tiskane črke) k besedilom.

Besedilo, ki ga

• text-align pove brskalniku, kako naj bo blok besedila poravnan. Možne poravnave so levo (kar velja za privzeto) s kodo left, sredina z vrednostjo center, prava uporaba right in upravičeno na obeh koncih z justify.

• line-height nastavi ločitev med vrsticami besedila. V tem primeru, če so uporabljeni odstotki, vrednost 100 % ustreza višini besedila namesto meritvi vsebnika. Najpogosteje uporabljena mera glede na besedilo ustreza 120 %. 100-odstotna črta bi pomenila, da se dno ene vrstice dotika vrha naslednje. Čeprav oblikovanje tipografije običajno vključuje nekaj prostora, je običajno med vrsticami pustiti malo več prostora.

  Za izražanje razmika med vrsticami je mogoče navesti tudi koeficient (vrednost brez enote), s katerim izračunamo višino črte glede na višino besedilnega polja.

• letter-spacing je vrednost presledka med črkami besed, ki se v tipografiji imenuje kerning o sledenje.

• word-spacing predstavlja mero presledkov med besedami.

• white-space nastavi vedenje belih prostorov v besedilu. Ko je vrednost uporabljena normal, ki je vzet privzeto, združuje več praznih prostorov v kodi HTML v eni od predstavitev na spletni strani (ki jo prikaže brskalnik) in vzame prazne prostore kot referenco za prekinitev vrstice, če v bloku ni prostora.

  Vrednost nowrap Prav tako združi ponavljajoče se prazne prostore v enega, vendar ne razdeli vrstic besedila v praznih prostorih, tudi če se vrstica ne prilega vsebniku, po potrebi prelije prostor in po potrebi piše zunaj. Za jasno razdelitev črt lahko uporabite oznako <br> de HTML.

  Uporaba pre Prazni prostori niso združeni tako, da so združeni v enega samega, niti vrstice niso razdeljene z uporabo presledkov kot reference.

  pre-line združite ponovljene praznine in po potrebi prekinite črte, pri čemer uporabite praznine kot referenco.

  pre-wrap ohrani ponavljajoče se presledke in po potrebi prekine vrstice z uporabo presledkov kot reference.

Barva

En CSS barva se lahko izrazi glede na RGB barvni model ali glede na Barvni model HSL in v obeh primerih so lahko vključene informacije o preglednosti, vrednost četrtega kanala, ki se običajno kliče alfa kanal o alfa sestava, iz katerega nastaneta modela RGBA in HSLA.

Za izražanje barve v obliki RGB z uporabo šestnajstiškega zapisa se uporablja sintaksa #RRGGBB, pri čemer je RR vrednost rdeče komponente (načeloma z uporabo dveh šestnajstiških števk), GG vrednost zelene komponente in BB vrednost modre komponente. Kot že rečeno, če imata dve števki vsake komponente enako vrednost, jo lahko izrazimo kot #RGB omejevanje števila razpoložljivih barv na tako imenovane spletne varne

Poleg tega načina predstavljanja barve, najbolj klasičnega in uporabljenega, se lahko izrazi kot rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) da ga označite v obliki RGB, HSL in njihove ustrezne oblike z navedbo preglednosti (alfa kanal)

Če ni drugače zahtevano z dodajanjem pripone enote, RGB model uporablja decimalne vrednosti od 0 do 255, za tri komponente, vrednost alfa komponenta je koeficient (decimalno od nič do ena) in prva vrednost Barvni model HSL, odtenek, je decimalna vrednost v razponu od 0 do 360 (brez enot), ki predstavlja kot. Vrednosti nasičenosti in svetilnosti HSL model Običajno so izraženi v odstotkih.

Kot je bilo že rečeno, čeprav je njegova uporaba redka, lahko barve označimo z imenom v formatu color:black; namesto color:#000000;. Prva oblika je bolj berljiva, vendar je omejena na kratko tabelo vrednosti, ki jo je tudi težje številčno spremeniti iz aplikacije, napisane v JavaScript.

Za naš predlog grafične predstavitve podatkov iz senzorjev, povezanih z internetom stvari, bomo potrebovali le tri lastnosti, povezane z barvo. Služili bodo tako za označevanje imena besedila, ki je zdaj razloženo, kot za označevanje imena katere koli komponente, ki ga podpira.

• color označuje barvo elementa HTML in tistega, kar vsebuje (ki ga podeduje), razen če je izrecno spremenjeno s posameznim dodeljevanjem drugih barv.

• background-color Uporablja se za določitev barve ozadja elementa HTML. Poleg označevanja barve kot vrednosti RGB o HSL lahko uporabite posebno vrednost transparent da predmet nima barve ozadja in je mogoče videti, kaj se nahaja za njim, to pomeni, da ne prekriva elementov, na katerih je narisan.

• opacity omogoča nastavitev motnosti (posredno, prosojnosti) elementa in vse njegove vsebine (ne zamenjujte je s prosojnostjo ozadja). Če je prosojnost dodeljena elementom, ki jih vsebujejo drugi, ki so sami prosojni, se bo to povečalo, ne bo delovalo ločeno. Predmeta, ki je v prosojnem predmetu, ne morete narediti bolj neprozornega. Vrednost opacity Izražen je kot koeficient, kot je opacity:0.5; za označevanje 50 % motnosti.

  Starejše različice Microsoftovega brskalnika te lastnosti niso uporabljale, vendar so jo imele filter (filter), ki bi med drugimi vrednostmi lahko podpiral alfa (za alfa kanal), ki jim je mogoče dodeliti odstotek motnosti opacity glede na format:

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

Ukrepi

En CSS, merjenje elementov <div>, ki smo ga izbrali za sestavo grafičnega vsebnika, nastavimo z width (širina) in height (alt).

med vsebino <div> in njen obod je območje polnjenja, ki je določeno z vrednostjo padding. Obod predmeta obdaja rob, katerega meritev je podana z lastnostjo border. Ločevanje zunanjosti objekta <div> od drugih okoliških predmetov obstaja prostor, katerega meritev določa margin.

V normalnih pogojih meritev prostora, ki ga uporablja predmet <div> se lahko izračuna kot vsota njegove širine ali višine in oblazinjenja (padding) plus obroba (border) plus marža (margin). Ko je ustrezna meritev ugotovljena, je uporaben notranji prostor objekta <div>, je ta sestava zelo praktična, vendar če je znana skupna razpoložljiva meritev ali je mogoče to vedenje spremeniti, privzeto nastavljeno, tako da je skupna meritev širine in višine tista, ki jo označuje width (širina) in height (višina) tako, da namesto dodajanja odštejete meritve oblazinjenja, obrobe in roba. Za uporabo tega načina dodelite lastništva box-sizing vrednost border-box (privzeto je content-box)

Naslednji diagram grafično prikazuje vrednosti, ki izhajajo iz width (širina) in height (visoko), če uporabljate box-sizing:border-box; (skupaj) ozbox-sizing:content-box; (znotraj)

Vrednosti meritev so izražene z enotami, ki so že bile razložene. Ko gre za lastnosti, ki jih določa več vrednosti, se lahko številke, izražene z različnimi vrstami povprečij, mešajo. Poleg tega obstaja nekaj posebnih vrednosti, ki so pomembne za uporabo, ki jo bomo uporabili pri tej izvedbi senzorskih grafov v IoT. Natančneje, lahko uporabimo vrednost auto na nepremičnini margin kot vir za centriranje predmetov v nekaterih okoliščinah.

V prejšnjem primeru je za razred “small_box” definirana obroba debeline 2 slikovnih pik, narisana s črno črto (#000000) neprekinjeno (solid). V razredu »big_box« je črta, uporabljena za obrobo, črtkana (dashed) in rdeča barva (#FF0000). Za ločeno izražanje teh vrednosti lahko uporabimo border-width za debelino, border-style za možgansko kap in border-color za barvo. Te lastnosti robov so nato sestavljene in jih tvorijo zgornje, desne, spodnje in leve značilnosti, ki sledijo smeri urinega kazalca, kot je razloženo zgoraj.

Oba razreda, ki sta bila definirana, imata enake meritve, vendar je prvi manjši, ker je uporabljena vrednost border-box za lastnino box-sizing, so oblazinjenje, obroba in rob narisani znotraj predmeta namesto okoli vsebine, kot je privzeto. V razredu "big_box" ni navedeno, zato je vrednost prevzeta privzeto content-box zaradi česar se oblazinjenje, obroba in rob povečajo na velikost, ki jo označuje width y height.

Vrednost roba razredov v zgornjem primeru je 10 slikovnih pik na vrhu, desno, spodaj in levo, tako da bi jo lahko izrazili kot eno samo vrednost margin:10px;. Zelo zanimivo je poznati to alternativo za razumevanje kode, ki so jo razvile tretje osebe, čeprav je v tem predlogu izvedbe, da bi bil bolj berljiv, predlagana navedba, ponavljanje, vrednosti.

Trije razredi v prejšnjem primeru dajejo enak rezultat, pri čemer je definicija tako imenovanega "lakoničnega" bolj kompaktna in manj tako imenovanega "zgovornega", ki je bolj kot zaradi dodajanja jasnosti branja oblika običajna uporablja se za spreminjanje nekega delnega, konkretnega vidika lastnosti, pri čemer se druge vrednosti ponovno uporabijo z dedovanjem (zagotavlja jih vsebnik ali jih zagotavlja eden od razredov, dodeljenih elementu). Če bi bila obremenitev strežnika zaradi dodatnega besedila tega načina definiranja lastnosti in druge okoliščine, ki bi naredile kodo bolj berljivo, kot so komentarji, povečale velikost in s tem promet, relevantne, bi bilo mogoče obdelati (na primer na primer) iz PHP kot del strategije ustvarjanja kode iz tega jezika.

Dimenzije box modela vplivajo predvsem na elemente <div> vendar je mogoče to vedenje vsiliti drugim elementom z lastnostjo display in vrednost block. Če želite, da element teče kot besedilo v vrstici, uporabite display:inline; in oba vedenja, meritve in pretok, je mogoče kombinirati z display:inline-block;

Vrednost none na nepremičnini display, ki se uporablja kot display:none;, omogoča tudi skrivanje predmetov, kar bo služilo za njihov "vklop" in "izklop". JavaScript.

Če dimenzije elementa niso podane, sprejme kakršne koli dimenzije, ki so potrebne, da se njegova vsebina ujema (pravzaprav vsebino ujema, ne da bi bilo treba določiti dimenzijo). Če pa so dimenzije navedene, se lahko zgodi, da vsebovani predmeti ne ustrezajo; v tem primeru se dimenzije ne upoštevajo, povečajo se tako, da je vidna vsa vsebina.

Tako da so elementi, vsebovani v drugi fiksni meritvi, obrezani, ko presežejo velikost, se uporabi lastnost overflow z vrednostjo hidden. z vrednostjo scroll, predmete, ki prelivajo posodo, tudi izrežemo, kot se to zgodi pri hidden vendar je prikazan drsni trak, ki ga lahko vidite, ko ga premikate. Vrednost auto omogoča, da se drsni trak prikaže le, kadar je to potrebno glede na velikost vsebine.

Določite lahko tudi minimalno velikost, tako da vsebniki zasedejo ta prostor, tudi če vsebina tega ne potrebuje, in ne da bi omejili njihove dimenzije, da se povečajo, ko vsebina to zahteva. Lastnosti, ki so zadolžene za to nalogo, so min-width za ačo in min-height za visokega. V nasprotnem smislu, max-width nastavite največjo širino in max-height največja višina, ki se izniči width že height.

Tok elementov na spletni strani

Pravokotniki (bloki), ki smo jih definirali z elementi <div>, so privzeto nameščeni drug pod drugim. Če želite spremeniti to vedenje, lahko uporabite lastnost float, ki označuje left o right kot vrednost, tako da tečejo od leve proti desni oziroma od desne proti levi. Nasprotno, da preprečite, da bi en predmet "lebdel" desno ali levo od drugega, lahko uporabite lastnost clear z vrednostmi left, right o both, ki preglasijo tok od leve proti desni, od desne proti levi ali oboje.

V nasprotju s tem, kar se zgodi v drugih okoliščinah, je tok proizveden float ne spreminja samodejno dimenzij vsebnika, zato ga je koristno vključiti v njegove lastnosti overflow:auto; prisiliti, da se spremeni velikost (višina) posode, ko jo predmet zaradi svoje lokacije prelije float.

Drug način za konfiguriranje toka vsebine elementa je razdelitev v stolpce z lastnostjo column-count (ki bi ga trenutno moralo spremljati -webkit-column-count in -moz-column-count) Velikost stolpcev je mogoče označiti (pravzaprav predlagati) z column-width (-webkit-column-width -moz-column-width) in ločitev med stolpci z column-gap (-webkit-column-gap -moz-column-gap)

Da bloki niso razdeljeni in je njihova vsebina porazdeljena v več stolpcev, lahko uporabite display:inline-block; čeprav to zagotovo pomeni. pustite del stolpca neuporabljen.

Položaj

Za določitev lokacije elementov na spletni strani CSS uporablja več načinov pozicioniranja, ki so lahko različni za vsak element, kar pomeni, da je možno mešati različne kriterije pozicioniranja na istem spletnem mestu.

• position:static; To je privzeto pozicioniranje (ni ga potrebno označiti, če ni bilo predhodno spremenjeno). Ta vrsta pozicioniranja sledi "naravnemu" toku strani: en element za drugim se začne z leve, raste, dokler tam je prostor, desno in od zgoraj navzdol. Za določanje svoje lokacije ne uporablja vodoravnih ali navpičnih koordinat, temveč sledi položaju, ki ustreza vrstnemu redu predmeta.

• position:fixed; Uporablja se za postavitev predmeta na fiksen položaj v oknu brskalnika (kot je na primer meni). Lokacija elementa je podana vodoravno z left o right za določitev ločitve na levi oziroma desni oziroma s top o bottom za ločevanje nad ali pod robom okna brskalnika (viewport).

  Z uporabo te in drugih vrst pozicioniranja se lahko predmeti prekrivajo. Prvi narisani predmeti (definirani prej v kodi HTML) lahko pokrivajo pozneje narisani (tisti, ki so vključeni pozneje v kodo HTML). Če želite spremeniti običajni vrstni red, lahko uporabite lastnost z-index, predmeti z najvišjo vrednostjo v z-index Pokrivajo tiste z manjšo vrednostjo.

• position:relative; Premakne element iz njegovega "normalnega" položaja, kot je označeno z lastnostmi left o right vodoravno in top o bottom navpično.

• position:absolute; Postavi element v fiksen položaj glede na predmet, ki ga vsebuje. Njegova lokacija je izražena, kot v prejšnjih primerih, s left,right, top y bottom

  Ime te vrste pozicioniranja je na začetku zmedeno, saj se položaj vzpostavi glede na objekt, ki je hierarhično nadrejen tistemu, ki lastnost uporablja, kar pa je sporno, ali je absolutno.

  Pomembno je tudi vedeti, da je element, ki vsebuje predmete <div> ki ga uporabljamo na prvi hierarhični ravni je <body>, torej, če <div> kaj uporabljate position:absolute; ni v drugem, bo njegovo pozicioniranje "absolutno" glede na spletno stran.

Lastnosti za določene medije in značilnosti (medijske poizvedbe)

CSS vam omogoča, da v istem slogovnem listu definirate različne videze za različne medije ali podpore, odvisno od vrste uporabljene naprave (kot je zaslon ali tiskalnik), njenih dimenzij, orientacije (navpično ali ležeče) ali njene ločljivosti. To služi za prikaz iste spletne strani na najprimernejši način glede na kontekst.

Za sklicevanje na medije uporabite @media na podoben način, kot je bilo že pojasnjeno za pisave z @font-face, v oklepajih ({ y }) definicije različnih elementov: oznake HTML, razredi, identifikatorji ...

Vrste medijev, ki so na voljo v CSS3 Zvok: all, za sklicevanje na katerikoli medij (vse), screen za katero koli vrsto zaslona (starejše različice CSS Ločili so med TV in računalniškimi monitorji) print za tiskalnik in speech za avdio spletne bralnike, ki interpretirajo informacije z glasovnimi sintetizatorji.

V zgornjem primeru imajo elementi besedilnega razreda črno ozadje in belo besedilo na zaslonu, vendar so natisnjeni z belim ozadjem in črnim besedilom.

Za medije je mogoče določiti pogoje za definiranje različnih naborov lastnosti na podlagi, na primer, razpoložljive ločljivosti ali razmerja vidnega polja. Te pogoje in sama sredstva je mogoče sestaviti z logičnimi operacijami and, not y only zahtevati, da izpolniš več, da ne izpolniš oz.

Med razpoložljivimi pogoji se nam zdijo še posebej zanimivi max-width (največja širina okna), max-height (največja višina okna), min-width (najmanjša širina okna), min-height (najmanjša višina okna), orientation (orientacija, ki je lahko landscape, pokrajina, oz portrait, navpično), max-resolution (največja ločljivost v dpi, pik na palec ali in dpcm, točke na centimeter) in min-resolution (minimalna ločljivost, tudi v dpi o dpcm).

V prejšnjem primeru začnemo z definiranjem barve ozadja, tako da imajo v vseh medijih elementi razreda main_block barvo ozadja #CCCCCC. Ko je prikazano na zaslonu in je okno široko vsaj 320 slikovnih pik, bosta levi in ​​desni rob samodejna (centrirana bloka), širina elementa pa bo 300 slikovnih pik. Če je ločljivost zaslona 640 slikovnih pik, bo širina bloka 620 slikovnih pik. Ker druga definicija medija ne vključuje informacij o robu in bodo naprave, ki izpolnjujejo drugi pogoj, izpolnjevale tudi prvega, bo vodoravni rob še vedno samodejen.

Končno se v primeru barva ozadja spremeni tako, da je na izpisu bela.

Običajen način definiranja slogov za različne medije je običajno začeti s skupnimi, običajno barvami in pisavami, ki jim sledijo najbolj restriktivne geometrije (meritve naprav z najmanjšim številom slikovnih pik), običajno za pametne telefone in tablice, kjer poleg Pomembno bo vedeti, ali se uporabljajo navpično ali vodoravno z orientation zagotovo pa tudi njegovo razrešitev z min-resolution. Nato so navedene različne velikosti za večje zaslone, običajno pa se konča s tiskalnimi in govornimi mediji, ki so v primeru IoT grafike izpuščeni.

Uporabite @media Uvedba pogojev, kot so dimenzije, ločljivost in orientacija, omogoča oblikovalcu, da ustvari eno samo spletno stran, ki bo z različnimi slogi videti najbolj primerna za vsako napravo. To vedenje se običajno imenuje odzivno oblikovanje; prilagodljiv dizajn, v zelo svobodnem prevodu.

CSS za grafični vsebnik SVG

S tem, kar je bilo pojasnjeno doslej, je zdaj mogoče definirati sloge, ki jih Vsebnik HTML za grafiko SVG s katerim predstavljajo stanje senzorjev, povezanih z IoT. V naslednji kodi je predlog, ki vključuje, komentirano, porazdelitev v stolpcih, ki ustreza večjemu številu grafov od tistih, ki jih uporablja predlog serije člankov, tako da ga je mogoče ponovno uporabiti v drugih primerih.

Spodaj si lahko ogledate, kako bi izgledali ti slogi. Koda HTML iz predlaganega vsebnika za grafiko SVG iz prejšnjega članka.

Naslednji članek v tej seriji pojasnjuje kako risati s SVG Podatkovni grafi stanja senzorjev, povezanih z internetom stvari (IoT).