Määritä CSS:llä anturigrafiikkaverkon ulkonäkö IoT:ssä

Sarjan edellisessä artikkelissa kuinka tehdä tilakaavioita esineiden Internetiin IoT:hen yhdistetyistä antureista selittää tien käyttää HTML-kielellä kehitettyä verkkosivua grafiikan rakenteena. Web-sivun elementit, jotka oli minimoitu objektien avulla <div>, eivät suoraan määrittäneet sen ulkonäköä, vaan viittasivat siihen ulkoasutiedot tyylisivulle CSS, joka selitetään tässä sarjan osassa.

Ratkaisussa, jonka ehdotan tekemään kaavioita IoT:hen liitetyistä antureista, käytetään dokumenttia CSS joka on ladattu asiakirjasta HTML. Jos koodi HTML luodaan palvelimella olevasta sovelluksesta, esimerkiksi sisään PHP, se olisi hyvin yksinkertaista sisällyttää se osaksi verkkosivun määrittelevää koodia sen lataamisen sijaan, mitä voisi hieman optimoida tallentamalla puhelu. Riippumatta siitä, mikä vaihtoehto valitaan, kätevin tapa sisältää muokkaa koodia CSS erillisessä asiakirjassa hallitaksesi sitä mukavammin ja voidaksesi käyttää sitä uudelleen. Tämän artikkelisarjan opetusohjelmassa kehitetyssä esimerkissä sille on annettu nimi estilo.css.

Samalla tavalla, Monimutkaisia ​​projekteja käsiteltäessä on suositeltavaa käyttää useita erillisiä tyylisivuja eri asiakirjoissa, jotta voidaan käyttää uudelleen tiettyjä toimintoja ilman, että niitä kaikkia tarvitsee ladata joka kerta, ja muokata koodia helpommin jakamalla se eri asiakirjoihin vastaavan loogisen rakenteen mukaisesti.

Tyylit CSS He yrittävät kuvata web-sivun käyttäytymisen ja ulkonäön kaikkia ääripäitä useilla eri lähestymistavoilla, jotka kaikki ovat yhtä aikaa päteviä, samalla kun he yrittävät kunnioittaa yhteensopivuutta aikaisempien versioiden kanssa mahdollisimman paljon. Tämä tarkoittaa, että on olemassa monia mahdollisia ratkaisuja, jotka ratkaisevat samat tarpeet. sekä suuri määrä käytettävissä olevia resursseja (ominaisuuksia CSS). Artikkelin didaktisen lähestymistavan vuoksi ja jotta uusia käyttäjiä ei hämmennetä CSS, vain ominaisuudet ja lopullisen tavoitteen edellyttämät rakenteet, jonka tarkoituksena on esittää graafisesti esineiden Internetiin yhdistetyistä antureista saatuja tietoja. Samaan aikaan on myös a pieni johdatus CSS, CSS-tyylisivut.

CSS-ominaisuuksien muotoilu

El perusmuoto Se koostuu ominaisuuden nimestä, kaksoispistemerkistä, ominaisuuden arvosta ja puolipisteestä. nombre:valor;

CSS voit käyttää eri mittayksiköitä samassa asiakirjassa mukaan lukien ne, jotka liittyvät rakenteeseen (elementin sisältämän mittaus) prosentteina suhteessa laitteeseen, jolla ne on esitetty, kuten pikseliä, tai absoluuttisina, kuten senttimetreinä. Yksiköt ilmaistaan ​​arvon jälkeen seuraavan lyhennekoodauksen mukaisesti.

Sovelluksessa, jota aiomme tehdä, on tärkeää ottaa huomioon vähintään kolme tyyliyksikköä. Mittausten prosenttiosuus suhteessa tuotteen säiliön kokoon, pikseli mittauksiin näytön resoluution mukaan ja millimetrit (itse asiassa mikä tahansa absoluuttinen mitta) tulostettujen raporttien tekemiseen.

On joitain monimutkaiset ominaisuudet, tai komposiitti, jotka riippuvat useista arvoista (kuten väri, koko, tyyli...), arvon ilmaisemiseksi CSS:ssä on kaksi mahdollisuutta: kirjoittaa sopivassa järjestyksessä kaikki arvot välilyönnillä erotettuina tai käytä kompleksia vastaavien yksinkertaisten ominaisuuksien summaa. Esimerkiksi objektin kaikki neljä marginaalia voidaan määrittää yhdessä ominaisuudessa margin tai voidaan asettaa ominaisuuksilla margin-top, margin-right, margin-bottom y margin-left. Muuten, tätä järjestystä (myötäpäivään) seuraa kuvaukset arvoista, jotka "ympäröivät" elementtiä, kuten sisä (täyte) tai ulkomarginaali, reunus...

Tähän mennessä selitetyn perusteella voimme nyt nähdä joitain esimerkkejä ominaisuuksista

