Määrake CSS-iga sensorgraafika veebi välimus asjade Internetis

Sarja eelmises artiklis teemal kuidas teha asjade internetti IoT-ga ühendatud andurite olekugraafikuid selgitab teed kasutage graafika struktuurina HTML-is arendatud veebilehte. Veebilehe elemendid, mis olid objektide abil viidud miinimumini <div>, ei määratlenud otseselt selle välimust, selle asemel viitasid nad välimuse teave stiililehele CSS, mida seeria selles osas selgitatakse.

Lahenduses, mille pakun välja IoT-ga ühendatud andurite graafikute tegemiseks, kasutatakse dokumenti CSS mis on dokumendist laaditud HTML. Kui kood HTML genereeritakse serveris olevast rakendusest, näiteks PHP, oleks väga lihtne lisada see veebilehe defineeriva koodi osana, selle asemel, et sellelt laadida, mida saaks kõne salvestamisega veidi optimeerida. Ükskõik milline valik on valitud, hõlmab kõige mugavam meetod muuda koodi CSS eraldi dokumendis, et seda mugavamalt hallata ja taaskasutada. Selle artiklisarja õpetuses välja töötatud näites on sellele antud nimi estilo.css.

Samamoodi, Keeruliste projektidega tegelemisel on soovitatav kasutada erinevates dokumentides mitut erinevat stiililehte, nii selleks, et saaksin konkreetseid funktsioone uuesti kasutada, ilma et peaks neid iga kord laadima, kui ka koodi lihtsamaks redigeerimiseks, jaotades selle erinevatesse dokumentidesse vastavalt vastavale loogilisele struktuurile.

Stiilid CSS Nad püüavad kirjeldada veebilehe käitumise ja välimuse kõiki äärmusi mitut tüüpi lähenemisviiside abil, mis kõik kehtivad samaaegselt, püüdes samas võimalikult palju austada ühilduvust eelmise versiooni spetsifikatsioonidega. See tähendab, et on palju võimalikke lahendusi, mis lahendavad samu vajadusi. samuti suur hulk saadaolevaid ressursse (omadused CSS). Artikli didaktilise lähenemise tõttu ja selleks, et uusi kasutajaid mitte segadusse ajada CSS, ainult omadused ja lõpliku eesmärgi saavutamiseks vajalikud struktuurid, mis kujutab graafiliselt asjade Internetti ühendatud anduritelt pärinevaid andmeid. Samas on ka a väike sissejuhatus CSS, kaskaadlaadilehed.

CSS-i atribuutide vormindamine

El põhivorming See koosneb atribuudi nimest, koolonimärgist, atribuudi väärtusest ja semikooloni märgist. nombre:valor;

CSS võimaldab ühes dokumendis kasutada erinevaid mõõtühikuid sealhulgas need, mis on seotud struktuuriga (elemendi sisalduse mõõtmine) protsentidena, võrreldes seadmega, millel need on esindatud (nt piksel), või absoluutarvuna (nt sentimeetrid). Ühikud väljendatakse väärtuse järel järgmise lühendikoodi järgi.

Rakenduse puhul, mida kavatseme teha, on oluline arvestada vähemalt kolme stiiliühikuga. Mõõtmiste % eseme mahuti suurusest, piksel mõõtmiseks vastavalt ekraani eraldusvõimele ja millimeetrid (tegelikult absoluutne mõõt) prinditud aruannete koostamiseks.

Mõned on keerulised omadused, või komposiit, mis sõltuvad mitmest väärtusest (nt värv, suurus, stiil...), väärtuse näitamiseks on CSS-is kaks võimalust: kirjutada sobivas järjekorras kõik tühikutega eraldatud väärtused või kasutada kompleksiga samaväärsete lihtsate omaduste summat. Näiteks saab objekti kõik neli veerist määrata ühes atribuudis margin või saab määrata omadustega margin-top, margin-right, margin-bottom y margin-left. Muide, sellele järjekorrale (päripäeva) järgneb väärtuste kirjeldused, mis "ümbritsevad" elementi, nagu sisemine (polster) või välimine veeris, ääris...

Seni selgitatu põhjal saame nüüd näha mõningaid näiteid omadustest

Eelmises näites Värvi määramiseks kasutatakse 6 kuueteistkümnendkohalist koodi, mis tähistavad paarikaupa punase, rohelise ja sinise komponendi väärtust. Kui juhtub, nagu näites, et kaks numbrit on võrdsed, võib seda lühendada kui #F09 (mis, muide, vastab nn "veebiturvalistele värvidele"). Lõplikus ettepanekus väldin nende lühendite kasutamist kriteeriumide ühtlustamiseks ja loetavamaks muutmiseks. Samuti saate lühendada keerukate omaduste väärtusi, näiteks margin näites, kui korratakse kõiki väärtusi või vastandpaare. Samadel teksti salvestamise liinidel on võimalik ka nulliga atribuudi määramisel ühiku ära jätta, kuna sel juhul pole sellel tähtsust.

