Definer med CSS utseendet til sensorgrafikknettet i IoT

I forrige artikkel i serien om hvordan lage tilstandsgrafer over sensorer koblet til tingenes internett IoT forklarer veien bruke en nettside utviklet i HTML som en struktur for grafikk. Nettsideelementene, som var redusert til et minimum ved hjelp av objekter <div>, definerte ikke utseendet direkte, i stedet henviste de til utseendeinformasjon til et stilark CSS, som er det som skal forklares i denne delen av serien.

I løsningen som jeg foreslår for å lage grafer over sensorer koblet til IoT, brukes et dokument CSS som er lastet inn fra dokumentet HTML. Hvis koden HTML vil bli generert fra en applikasjon på serveren, for eksempel i PHP, ville det være veldig enkelt å inkludere den som en del av koden som definerer nettsiden i stedet for å laste den fra den, som kan optimaliseres litt ved å lagre en samtale. Uansett hvilket alternativ som er valgt, inkluderer den mest praktiske metoden redigere koden CSS i et eget dokument for å administrere det mer komfortabelt og for å kunne gjenbruke det. I eksemplet utviklet i veiledningen til denne artikkelserien, har den fått navnet estilo.css.

På samme måten, Når du arbeider med komplekse prosjekter, vil det være tilrådelig å bruke flere separate stilark i forskjellige dokumenter, både for å kunne gjenbruke spesifikke funksjoner uten å måtte laste dem alle hver gang, og for å redigere koden lettere ved å distribuere den til ulike dokumenter i henhold til den tilsvarende logiske strukturen.

Stilene CSS De prøver å beskrive alle ytterpunkter av oppførselen og utseendet til en nettside fra flere typer tilnærminger, alle samtidig gyldige, mens de prøver å respektere kompatibilitet med tidligere versjonsspesifikasjoner så mye som mulig. Det betyr at det er mange mulige løsninger som løser de samme behovene. samt et høyt antall tilgjengelige ressurser (egenskaper CSS). På grunn av den didaktiske tilnærmingen til artikkelen og for ikke å forvirre nye brukere i CSS, kun eiendommene og strukturene som er nødvendige for det endelige målet, som grafisk skal representere data fra sensorer koblet til tingenes internett. Samtidig er det også en liten introduksjon til CSS, gjennomgripende stilark.

Formatering av CSS-egenskaper

El grunnleggende format Den består av et egenskapsnavn, kolontegnet, egenskapsverdien og semikolontegnet. nombre:valor;

CSS lar deg bruke forskjellige måleenheter i samme dokument inkludert de som er relatert til strukturen (målingen av hva et element inneholder) som prosenter, i forhold til enheten de er representert på, for eksempel pikselen, eller absolutt, for eksempel centimeter. Enhetene er uttrykt etter verdien i henhold til følgende forkortelseskoding.

For søknaden vi skal gjøre, er det viktig å vurdere minst tre stilenheter. % for å ta mål i forhold til størrelsen på en vares beholder, pikselen for målinger i henhold til oppløsningen på skjermen og millimeterne (faktisk alle absolutte mål) for å lage utskrevne rapporter.

Det er noen komplekse egenskaper, eller kompositt, som avhenger av flere verdier (som farge, størrelse, stil...), for å indikere verdien er det to muligheter i CSS: skriv, i riktig rekkefølge, alle verdier atskilt med mellomrom eller bruk summen av enkle egenskaper som tilsvarer komplekset. For eksempel kan alle fire margene til et objekt spesifiseres i en enkelt egenskap margin eller kan settes med egenskaper margin-top, margin-right, margin-bottom y margin-left. Forresten, den rekkefølgen (med klokken) er den etterfulgt av beskrivelsene av verdier som "omgir" et element som den indre (polstringen) eller ytre margen, grensen ...

Med det som er forklart så langt kan vi nå se noen eksempler på eiendommer

I forrige eksempel Fargen er definert ved hjelp av en kode med 6 heksadesimale sifre som representerer, i par, verdien av den røde, grønne og blå komponenten. Når det skjer, som i eksempelet, at de to sifrene er like, kan det forkortes som #F09 (som for øvrig tilsvarer de såkalte "nettsikre fargene"). I det endelige forslaget vil jeg unngå å bruke disse forkortelsene for å forene kriteriene og gjøre det mer lesbart. Du kan også forkorte verdiene til komplekse egenskaper, for eksempel margin i eksempelet, når alle verdier eller motsatte par gjentas. Langs de samme linjene med å lagre tekst, er det også mulig å utelate enheten når du spesifiserer en egenskap når verdien er null, siden den er irrelevant i så fall.