Yllä olevassa esimerkissä Väri määritetään käyttämällä 6 heksadesimaalinumeroista koodia, jotka edustavat pareittain punaisen, vihreän ja sinisen komponentin arvoa.. Kun tapahtuu, kuten esimerkissä, että kaksi numeroa ovat yhtä suuret, se voidaan lyhentää nimellä #F09 (joka muuten vastaa ns. "verkkoturvallisia värejä"). Vältän lopullisessa ehdotuksessa näiden lyhenteiden käyttöä kriteerien yhtenäistämiseksi ja helpottamiseksi. Voit myös lyhentää monimutkaisten ominaisuuksien arvoja, kuten margin esimerkissä, kun kaikki arvot tai vastakkaiset parit toistetaan. Samalla tekstin tallennuslinjalla on myös mahdollista jättää yksikkö pois määritettäessä ominaisuutta, kun arvo on nolla, koska sillä ei ole tässä tapauksessa merkitystä.

Joillakin arvoilla on sen lisäksi, että ne voidaan ilmaista numeerisesti, nimi mikä tekee koodista luettavamman ja auttaa sinua muistamaan ne paremmin. Esimerkiksi kohteen heksadesimaalikoodin sijaan #FFFFFF (o #FFF), voidaan kirjoittaa white samalla tuloksella. Tällä tavalla musta väri, #000000 (o #000), voidaan korvata black.

myös siellä arvot ilmaistaan ​​erityisellä koodilla, nimellä. Esimerkiksi osoittamaan, että selain asettaa sivumarginaalin automaattisesti (normaalisti se vastaa keskitoimintoa), käytetään erikoisarvoa auto, jolla ei ole numeerista vastaavuutta minkään arvon kanssa.

että ilmaista erityinen tapa käyttää kiinteistön yhdistelmäarvoja (monimutkaisia). CSS Voit valita muotoja, joiden syntaksi on samanlainen kuin funktioiden. Esimerkiksi värin ilmaiseminen sen punaisen, vihreän ja sinisen komponentin kolmena arvona ( RGB malli) kirjoitettaisiin color: rgb(128, 255, 64);. Tämän ilmaisutavan sisällä on myös mahdollista käyttää yksiköitä; Yllä olevassa esimerkissä värikomponentit ovat desimaaliarvo 0-255, mutta tämä voi olla helpompi ilmaista prosentteina kunkin värikomponentin kokonaismäärästä, jolloin se voidaan kirjoittaa myös muodossa color: rgb(50%, 100%, 25%);.

Arvojen laskeminen CSS:ssä

Uusimmissa versioissa CSS se on mahdollista tehdä yksinkertaisia ​​matemaattisia operaatioita arvojen laskemiseksi. Käytä tätä varten calc ja suoritettava toiminto ilmaistaan ​​suluissa. Voit ilmoittaa yksiköitä, sulkeita ja yksinkertaisia ​​operaattoreita, kuten summa (+), vähennys (-), kertolasku (*) ja jako (/). Ilmaus olisi tyyppiä width:calc((90%-20px)/2));.

Muuttujia voidaan käyttää matemaattisissa operaatioissa CSS viittaamalla yhden kiinteistön laskennassa toisen arvoon var. Jotta muuttujaa voidaan käyttää ilman, että tarvitsee viitata tyylin varsinaiseen ominaisuuteen, on myös sallittua viitata ominaisuus, jota ei ole olemassa. CSS suosittelee muotoa --nombre-variable (kaksi väliviivaa keksityn ominaisuuden nimen edessä). Tällä tavalla elementin korkeuden määrittäminen puoleksi sen leveydestä lausekkeen sisään CSS kuten height:calc(var(width)/2); ja määritelläksesi uuden muuttujan "paksuus" (jota muut ominaisuudet voisivat käyttää) kirjoittaisit esim. --grosor:4px; jotta voidaan myöhemmin viitata siihen nimellä margin-top:calc(var(--grosor)*4);

Selainriippuvaiset CSS-ominaisuudet

CSS Se on konsortion standardoima spesifikaatio W3C (World Wide Web Consortium) mutta monet ominaisuudet tai käyttäytymistyylit saavuttavat selaimet ennen kuin ne ovat osa määritystä versiosta.

niin että koodi CSS toimii selaimen nykyisten ominaisuuksien kanssa, mutta älä menetä yhteensopivuutta uusien ominaisuuksien kanssa, käytetään etuliitettä. Tämä etuliite riippuu renderointimoottori joka käyttää verkkoselainta, johon haluat viitata (jolle tyyli on määritetty).

Etuliite -webkit Se toimii selaimissa, jotka perustuvat WebKit kuten safari o kromi. Etuliite -moz Sitä käytetään selaimissa, jotka perustuvat renderointimoottori de mozillatällä hetkellä GeckoKuin Firefox ja sen johdannaiset. Viitata EdgeHTML, renderointimoottori selaimen reuna Microsoftilta (aiemmin kolmikärki), käytetään etuliitettä -ms. Selaimen tapaus Opera on hieman erikoinen, koska hän alkoi käyttää omaansa renderointimoottori, johon viitataan -o, mutta toimii tällä hetkellä kanssa WebKit, joka ilmaistaan ​​muodossa -webkit.

Jos haluat käyttää selaimeen viittaavaa ominaisuutta, kirjoita sen nimi, etuliite ja erottele se yhdysmerkillä kuten kohdassa -o-border-radius:10px;, joka asettaisi pyöristetyn reunuksen (pyöristetyn kulman) selaimen vanhemmissa versioissa Opera.

Comments