Mõnel väärtusel on lisaks numbrilisele väljendamisele ka nimi mis muudab koodi loetavamaks ja võimaldab neid paremini meeles pidada. Näiteks sihtmärgi kuueteistkümnendsüsteemi numbrikoodi asemel #FFFFFF (o #FFF), saab kirjutada white sama tulemusega. Sel viisil must värv, #000000 (o #000), saab asendada black.

ka seal väljendatakse väärtusi spetsiaalse koodi, nimega. Näiteks selleks, et näidata, et brauser määrab külgmise veerise automaatselt (tavaliselt vastab see keskfunktsioonile), kasutatakse spetsiaalset väärtust auto, millel pole numbrilist vastavust ühegi väärtusega.

et väljendada erilist viisi, kuidas kasutada atribuudi liitväärtuste (keerulisi) väärtusi CSS Saate valida vorminguid, mille süntaks sarnaneb funktsioonide süntaksiga. Näiteks värvi väljendamiseks selle punase, rohelise ja sinise komponendi kolme väärtusena ( RGB mudel) oleks kirjutatud color: rgb(128, 255, 64);. Selle väljenduslaadi raames on võimalik kasutada ka ühikuid; Ülaltoodud näites on värvikomponendid kümnendväärtused vahemikus 0 kuni 255, kuid seda võib olla lihtsam väljendada protsendina iga värvikomponendi kogusummast, sel juhul võib selle kirjutada ka järgmiselt. color: rgb(50%, 100%, 25%);.

Väärtuste arvutamine CSS-is

Rakenduse uusimates versioonides CSS seda on võimalik teha lihtsad matemaatilised tehted väärtuste arvutamiseks. Selleks kasutage calc ja sooritatav tehe on väljendatud sulgudes. Saate näidata ühikuid, sulgusid ja lihtsaid tehteid, näiteks summa (+), lahutamine (-), korrutamine (*) ja jagamine (/). Väljend oleks tüüpi width:calc((90%-20px)/2));.

Muutujaid saab kasutada matemaatilistes operatsioonides CSS viidates ühe vara arvutamisel teise vara väärtusele var. Et muutujat saaks kasutada ilma stiili tegelikule omadusele viitamata, on lubatud viidata ka omadusele, mida pole olemas. CSS soovitab vormingut --nombre-variable (kaks sidekriipsu väljamõeldud omaduse nimetuse ees). Sel viisil elemendi kõrguse määramiseks pool selle laiusest avaldises CSS kui height:calc(var(width)/2); ja uue muutuja "paksus" määratlemiseks (mida muud omadused võiksid kasutada) kirjutage näiteks --grosor:4px; et saaks hiljem sellele viidata kui margin-top:calc(var(--grosor)*4);

Brauserist sõltuvad CSS-i atribuudid

CSS See on konsortsiumi standarditud spetsifikatsioon W3C (World Wide Web Consortium), aga palju omadused või käitumisstiilid jõuavad brauseriteni enne, kui need spetsifikatsiooni osaks saavad versioonist.

nii et kood CSS töötab brauseri praeguste funktsioonidega, kuid ärge kaotage ühilduvust uute funktsioonidega, kasutatakse eesliidet. See eesliide sõltub renderdamise mootor mis kasutab veebibrauserit, millele soovite viidata (mille stiil on määratletud).

Eesliide -webkit See töötab brauserite jaoks, mis põhinevad WebKit kui safari o Kroom. Eesliide -moz Seda kasutatakse brauserite jaoks, mis põhinevad renderdamise mootor de Mozilla, praegu GekoKui Firefox ja selle tuletised. Viidata EdgeHTML, renderdamise mootor brauser serv Microsoftilt (endine Trident), kasutatakse eesliidet -ms. Brauseri juhtum Opera on natuke eriline, kuna ta hakkas kasutama oma renderdamise mootor, millele viidatakse -o, kuid töötab praegu koos WebKit, mida väljendatakse kui -webkit.

Brauserile viitava atribuudi kasutamiseks kirjutage selle nimi, lisage see eesliide ja eraldage see sidekriipsuga nagu -o-border-radius:10px;, mis seab brauseri vanemates versioonides ümardatud äärise (ümar nurga). Opera.

Kommentaarid

Koodi selgitamiseks CSS Võite kasutada kommentaare, mis muudavad selle loetavamaks, kuigi selle puuduseks on selle suuruse suurendamine. Kommentaaride süntaks CSS See on nagu mitmerealised kommentaarid C + + mida te kindlasti juba teate: alustades /* ja lõpeb */, Nagu C + +, võib hõivata mitu rida.

