Definiera med CSS utseendet på sensorgrafikwebben i IoT

I föregående artikel i serien om hur man gör tillståndsgrafer över sensorer anslutna till Internet of Things IoT förklarar vägen använda en webbsida utvecklad i HTML som en struktur för grafik. Webbsidans element, som hade reducerats till ett minimum med hjälp av objekt <div>, definierade inte direkt dess utseende, istället hänvisade de till utseendeinformation till en stilmall CSS, vilket är vad som kommer att förklaras i den här delen av serien.

I lösningen som jag föreslår för att göra grafer över sensorer kopplade till IoT används ett dokument CSS som laddas från dokumentet html. Om koden html kommer att genereras från en applikation på servern, till exempel i PHP, skulle det vara väldigt enkelt att inkludera det som en del av koden som definierar webbsidan istället för att ladda den från den, vilket skulle kunna optimeras lite genom att spara ett samtal. Vilket alternativ som än väljs inkluderar den mest bekväma metoden redigera koden CSS i ett separat dokument för att hantera det mer bekvämt och för att kunna återanvända det. I exemplet som utvecklades i handledningen för denna artikelserie har den fått namnet estilo.css.

På samma sätt, När du hanterar komplexa projekt är det lämpligt att använda flera separata stilmallar i olika dokument, både för att kunna återanvända specifika funktioner utan att behöva ladda alla varje gång, och för att enklare redigera koden genom att distribuera den i olika dokument enligt motsvarande logiska struktur.

Stilarna CSS De försöker beskriva alla ytterligheter av beteendet och utseendet på en webbsida från flera typer av tillvägagångssätt, alla samtidigt giltiga, samtidigt som de försöker respektera kompatibilitet med tidigare versionsspecifikationer så mycket som möjligt. Det gör att det finns många möjliga lösningar som löser samma behov. samt ett stort antal tillgängliga resurser (fastigheter CSS). På grund av artikelns didaktiska tillvägagångssätt och för att inte förvirra nya användare i CSS, endast fastigheterna och de strukturer som krävs för det slutliga målet, som grafiskt ska representera data från sensorer anslutna till Internet of Things. Samtidigt finns det också en liten introduktion till CSS, kaskadformatmallar.

Formatera CSS-egenskaper

El grundläggande format Den består av ett egenskapsnamn, kolontecknet, egenskapsvärdet och semikolontecknet. nombre:valor;

CSS låter dig använda olika måttenheter i samma dokument inklusive de som är relaterade till strukturen (måttet på vad ett element innehåller) i procent, i förhållande till enheten på vilken de är representerade, såsom pixeln, eller absoluta såsom centimeter. Enheterna uttrycks efter värdet enligt följande förkortningskodning.

För den applikation som vi ska göra är det viktigt att överväga minst tre stilenheter. % för att ta mått i förhållande till storleken på ett föremåls behållare, pixeln för mätningar enligt skärmens upplösning och millimetrarna (faktiskt alla absoluta mått) för att göra utskrivna rapporter.

Det finns några komplexa egenskaper, eller komposit, som beror på flera värden (som färg, storlek, stil...), för att ange värdet finns det två möjligheter i CSS: skriv, i lämplig ordning, alla värden separerade med mellanslag eller använd summan av enkla egenskaper som motsvarar komplexet. Till exempel kan alla fyra marginalerna för ett objekt anges i en enda egenskap margin eller kan ställas in med egenskaper margin-top, margin-right, margin-bottom y margin-left. Förresten, den ordningen (medsols) är den som följs av beskrivningarna av värden som "omger" ett element som den inre (utfyllnad) eller yttre marginalen, gränsen ...

Med det som har förklarats hittills kan vi nu se några exempel på fastigheter

I exemplet ovan Färgen definieras med en kod med 6 hexadecimala siffror som representerar, i par, värdet på den röda, gröna och blå komponenten. När det händer, som i exemplet, att de två siffrorna är lika, kan det förkortas som #F09 (vilket för övrigt motsvarar de så kallade "websäkra färgerna"). I det slutliga förslaget kommer jag att undvika att använda dessa förkortningar för att förena kriterierna och göra det mer läsbart. Du kan också förkorta värdena för komplexa egenskaper, som t.ex margin i exemplet, när alla värden eller motsatta par upprepas. På samma rad med att spara text är det också möjligt att utelämna enheten när man anger en egenskap när värdet är noll, eftersom det är irrelevant i så fall.