Noen verdier har, i tillegg til å kunne uttrykkes numerisk, et navn som gjør koden mer lesbar og lar deg huske dem bedre. For eksempel, i stedet for målets heksadesimale numeriske kode, #FFFFFF (o #FFF), kan skrives white med samme resultat. På denne måten er fargen svart, #000000 (o #000), kan erstattes av black.

Også der verdier uttrykkes med en spesiell kode, et navn. For eksempel, for å indikere at sidemargen settes automatisk av nettleseren (normalt vil den tilsvare midtfunksjonen) brukes spesialverdien auto, som ikke har noen numerisk korrespondanse med noen verdi.

Til uttrykke en spesiell måte å bruke en serie av sammensatte (komplekse) verdier av en eiendom CSS Du kan velge formater med en syntaks som ligner på funksjonene. For eksempel, for å uttrykke en farge som de tre verdiene for dens røde, grønne og blå komponent (den RGB-modell) ville bli skrevet color: rgb(128, 255, 64);. Innenfor denne uttrykksstilen er det også mulig å bruke enheter; I eksemplet ovenfor er fargekomponentene en desimalverdi fra 0 til 255, men det kan være lettere å uttrykke dette som en prosentandel av summen av hver fargekomponent, i så fall kan det også skrives som color: rgb(50%, 100%, 25%);.

Beregning av verdier i CSS

I de nyeste versjonene av CSS det er mulig å gjøre enkle matematiske operasjoner for å beregne verdier. For å gjøre dette, bruk calc og operasjonen som skal utføres er uttrykt i parentes. Du kan angi enheter, parenteser og enkle operatorer som sum (+), subtraksjon (-), multiplikasjon (*) og divisjon (/). Uttrykket ville være av typen width:calc((90%-20px)/2));.

Variabler kan brukes i matematiske operasjoner i CSS refererer i beregningen av en eiendom til verdien av en annen med var. For å kunne bruke en variabel uten å måtte referere til en faktisk egenskap ved stilen, er det også lov å sitere en egenskap som ikke eksisterer. CSS anbefaler formatet --nombre-variable (to bindestreker foran navnet på den oppfunne eiendommen). På denne måten, for å definere høyden til et element som halvparten av dets bredde et uttrykk i CSS som height:calc(var(width)/2); og for å definere en ny variabel "tykkelse" (som andre egenskaper kan bruke) skriver du f.eks. --grosor:4px; for senere å kunne referere til det som margin-top:calc(var(--grosor)*4);

Nettleseravhengige CSS-egenskaper

CSS Det er en spesifikasjon standardisert av konsortiet W3C (World Wide Web Consortium) men mange egenskaper eller atferdsstiler når nettlesere før de er en del av spesifikasjonen av en versjon.

slik at koden CSS fungerer med de gjeldende funksjonene i en nettleser, men ikke mist kompatibilitet med nye funksjoner, et prefiks brukes. Dette prefikset avhenger av gjengivelsesmotor som bruker nettleseren du vil referere til (som stilen er definert for).

Prefikset -webkit Det fungerer for nettlesere basert på WebKit som Safari o Chrome. Prefikset -moz Den brukes for nettlesere basert på gjengivelsesmotor de Mozillai dag GeckoSom Firefox og dens derivater. Å referere til EdgeHTML, The gjengivelsesmotor Nettleser Edge fra Microsoft (tidligere Trident), prefikset brukes -ms. Nettleserens tilfelle Opera er litt spesiell siden han begynte å bruke sin egen gjengivelsesmotor, referert til med -o, men jobber for tiden med WebKit, som er uttrykt som -webkit.

For å bruke en egenskap som refererer til en nettleser, skriv navnet, prefiks det og skille det med en bindestrek som i -o-border-radius:10px;, som vil tjene til å sette en avrundet kantlinje (et avrundet hjørne) i eldre versjoner av nettleseren Opera.

Kommentarer

For å tydeliggjøre koden CSS Du kan bruke kommentarer, som vil gjøre den mer lesbar, men med ulempen av å øke størrelsen. Syntaksen til kommentarer i CSS Det er som kommentarer med flere linjer C + + som jeg er sikker på at du allerede vet: starter i /* og slutter på */som i C + +, kan oppta flere linjer.