Selventämään koodia CSS Voit käyttää kommentteja, jotka tekevät siitä luettavamman, vaikka sen koko kasvaakin. Kommenttien syntaksi CSS Se on kuin monirivisiä kommentteja C + + jonka varmasti jo tiedätkin: alkaen /* ja päättyy */Kuten C + +, voi varata useita rivejä.

Valitsimet

Määritelmä ominaisuudet määritetään dokumentin objekteille HTML ryhmittelemällä ne valitsimiin ja sulkemalla ne olkaimet. Valitsin voi viitata kielielementtiin HTML (etiketti), kuten div, luokka (määritetty class en HTML) tunniste (määritetty id en HTML) tai kaikki ("yleinen valitsin"), joita edustaa tähdellä (*). Seuraava esimerkki näyttää kunkin tyypin valitsimen:

Etiketit HTML ilmaistaan ​​tyylimääritelmässä niiden nimellä, luokat merkitään laittamalla piste ennen nimeä (.) ja punnan merkki (#) tunnisteille.

Osa suurta voimaa CSS asuu mahdollisuus ryhmitellä valitsimia niiden ominaisuuksia määriteltäessä. On olemassa useita tapoja ryhmitellä valitsimia. Ryhmittelemällä ne erottamalla ne pilkuilla, ilmaistaan, että jokaisella mainitulla valitsimella on nämä ominaisuudet.

Edellinen esimerkki osoittaa, että kulutus-, kosteus- ja lämpötilaluokilla on yhteinen väri, leveys ja korkeus. Tässä koodissa on myös uusi käsite: Ominaisuudet voidaan määritellä uudelleen, ja siinä tapauksessa viimeksi kuvatut ominaisuudet hallitsevat. Tällä tavalla lämpötilaluokan elementtien korkeus olisi lopulta 50 % niitä sisältävästä esineestä.

Jos ryhmiteltyjä valitsimia ei eroteta pilkuilla, ominaisuuksille asetettu ehto on kumulatiivinen, eli elementin on täytettävä kaikki valitsijat, jotta se saavuttaa niiden määrittelemän ulkonäön tai käyttäytymisen. Jos valitsimet viittaavat tunnisteisiin HTML Järjestyksen, jossa ne esiintyvät, tulee olla laskeva sisällyttämistasolla: ensin korkein hierarkkinen taso ja viimeisenä alin.

Edellisessä esimerkissä elementit on määritelty div jotka ovat myös lämpötilaluokkaa ja elementit, joilla on sekä lämpötilaluokka että kulutusluokka (molemmat samaan aikaan) kuten class="temperatura consumo". Elementit <div> Koodista HTML kanssa class="temperatura" niillä olisi korkein 100 %

CSS-ominaisuudet tekstin määrittämiseen

Tekstin ulkonäköön vaikuttavat ominaisuudet voidaan erottaa kolmenlaisia: (1) ne, jotka määrittävät fontin, jolla se esitetään, (2) ne, jotka määrittävät literaalin ulkoasun (tekstin sisällön) ja (3) yleiset, eli ne, jotka vaikuttavat sekä tekstin että muiden osien ulkoasuun. Yleensä se, mitä sanottiin selittämään viimeisen ryhmän ominaisuudet, pätee myös samoihin ominaisuuksiin, joita sovelletaan muihin elementteihin.

Typografia (fontti)

• font-family osoittaa elementissä käytetyn fontin nimen. Voit kirjoittaa yksittäisen nimen tai luettelon, mieltymysjärjestyksessä ja erottelemalla nimet pilkuilla, fonteista, joita käytetään vaihtoehtoisesti, jos haluttua fonttia ei ole olemassa. Samoin nimien kanssa on mahdollista käyttää yleisiä kirjasimia monospace, serif, sans-serif, cursive, fantasy. Näistä yleisistä kirjasimista tärkein (käsillä olevan tiedon esittämisen kannalta) on ensimmäinen, joka nimensä mukaisesti käyttää järjestelmässä saatavilla olevaa ja selaimen esiasetusta kiinteävälisistä fonteista. Toinen, serif, se käyttää käytettävissä olevaa oletusarvoa serif (viimeistely tai armo). Ilman huutokauppaa, jos kolmas on ilmoitettu, sans-serif. Jäljittelee käsin piirrettyä kirjoitusta cursive (tapa, jolla sitä voidaan kutsua selvästi parantamaan) ja järjestelmän koristeellinen typografia fantasy, viimeinen viidestä.

  Mitä tulee koodiin CSS Välilyönneillä on erityinen merkitys erottimena, kun kirjasinperheen nimi koostuu useista välilyönnillä erotetuista sanoista, se kirjoitetaan sekaannusten välttämiseksi lainausmerkkien väliin.

  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;

  Web-selaimet pystyvät käyttämään paikallisia kirjasimia (ne, jotka on asennettu järjestelmään, jossa ne toimivat) sekä muita, jotka on erityisesti ladattu, jopa päällekkäin paikallisesti asennettujen kanssa. Lataa fontti käyttämällä @font-face jossa ilmoitetaan sen nimi, määritelmän latauspaikka ja tarvittaessa kuvaus sen muodosta.

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

  Ensimmäisessä kahdesta edellisen esimerkin määritelmästä asiakirjan kirjain ladataan Sircuito-Expanded-Light.eot joka sijaitsee EOT-kansiossa pääkansion (juuri) sisällä ja on määritetty sukunimeksi CircuitExpandedLight. Muuten, pidätkö tästä fontista? Se on ilmainen, voit lataa ilmaiseksi Sircuito-fontti, jonka suunnittelin GranaBot-kuvaa varten.

  Kuten esimerkistä voidaan nähdä, url-ominaisuus, joka vastaa yhtenäinen resurssin paikannus, voit määrittää asiakirjan sijainnin ladatulla fontilla. Vinoviivaa käytetään erottamaan eri kansioiden nimet kirjasimen polusta alkaen siitä, joka sisältää asiakirjan, josta kutsu on tehty, tai juurista, jos URL Aloita baarista.

  Toisessa esimerkissä käytetään useita vaihtoehtoisia asiakirjoja, jotta sama määritelmä toimii useilla selaimilla (joista jokainen lataa sen tyypin, jonka se pystyy tulkitsemaan)

  Määritelmän viimeinen rivi sisältää ominaisuuden font-smoothing pehmentää kirjainta (käytä a antialiasointia). Koska se ei ole vakioominaisuus, käytetään etuliitettä -webkit.

• font-size osoittaa kirjaimen koon sellaisena kuin se on font-size:12px;

• font-weight Asettaa fontin paksuuden. Se voidaan ilmaista numeerisena arvona, tavallisesti 100:n kerrannaisena välillä 100–900, tavanomaisten typografisten painojen mukaan, tai useammin nimellä: normal pohjan paksuudelle, bold rohkeille, bolder versiolle, jota yleensä kutsutaan mustaksi, light hienoille (yleisesti kutsutaan kevyeksi) ja lighter ohuimmille (joskus kutsutaan ohuiksi).

  Fontin normaaliversion numeerinen arvo on 400 (yksikkötön) ja 700 lihavoitulle versiolle.

  Oletusarvoisesti, jos muuta arvoa ei ole ilmoitettu, fontin ulkoasu on se, joka vastaa normal tai 400 niin, jos sitä ei ole muutettu geneerisessä elementissä tai säiliössä, josta se perii, ei ole tarpeen ilmoittaa font-weight rohkeudella normal.

• font-stretch Sitä käytetään osoittamaan kirjaimen leveyttä, kunhan se on saatavilla vastaavassa perheessä. Kiinteistön mahdolliset arvot kapeimmasta leveimpään järjestyksessä ovat: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. Samoilla ehdoilla, joita käytettiin edellisessä ominaisuudessa, oletusleveys on normal ja sitä ei tarvitse nimenomaisesti ilmoittaa, ellei sitä ole muutettu määriteltävää hierarkkista korkeammassa järjestyksessä.

• kanssa font-style Voit ilmoittaa, onko teksti piirretty vinolla tai vinolla kirjaimella, joka vaikuttaa sen ulkonäköön, vai kursiivikirjaimella, joka ilmaisee erityistä merkitystä (esim. vieraita sanoja), vai pyöreällä kirjaimella, eli ei kumpaakaan edellistä. tai normaali. arvo oblique täyttää ensimmäisen tehtävän, ulkonäön ja arvon italic toinen. Se, että molempien ulkonäkö on usein samanlainen tai jopa sama, tarkoittaa, että käyttö (merkitys) on joskus sekava, joten siihen kannattaa kiinnittää huomiota. Kuten muissakin kiinteistöissä, normal poistaa aiemmat arvot käytöstä.

• text-decoration alleviivaa (arvolla underline), yliviivaus (arvon kanssa overline), yliviivaa (arvon kanssa line-through) tai vilkkuu (arvon kanssa blink) teksti, johon tämä ominaisuus vaikuttaa.

• Täydentääksemme sarjan typografianäkökohtia, vaikka se ei ole sovelluksemme kannalta kovin relevantti, font-variant, voit hakea pienet korkit (pienet isot kirjaimet) teksteihin.

Teksti

• text-align kertoo selaimelle, kuinka tekstilohko tulee kohdistaa. Mahdolliset kohdistukset ovat vasemmalla (mitä pidetään oletuksena) koodin kanssa left, keskellä arvoa center, oikea käyttö right ja perusteltu molemmissa päissä justify.

• line-height määrittää tekstirivien välisen eron. Tässä tapauksessa, jos käytetään prosentteja, arvo 100% vastaa tekstin korkeutta säiliön mittauksen sijaan. Eniten käytetty mitta suhteessa tekstiin vastaa 120 %. 100-prosenttinen viiva tarkoittaisi, että yhden rivin alaosa koskettaa seuraavan rivin yläosaa. Vaikka typografiasuunnittelussa on yleensä tilaa, on tavallista jättää hieman enemmän marginaalia rivien väliin.

  Rivien välisen eron ilmaisemiseksi on myös mahdollista ilmoittaa kerroin (yksikkötön arvo), jolla lasketaan rivin korkeus tekstilaatikon korkeuden perusteella.

• letter-spacing on sanan kirjainten välisen tilan arvo, joka typografiassa tunnetaan nimellä kerning o seuranta.

• word-spacing edustaa sanojen välisten välilyöntien mittaa.

• white-space määrittää välilyöntien käyttäytymisen tekstissä. Kun arvoa käytetään normal, joka otetaan oletuksena, yhdistää useita tyhjiä kohtia koodissa HTML jossain web-sivun esityksessä (selain näyttää) ja käyttää välilyöntejä viitteenä rivin katkaisemiseen, jos lohkossa ei ole tilaa.

  Arvo nowrap Se myös yhdistää toistuvia välilyöntejä yhdeksi, mutta ei jaa tekstirivejä tyhjiin tiloihin, vaikka rivi ei mahdukaan säilöön, vuotaa tilan tarvittaessa yli ja kirjoittaa tarvittaessa ulos. Voit jakaa viivat selkeästi käyttämällä etikettiä <br> de HTML.

  käyttämällä pre Tyhjiä välilyöntejä ei myöskään yhdistetä yhdistämällä niitä yhdeksi, eikä rivejä jaeta käyttämällä välilyöntejä viitteenä.

  pre-line yhdistä toistetut aihiot ja katkaise rivit tarvittaessa käyttämällä aihioita viitteenä.

  pre-wrap säilyttää toistuvan välilyönnin ja katkaisee rivejä tarvittaessa käyttämällä välilyöntejä viitteenä.

Väri

En CSS väri voidaan ilmaista mukaan RGB värimalli tai sen mukaan HSL värimalli ja molemmissa tapauksissa voidaan sisällyttää läpinäkyvyysinformaatio, neljännen kanavan arvo, jota yleensä kutsutaan alfa kanava o alfa koostumus, josta syntyy RGBA- ja HSLA-malleja.

Ilmaista väriä muodossa RGB käyttäen heksadesimaalimerkintää syntaksia käytetään #RRGGBB, jossa RR on punaisen komponentin arvo (periaatteessa käyttäen kahta heksadesimaalilukua), GG on vihreän komponentin arvo ja BB on sinisen komponentin arvo. Kuten jo todettiin, jos kunkin komponentin kahdella numerolla on sama arvo, se voidaan ilmaista seuraavasti #RGB rajoittamalla käytettävissä olevien värien määrää niin kutsuttuihin verkkoturvallisiin väreihin

Tämän lisäksi värin edustamistapa, klassisin ja käytetty, se voidaan ilmaista rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) ilmoittaaksesi sen muodossa RGB, HSL ja niiden vastaavat lomakkeet läpinäkyvyysmerkinnällä (alfa kanava)