Vissa värden har, förutom att de kan uttryckas numeriskt, ett namn vilket gör koden mer läsbar och låter dig komma ihåg dem bättre. Till exempel, istället för målets hexadecimala numeriska kod, #FFFFFF (o #FFF), kan skrivas white med samma resultat. På så sätt blir färgen svart, #000000 (o #000), kan ersättas av black.

också där värden uttrycks med en speciell kod, ett namn. Till exempel, för att indikera att sidomarginalen ställs in automatiskt av webbläsaren (normalt kommer den att motsvara mittfunktionen) används specialvärdet auto, som inte har någon numerisk överensstämmelse med något värde.

till uttrycka ett speciellt sätt att använda en serie sammansatta (komplexa) värden för en fastighet CSS Du kan välja format med en syntax som liknar funktionernas. Till exempel, för att uttrycka en färg som de tre värdena för dess röda, gröna och blå komponent (den modell RGB) skulle skrivas color: rgb(128, 255, 64);. Inom denna uttrycksstil är det också möjligt att använda enheter; I exemplet ovan är färgkomponenterna ett decimalvärde från 0 till 255, men det kan vara lättare att uttrycka detta som en procentandel av summan av varje färgkomponent, i så fall kan det också skrivas som color: rgb(50%, 100%, 25%);.

Beräknar värden i CSS

I de senaste versionerna av CSS det går att göra enkla matematiska operationer för att beräkna värden. För att göra detta, använd calc och operationen som ska utföras uttrycks inom parentes. Du kan ange enheter, parenteser och enkla operatorer som summa (+), subtraktion (-), multiplikation (*) och division (/). Uttrycket skulle vara av typen width:calc((90%-20px)/2));.

Variabler kan användas i matematiska operationer i CSS hänvisar vid beräkningen av en fastighet till värdet av en annan med var. För att kunna använda en variabel utan att behöva hänvisa till en faktisk egenskap hos stilen är det också tillåtet att citera en egenskap som inte finns. CSS rekommenderar formatet --nombre-variable (två bindestreck framför namnet på den uppfunna egendomen). På detta sätt, för att definiera höjden på ett element som halva dess bredd ett uttryck i CSS som height:calc(var(width)/2); och för att definiera en ny variabel "tjocklek" (som andra egenskaper skulle kunna använda) skulle du skriva t.ex. --grosor:4px; för att senare kunna hänvisa till det som margin-top:calc(var(--grosor)*4);

Webbläsarberoende CSS-egenskaper

CSS Det är en specifikation som standardiserats av konsortiet W3C (World Wide Web Consortium) men många egenskaper eller beteendestilar når webbläsare innan de ingår i specifikationen av en version.

så att koden CSS fungerar med de aktuella funktionerna i en webbläsare, men förlora inte kompatibiliteten med nya funktioner, ett prefix används. Detta prefix beror på återgivningsmotor som använder webbläsaren du vill referera till (för vilken stilen är definierad).

Prefixet -webkit Det fungerar för webbläsare baserat på WebKit som Safari o krom. Prefixet -moz Den används för webbläsare baserade på återgivningsmotor de Mozillanärvarande GeckoSom firefox och dess derivat. Att hänvisa till EdgeHTML, The återgivningsmotor webbläsare kant från Microsoft (tidigare Trident), används prefixet -ms. Fallet med webbläsaren Opera är lite speciell sedan han började använda sin egen återgivningsmotor, som avses med -o, men arbetar för närvarande med WebKit, vilket uttrycks som -webkit.

För att använda en egenskap som hänvisar till en webbläsare, skriv dess namn, sätta prefixet och separera det med ett bindestreck som i -o-border-radius:10px;, som skulle tjäna till att ange en rundad kant (ett rundat hörn) i äldre versioner av webbläsaren Opera.

Kommentarer

För att förtydliga koden CSS Du kan använda kommentarer, vilket gör den mer läsbar men med nackdelen att den ökar storleken. Syntaxen för kommentarer i CSS Det är som flerradiga kommentarer C + + som jag är säker på att du redan vet: börjar om /* och slutar på */, Som i C + +, kan uppta flera rader.