Velgere

Definisjonen av egenskaper er tilordnet til objekter i et dokument HTML gruppere dem i velgere og omslutter dem i seler. En velger kan referere til et språkelement HTML (en etikett), som div, en klasse (tildelt med class en HTML) en identifikator (tildelt med id en HTML) eller alle (den "universelle velgeren") representert av stjernen (*). Følgende eksempel viser en velger av hver type:

Etikettene til HTML uttrykkes i stildefinisjonen med navnet, markeres klassene ved å sette et punktum foran navnet (.) og et pundtegn (#) for identifikatorer.

En del av den store makten til CSS bor i mulighet for å gruppere velgere når de definerer egenskapene deres. Det er flere måter å gruppere velgere på. Ved å gruppere dem, skiller dem med komma, er det uttrykt at hver av de siterte velgerne har disse egenskapene.

Det forrige eksemplet indikerer at klassene forbruk, fuktighet og temperatur deler farge, bredde og høyde. Et nytt konsept er også introdusert i denne koden: egenskaper kan omdefineres, og i så fall de sist beskrevne råder. På denne måten vil elementene i temperaturklassen til slutt ha en høyde på 50 % av objektet som inneholder dem.

Hvis de grupperte velgerne ikke er atskilt med kommaer, er betingelsen pålagt egenskapene kumulativ, det vil si at et element må tilfredsstille alle velgere for at det skal oppnå utseendet eller oppførselen de definerer. Hvis velgere refererer til tagger HTML Rekkefølgen de vises i må være synkende i inkluderingsnivået: først det høyeste hierarkiske nivået og sist det laveste.

I forrige eksempel er elementene definert div som også er av temperaturklassen og elementene som har både temperaturklassen og forbruksklassen (begge samtidig) som i class="temperatura consumo". Elementene <div> Av kode HTML med class="temperatura" de ville ha en høy på 100%

CSS-egenskaper for å definere teksten

Det kan skilles mellom tre typer egenskaper som påvirker utseendet til teksten: (1) de som etablerer fonten den presenteres med, (2) de som bestemmer utseendet til det bokstavelige (innholdet i teksten) og (3) generiske, det vil si de som påvirker både utseendet til teksten og andre komponenter. Generelt vil det som ble sagt for å forklare de fra den siste gruppen også gjelde for de samme egenskapene brukt på andre elementer.

Typografi (font)

• font-family angir navnet på fonten som brukes for et element. Du kan skrive et enkelt navn eller en liste, i preferanserekkefølge og skille navnene med komma, over skriftene som vil bli brukt alternativt hvis den ønskede ikke finnes. På samme måte er det mulig å bruke generiske fonter med navnene monospace, serif, sans-serif, cursive, fantasy. Av disse generiske fontene er den viktigste (for presentasjonen av tilgjengelige data) den første som, som navnet antyder, vil bruke den faste avstandsfonten som er tilgjengelig i systemet og forhåndsinnstilt av nettleseren. Den andre, serif, vil den bruke standard tilgjengelig serif (etterbehandling eller nåde). Uten auksjon hvis den tredje er angitt, sans-serif. Imiterer håndtegnet skrift med cursive (en måte å kalle det på som klart kunne forbedres) og den dekorative typografien til systemet med fantasy, den siste av de fem.

  Når det gjelder koden CSS Mellomrom har en spesiell betydning som skilletegn; når navnet på skriftfamilien består av flere ord atskilt med mellomrom, skrives det mellom anførselstegn for å unngå forvirring.

  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;

  Nettlesere er i stand til å bruke lokale fonter (de som er installert på systemet de opererer på) så vel som andre som er spesifikt lastet, til og med overlappende de som er installert lokalt. For å laste inn en skrift, bruk @font-face angir navnet, nedlastingsstedet for definisjonen og, hvis aktuelt, en beskrivelse av formatet.

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

  I den første av de to definisjonene i forrige eksempel er bokstaven i dokumentet lastet inn Sircuito-Expanded-Light.eot som ligger i EOT-mappen inne i hovedmappen (rot) og er tilordnet som et etternavn CircuitExpandedLight. Forresten, liker du denne fonten? Det er gratis, du kan Last ned gratis Sircuito-fonten som jeg designet for GranaBot-bildet.

  Som du kan se i eksempelet, er url-egenskapen, som tilsvarer enhetlig ressurslokalisator, lar deg spesifisere plasseringen av dokumentet med fonten som er lastet ned. Skråstreken brukes til å skille navnet på de forskjellige mappene fra banen til fonten, og starter med den som inneholder dokumentet som anropet er gjort fra eller fra roten hvis URL Start med en bar.

  Det andre eksemplet bruker flere alternative dokumenter slik at den samme definisjonen fungerer for flere nettlesere (som hver vil laste inn typen den er i stand til å tolke)

  Den siste linjen i definisjonen inkluderer egenskapen font-smoothing for å myke opp bokstaven (bruk en antialiasing). Siden det ikke er en standardegenskap, brukes prefikset -webkit.

• font-size tjener til å angi størrelsen på bokstaven som i font-size:12px;

• font-weight Stiller inn skrifttykkelsen. Det kan uttrykkes som en numerisk verdi, vanligvis et multiplum av 100 mellom 100 og 900, i henhold til de vanlige typografiske vektene, eller oftere med et navn: normal for bunntykkelsen, bold for den modige, bolder for versjonen vanligvis kalt svart, light for boten (ofte kalt lys) og lighter for de tynneste (noen ganger kalt tynne).

  Den numeriske verdien for normalversjonen av fonten er 400 (enhetsløs) og 700 for den fete versjonen.

  Som standard, hvis ingen annen verdi er angitt, er utseendet til skriften den som tilsvarer normal eller 400, så hvis det ikke er endret i det generiske elementet eller i beholderen som det arver fra, er det ikke nødvendig å angi font-weight med motet normal.

• font-stretch Den brukes til å angi bredden på bokstaven, så lenge den er tilgjengelig i den tilsvarende familien. De mulige verdiene som eiendommen kan ta, sortert fra smaleste til bredeste, er: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. Med de samme kriteriene som ble brukt i forrige egenskap, er standardbredden normal og det er ikke nødvendig å uttrykkelig indikere det med mindre det har blitt endret i en høyere hierarkisk rekkefølge enn den som er definert.

• med font-style Du kan angi om en tekst er tegnet med en skrå eller skrå bokstav, som påvirker utseendet, eller med en kursiv bokstav, som uttrykker en spesiell betydning (for eksempel fremmedord), eller rund bokstav, det vil si verken de forrige eller normalt. verdien oblique oppfyller den første funksjonen, utseende og verdi italic den andre. Det faktum at utseendet til begge er ofte likt eller til og med det samme betyr at bruken (betydningen) noen ganger er forvirret, så det er verdt å være oppmerksom. Som med andre eiendommer, normal Den brukes til å deaktivere de tidligere verdiene.

• text-decoration tjener til å understreke (med verdien underline), overlinje (med verdien overline), kryss ut (med verdien line-through) eller blinke (med verdien blink) teksten som denne egenskapen påvirker.

• For å fullføre serien med typografiaspektet, selv om det for vår applikasjon ikke er veldig relevant, font-variant, lar deg søke små caps (små store bokstaver) til tekstene.

Tekst

• text-align forteller nettleseren hvordan tekstblokken skal justeres. De mulige justeringene er til venstre (som anses som standard) med koden left, senter med verdien center, riktig bruk right og begrunnet i begge ender med justify.

• line-height setter skillet mellom tekstlinjer. I dette tilfellet, hvis prosenter brukes, tilsvarer verdien på 100 % høyden på teksten i stedet for målingen av beholderen. Det mest brukte målet i forhold til teksten tilsvarer 120 %. En 100 % linje vil bety at bunnen av en linje berører toppen av den neste. Selv om typografidesign vanligvis inkluderer litt plass, er det vanlig å la litt mer margin mellom linjene.

  For å uttrykke skillet mellom linjer, er det også mulig å angi en koeffisient (en enhetsløs verdi) for å beregne høyden på linjen basert på høyden på tekstboksen.

• letter-spacing er verdien av mellomrommet mellom bokstavene i ord, som i typografi er kjent som kerning o sporing.

• word-spacing representerer målet for mellomrommene mellom ordene.

• white-space angir oppførselen til mellomrom i en tekst. Når verdien brukes normal, som er tatt som standard, slår sammen flere tomme mellomrom i koden HTML i en av presentasjonene på nettsiden (vises av nettleseren) og tar de hvite mellomrommene som en referanse for å bryte en linje hvis det ikke er mellomrom i blokken.

  Verdien nowrap Den slår også sammen gjentatte tomme mellomrom til ett, men deler ikke tekstlinjene i de tomme feltene selv om linjen ikke passer i beholderen, overfylte plassen om nødvendig og skriver utenfor om nødvendig. For å uttrykkelig dele linjene kan du bruke etiketten <br> de HTML.

  hjelp pre De tomme områdene blir heller ikke forent ved å slå dem sammen til ett, og linjene er heller ikke delt med mellomrommene som referanse.

  pre-line slå sammen de gjentatte emnene og bryte linjene om nødvendig ved å bruke emnene som referanse.

  pre-wrap bevarer gjentatte mellomrom og bryter linjer om nødvendig ved å bruke mellomrom som referanse.

FARGE

En CSS farge kan uttrykkes iht RGB fargemodell eller iht HSL fargemodell og i begge tilfeller kan transparensinformasjon inkluderes, verdien av en fjerde kanal som vanligvis kalles alfakanal o alfa-sammensetning, som gir opphav til RGBA- og HSLA-modellene.

For å uttrykke farger i format RGB ved bruk av heksadesimal notasjon brukes syntaksen #RRGGBB, med RR som verdien av den røde komponenten (i prinsippet ved bruk av to heksadesimale sifre), GG er verdien av den grønne komponenten og BB er verdien av den blå komponenten. Som allerede sagt, hvis de to sifrene i hver komponent har samme verdi, kan den uttrykkes som #RGB begrense antall tilgjengelige farger for de såkalte nettsikre

I tillegg til denne måten å representere farge på, den mest klassiske og brukte, kan den uttrykkes som rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) for å indikere det i formatet RGB, HSL og deres respektive skjemaer med indikasjon på åpenhet (alfakanal)