Valijad

Määratlus atribuudid määratakse dokumendi objektidele HTML rühmitades need selektoritesse ja sulgedes need traksidega. Valija võib viidata keeleelemendile HTML (silt), nagu div, klass (määratud koos class en HTML) identifikaator (määratud id en HTML) või kõik (“universaalne valija”), mida tähistab tärn (*). Järgmine näide näitab iga tüübi valijat:

Sildid HTML väljendatakse stiilimääratluses nende nimega, klassid on tähistatud, pannes nime ette punkti (.) ja naelamärk (#) identifikaatorite jaoks.

Osa suurest võimust CSS elab võimalus rühmitada valijaid nende omaduste määratlemisel. Valijate rühmitamiseks on mitu võimalust. Neid rühmitades eraldades need komadega, väljendatakse, et igal viidatud valijal on need omadused.

Eelnev näide näitab, et tarbimise, niiskuse ja temperatuuri klassid jagavad värvi, laiust ja kõrgust. Selles koodis tutvustatakse ka uut kontseptsiooni: omadusi saab uuesti määratleda ja sel juhul domineerivad viimati kirjeldatud omadused. Nii oleks temperatuuriklassi elementide kõrgus lõpuks 50% neid sisaldavast objektist.

Kui rühmitatud valijaid ei eraldata komadega, on omadustele seatud tingimus kumulatiivne, see tähendab, et element peab vastama kõigile valijatele, et see omandaks nende määratletud välimuse või käitumise. Kui valijad viitavad siltidele HTML Nende ilmumise järjekord peab olema kaasamise tasemel kahanev: kõigepealt kõrgeim hierarhiline tase ja viimasena madalaim.

Eelmises näites on elemendid määratletud div mis on samuti temperatuuriklassist ja elemendid, millel on nii temperatuuriklass kui ka tarbimisklass (mõlemad samal ajal), nagu class="temperatura consumo". Elemendid <div> Koodist HTML koos class="temperatura" neil oleks kõrgeim 100%

CSS-i atribuudid teksti määratlemiseks

Eristada saab kolme tüüpi atribuute, mis mõjutavad teksti välimust: (1) need, mis määravad fondi, millega see esitatakse, (2) need, mis määravad literaali (teksti sisu) välimuse. ja (3) üldised, st need, mis mõjutavad nii teksti kui ka teiste komponentide välimust. Üldiselt kehtib see, mida öeldi eelmise rühma omade selgitamiseks, ka samade omaduste kohta, mida rakendati teistele elementidele.

Tüpograafia (font)

• font-family näitab elemendi jaoks kasutatud fondi nime. Võite kirjutada ühe nime või nimekirja eelistatud järjekorras ja nimed komadega eraldades fontidest, mida kasutatakse alternatiivselt, kui soovitud fonti pole. Samamoodi on võimalik kasutada ka üldisi fonte koos nimedega monospace, serif, sans-serif, cursive, fantasy. Nendest üldistest fontidest on kõige olulisem (käesolevate andmete esitamiseks) esimene, mis, nagu nimigi ütleb, kasutab süsteemis saadaolevat ja brauseri eelseadistatud fikseeritud vahedega fonti. Teine, serif, kasutab see saadaolevat vaikeseadet serif (viimistlus või arm). Ilma enampakkumiseta, kui on märgitud kolmas, sans-serif. Imiteerib käsitsi joonistatud kirjutamist cursive (seda saab selgelt parandada) ja süsteemi dekoratiivne tüpograafia fantasy, viimane viiest.

  Mis puutub koodi CSS Tühikutel on eraldajana eriline tähendus, kui fondiperekonna nimi koosneb mitmest tühikutega eraldatud sõnast, kirjutatakse see segaduse vältimiseks jutumärkide vahele.

  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;

  Veebibrauserid on võimelised kasutama nii kohalikke fonte (neid, mis on installitud süsteemi, kus nad töötavad), kui ka teisi, mis on spetsiaalselt laaditud, isegi kattuvad kohapeal installitud fontidega. Fondi laadimiseks kasutage @font-face märkides selle nime, määratluse allalaadimiskoha ja vajaduse korral vormingu kirjelduse.

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

  Eelmise näite kahest definitsioonist esimeses laaditakse dokumendi täht Sircuito-Expanded-Light.eot mis asub põhi- (juur)kausta sees EOT kaustas ja on määratud perekonnanimena CircuitExpandedLight. Muide, kas teile meeldib see font? See on tasuta, saate laadige tasuta alla Sircuito font, mille kujundasin GranaBoti pildi jaoks.

  Nagu näites näha, vastab atribuut url ühtne ressursiotsija, võimaldab määrata dokumendi asukoha allalaaditava fondi abil. Kaldkriipsu kasutatakse erinevate kaustade nimede eraldamiseks fondi teest, alustades sellest, mis sisaldab dokumenti, millest kõne tehti, või juurest, kui URL Alustage baarist.

  Teises näites kasutatakse mitut alternatiivset dokumenti, nii et sama definitsioon töötab mitme brauseri jaoks (igaüks neist laadib tüübi, mida ta suudab tõlgendada)

  Definitsiooni viimane rida sisaldab omadust font-smoothing kirja pehmendamiseks (rakendage a antialiaseerimine). Kuna see ei ole standardne omadus, kasutatakse eesliidet -webkit.

• font-size tähistab tähe suurust nagu on font-size:12px;

• font-weight Määrab fondi paksuse. Seda saab väljendada arvulise väärtusena, tavaliselt 100 kordsena vahemikus 100 kuni 900, vastavalt tavalistele tüpograafilistele kaaludele või sagedamini nimega: normal aluse paksuse jaoks, bold julgetele, bolder versiooni puhul, mida tavaliselt nimetatakse mustaks, light trahvi (tavaliselt nimetatakse kergeks) ja lighter kõige õhematele (mõnikord nimetatakse seda õhukeseks).

  Fondi tavaversiooni arvväärtus on 400 (ühikuta) ja 700 paksus versioonis.

  Vaikimisi, kui muud väärtust pole näidatud, on fondi välimus see, mis vastab normal või 400, nii et kui seda ei ole muudetud üldises elemendis või konteineris, kust see pärineb, ei ole vaja märkida font-weight julgusega normal.

• font-stretch Seda kasutatakse tähe laiuse tähistamiseks, kui see on vastavas perekonnas saadaval. Võimalikud väärtused, mida vara võib võtta, järjestatuna kitsamast laiemani, on järgmised: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. Samade kriteeriumidega, mida kasutati eelmises atribuudis, on vaikelaius normal ja seda ei ole vaja selgesõnaliselt näidata, välja arvatud juhul, kui seda on muudetud määratletavast kõrgemas hierarhilises järjekorras.

• koos font-style Saate märkida, kas tekst on joonistatud kald- või kaldtähega, mis mõjutab selle välimust, või kursiivtähega, mis väljendab erilist tähendust (näiteks võõrsõnad) või ümara tähega, st mitte eelmised. või normaalne. väärtust oblique täidab esimest, välimuse ja väärtuse funktsiooni italic teine. Asjaolu, et mõlema välimus on sageli sarnane või isegi sama, tähendab, et kasutus (tähendus) on mõnikord segaduses, seega tasub tähelepanu pöörata. Nagu ka teiste omaduste puhul, normal kasutatakse eelmiste väärtuste deaktiveerimiseks.

• text-decoration allajoonimiseks (väärtusega underline), ülejoon (koos väärtusega overline), kriipsutage maha (koos väärtusega line-through) või vilkuma (koos väärtusega blink) tekst, mida see omadus mõjutab.

• Tüpograafiaaspekti seeria täiendamiseks, kuigi meie rakenduse jaoks pole see eriti asjakohane, font-variant, võimaldab teil kandideerida väikesed mütsid (väikesed suured tähed) tekstidele.

Tekst

• text-align ütleb brauserile, kuidas tekstiplokk tuleb joondada. Võimalikud joondused on koodiga vasakul (mida peetakse vaikimisi). left, keskel väärtusega center, õige kasutamine right ja õigustatud mõlemas otsas justify.

• line-height määrab tekstiridade eralduse. Sel juhul, kui kasutada protsente, vastab 100% väärtus konteineri mõõtmise asemel teksti kõrgusele. Teksti suhtes enimkasutatav mõõt vastab 120%-le. 100% joon tähendaks, et ühe rea alumine osa puudutab järgmise rea ülaosa. Kuigi tüpograafiakujundus sisaldab tavaliselt ruumi, on tavaline, et ridade vahele jäetakse veidi rohkem varu.

  Ridadevahelise eralduse väljendamiseks on võimalik märkida ka koefitsient (ühikuta väärtus), millega arvutada rea ​​kõrgus tekstikasti kõrguse põhjal.

• letter-spacing on sõnade tähtede vahelise tühiku väärtus, mida tüpograafias tuntakse kui kerning o jälgimine.

• word-spacing tähistab sõnadevaheliste tühikute mõõtu.

• white-space määrab tühikute käitumise tekstis. Kui väärtust kasutatakse normal, mis vaikimisi võetakse, ühendab koodis mitu tühja kohta HTML ühes veebilehe esitluses (kuvatakse brauseris) ja kasutab tühikuid viitena rea ​​katkestamiseks, kui plokis tühikut pole.

  Väärtus nowrap Samuti liidab see korduvad tühjad tühikud üheks, kuid ei poolita tühjades kohtades olevaid tekstiridu ka siis, kui rida konteinerisse ei mahu, täites vajaduse korral ruumi üle ja kirjutades vajadusel väljapoole. Ridade selgeks jagamiseks võite kasutada silti <br> de HTML.

  Kasutamine pre Samuti ei ühendata tühikuid, ühendades need üheks, ega jagata ridu, kasutades tühikuid viitena.

  pre-line ühendage korduvad toorikud ja vajadusel katke read, kasutades toorikuid võrdluseks.

  pre-wrap säilitab korduvad tühikud ja vajadusel katkestab ridu, kasutades viitena tühikuid.

Värv

En CSS värvi saab väljendada vastavalt RGB värvimudel või vastavalt HSL värvimudel ja mõlemal juhul saab kaasata läbipaistvusinfot, neljanda kanali väärtust, mida tavaliselt kutsutakse alfa kanal o alfa koostis, millest tekivad RGBA ja HSLA mudelid.

Värvi väljendamiseks vormingus RGB kuueteistkümnendsüsteemis kasutatakse süntaksit #RRGGBB, kus RR on punase komponendi väärtus (põhimõtteliselt kasutades kahte kuueteistkümnendnumbrit), GG on rohelise komponendi väärtus ja BB on sinise komponendi väärtus. Nagu juba öeldud, kui iga komponendi kahel numbril on sama väärtus, saab seda väljendada #RGB piirates saadaolevate värvide arvu nn veebiturvalistele

Lisaks sellele värvi kujutamise viisile, kõige klassikalisemale ja kasutatud, võib seda väljendada kui rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) selle vormingus märkimiseks RGB, Hsl ja nende vastavad vormid koos läbipaistvuse märgiga (alfa kanal)