Väljare

Definitionen av egenskaper tilldelas objekt i ett dokument html gruppera dem i väljare och omsluter dem i hängslen. En väljare kan referera till ett språkelement html (en etikett), som div, en klass (tilldelad med class en html) en identifierare (tilldelad med id en html) eller alla (den "universella väljaren") representerade av asterisken (*). Följande exempel visar en väljare av varje typ:

Etiketterna av html uttrycks i stildefinitionen med deras namn, markeras klasserna genom att sätta en punkt före namnet (.) och ett pundtecken (#) för identifierare.

En del av den stora kraften i CSS bor i möjlighet att gruppera väljare när man definierar deras egenskaper. Det finns flera sätt att gruppera väljare. Genom att gruppera dem, genom att separera dem med kommatecken, uttrycks det att var och en av de citerade väljarna har dessa egenskaper.

Det föregående exemplet indikerar att förbruknings-, luftfuktighets- och temperaturklasserna delar färg, bredd och höjd. Ett nytt koncept introduceras också i denna kod: egenskaper kan omdefinieras, och i så fall är de senast beskrivna som råder. På så sätt skulle elementen i temperaturklassen slutligen ha en höjd på 50 % av det föremål som innehåller dem.

Om de grupperade väljarna inte separeras med kommatecken, är villkoret för egenskaperna kumulativt, det vill säga ett element måste uppfylla alla väljare för att det ska få det utseende eller beteende de definierar. Om väljare hänvisar till taggar html Ordningen i vilken de visas måste vara fallande i inkluderingsnivån: först den högsta hierarkiska nivån och sist den lägsta.

I föregående exempel definieras elementen div som också är av temperaturklassen och de element som har både temperaturklassen och förbrukningsklassen (båda samtidigt) som i class="temperatura consumo". Elementen <div> Av kod html med class="temperatura" de skulle ha en topp på 100%

CSS-egenskaper för att definiera texten

Man kan skilja på tre typer av egenskaper som påverkar textens utseende: (1) de som fastställer typsnittet som den presenteras med, (2) de som bestämmer utseendet på det bokstavliga (textens innehåll) och (3) generiska, det vill säga de som påverkar både textens utseende och andra komponenters utseende. I allmänhet kommer det som sades för att förklara den sista gruppen också att gälla samma egenskaper som tillämpas på andra element.

Typografi (font)

• font-family anger namnet på teckensnittet som används för ett element. Du kan skriva ett enda namn eller en lista, i prioritetsordning och separera namnen med kommatecken, över de typsnitt som kommer att användas alternativt om det önskade inte finns. På samma sätt är det möjligt att använda generiska typsnitt med namnen monospace, serif, sans-serif, cursive, fantasy. Av dessa generiska typsnitt är det viktigaste (för presentationen av tillgängliga data) det första som, som namnet antyder, kommer att använda det teckensnitt med fast avstånd som finns i systemet och förinställt av webbläsaren. Den andra, serif, kommer den att använda den tillgängliga standard serif (finish eller grace). Utan auktion om den tredje anges, sans-serif. Imiterar handritad skrift med cursive (ett sätt att kalla det som helt klart skulle kunna förbättras) och den dekorativa typografin av systemet med fantasy, den sista av de fem.

  När det gäller koden CSS Mellanslag har en speciell betydelse som avgränsare, när namnet på teckensnittsfamiljen består av flera ord separerade med mellanslag skrivs det mellan citattecken för att undvika förvirring.

  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;

  Webbläsare kan använda lokala typsnitt (de som är installerade på systemet där de fungerar) såväl som andra som är specifikt laddade, till och med överlappande de som är installerade lokalt. För att ladda ett teckensnitt, använd @font-face anger dess namn, nedladdningsplatsen för dess definition och, om tillämpligt, en beskrivning av dess format.

  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örsta av de två definitionerna i föregående exempel laddas dokumentets bokstav Sircuito-Expanded-Light.eot som finns i EOT-mappen i huvudmappen (rotmappen) och tilldelas som ett efternamn CircuitExpandedLight. Förresten, gillar du det här typsnittet? Det är gratis, du kan ladda ner gratis typsnittet Sircuito som jag designade för GranaBot-bilden.

  Som kan ses i exemplet, egenskapen url, som motsvarar enhetlig resurslokaliserare, låter dig ange platsen för dokumentet med teckensnittet som laddas ner. Snedstrecket används för att separera namnet på de olika mapparna från sökvägen till teckensnittet, med början med den som innehåller dokumentet från vilket anropet görs eller från roten om URL Börja med en bar.

  Det andra exemplet använder flera alternativa dokument så att samma definition fungerar för flera webbläsare (som var och en laddar den typ som den kan tolka)

  Den sista raden i definitionen inkluderar egenskapen font-smoothing för att mjuka upp bokstaven (applicera en kantutjämning). Eftersom det inte är en standardegenskap används prefixet -webkit.

• font-size tjänar till att ange storleken på bokstaven som i font-size:12px;

• font-weight Ställer in teckensnittets tjocklek. Det kan uttryckas som ett numeriskt värde, vanligtvis en multipel av 100 mellan 100 och 900, enligt de vanliga typografiska vikterna, eller oftare med ett namn: normal för bastjockleken, bold för de djärva, bolder för versionen som brukar kallas svart, light för böterna (vanligtvis kallat ljus) och lighter för de tunnaste (kallas ibland tunna).

  Det numeriska värdet för den normala versionen av teckensnittet är 400 (enhetslös) och 700 för den fetstilta versionen.

  Som standard, om inget annat värde anges, är teckensnittets utseende det som motsvarar normal eller 400 så, om det inte har ändrats i det generiska elementet eller i behållaren som det ärver från, är det inte nödvändigt att ange font-weight med värdet normal.

• font-stretch Den används för att ange bokstavens bredd, så länge den finns i motsvarande familj. De möjliga värdena som fastigheten kan ta, sorterade från smalast till bredast, är: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. Med samma kriterier som användes i den tidigare egenskapen är standardbredden normal och det är inte nödvändigt att uttryckligen ange det om det inte har ändrats i en högre hierarkisk ordning än den som definieras.

• med font-style Du kan ange om en text är ritad med en lutande eller sned bokstav, som påverkar dess utseende, eller med en kursiv bokstav, som uttrycker en speciell betydelse (till exempel främmande ord), eller rund bokstav, det vill säga varken de föregående eller normalt. värdet oblique fyller den första funktionen, utseende och värde italic den andra. Det faktum att bådas utseende ofta är lika eller till och med samma gör att användningen (betydelsen) ibland är förvirrad, så det är värt att uppmärksamma. Som med andra fastigheter, normal tjänar till att avaktivera de tidigare värdena.

• text-decoration tjänar till att understryka (med värdet underline), överlinje (med värdet overline), stryk över (med värdet line-through) eller blixt (med värdet blink) texten som den här egenskapen påverkar.

• För att slutföra serien med typografiaspekten, även om det för vår applikation inte är särskilt relevant, font-variant, låter dig ansöka små bokstäver (små versaler) till texterna.

Text

• text-align talar om för webbläsaren hur textblocket ska justeras. De möjliga justeringarna är till vänster (vilket anses som standard) med koden left, centrera med värdet center, rätt att använda right och motiverad i båda ändar med justify.

• line-height ställer in separationen mellan textrader. I det här fallet, om procentsatser används, motsvarar värdet 100 % höjden på texten istället för behållarens mått. Det mest använda måttet i förhållande till texten motsvarar 120 %. En 100-procentig linje skulle innebära att botten av en rad vidrör toppen av nästa. Även om typografidesign vanligtvis innehåller lite utrymme är det vanligt att lämna lite mer marginal mellan raderna.

  För att uttrycka separationen mellan rader är det också möjligt att ange en koefficient (ett enhetslöst värde) med vilken höjden på linjen ska beräknas utifrån textrutans höjd.

• letter-spacing är värdet av utrymmet mellan bokstäverna i ord, vilket i typografi är känt som kerning o spårning.

• word-spacing representerar måttet på mellanrummen mellan ord.

• white-space ställer in beteendet för vita utrymmen i en text. När värdet används normal, som tas som standard, sammanfogar flera tomma utrymmen i koden html i en av presentationerna på webbsidan (visas av webbläsaren) och tar de vita utrymmena som en referens för att bryta en rad om det inte finns något mellanslag i blocket.

  Värdet nowrap Den sammanfogar också upprepade tomma utrymmen till ett men delar inte upp textraderna i de tomma utrymmena även om raden inte får plats i behållaren, överfyller utrymmet om det behövs och skriver utanför om det behövs. För att uttryckligen dela upp linjerna kan du använda etiketten <br> de html.

  med användning av pre De tomma utrymmena förenas inte heller genom att sammanfoga dem till ett enda, och inte heller delas raderna med utrymmena som referens.

  pre-line sammanfoga de upprepade ämnen och bryt linjerna vid behov med ämnen som referens.

  pre-wrap bevarar upprepade blanksteg och bryter linjer vid behov med blanksteg som referens.

Färg

En CSS färg kan uttryckas enligt RGB färgmodell eller enligt HSL färgmodell och i båda fallen kan transparensinformation inkluderas, värdet av en fjärde kanal som vanligtvis kallas alfakanal o alfasammansättning, vilket ger upphov till RGBA- och HSLA-modellerna.

För att uttrycka färg i format RGB med hexadecimal notation används syntaxen #RRGGBB, där RR är värdet på den röda komponenten (i princip med två hexadecimala siffror), GG är värdet på den gröna komponenten och BB är värdet på den blå komponenten. Som redan sagt, om de två siffrorna i varje komponent har samma värde kan det uttryckas som #RGB begränsa antalet tillgängliga färger för de så kallade webbsäkra

Förutom detta sätt att representera färg, det mest klassiska och använda, kan det uttryckas som rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) för att ange det i formatet RGB, HSL och deras respektive former med indikation på transparens (alfakanal)