Med mindre annet blir bedt om ved å legge til enhetssuffikset, vil RGB-modell bruker desimalverdier fra 0 til 255, for de tre komponentene, verdien av alfa-komponent er en koeffisient (desimal fra null til én) og den første verdien av HSL fargemodell, fargetonen, er en desimalverdi som varierer fra 0 til 360 (uten enheter) som representerer en vinkel. Metnings- og lysstyrkeverdiene til HSL modell De er vanligvis uttrykt i prosent.

Som allerede sagt, selv om bruken ikke er veldig hyppig, kan farger angis med navnet deres i formatet color:black; i stedet for color:#000000;. Det første formatet er mer lesbart, men er begrenset til en kort tabell med verdier som også er vanskeligere å endre numerisk fra en applikasjon skrevet i Javascript.

For vårt forslag til grafisk representasjon av data fra sensorer koblet til IoT, trenger vi kun tre egenskaper relatert til farge. De vil tjene både til å angi navnet på teksten, som nå er forklart, og for å indikere navnet på en hvilken som helst komponent som støtter den.

• color angir fargen på elementet HTML og det som det inneholder (som arver det) med mindre det uttrykkelig endres ved å tildele andre farger individuelt.

• background-color Brukes til å definere bakgrunnsfargen til et element HTML. I tillegg til å angi farge som verdi RGB o HSL du kan bruke spesiell verdi transparent for å få objektet til å ikke ha noen bakgrunnsfarge og det er mulig å se hva som ligger bak det, det vil si at det ikke dekker elementene det er tegnet på.