Ellei toisin pyydetä lisäämällä yksikköpääte, RGB malli käyttää desimaaliarvoja 0-255, kolmelle komponentille arvoa alfa komponentti on kerroin (desimaali nollasta yhteen) ja arvon ensimmäinen arvo HSL värimalli, sävy, on desimaaliarvo, joka vaihtelee välillä 0–360 (ilman yksikköä), joka edustaa kulmaa. Kyllästys- ja kirkkausarvot HSL malli Ne ilmaistaan ​​yleensä prosentteina.

Kuten jo todettiin, vaikka sen käyttö ei ole kovin yleistä, värit voidaan ilmaista niiden nimellä muodossa color:black; sijaan color:#000000;. Ensimmäinen muoto on luettavampi, mutta rajoittuu lyhyeen arvotaulukkoon, jota on myös vaikeampi muokata numeerisesti sovelluksella kirjoitetusta sovelluksesta. JavaScript.

IoT:hen liitettyjen antureiden tietojen graafista esittämistä koskevaa ehdotusta varten tarvitsemme vain kolme väriin liittyvää ominaisuutta. Ne osoittavat tekstin nimen, joka on nyt selitetty, ja osoittavat minkä tahansa sitä tukevan osan nimen.

• color ilmaisee elementin värin HTML ja mitä se sisältää (joka perii sen), ellei sitä nimenomaisesti muuteta antamalla muita värejä erikseen.