Kui ühiku järelliide lisamisega ei nõuta teisiti, RGB mudel kasutab kümnendväärtusi vahemikus 0 kuni 255, kolme komponendi jaoks väärtust alfa komponent on koefitsient (koma nullist üheni) ja esimene väärtus HSL värvimudel, toon, on kümnendväärtus, mis jääb vahemikku 0–360 (ilma ühikuteta), mis tähistab nurka. Küllastus- ja heledusväärtused HSL mudel Tavaliselt väljendatakse neid protsentides.

Nagu juba öeldud, kuigi selle kasutamine ei ole väga sage, saab värve vormingus nende nime järgi tähistada color:black; asemel color:#000000;. Esimene vorming on loetavam, kuid piirdub lühikese väärtuste tabeliga, mida on samuti keerulisem numbriliselt muuta rakenduses, mis on kirjutatud JavaScript.

Meie ettepaneku jaoks asjade Internetiga ühendatud andurite andmete graafiliseks esitamiseks vajame ainult kolme värviga seotud atribuuti. Need näitavad nii teksti nime, mida nüüd selgitatakse, kui ka mis tahes seda toetava komponendi nime.

• color näitab elemendi värvi HTML ja see, mida see sisaldab (mis pärib selle), välja arvatud juhul, kui seda muude värvide individuaalse määramisega selgesõnaliselt muudetakse.