Om inget annat begärs genom att lägga till enhetssuffixet, modell RGB använder decimalvärden från 0 till 255, för de tre komponenterna, värdet på alfakomponent är en koefficient (decimal från noll till ett) och det första värdet av HSL färgmodell, nyansen, är ett decimalvärde som sträcker sig från 0 till 360 (utan enheter) som representerar en vinkel. Mättnads- och ljusstyrkavärdena för HSL modell De uttrycks vanligtvis i procent.

Som redan har sagts, även om dess användning inte är särskilt frekvent, kan färger anges med deras namn i formatet color:black; istället för color:#000000;. Det första formatet är mer läsbart men är begränsat till en kort tabell med värden som också är svårare att ändra numeriskt från en applikation skriven i JavaScript.

För vårt förslag för grafisk representation av data från sensorer anslutna till IoT behöver vi bara tre egenskaper relaterade till färg. De kommer att tjäna både för att ange namnet på texten, som nu förklaras, och för att ange namnet på alla komponenter som stöder den.

• color indikerar färgen på elementet html och vad den innehåller (som ärver den) såvida den inte uttryckligen ändras genom att tilldela andra färger individuellt.

• background-color Används för att definiera bakgrundsfärgen för ett element html. Förutom att ange färg som värde RGB o HSL du kan använda specialvärde transparent för att objektet inte ska ha någon bakgrundsfärg och det är möjligt att se vad som finns bakom det, det vill säga att det inte täcker de element som det har ritats på.