• background-color Käytetään elementin taustavärin määrittämiseen HTML. Sen lisäksi, että ilmoittaa värin arvona RGB o HSL voit käyttää erityistä arvoa transparent jotta esineellä ei ole taustaväriä ja on mahdollista nähdä mitä sen takana sijaitsee, eli se ei peitä elementtejä, joille se on piirretty.

• opacity voit asettaa elementin ja sen sisällön läpinäkyvyyden (epäsuorasti, läpinäkyvyyden) (jota ei pidä sekoittaa taustan läpinäkyvyyteen). Jos läpinäkyvyys määritetään muiden sisältämille elementeille, jotka ovat itse läpinäkyviä, tämä lisääntyy, se ei toimi erikseen. Et voi tehdä toisen läpinäkyvän sisältämästä objektista läpinäkymättömämpää. Arvo opacity Se ilmaistaan ​​kertoimena kuten opacity:0.5; ilmaisemaan 50 % opasiteetin.

  Microsoftin selaimen vanhemmat versiot eivät käyttäneet tätä ominaisuutta, mutta niillä oli ominaisuus filter (suodatin), joka muiden arvojen ohella voisi tukea alfaa ( alfa kanava), jolle voidaan määrittää opasiteettiprosentti opacity muodon mukaan:

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

Toimenpiteet

En CSS, elementtien mittaus <div>, jonka olemme valinneet grafiikkasäilön muodostamiseen, on asetettu width (leveys) ja height (altto).