• opacity lar deg angi opasiteten (indirekte, gjennomsiktighet) til et element og alt innholdet (ikke å forveksle med gjennomsiktigheten til bakgrunnen). Hvis åpenhet tildeles elementer som finnes i andre som i seg selv er transparente, vil dette økes, det vil ikke fungere separat. Du kan ikke gjøre et objekt i et gjennomsiktig objekt mer ugjennomsiktig. Verdien av opacity Det er uttrykt som en koeffisient som opacity:0.5; for å indikere 50 % opasitet.

  Eldre versjoner av Microsofts nettleser brukte ikke denne egenskapen, men hadde egenskapen filter (filter) som blant andre verdier kan støtte alfa (for alfakanal) som en prosentandel opasitet kan tilordnes med opacity i henhold til formatet:

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

Tiltak

En CSS, målingen av elementene <div>, som vi har valgt å komponere grafikkbeholderen, er satt med width (bredde) og height (alt).

mellom innholdet i <div> og dens omkrets er det et fyllingsområde som bestemmes med verdien av padding. Rundt omkretsen av objektet er kanten hvis mål er spesifisert med egenskapen border. Skille utsiden av objektet <div> av de andre omkringliggende objektene er det et rom hvis mål bestemmes av margin.

Under normale forhold, målingen av plassen som brukes av objektet <div> kan beregnes som summen av bredden eller høyden pluss polstringen (padding) pluss kantlinje (border) pluss margin (margin). Når den relevante målingen som er etablert er det nyttige innvendige rommet til objektet <div>, denne sammensetningen er veldig praktisk, men hvis det som er kjent er den totale tilgjengelige målingen kan denne oppførselen endres, satt som standard, slik at den totale bredden og høyden er den som er angitt med width (bredde) og height (høyde) ved å trekke fra målingen av polstring, kant og marg fra den, i stedet for å legge den til. For å bruke denne modusen, tilordne propiedad box-sizing verdien border-box (standard er content-box)