• background-color Kasutatakse elemendi taustavärvi määramiseks HTML. Lisaks värvi kui väärtuse näitamisele RGB o Hsl saate kasutada erilist väärtust transparent et objektil poleks taustavärvi ja oleks võimalik näha, mis selle taga asub ehk see ei kata elemente, millele see on joonistatud.

• opacity võimaldab määrata elemendi ja kogu selle sisu läbipaistmatuse (kaudselt, läbipaistvuse) (mitte segi ajada tausta läbipaistvusega). Kui läbipaistvus määratakse teistes sisalduvatele elementidele, mis ise on läbipaistvad, siis see suureneb, see ei tööta eraldi. Läbipaistvas objektis olevat objekti ei saa läbipaistmatumaks muuta. Väärtus opacity Seda väljendatakse koefitsiendina nagu opacity:0.5; 50% läbipaistmatuse näitamiseks.

  Microsofti brauseri vanemad versioonid seda atribuuti ei kasutanud, kuid need olid olemas filter (filter), mis lisaks muudele väärtustele võib toetada alfat ( alfa kanal), millele saab määrata läbipaistmatuse protsendi opacity vastavalt vormingule:

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

Meetmed

En CSS, elementide mõõtmine <div>, mille oleme valinud graafika konteineri koostamiseks, on seatud width (laius) ja height (alt).

sisu vahel <div> ja selle ümbermõõt on täiteala, mis määratakse väärtusega padding. Objekti perimeetrit ümbritseb serv, mille mõõt on määratud atribuudiga border. Objekti välispinna eraldamine <div> teistest ümbritsevatest objektidest on ruum, mille mõõt on määratud margin.