sisällön välillä <div> ja sen kehällä on täyttöalue, joka määritetään arvolla padding. Kohteen kehää ympäröi reuna, jonka mitta on määritetty ominaisuuden kanssa border. Objektin ulkopinnan erottaminen <div> muista ympäröivistä kohteista on tila, jonka mittaus määräytyy margin.

Normaaliolosuhteissa kohteen käyttämän tilan mittaus <div> voidaan laskea sen leveyden tai korkeuden ja pehmusteen summana (padding) plus reunus (border) plus marginaali (margin). Kun määritettävä mittaus on kohteen hyödyllinen sisätila <div>, tämä koostumus on erittäin käytännöllinen, mutta jos tiedetään, on käytettävissä oleva kokonaismitta voiko tätä käyttäytymistä muuttaa, asetettu oletusarvoisesti niin, että kokonaisleveys ja -korkeus on sama kuin width (leveys) ja height (korkeus) vähentämällä siitä pehmusteen, reunuksen ja marginaalin mitta sen lisäämisen sijaan. Käytä tätä tilaa määrittämällä omaisuus box-sizing arvo border-box (oletus on content-box)

Seuraava kaavio näyttää graafisesti tuloksena olevat arvot width (leveys) ja height (korkea), jos käytössä box-sizing:border-box; (kokonaismäärä) taibox-sizing:content-box; (sisällä)

Mittausarvot ilmaistaan ​​yksiköillä, jotka on jo selitetty. Kun on kyse useilla arvoilla määritellyistä ominaisuuksista, eri tyyppisillä keskiarvoilla ilmaistuja lukuja voidaan sekoittaa. Lisäksi on joitain erityisiä arvoja, jotka koskevat käyttöä, jota aiomme tehdä tässä IoT:n anturikaavioiden toteutuksessa. Erityisesti voimme käyttää arvoa auto kiinteistöllä margin resurssina objektien keskittämiseen joissakin olosuhteissa.