Følgende diagram viser grafisk verdiene som kommer fra width (bredde) og height (høy) hvis du bruker box-sizing:border-box; (totalt) ellerbox-sizing:content-box; (innsiden)

Verdiene til målingene er uttrykt med enhetene som allerede er forklart. Når det gjelder egenskaper definert av flere verdier, kan tall uttrykt med ulike typer gjennomsnitt blandes. I tillegg er det noen spesielle verdier som er relevante for bruken vi skal gjøre i denne implementeringen av sensorgrafer i IoT. Konkret kan vi bruke verdien auto på eiendom margin som en ressurs for å sentrere objekter under noen omstendigheter.

I eksemplet ovenfor, for klassen "small_box" er en 2 piksler tykk kant definert, tegnet med en svart strek (#000000) kontinuerlige (solid). I klassen "big_box" er linjen som brukes for grensen stiplet (dashed) og fargen rød (#FF0000). For å uttrykke disse verdiene separat kan vi bruke border-width for tykkelse, border-style for hjerneslag og border-color for farge. Disse kantegenskapene er i sin tur sammensatte og dannes av topp-, høyre-, bunn- og venstretrekkene, som følger med klokken som forklart ovenfor.

De to klassene som er definert har samme mål, men den første er mindre siden, når du bruker verdien border-box for eiendom box-sizing, polstring, kantlinje og marg er tegnet inne i objektet i stedet for rundt innholdet, som standard. I "big_box"-klassen er det ikke angitt, så verdien tas som standard content-box som gjør at polstring, kant og marg øker til størrelsen angitt med width y height.

Klassemarginverdien i eksemplet ovenfor er 10 piksler øverst, høyre, bunn og venstre, så den kan uttrykkes som en enkelt verdi margin:10px;. Det er veldig interessant å kjenne til dette alternativet for å forstå koden utviklet av tredjeparter, selv om det i dette implementeringsforslaget, for å gjøre det mer lesbart, foreslås å indikere, gjentatte, verdiene.

De tre klassene i det forrige eksemplet gir det samme resultatet, definisjonen av den såkalte "lakoniske" er mer kompakt og mindre den for den såkalte "pratfulle" som, mer enn å legge til klarhet i lesingen, er den formen som normalt brukes til å modifisere et delvis, konkret aspekt av en eiendom, ved å gjenbruke de andre verdiene ved arv (de leveres av beholderen eller levert av en av klassene som er tildelt elementet). Hvis belastningen pålagt serveren av den ekstra teksten til denne måten å definere egenskapene og andre omstendigheter som, for å gjøre koden mer lesbar, som kommentarer, øke størrelsen og dermed trafikken, var relevant, ville det være mulig å behandle det (for eksempel) fra PHP som en del av kodegenereringsstrategien fra dette språket.

Dimensjonene til boksmodellen påvirker hovedsakelig elementene <div> men det er mulig å tvinge denne oppførselen på andre elementer med egenskapen display og verdien block. For å få et element til å flyte som tekst på en linje, bruk display:inline; og både atferd, målinger og flyt, kan kombineres med display:inline-block;

Verdien none på eiendom display, brukt som display:none;, lar deg også skjule objekter, som vil tjene til å "slå dem på" og "av" dem fra Javascript.

Hvis dimensjonene til et element ikke er spesifisert, trenger det de dimensjonene som er nødvendige for å få innholdet til å passe (faktisk får det innholdet til å passe uten å måtte etablere en dimensjon). Men hvis dimensjonene er angitt, kan det hende at de inneholdte gjenstandene ikke passer; i et slikt tilfelle blir ikke dimensjonene respektert, de økes for å la alt innhold være synlig.

For at elementene i en annen av faste mål beskjæres når de overskrider størrelsen, brukes egenskapen overflow med motet hidden. med verdien scroll, gjenstander som renner over beholderen kuttes også ut, som skjer med hidden men et rullefelt vises som kan sees når du flytter det. Verdien auto gjør at rullefeltet vises bare når det er nødvendig basert på størrelsen på innholdet.

Du kan også etablere en minimumsstørrelse slik at beholderne opptar den plassen selv om innholdet ikke trenger det og uten å begrense deres dimensjoner for å øke når innholdet krever det. Eiendommene som har ansvaret for denne oppgaven er min-width for acho og min-height for den høye. I motsatt forstand, max-width sett en maksimal bredde og max-height en maksimal høyde som kansellerer ut width ya height.

Flyt av elementer på nettsiden

Rektangelene (blokkene) som vi har definert med elementer <div>, er de plassert under hverandre som standard. For å endre denne atferden kan du bruke egenskapen float, som indikerer left o right som en verdi, slik at de flyter fra henholdsvis venstre til høyre eller fra høyre til venstre. Tvert imot, for å hindre at en gjenstand "flyter" til høyre eller venstre for en annen, kan du bruke eiendommen clear med verdiene left, right o both, som overstyrer flyten fra venstre til høyre, høyre til venstre, eller begge deler.

I motsetning til hva som skjer under andre omstendigheter, produserte strømmen float endrer ikke automatisk dimensjonene til beholderen, så det er nyttig å inkludere i egenskapene overflow:auto; å tvinge størrelsen (høyden) på beholderen til å endres når en gjenstand renner over den på grunn av dens plassering med float.

En annen måte å konfigurere flyten av et elements innhold på er å dele det inn i kolonner med egenskapen column-count (som for øyeblikket skal ledsages av -webkit-column-count og -moz-column-count) Størrelsen på kolonnene kan angis (faktisk foreslått) med column-width (-webkit-column-width -moz-column-width) og skillet mellom kolonner med column-gap (-webkit-column-gap -moz-column-gap)

Slik at blokkene ikke er delt og innholdet fordeles over flere kolonner, kan du bruke display:inline-block; selv om det sikkert tilsier det. la en del av kolonnen være ubrukt.

Posisjonering

For å etablere plasseringen av elementene på nettsiden bruker CSS flere posisjoneringsmoduser som kan være forskjellige for hvert element, det vil si at det er mulig å blande forskjellige posisjoneringskriterier på samme nettside.

• position:static; Det er standardposisjoneringen (det er ikke nødvendig å indikere det hvis det ikke har blitt endret tidligere) Denne typen posisjonering følger sidens "naturlige" flyt: det ene elementet etter det andre starter fra venstre, vokser, så lenge som det er plass, til høyre og fra topp til bunn. Den bruker ikke horisontale eller vertikale koordinater for å fastslå plasseringen, den følger posisjonen som tilsvarer rekkefølgen til objektet.

• position:fixed; Den brukes til å plassere et objekt i en fast posisjon i nettleservinduet (som en meny, for eksempel) Plasseringen av elementet angis horisontalt med left o right for å bestemme separasjonen til henholdsvis venstre eller høyre og med top o bottom for separasjon over eller under kanten av nettleservinduet (viewport).

  Ved å bruke denne og andre typer posisjonering kan objekter overlappe hverandre. Objekter tegnet først (definert tidligere i koden HTML) kan dekkes av de som trekkes senere (de som er inkludert senere i koden HTML). For å endre normal rekkefølge kan du bruke eiendommen z-index, objektene med høyest verdi i z-index De dekker de med mindre verdi.

• position:relative; Flytter elementet fra sin "normale" posisjon som angitt av egenskapene left o right horisontalt og top o bottom vertikalt.

• position:absolute; Plasserer elementet i en fast posisjon i forhold til objektet som inneholder det. Dens plassering er uttrykt, som i tidligere tilfeller, med left,right, top y bottom

  Navnet på denne typen posisjonering er til å begynne med forvirrende, siden posisjonen er etablert med hensyn til objektet hierarkisk overlegent det som bruker egenskapen, noe som kan diskuteres om det er absolutt.

  Det er også viktig å huske at elementet som inneholder objektene <div> som vi bruker på det første hierarkiske nivået er <body>, derfor hvis <div> hva bruker du position:absolute; ikke er inneholdt i en annen, vil dens posisjonering være "absolutt" i forhold til nettsiden.

Egenskaper for spesifikke medier og egenskaper (mediespørringer)

CSS lar deg definere i samme stilark forskjellige utseender for ulike medier eller støtter avhengig av typen enhet som brukes (som en skjerm eller en skriver), dens dimensjoner, dens orientering (vertikal eller liggende) eller dens oppløsning. Dette tjener til å kunne vise, på den mest passende måten for en kontekst, den samme nettsiden.

For å referere til media, bruk @media på lignende måte som det som allerede er forklart for fonter med @font-face, omsluttende i seler ({ y }) definisjonene av de forskjellige elementene: etiketter HTML, klasser, identifikatorer...

Medietypene som er tilgjengelige i CSS3 er: all, for å referere til alle medier (alle), screen for alle typer skjermer (eldre versjoner av CSS De skilte mellom TV- og dataskjermer) print for skriverutgang og speech for lydnettlesere som tolker informasjon med stemmesynthesizere.

I eksemplet ovenfor har elementer i tekstklassen svart bakgrunn og hvit tekst på skjermen, men er skrevet ut med hvit bakgrunn og svart tekst.

Betingelser kan pålegges media for å definere ulike sett med egenskaper basert på for eksempel tilgjengelig oppløsning eller viewport-forhold. Disse forholdene og selve midlene kan sammensettes med logiske operasjoner and, not y only å kreve at du overholder henholdsvis flere, at du ikke overholder eller først når du overholder.

Blant de tilgjengelige forholdene finner vi dem spesielt interessante max-width (maksimal vindusbredde), max-height (maksimal vindushøyde), min-width (minimum vindusbredde), min-height (minimum vindushøyde), orientation (retningen, som kan være landscape, landskap eller portrait, vertikal), max-resolution (maksimal oppløsning i dpi, punkter per tomme eller in dpcm, poeng per centimeter) og min-resolution (minimumsoppløsning, også i dpi o dpcm).

I forrige eksempel starter vi med å definere en bakgrunnsfarge slik at elementene i main_block-klassen i alle medier har bakgrunnsfargen #CCCCCC. Når det vises på en skjerm og vinduet er minst 320 piksler bredt, vil venstre og høyre marg være automatisk (sentrer blokken) og elementbredden vil være 300 piksler. Hvis skjermoppløsningen er 640 piksler, vil blokkbredden være 620 piksler. Siden den andre mediedefinisjonen ikke inkluderer margininformasjon og enheter som oppfyller den andre betingelsen også vil oppfylle den første, vil den horisontale margen fortsatt være automatisk.

Til slutt, i eksemplet endres bakgrunnsfargen slik at den er hvit i utskriften.

Den vanlige måten å definere stiler for ulike medier på er vanligvis å starte med de vanlige, vanligvis farger og skrifttyper, etterfulgt av de mest restriktive geometriene (målene til enheter med det laveste antallet piksler) vanligvis for smarttelefoner og nettbrett der i tillegg Det vil være viktig å vite om de brukes vertikalt eller horisontalt med orientation og sikkert også dens oppløsning med min-resolution. Da er de forskjellige størrelsene for større skjermer angitt, og det ender som regel med utskrift og talemedier, som i eksempelet med IoT-grafikk er utelatt.

Bruk @media Imponerende forhold som dimensjoner, oppløsning og orientering lar designeren lage en enkelt nettside som, med forskjellige stiler, vil se best ut for hver enhet. Denne oppførselen kalles vanligvis responsiv design; tilpasningsdyktig design, i en veldig fri oversettelse.

CSS for SVG-grafikkbeholder

Med det som er forklart så langt, er det nå mulig å definere stilene som SVG-grafikk HTML-beholder som skal representere tilstanden til sensorene koblet til IoT. I følgende kode er forslaget inkludert, kommentert, fordelingen i kolonner som tilsvarer et større antall grafer enn de som forslaget til artikkelserien bruker, slik at det kan gjenbrukes i andre tilfeller.

Nedenfor kan du se hvordan disse stilene vil se ut. HTML-kode fra foreslått beholder for SVG-grafikk fra forrige artikkel.

Den neste artikkelen i denne serien forklarer hvordan tegne med SVG Datagrafer over statusen til sensorer koblet til tingenes internett (IoT).