Tavatingimustes objekti kasutatava ruumi mõõtmine <div> saab arvutada selle laiuse või kõrguse pluss polsterduse summana (padding) pluss ääris (border) pluss marginaal (margin). Kui asjakohane mõõt, mis määratakse, on objekti kasulik siseruum <div>, on see koostis väga praktiline, kuid kui on teada, on kogumõõt saadaval kas seda käitumist saab muuta, mis on vaikimisi seatud, nii et laiuse ja kõrguse kogumõõt vastab width (laius) ja height (kõrgus), lahutades sellest lisamise asemel polstri, äärise ja veerise mõõdud. Selle režiimi kasutamiseks määrake omandiõigus box-sizing väärtus border-box (vaikimisi on content-box)

Järgmine diagramm näitab graafiliselt saadud väärtusi width (laius) ja height (kõrge), kui kasutate box-sizing:border-box; (kokku) võibox-sizing:content-box; (sees)

Mõõtmiste väärtused on väljendatud juba selgitatud ühikutega. Kui tegemist on mitme väärtusega määratletud omadustega, võib erinevat tüüpi keskmistega väljendatud arve segada. Lisaks on mõned eriväärtused, mis on olulised selle kasutuse jaoks, mida me kavatseme andurigraafikute rakendamisel asjade Internetis kasutada. Täpsemalt saame väärtust kasutada auto kinnistul margin ressursina objektide tsentreerimiseks teatud juhtudel.