Yllä olevassa esimerkissä "small_box" -luokalle on määritetty 2 pikselin paksuinen reunus, joka on piirretty mustalla viivalla (#000000) jatkuva (solid). "Big_box" luokassa reunuksena käytetty rivi on katkoviiva (dashed) ja punainen väri (#FF0000). Ilmaistaksemme nämä arvot erikseen voimme käyttää border-width paksuudelle, border-style aivohalvaukseen ja border-color väriä varten. Nämä reunaominaisuudet ovat puolestaan ​​komposiittisia ja muodostuvat ylä-, oikea-, ala- ja vasemmanpuoleisista piirteistä, jotka seuraavat myötäpäivään, kuten edellä on selitetty.

Kahdella määritellyllä luokalla on samat mitat, mutta ensimmäinen on pienempi, koska arvoa käytettäessä border-box omaisuutta varten box-sizing, täyte, reunus ja marginaali piirretään objektin sisään sen sijaan, että ne olisivat sisällön ympärillä, kuten oletusarvoisesti. "Big_box"-luokassa sitä ei ole ilmoitettu, joten arvo otetaan oletuksena content-box jolloin täyte, reunus ja marginaali kasvavat -merkin osoittamaan kokoon width y height.

Luokan marginaaliarvo yllä olevassa esimerkissä on 10 pikseliä ylhäällä, oikealla, alhaalla ja vasemmalla, joten se voidaan ilmaista yhtenä arvona margin:10px;. On erittäin mielenkiintoista tietää tämä vaihtoehto kolmansien osapuolten kehittämän koodin ymmärtämiseksi, vaikka tässä toteutusehdotuksessa suositellaan arvojen osoittamista, toistamista, jotta se olisi helpompi lukea.

Edellisen esimerkin kolme luokkaa tuottavat saman tuloksen, niin sanotun "lakonisen" määritelmä on tiiviimpi ja vähemmän niin sanotun "puheisen" määritelmän, joka on enemmän kuin luetun selkeyden lisäämiseksi normaali muoto. käytetään muokkaamaan jotakin ominaisuuden osittaista, konkreettista näkökohtaa, käyttämällä uudelleen muita arvoja perinnöllisesti (ne saadaan säilöstä tai jostakin elementille määritetyistä luokista). Jos tämän määrittelytavan ylimääräisen tekstin palvelimelle aiheuttama kuormitus ja muut olosuhteet, jotka koodin luettavuuden lisäämiseksi, kuten kommentit, lisäävät kokoa ja siten liikennettä, olisivat merkityksellisiä, olisi mahdollista käsittele se (esimerkiksi) alkaen PHP osana koodin luontistrategiaa tästä kielestä.

Laatikkomallin mitat vaikuttavat pääasiassa elementteihin <div> mutta on mahdollista pakottaa tämä käyttäytyminen muille ominaisuuden omaaville elementeille display ja arvo block. Jos haluat saada elementin virtaamaan tekstin tavoin rivillä, käytä display:inline; ja molemmat käyttäytymiset, mittaukset ja virtaus, voidaan yhdistää display:inline-block;

Arvo none kiinteistöllä display, käytetään display:none;, voit myös piilottaa esineitä, mikä auttaa "saamaan ne päälle" ja "pois päältä". JavaScript.

Jos elementin mittoja ei ole määritelty, se ottaa kaikki mitat, jotka ovat tarpeen, jotta sen sisältö sopii (itse asiassa se sopii sisältöön ilman, että sitä tarvitsee määrittää). Mutta jos mitat on ilmoitettu, voi tapahtua, että sisällä olevat esineet eivät sovi; Tällaisessa tapauksessa mittoja ei noudateta, niitä suurennetaan, jotta kaikki sisältö on näkyvissä.

Jotta toisen kiinteän mittauksen sisältämät elementit rajataan, kun ne ylittävät koon, ominaisuutta käytetään overflow rohkeudella hidden. arvon kanssa scroll, myös säiliön yli vuotavat esineet leikataan pois, kuten tapahtuu hidden mutta näyttöön tulee vierityspalkki, joka näkyy siirrettäessä. Arvo auto näyttää vierityspalkin vain tarvittaessa sisällön koon perusteella.

Voit myös määrittää vähimmäiskoon, jotta säiliöt vievät kyseisen tilan, vaikka sisältö ei sitä tarvitsisi, ja rajoittamatta niiden mittoja kasvamaan sisällön sitä vaatiessa. Tästä tehtävästä vastaavat kiinteistöt ovat min-width acholle ja min-height pitkälle. Päinvastaisessa mielessä, max-width aseta enimmäisleveys ja max-height enimmäiskorkeus, joka kumoaa width ya height.

Elementtien kulku verkkosivulla

Suorakulmiot (lohkot), jotka olemme määrittäneet elementeillä <div>, ne sijoitetaan oletusarvoisesti toistensa alle. Voit muuttaa tätä käyttäytymistä käyttämällä ominaisuutta float, mikä osoittaa left o right arvona siten, että ne virtaavat vasemmalta oikealle tai oikealta vasemmalle. Päinvastoin, voit käyttää ominaisuutta estääksesi yhden esineen "kellumasta" toisen oikealle tai vasemmalle puolelle clear arvojen kanssa left, right o both, jotka ohittavat virtauksen vasemmalta oikealle, oikealta vasemmalle tai molemmat.

Toisin kuin muissa olosuhteissa, virtaus syntyy float ei muuta automaattisesti säiliön mittoja, joten se on hyödyllistä sisällyttää sen ominaisuuksiin overflow:auto; pakottaa säiliön kokoa (korkeutta) muuttamaan, kun esine vuotaa sen yli sen sijainnin vuoksi float.

Toinen tapa määrittää elementin sisällön kulku on jakaa se sarakkeisiin ominaisuuden kanssa column-count (johon tällä hetkellä pitäisi liittyä -webkit-column-count ja -moz-column-count) Sarakkeiden koko voidaan ilmoittaa (todella ehdottamalla) -näppäimellä column-width (-webkit-column-width -moz-column-width) ja sarakkeiden välinen erotus column-gap (-webkit-column-gap -moz-column-gap)

Jotta lohkoja ei jaeta ja niiden sisältö jakautuu useille sarakkeille, voit käyttää display:inline-block; vaikka se varmasti viittaa. jätä osa kolonnista käyttämättä.

Paikannus

Elementtien sijainnin määrittämiseksi verkkosivulla CSS käyttää useita paikannustiloja, jotka voivat olla erilaisia ​​kullekin elementille, eli on mahdollista sekoittaa erilaisia ​​paikannuskriteerejä samalla sivustolla.

• position:static; Se on oletussijainti (ei ole tarpeen ilmoittaa, jos sitä ei ole aiemmin muokattu) Tämän tyyppinen sijoittelu seuraa sivun "luonnollista" kulkua: elementti toisensa jälkeen alkaen vasemmalta, kasvaa, niin kauan kuin on tilaa, oikealle ja ylhäältä alas. Se ei käytä vaaka- tai pystykoordinaatteja sijainnin määrittämisessä, vaan seuraa paikkaa, joka vastaa objektin järjestystä.

• position:fixed; Sitä käytetään objektin sijoittamiseen kiinteään paikkaan selainikkunassa (kuten esimerkiksi valikkoon). Elementin sijainti määritetään vaakasuunnassa left o right määrittääksesi eron vasemmalla tai oikealla ja vastaavasti top o bottom erottelua varten selainikkunan reunan ylä- tai alapuolella (näkymäportti).

  Tätä ja muita paikannusmenetelmiä käytettäessä esineet voivat mennä päällekkäin. Ensin piirretyt objektit (määritelty aiemmin koodissa HTML) voidaan kattaa myöhemmin piirretyt (myöhemmin koodiin sisältyvät). HTML). Normaalin järjestyksen muuttamiseksi voit käyttää omaisuutta z-index, kohteet, joilla on suurin arvo z-index Ne kattavat vähemmän arvokkaat.

• position:relative; Siirtää elementin "normaalista" paikastaan ​​ominaisuuksien osoittamalla tavalla left o right vaakatasossa ja top o bottom pystysuoraan.

• position:absolute; Asettaa elementin kiinteään asentoon suhteessa objektiin, joka sisältää sen. Sen sijainti ilmaistaan, kuten aikaisemmissa tapauksissa left,right, top y bottom

  Tämän tyyppisen paikannustyypin nimi on aluksi hämmentävä, koska sijainti määritetään objektin suhteen hierarkkisesti ylimpänä ominaisuutta käyttävää, mikä on kyseenalaista, onko se absoluuttinen.

  On myös tärkeää muistaa, että elementti, joka sisältää esineet <div> jota käytämme ensimmäisellä hierarkkisella tasolla <body>, joten jos <div> mitä sinä käytät position:absolute; ei sisälly toiseen, sen sijainti on "absoluuttinen" verkkosivun suhteen.