• opacity låter dig ställa in opaciteten (indirekt, transparens) för ett element och allt dess innehåll (inte att förväxla med bakgrundens transparens). Om transparens tilldelas element som finns i andra som i sig är transparenta kommer detta att ökas, det kommer inte att fungera separat. Du kan inte göra ett objekt som finns i ett annat transparent objekt mer ogenomskinligt. Värdet av opacity Det uttrycks som en koefficient som opacity:0.5; för att indikera 50 % opacitet.

  Äldre versioner av Microsofts webbläsare använde inte den här egenskapen, men hade egenskapen filter (filter) som bland andra värden kan stödja alfa (för alfakanal) som en procentuell opacitet skulle kunna tilldelas med opacity enligt 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 */

Åtgärder

En CSS, mätningen av elementen <div>, som vi har valt att komponera grafikbehållaren, är inställd med width (bredd) och height (alt).

mellan innehållet i <div> och dess omkrets finns en fyllningsområde som bestäms med värdet av padding. Runt omkretsen av objektet finns kanten vars mått specificeras med egenskapen border. Separera utsidan av föremålet <div> av de andra omgivande föremålen finns ett utrymme vars mått bestäms av margin.

Under normala förhållanden, mätningen av utrymmet som används av objektet <div> kan beräknas som summan av dess bredd eller höjd plus stoppningen (padding) plus kant (border) plus marginal (margin). När det relevanta måttet som fastställs är objektets användbara inre utrymme <div>, denna sammansättning är mycket praktisk, men om det som är känt är den totala tillgängliga mätningen kan detta beteende ändras, inställd som standard, så att den totala bredd- och höjdmåttet är det som anges med width (bredd) och height (höjd) genom att subtrahera måttet på stoppningen, gränsen och marginalen från den, istället för att lägga till den. För att använda detta läge, tilldela propiedad box-sizing värdet border-box (standard är content-box)