Ülaltoodud näites on klassi "small_box" jaoks määratletud 2 piksli paksune ääris, mis on joonistatud musta joonega (#000000) pidev (solid). Klassis “big_box” on äärise jaoks kasutatav joon katkendlik (dashed) ja punane värv (#FF0000). Nende väärtuste eraldi väljendamiseks saame kasutada border-width paksuse jaoks, border-style insuldi eest ja border-color värvi jaoks. Need servaomadused on omakorda kombineeritud ja moodustuvad ülemisest, paremast, alumisest ja vasakpoolsest funktsioonist, järgides päripäeva, nagu ülalpool selgitatud.

Kahel defineeritud klassil on samad mõõdud, kuid esimene on väärtuse kasutamisel väiksem border-box vara eest box-sizing, täidis, ääris ja veeris joonistatakse objekti sisse, mitte sisu ümber, nagu see on vaikimisi. Klassis "big_box" seda ei näidata, seega võetakse väärtus vaikimisi content-box mis põhjustab polsterduse, äärise ja veerise suurenemise tähistatud suuruseni width y height.

Ülaltoodud näites on klassi veerise väärtus 10 pikslit ülal, paremal, all ja vasakul, nii et seda saab väljendada ühe väärtusena margin:10px;. On väga huvitav teada seda alternatiivi, et mõista kolmandate osapoolte väljatöötatud koodi, kuigi selles rakendusettepanekus soovitatakse selle loetavamaks muutmiseks väärtusi korrata.

Eelmise näite kolm klassi annavad sama tulemuse, nn "lakoonilise" määratlus on kompaktsem ja vähem nn "kõneleva" määratlus, mis on rohkem kui lugemise selguse lisamiseks tavaline vorm. kasutatakse atribuudi mõne osalise konkreetse aspekti muutmiseks, kasutades teisi väärtusi pärimise teel (need pakub konteiner või üks elemendile määratud klassidest). Kui selle atribuutide määratlemise viisi lisateksti poolt serverile pandud koormus oleks asjakohane ja muud asjaolud, mis koodi loetavamaks muutmiseks, näiteks kommentaarid, suurendavad suurust ja seega ka liiklust, oleks võimalik töödelda seda (näiteks) alates PHP osana selle keele koodi genereerimise strateegiast.

Kasti mudeli mõõtmed mõjutavad peamiselt elemente <div> kuid seda käitumist on võimalik peale suruda ka teistele omadusega elementidele display ja väärtus block. Elemendi voolamiseks nagu tekst real, kasutage display:inline; ja nii käitumist, mõõtmisi kui ka voolu, saab kombineerida display:inline-block;

Väärtus none kinnistul display, kasutatud kui display:none;, võimaldab teil ka objekte peita, mis aitab neid "sisse lülitada" ja "välja lülitada". JavaScript.

Kui elemendi mõõtmeid pole täpsustatud, on selle sisu sobitamiseks vajalikud mõõtmed (tegelikult muudab see sisu sobivaks, ilma et oleks vaja mõõtu määrata). Aga kui mõõdud on märgitud, võib juhtuda, et sisalduvad esemed ei sobi; sellisel juhul mõõtmetest ei peeta kinni, neid suurendatakse, et kogu sisu oleks nähtav.

Et teises fikseeritud mõõtmises sisalduvaid elemente kärbitakse, kui need ületavad suurust, kasutatakse omadust overflow julgusega hidden. väärtusega scroll, lõigatakse ka konteinerist üle voolavad objektid välja, nagu see juhtub hidden kuid kuvatakse kerimisriba, mis on selle liigutamisel näha. Väärtus auto kuvab kerimisriba ainult siis, kui see on sisu suurusest lähtuvalt vajalik.

Samuti saate määrata minimaalse suuruse, nii et konteinerid võtaksid selle ruumi isegi siis, kui sisu seda ei vaja, ja ilma mõõtmeid piiramata suurenevad, kui sisu seda nõuab. Selle ülesande eest vastutavad omadused on min-width acho ja min-height pikale. Vastupidises mõttes max-width seadke maksimaalne laius ja max-height maksimaalne kõrgus, mis tühistab width ya height.

Elementide voog veebilehel

Ristkülikud (plokid), mille oleme elementidega määratlenud <div>, asetatakse need vaikimisi üksteise alla. Selle käitumise muutmiseks võite kasutada atribuuti floatnäidates left o right väärtusena, nii et need voolavad vastavalt vasakult paremale või paremalt vasakule. Vastupidi, selleks, et vältida ühe objekti "hõljumist" teisest paremale või vasakule, võite kasutada vara clear väärtustega left, right o both, mis alistavad voo vasakult paremale, paremalt vasakule või mõlemad.

Vastupidiselt sellele, mis juhtub muudel asjaoludel, tekkis voog float ei muuda automaatselt konteineri mõõtmeid, seega on kasulik lisada selle omaduste hulka overflow:auto; et sundida konteineri suurust (kõrgust) muutma, kui objekt selle asukoha tõttu üle ajab float.

Teine võimalus elemendi sisu voo seadistamiseks on jagada see atribuudiga veergudeks column-count (millega peaks hetkel kaasnema -webkit-column-count ja -moz-column-count) Veergude suuruse saab näidata (tegelikult soovitada) klahviga column-width (-webkit-column-width -moz-column-width) ja veergude vaheline eraldus column-gap (-webkit-column-gap -moz-column-gap)

Selleks, et plokke ei jagataks ja nende sisu jaguneks mitme veeru vahel, saate kasutada display:inline-block; kuigi see kindlasti viitab. jäta osa veerust kasutamata.

Positsioneerimine

Elementide asukoha kindlaksmääramiseks veebilehel kasutab CSS mitmeid positsioneerimisrežiime, mis võivad iga elemendi puhul olla erinevad, st samal veebisaidil on võimalik segada erinevaid positsioneerimiskriteeriume.

• position:static; See on vaikimisi positsioneerimine (ei ole vaja märkida, kui seda pole varem muudetud). Seda tüüpi positsioneerimine järgib lehe "loomulikku" voolu: üks element teise järel algab vasakult, kasvab, kuni ruumi on, paremale ja ülevalt alla. See ei kasuta oma asukoha määramiseks horisontaalseid ega vertikaalseid koordinaate, vaid järgib asendit, mis vastab objekti järjestusele.

• position:fixed; Seda kasutatakse objekti paigutamiseks brauseriaknas kindlasse kohta (näiteks menüüsse) Elemendi asukoht määratakse horisontaalselt left o right et määrata eraldus vastavalt vasakule või paremale ja koos top o bottom eraldamiseks brauseriakna (vaateava) serva kohal või all.

  Seda ja muud tüüpi positsioneerimist kasutades võivad objektid kattuda. Esimesena joonistatud objektid (määratletud koodis varem HTML) saab katta hiljem joonistatutega (need, mis sisalduvad hiljem koodis HTML). Tavapärase järjekorra muutmiseks saab vara kasutada z-index, suurima väärtusega objektid z-index Need hõlmavad väiksema väärtusega tooteid.

• position:relative; Liigutab elemendi selle "tavalisest" asendist, nagu näitavad omadused left o right horisontaalselt ja top o bottom vertikaalselt.

• position:absolute; Paigutab elemendi fikseeritud asendisse seda sisaldava objekti suhtes. Selle asukohta väljendatakse, nagu eelmistel juhtudel, koos left,right, top y bottom

  Seda tüüpi positsioneerimise nimetus tekitab alguses segadust, kuna positsioon kehtestatakse objekti suhtes, mis on hierarhiliselt kõrgem kui omadust kasutav, mille absoluutsuse üle võib vaielda.

  Samuti on oluline meeles pidada, et element, mis sisaldab objekte <div> mida me kasutame esimesel hierarhilisel tasandil <body>Seega, kui <div> mida sa kasutad position:absolute; ei sisaldu teises, on selle asukoht veebilehe suhtes "absoluutne".

Konkreetsete meediumite ja omaduste omadused (meediumipäringud)

CSS võimaldab määrata samal stiililehel erinevatele kandjatele või tugedele erinevad välimused sõltuvalt kasutatava seadme tüübist (nt ekraan või printer), selle mõõtmetest, orientatsioonist (vertikaalne või horisontaalne) või eraldusvõimest. See võimaldab kuvada sama veebilehte konteksti jaoks kõige sobivamal viisil.

Meediale viitamiseks kasutage @media sarnaselt sellele, mida on juba selgitatud fontide puhul @font-face, sulgedes traksidega ({ y }) erinevate elementide määratlused: sildid HTML, klassid, identifikaatorid...

Saadaolevad meediumitüübid CSS3 Heli: all, viidata mis tahes meediale (kõik), screen mis tahes tüüpi ekraanidele (vanemad versioonid CSS Nad eristasid telerit ja arvutimonitore) print printeri väljundiks ja speech heliveebilugejatele, mis tõlgendavad teavet häälsüntesaatoritega.

Ülaltoodud näites on tekstiklassi elementidel must taust ja valge tekst ekraanil, kuid need prinditakse valge tausta ja musta tekstiga.

Meediumile saab kehtestada tingimused erinevate omaduste komplektide määratlemiseks, mis põhinevad näiteks saadaoleval eraldusvõimel või vaateava suhtel. Neid tingimusi ja vahendeid saab koostada loogiliste operatsioonidega and, not y only nõuda mitme täitmist, mitte täitmist või ainult siis, kui täidate vastavalt.

Saadaolevate tingimuste hulgas on need meile eriti huvitavad max-width (akna maksimaalne laius), max-height (akna maksimaalne kõrgus), min-width (akna minimaalne laius), min-height (akna minimaalne kõrgus), orientation (orientatsioon, mis võib olla landscape, maastik või portrait, vertikaalne), max-resolution (maksimaalne eraldusvõime sisse dpi, punkti tolli kohta või tollides dpcm, punkti sentimeetri kohta) ja min-resolution (minimaalne eraldusvõime, ka sisse dpi o dpcm).

Eelmises näites alustame taustavärvi määratlemisest, nii et kõigis meediumites on klassi main_block elementide taustavärv #CCCCCC. Kui kuvatakse ekraanil ja aken on vähemalt 320 pikslit lai, on vasak ja parem veeris automaatne (ploki keskel) ja elemendi laius 300 pikslit. Kui ekraani eraldusvõime on 640 pikslit, on ploki laius 620 pikslit. Kuna teine ​​kandja definitsioon ei sisalda veeriste teavet ja seadmed, mis vastavad teisele tingimusele, vastavad ka esimesele, on horisontaalne veeris endiselt automaatne.

Lõpuks muudetakse näites taustavärvi nii, et see oleks väljatrükis valge.

Tavapärane viis erinevate meediumite stiilide määratlemiseks on tavaliselt alustada tavalistest, tavaliselt värvidest ja fontidest, millele järgneb kõige piiravam geomeetria (väikseima pikslite arvuga seadmete mõõtmised) tavaliselt nutitelefonide ja tahvelarvutite puhul, kus lisaks Oluline on teada, kas neid kasutatakse vertikaalselt või horisontaalselt orientation ja kindlasti ka selle resolutsioon min-resolution. Seejärel näidatakse ära suuremate ekraanide erinevad suurused ning see lõpeb enamasti printimise ja kõnekandjaga, mis IoT graafika näitel on ära jäetud.

Kasutama @media Tingimuste (nt mõõtmed, eraldusvõime ja orientatsioon) kehtestamine võimaldab kujundajal luua ühe veebilehe, mis näeb erineva stiiliga iga seadme jaoks kõige sobivam välja. Seda käitumist nimetatakse tavaliselt reageerivaks disainiks; kohandatav disain, väga vabas tõlkes.

CSS SVG graafika konteineri jaoks

Seni selgitatuga on nüüd võimalik määratleda stiilid, mida SVG graafika HTML konteiner millega näidata asjade internetiga ühendatud andurite olekut. Järgmises koodis on ettepanek, mis sisaldab kommenteerituna jaotust veergudes, mis vastab suuremale arvule graafikutele kui need, mida artikliseeria ettepanekus kasutatakse, et seda saaks muudel juhtudel uuesti kasutada.

Allpool näete, kuidas need stiilid välja näeksid. HTML-kood pakutud konteinerist SVG-graafika jaoks eelmisest artiklist.

Selle sarja järgmine artikkel selgitab kuidas SVG-ga joonistada Andmegraafikud asjade Internetiga (IoT) ühendatud andurite oleku kohta.