Tietyn median ominaisuudet ja ominaisuudet (mediakyselyt)

CSS Voit määrittää samassa tyylisivussa erilaisia ​​ulkoasuja eri materiaaleille tai tuille riippuen käytetyn laitteen tyypistä (kuten näyttö tai tulostin), sen mitoista, suunnasta (pysty tai vaaka) tai sen resoluutiosta. Tämä auttaa näyttämään saman verkkosivun kontekstiin sopivimmalla tavalla.

Jos haluat viitata mediaan, käytä @media samalla tavalla kuin mitä on jo selitetty fonttien kanssa @font-face, sulkee henkselit ({ y }) eri elementtien määritelmät: etiketit HTML, luokat, tunnisteet...

Käytettävissä olevat mediatyypit CSS3 ääni: all, viitata mihin tahansa mediaan (kaikki), screen kaikentyyppisille näytöille (vanhemmille versioille CSS He tekivät eron television ja tietokonenäytön välillä) print tulostimen tulostukseen ja speech audioverkkolukijoihin, jotka tulkitsevat tietoa äänisyntetisaattoreilla.

Yllä olevassa esimerkissä tekstiluokan elementeillä on musta tausta ja valkoinen teksti näytöllä, mutta ne tulostetaan valkoisella taustalla ja mustalla tekstillä.

Medialle voidaan asettaa ehtoja erilaisten ominaisuuksien määrittämiseksi esimerkiksi käytettävissä olevan resoluution tai näkymäsuhteen perusteella. Nämä ehdot ja itse keinot voidaan muodostaa loogisilla operaatioilla and, not y only vaatia sinua noudattamaan useita, että et noudata tai vain silloin, kun noudatat, vastaavasti.

Saatavilla olevista ehdoista pidämme niitä erityisen mielenkiintoisina max-width (ikkunan enimmäisleveys), max-height (ikkunan enimmäiskorkeus), min-width (ikkunan vähimmäisleveys), min-height (ikkunan vähimmäiskorkeus), orientation (suunta, joka voi olla landscape, maisema tai portrait, pystysuora), max-resolution (maksimi resoluutio tuumaa dpi, pistettä tuumalla tai tuumaa dpcm, pistettä senttimetriä kohti) ja min-resolution (minimiresoluutio, myös sisään dpi o dpcm).

Edellisessä esimerkissä aloitamme määrittämällä taustavärin niin, että kaikissa medioissa main_block-luokan elementeillä on taustaväri #CCCCCC. Kun se näytetään näytöllä ja ikkunan leveys on vähintään 320 pikseliä, vasen ja oikea marginaali ovat automaattisia (keskitä lohko) ja elementin leveys on 300 pikseliä. Jos näytön resoluutio on 640 pikseliä, lohkon leveys on 620 pikseliä. Koska toinen mediamäärittely ei sisällä marginaalitietoja ja toisen ehdon täyttävät laitteet täyttävät myös ensimmäisen, vaakamarginaali on edelleen automaattinen.

Lopuksi esimerkissä taustaväri muutetaan niin, että se on tulosteessa valkoinen.

Tavanomainen tapa määritellä tyylejä eri medioille on yleensä aloittaa tavallisista, yleensä väreistä ja fonteista, joita seuraa rajoittavimmat geometriat (pienimmän pikselien lukumäärän omaavien laitteiden mittaukset) yleensä älypuhelimissa ja tableteissa, joissa lisäksi On tärkeää tietää, käytetäänkö niitä pysty- vai vaaka-asennossa orientation ja varmasti myös sen resoluutio min-resolution. Sitten ilmoitetaan eri koot suuremmille näytöille, ja se yleensä päättyy tulostus- ja puhemediaan, jotka IoT-grafiikassa on jätetty pois.

Käyttää @media Asettamalla ehdot, kuten mitat, resoluutio ja suunta, suunnittelija voi luoda yhden web-sivun, joka näyttää eri tyyleillä sopivimmalta kullekin laitteelle. Tätä käyttäytymistä kutsutaan yleensä reagoivaksi suunnitteluksi; mukautuva muotoilu, erittäin vapaassa käännöksessä.

CSS SVG-grafiikkasäiliölle

Tähän mennessä selitetyn perusteella on nyt mahdollista määritellä tyylit, jotka SVG-grafiikka HTML-säilö jolla voidaan esittää IoT:hen kytkettyjen antureiden tila. Seuraavassa koodissa ehdotus sisältää kommentoituna sarakkeiden jakautumisen, joka vastaa suurempaa määrää kaavioita kuin mitä artikkelisarjan ehdotus käyttää, jotta sitä voidaan käyttää uudelleen muissa tapauksissa.

Alta näet, miltä nämä tyylit näyttäisivät. HTML-koodi ehdotetusta säilöstä SVG-grafiikkaa varten edellisestä artikkelista.

Seuraava artikkeli tässä sarjassa selittää kuinka piirtää SVG:llä Datakaaviot esineiden Internetiin (IoT) yhdistettyjen antureiden tilasta.