Följande diagram visar grafiskt de värden som härrör från width (bredd) och height (hög) om du använder box-sizing:border-box; (totalt) ellerbox-sizing:content-box; (inuti)

Värdena på mätningarna uttrycks med de enheter som redan har förklarats. När det gäller egenskaper definierade av flera värden kan siffror uttryckta med olika typer av medelvärden blandas. Dessutom finns det några speciella värden som är relevanta för den användning vi ska göra i denna implementering av sensorgrafer i IoT. Specifikt kan vi använda värdet auto på fastigheten margin som en resurs för att centrera objekt under vissa omständigheter.

I exemplet ovan definieras en 2 pixel tjock ram för klassen "small_box", ritad med ett svart streck (#000000) kontinuerlig (solid). I klassen "big_box" är linjen som används för gränsen streckad (dashed) och färgen röd (#FF0000). För att uttrycka dessa värden separat kan vi använda border-width för tjocklek, border-style för stroke och border-color för färg. Dessa kantegenskaper är i sin tur sammansatta och bildas av de övre, högra, nedre och vänstra särdragen, som följer medurs enligt beskrivningen ovan.

De två klasserna som har definierats har samma mått, men den första är mindre sedan, när man använder värdet border-box för egendom box-sizing, utfyllnad, ram och marginal ritas inuti objektet istället för runt innehållet, vilket är standard. I klassen "big_box" anges det inte, så värdet tas som standard content-box vilket gör att stoppning, kant och marginal ökar till den storlek som anges av width y height.

Klassmarginalvärdet i exemplet ovan är 10 pixlar överst, höger, botten och vänster, så det kan uttryckas som ett enda värde margin:10px;. Det är mycket intressant att känna till detta alternativ för att förstå koden som utvecklats av tredje part, även om det i detta implementeringsförslag, för att göra det mer läsbart, föreslås att man anger, upprepat, värdena.

De tre klasserna i det föregående exemplet ger samma resultat, varvid definitionen av den så kallade "lakoniska" är mer kompakt och mindre den för den så kallade "talande" som, mer än att lägga till klarhet i läsningen, är den form som normalt är används för att modifiera någon partiell, konkret aspekt av en egenskap, genom att återanvända de andra värdena genom arv (de tillhandahålls av behållaren eller tillhandahålls av en av klasserna som tilldelats elementet). Om den belastning som påförs servern av den extra texten i detta sätt att definiera egenskaperna och andra omständigheter som, för att göra koden mer läsbar, såsom kommentarer, ökar storleken och därmed trafiken, var relevant, skulle det vara möjligt att bearbeta det (till exempel) från PHP som en del av kodgenereringsstrategin från detta språk.

Måtten på lådmodellen påverkar främst elementen <div> men det är möjligt att tvinga detta beteende på andra element med egenskapen display och värdet block. För att få ett element att flyta som text på en rad, använd display:inline; och både beteenden, mätningar och flöde, går att kombinera med display:inline-block;

Värdet none på fastigheten display, används som display:none;, låter dig också dölja objekt, vilket kommer att tjäna till att "slå på" och "stänga av" dem från JavaScript.

Om dimensionerna för ett element inte är specificerade, krävs de dimensioner som krävs för att dess innehåll ska passa (det gör faktiskt att innehållet passar utan att behöva upprätta en dimension). Men om dimensionerna anges kan det hända att de inneslutna föremålen inte passar; i ett sådant fall respekteras inte dimensionerna, de utökas för att allt innehåll ska vara synligt.

För att elementen som finns i en annan av fasta mått beskärs när de överskrider storleken, används egenskapen overflow med värdet hidden. med värdet scroll, föremål som svämmar över behållaren skärs också ut, vilket sker med hidden men en rullningslist visas som kan ses när du flyttar den. Värdet auto gör att rullningslisten endast visas när det är nödvändigt baserat på storleken på innehållet.

Du kan också fastställa en minimistorlek så att behållarna upptar det utrymmet även om innehållet inte behöver det och utan att begränsa deras dimensioner för att öka när innehållet kräver det. De fastigheter som ansvarar för denna uppgift är min-width för acho och min-height för den långa. I motsatt mening, max-width ställ in en maximal bredd och max-height en maximal höjd som tar bort width sedan height.

Flöde av element på webbsidan

De rektanglar (block) som vi har definierat med element <div>, placeras de under varandra som standard. För att ändra detta beteende kan du använda egenskapen float, vilket indikerar left o right som ett värde, så att de flyter från vänster till höger respektive från höger till vänster. Tvärtom, för att förhindra att ett objekt "flyter" till höger eller vänster om ett annat, kan du använda fastigheten clear med värdena left, right o both, som åsidosätter flödet från vänster till höger, höger till vänster eller båda.

I motsats till vad som händer under andra omständigheter producerades flödet float ändrar inte automatiskt behållarens dimensioner, så det är användbart att inkludera i dess egenskaper overflow:auto; att tvinga storleken (höjden) på behållaren att ändras när ett föremål svämmar över den på grund av dess placering med float.

Ett annat sätt att konfigurera flödet av ett elements innehåll är att dela upp det i kolumner med egenskapen column-count (som för tillfället bör åtföljas av -webkit-column-count och -moz-column-count) Storleken på kolumnerna kan anges (faktiskt föreslås) med column-width (-webkit-column-width -moz-column-width) och separationen mellan kolumner med column-gap (-webkit-column-gap -moz-column-gap)

Så att blocken inte delas och deras innehåll fördelas över flera kolumner kan du använda display:inline-block; även om det säkert innebär. lämna en del av kolonnen oanvänd.

positionering

För att fastställa platsen för elementen på webbsidan använder CSS flera positioneringslägen som kan vara olika för varje element, det vill säga det är möjligt att blanda olika positioneringskriterier på samma webbplats.

• position:static; Det är standardpositioneringen (det är inte nödvändigt att ange det om det inte har ändrats tidigare). Denna typ av positionering följer sidans "naturliga" flöde: det ena elementet efter det andra börjar från vänster, växer, så länge som det finns utrymme, till höger och uppifrån och ner. Den använder inte horisontella eller vertikala koordinater för att fastställa sin plats, den följer positionen som motsvarar objektets ordning.

• position:fixed; Den används för att placera ett objekt i en fast position i webbläsarfönstret (som en meny till exempel) Platsen för elementet anges horisontellt med left o right för att bestämma separationen till vänster respektive höger och med top o bottom för separation ovanför eller under kanten av webbläsarfönstret (viewport).

  Genom att använda denna och andra typer av positionering kan objekt överlappa varandra. Objekt ritade först (definierade tidigare i koden html) kan täckas av de som dras senare (de som ingår senare i koden html). För att ändra den normala ordningen kan du använda fastigheten z-index, objekten med det högsta värdet i z-index De täcker de med mindre värde.

• position:relative; Flyttar elementet från dess "normala" position som indikeras av egenskaperna left o right horisontellt och top o bottom vertikalt.

• position:absolute; Placerar elementet i en fast position i förhållande till objektet som innehåller det. Dess läge uttrycks, liksom i tidigare fall, med left,right, top y bottom

  Namnet på denna typ av positionering är till en början förvirrande, eftersom positionen är etablerad med avseende på objektet hierarkiskt överlägset det som använder egenskapen, vilket kan diskuteras om det är absolut.

  Det är också viktigt att komma ihåg att elementet som innehåller objekten <div> som vi använder på den första hierarkiska nivån är <body>därför, om <div> vad använder du position:absolute; inte finns i en annan, kommer dess placering att vara "absolut" med avseende på webbsidan.

Egenskaper för specifika media och egenskaper (mediefrågor)

CSS låter dig definiera i samma stilmall olika utseenden för olika media eller stöd beroende på vilken typ av enhet som används (som en skärm eller en skrivare), dess dimensioner, dess orientering (vertikal eller liggande) eller dess upplösning. Detta tjänar till att kunna visa, på det mest lämpliga sättet för ett sammanhang, samma webbsida.

För att referera till media, använd @media på liknande sätt som det som redan har förklarats för typsnitt med @font-face, omslutande i hängslen ({ y }) definitionerna av de olika elementen: etiketter html, klasser, identifierare...

De typer av media som finns tillgängliga i CSS3 ljud: all, för att hänvisa till alla medier (alla), screen för alla typer av skärmar (äldre versioner av CSS De skilde på TV och datorskärmar) print för skrivarutdata och speech för ljudwebbläsare som tolkar information med röstsyntes.

I exemplet ovan har element i textklassen svart bakgrund och vit text på skärmen men är tryckta med vit bakgrund och svart text.

Villkor kan ställas på media för att definiera olika uppsättningar egenskaper baserat på till exempel tillgänglig upplösning eller viewport-förhållande. Dessa villkor och själva medlen kan sammanställas med logiska operationer and, not y only att kräva att du följer flera, att du inte följer eller först när du följer, respektive.

Bland de tillgängliga villkoren finner vi dem särskilt intressanta max-width (maximal fönsterbredd), max-height (maximal fönsterhöjd), min-width (minsta fönsterbredd), min-height (minsta fönsterhöjd), orientation (orienteringen, vilket kan vara landscape, landskap eller portrait, vertikal), max-resolution (maximal upplösning i dpi, punkter per tum eller in dpcm, poäng per centimeter) och min-resolution (minsta upplösning, även i dpi o dpcm).

I föregående exempel börjar vi med att definiera en bakgrundsfärg så att elementen i klassen main_block har bakgrundsfärgen #CCCCCC i alla media. När det visas på en skärm och fönstret är minst 320 pixlar brett, kommer vänster och höger marginal att vara automatiska (centrera blocket) och elementets bredd blir 300 pixlar. Om skärmupplösningen är 640 pixlar blir blockbredden 620 pixlar. Eftersom den andra mediedefinitionen inte inkluderar marginalinformation och enheter som uppfyller det andra villkoret också kommer att uppfylla det första, kommer den horisontella marginalen fortfarande att vara automatisk.

Slutligen, i exemplet ändras bakgrundsfärgen så att den är vit i utskriften.

Det vanliga sättet att definiera stilar för olika medier är vanligtvis att börja med de vanliga, vanligtvis färger och typsnitt, följt av de mest restriktiva geometrierna (måtten på enheter med det lägsta antalet pixlar) vanligtvis för smartphones och surfplattor där dessutom Det kommer att vara viktigt att veta om de används vertikalt eller horisontellt med orientation och säkert också dess upplösning med min-resolution. Då anges de olika storlekarna för större skärmar och det slutar oftast med utskrifter och röstmedia, som i exemplet med IoT-grafik har utelämnats.

Använd @media Imponerande villkor som dimensioner, upplösning och orientering gör att designern kan skapa en enda webbsida som, med olika stilar, kommer att se den mest lämpliga ut för varje enhet. Detta beteende brukar kallas responsiv design; anpassningsbar design, i en mycket fri översättning.

CSS för SVG-grafikbehållare

Med det som har förklarats hittills är det nu möjligt att definiera de stilar som SVG-grafik HTML-behållare för att representera tillståndet för de sensorer som är anslutna till IoT. I följande kod är förslaget inklusive, kommenterat, den fördelning i kolumner som motsvarar ett större antal grafer än de som förslaget till artikelserien använder, så att det kan återanvändas i andra fall.

Nedan kan du se hur dessa stilar skulle se ut. HTML-kod från föreslagen behållare för SVG-grafik från föregående artikel.

Nästa artikel i den här serien förklarar hur man ritar med SVG Datagrafer över status för sensorer anslutna till Internet of Things (IoT).