Definiți cu CSS aspectul web-ului grafic al senzorului în IoT

În articolul precedent din seria despre cum să faci grafice de stare ale senzorilor conectați la Internet of Things IoT explică calea utilizați o pagină web dezvoltată în HTML ca structură pentru grafică. Elementele paginii web, care au fost reduse la minimum folosind obiecte <div>, nu i-au definit direct aspectul, ci s-au referit la informații despre aspect într-o foaie de stil CSS, care este ceea ce va fi explicat în această parte a seriei.

În soluția pe care o propun de a realiza grafice ale senzorilor conectați la IoT se folosește un document CSS care este încărcat din document HTML. Dacă codul HTML va fi generat dintr-o aplicație de pe server, de exemplu în PHP, ar fi foarte simplu să îl includeți ca parte a codului care definește pagina web în loc să o încărcați din ea, care ar putea fi optimizată puțin prin salvarea unui apel. Indiferent de opțiunea aleasă, metoda cea mai convenabilă include editați codul CSS într-un document separat pentru a-l gestiona mai confortabil și pentru a-l putea reutiliza. În exemplul dezvoltat în tutorialul acestei serii de articole, i s-a dat numele estilo.css.

In acelasi fel, Când aveți de-a face cu proiecte complexe, va fi recomandabil să folosiți mai multe foi de stil separate în documente diferite, atât pentru a putea reutiliza funcționalități specifice fără a fi nevoie să le încărcați pe toate de fiecare dată, cât și pentru a edita mai ușor codul prin distribuirea lui în diferite documente conform structurii logice corespunzătoare.

Stilurile CSS Aceștia încearcă să descrie toate extremele comportamentului și aspectului unei pagini web din mai multe tipuri de abordări, toate simultan valabile, încercând în același timp să respecte pe cât posibil compatibilitatea cu specificațiile versiunii anterioare. Aceasta înseamnă că există multe soluții posibile care rezolvă aceleași nevoi. precum și un număr mare de resurse disponibile (proprietăți CSS). Datorită abordării didactice a articolului și pentru a nu încurca utilizatorii noi în CSS, doar proprietățile și structurile necesare obiectivului final, care reprezintă grafic datele de la senzorii conectați la Internetul lucrurilor. În același timp, există și o mica introducere la CSS, foi de stil în cascadă.

Formatarea proprietăților CSS

El format de bază Acesta constă dintr-un nume de proprietate, semnul două puncte, valoarea proprietății și semnul punct și virgulă. nombre:valor;

CSS vă permite să utilizați diferite unități de măsură în același document inclusiv cele legate de structură (măsurarea a ceea ce conține un element) sub formă de procente, raportate la dispozitivul pe care sunt reprezentate, cum ar fi pixelul, sau absolute precum centimetri. Unitățile sunt exprimate după valoare conform următoarei abrevieri.

Pentru aplicația pe care o vom face, este important să luăm în considerare cel puțin trei unități de stil. % pentru efectuarea de măsurători în raport cu dimensiunea containerului unui articol, pixelul pentru măsurători în funcție de rezoluția ecranului și milimetrii (de fapt, orice măsurători absolute) pentru realizarea rapoartelor tipărite.

Sunt câteva proprietăți complexe, sau compozit, care depind de mai multe valori (cum ar fi culoarea, dimensiunea, stilul...), pentru a indica valoarea există două posibilități în CSS: scrieți, în ordinea corespunzătoare, toate valori separate prin spații sau folosiți suma proprietăților simple echivalente cu complexul. De exemplu, toate cele patru margini ale unui obiect pot fi specificate într-o singură proprietate margin sau poate fi setat cu proprietăți margin-top, margin-right, margin-bottom y margin-left. Apropo, acea ordine (în sensul acelor de ceasornic) este cea urmată de descrierile valorilor care „înconjoară” un element precum marginea interioară (padding) sau exterioară, chenarul...

Cu ceea ce s-a explicat până acum putem vedea acum câteva exemple de proprietăți

În exemplul de mai sus Culoarea este definită folosind un cod de 6 cifre hexazecimale care reprezintă, în perechi, valoarea componentei roșii, verzi și albastre.. Când se întâmplă, ca în exemplu, că cele două cifre sunt egale, poate fi prescurtat ca #F09 (care, de altfel, corespunde așa-numitelor „culori sigure pentru web”). În propunerea finală voi evita utilizarea acestor abrevieri pentru a unifica criteriile și a le face mai lizibile. De asemenea, puteți prescurta valorile proprietăților complexe, cum ar fi margin în exemplu, când se repetă toate valorile sau perechile opuse. Pe aceleași linii de salvare a textului, este, de asemenea, posibil să omiteți unitatea atunci când specificați o proprietate când valoarea este zero, deoarece este irelevantă în acest caz.

Unele valori, pe lângă faptul că pot fi exprimate numeric, au un nume ceea ce face codul mai lizibil și vă permite să le amintiți mai bine. De exemplu, în loc de codul numeric hexazecimal al țintei, #FFFFFF (o #FFF), poate fi scris white cu acelasi rezultat. În acest fel, culoarea neagră, #000000 (o #000), poate fi înlocuit cu black.

de asemenea valorile sunt exprimate printr-un cod special, un nume. De exemplu, pentru a indica faptul că marginea laterală este setată automat de browser (în mod normal, aceasta va corespunde funcției de centru) se folosește valoarea specială auto, care nu are corespondență numerică cu nicio valoare.

la exprimă un mod special de utilizare a unei serii de valori compuse (complexe) ale unei proprietăți CSS Puteți alege formate cu o sintaxă similară cu cea a funcțiilor. De exemplu, pentru a exprima o culoare ca cele trei valori ale componentei sale roșu, verde și albastru ( Model RGB) ar fi scris color: rgb(128, 255, 64);. În cadrul acestui stil de exprimare este posibil să se utilizeze și unități; În exemplul de mai sus, componentele de culoare sunt o valoare zecimală de la 0 la 255, dar poate fi mai ușor de exprimat ca procent din totalul fiecărei componente de culoare, caz în care ar putea fi scris și ca color: rgb(50%, 100%, 25%);.

Calcularea valorilor în CSS

În cele mai recente versiuni ale CSS se poate face operații matematice simple pentru calcularea valorilor. Pentru a face acest lucru, utilizați calc iar operaţia de efectuat este exprimată în paranteze. Puteți indica unități, paranteze și operatori simpli precum suma (+), scădere (-), înmulțire (*) și împărțirea (/). Expresia ar fi de tipul width:calc((90%-20px)/2));.

Variabilele pot fi folosite în operații matematice în CSS referindu-se in calculul unei proprietati la valoarea alteia cu var. Pentru a putea folosi o variabilă fără a fi nevoie să ne referim la o proprietate reală a stilului, este permisă și citarea unei proprietăți care nu există. CSS recomandă formatul --nombre-variable (două cratime în fața denumirii proprietății inventate). În acest fel, pentru a defini înălțimea unui element ca jumătate din lățimea sa o expresie în CSS ca height:calc(var(width)/2); și pentru a defini o nouă variabilă „grosime” (pe care ar putea-o utiliza alte proprietăți) ați scrie, de exemplu, --grosor:4px; pentru a ne putea referi ulterior la el ca margin-top:calc(var(--grosor)*4);

Proprietăți CSS dependente de browser

CSS Este o specificație standardizată de consorțiu W3C (World Wide Web Consortium) dar multe proprietățile sau stilurile de comportament ajung la browsere înainte de a face parte din specificație a unei versiuni.

astfel încât codul CSS funcționează cu caracteristicile actuale ale unui browser, dar nu pierdeți compatibilitatea cu noile funcții, se folosește un prefix. Acest prefix depinde de motor de redare care folosește browserul web la care doriți să faceți referire (pentru care este definit stilul).

Prefixul -webkit Funcționează pentru browsere bazate pe WebKit ca Safari o Chrome. Prefixul -moz Este folosit pentru browsere bazate pe motor de redare de Mozillaîn prezent GeckoCa Firefox și derivatele sale. A se referi EdgeHTML, motor de redare browser- Margine de la Microsoft (fost trident), se folosește prefixul -ms. Cazul browserului Operă este un pic special de când a început să-l folosească pe al lui motor de redare, la care se face referire cu -o, dar în prezent funcționează cu WebKit, care se exprimă ca -webkit.

Pentru a utiliza o proprietate care se referă la un browser, scrieți-i numele, prefixând-o și separând-o cu o cratimă ca în -o-border-radius:10px;, care ar servi pentru a seta un chenar rotunjit (un colț rotunjit) în versiunile mai vechi ale browserului Operă.

comentarii

Pentru a clarifica codul CSS Puteți folosi comentarii, care îl vor face mai lizibil, deși cu dezavantajul creșterii dimensiunii sale. Sintaxa comentariilor în CSS Este ca și comentariile pe mai multe rânduri C ++ pe care sunt sigur că știți deja: începând în /* și terminând cu */, Ca și în C ++, poate ocupa mai multe linii.

Selectoare

Definiția proprietățile sunt atribuite obiectelor dintr-un document HTML grupându-le în selectoare și înglobându-le în bretele. Un selector poate face referire la un element de limbă HTML (o etichetă), ca div, o clasă (alocată cu class en HTML) un identificator (alocat cu id en HTML) sau toate („selectorul universal”) reprezentate prin asterisc (*). Următorul exemplu arată un selector de fiecare tip:

Etichetele de HTML sunt exprimate în definiția stilului cu numele lor, clasele sunt marcate prin punerea unui punct înaintea numelui (.) și un semn de lire sterline (#) pentru identificatori.

O parte din marea putere a CSS rezidă în posibilitatea de grupare a selectoarelor la definirea proprietăţilor acestora. Există mai multe modalități de grupare a selectoarelor. Prin gruparea lor, separându-le prin virgule, se exprimă că fiecare dintre selectorii citați are acele proprietăți.

Exemplul anterior indică faptul că clasele de consum, umiditate și temperatură au în comun culoarea, lățimea și înălțimea. Un nou concept este de asemenea introdus în acest cod: proprietățile pot fi redefinite, iar în acest caz prevalează cele mai recent descrise. In acest fel, elementele clasei de temperatura ar avea in sfarsit o inaltime de 50% din obiectul care le contine.

Dacă selectoarele grupate nu sunt separate prin virgule, condiția impusă proprietăților este cumulativă, adică un element trebuie să satisfacă toți selectorii pentru ca acesta să dobândească aspectul sau comportamentul pe care îl definesc. Dacă selectorii se referă la etichete HTML Ordinea în care apar trebuie să fie descrescătoare în nivelul de includere: mai întâi nivelul ierarhic cel mai înalt și ultimul cel mai jos.

În exemplul anterior elementele sunt definite div care sunt, de asemenea, din clasa de temperatură și elementele care au atât clasa de temperatură, cât și clasa de consum (ambele în același timp) ca în class="temperatura consumo". Elementele <div> De cod HTML cu class="temperatura" ar avea un maxim de 100%

Proprietăți CSS pentru a defini textul

Se poate face o distincție între trei tipuri de proprietăți care afectează aspectul textului: (1) cele care stabilesc fontul cu care este prezentat, (2) cele care determină aspectul literalului (conținutul textului) și (3) cele generice, adică cele care afectează atât aspectul textului, cât și pe cel al altor componente. În general, ceea ce s-a spus că îi explică pe cei din ultimul grup se va aplica și acelorași proprietăți aplicate altor elemente.

Tipografie (font)

• font-family indică numele fontului folosit pentru un element. Puteți scrie un singur nume sau o listă, în ordinea preferințelor și separând numele prin virgule, a fonturilor care vor fi folosite alternativ dacă cel dorit nu există. În același sens, este posibil să folosiți fonturi generice cu numele monospace, serif, sans-serif, cursive, fantasy. Dintre aceste fonturi generice, cel mai important (pentru prezentarea datelor la îndemână) este primul care, după cum sugerează și numele, va folosi fontul cu spațiere fixă ​​disponibil în sistem și prestabilit de browser. Al doilea, serif, va folosi cel prestabilit disponibil serif (finisare sau grație). Fără licitație dacă este indicată a treia, sans-serif. Imitând scrisul desenat manual cu cursive (un mod de a-l numi care clar ar putea fi îmbunătățit) și tipografia decorativă a sistemului cu fantasy, ultimul dintre cele cinci.

  Cat despre cod CSS Spațiile au o semnificație specială ca separator; atunci când numele familiei de fonturi este alcătuit din mai multe cuvinte separate prin spații, se scrie între ghilimele pentru a evita confuziile.

  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;

  Browserele web sunt capabile să utilizeze fonturi locale (cele instalate pe sistemul pe care operează) precum și altele care sunt încărcate în mod specific, suprapunându-se chiar și pe cele instalate local. Pentru a încărca un font, utilizați @font-face indicând numele acestuia, locația de descărcare a definiției sale și, dacă este cazul, o descriere a formatului acestuia.

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

  În prima dintre cele două definiții din exemplul precedent, litera documentului este încărcată Sircuito-Expanded-Light.eot care se află în folderul EOT din interiorul folderului principal (rădăcină) și este atribuit ca nume de familie CircuitExpandedLight. Apropo, vă place acest font? Este gratuit, poți descărcați gratuit fontul Sircuito pe care l-am conceput pentru imaginea GranaBot.

  După cum se poate vedea în exemplu, proprietatea url, care corespunde cu localizator uniform de resurse, vă permite să specificați locația documentului cu fontul care este descărcat. Slash este folosit pentru a separa numele diferitelor foldere de calea către font, începând cu cel care conține documentul din care se face apelul sau de la rădăcină dacă URL-ul Începeți cu un bar.

  Al doilea exemplu utilizează mai multe documente alternative, astfel încât aceeași definiție să funcționeze pentru mai multe browsere (fiecare dintre acestea va încărca tipul pe care este capabil să îl interpreteze)

  Ultima linie a definiției include proprietatea font-smoothing pentru a înmuia litera (aplicați a antialiasing). Deoarece nu este o proprietate standard, se folosește prefixul -webkit.

• font-size servește pentru a indica dimensiunea literei ca în font-size:12px;

• font-weight Setează grosimea fontului. Poate fi exprimat ca valoare numerică, de obicei un multiplu de 100 între 100 și 900, conform greutăților tipografice obișnuite, sau mai frecvent cu un nume: normal pentru grosimea bazei, bold pentru cei îndrăzneți, bolder pentru versiunea numită de obicei negru, light pentru amenda (denumită în mod obișnuit lumină) și lighter pentru cel mai subțire (numit uneori subțire).

  Valoarea numerică a versiunii normale a fontului este 400 (fără unități) și 700 pentru versiunea bold.

  În mod implicit, dacă nu este indicată altă valoare, aspectul fontului este cel căruia îi corespunde normal sau 400 deci, dacă nu a fost modificat în elementul generic sau în containerul, din care moștenește, nu este necesar să se indice font-weight cu valoarea normal.

• font-stretch Este folosit pentru a indica lățimea literei, atâta timp cât este disponibilă în familia corespunzătoare. Valorile posibile pe care le poate lua proprietatea, ordonate de la cel mai îngust la cel mai lat, sunt: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. Cu aceleași criterii care au fost utilizate în proprietatea anterioară, lățimea implicită este normal și nu este necesar să-l indicăm în mod expres decât dacă a fost schimbat într-o ordine ierarhică mai mare decât cea în curs de definire.

• cu font-style Puteți indica dacă un text este desenat cu o literă înclinată sau oblică, care îi afectează aspectul, sau cu o literă cursivă, care exprimă o semnificație specială (cuvinte străine, de exemplu), sau o literă rotundă, adică nici cele anterioare sau normal. valoarea oblique îndeplinește prima funcție, aceea de aspect și valoare italic al doilea. Faptul că aspectul ambelor este frecvent similar sau chiar același înseamnă că utilizarea (sensul) este uneori confuză, așa că merită să acordați atenție. Ca și în cazul altor proprietăți, normal servește la dezactivarea valorilor anterioare.

• text-decoration servește la sublinierea (cu valoarea underline), supraliniază (cu valoarea overline), tăiați (cu valoarea line-through) sau flash (cu valoarea blink) textul pe care îl afectează această proprietate.

• Pentru a completa seria aspectului de tipografie, deși pentru aplicația noastră nu este foarte relevant, font-variant, vă permite să aplicați litere mici (majuscule mici) la texte.

Text

• text-align spune browserului cum ar trebui să fie aliniat blocul de text. Posibilele aliniamente sunt la stânga (care este considerată implicit) cu codul left, centru cu valoarea center, folosind drept right si justificat la ambele capete cu justify.

• line-height stabilește separarea între liniile de text. În acest caz, dacă se folosesc procente, valoarea de 100% corespunde înălțimii textului în loc de măsurarea recipientului. Cea mai utilizată măsură în raport cu textul corespunde cu 120%. O linie de 100% ar însemna că partea de jos a unei linii atinge partea de sus a următoarei. Deși designul tipografiei include de obicei ceva spațiu, este obișnuit să lăsați puțin mai multă marjă între linii.

  Pentru a exprima separarea dintre linii, este de asemenea posibil să se indice un coeficient (o valoare fără unitate) cu care să se calculeze înălțimea liniei pe baza înălțimii casetei de text.

• letter-spacing este valoarea spațiului dintre literele cuvintelor, care în tipografie este cunoscut ca kerning o de urmărire.

• word-spacing reprezintă măsura spațiilor dintre cuvinte.

• white-space stabilește comportamentul spațiilor albe dintr-un text. Când se utilizează valoarea normal, care este luat în mod implicit, unește mai multe spații goale în cod HTML într-una dintre prezentările de pe pagina web (afișată de browser) și ia ca referință spațiile albe pentru a rupe o linie dacă nu există spațiu în bloc.

  Valoarea nowrap De asemenea, unește spațiile goale repetate într-unul singur, dar nu împarte liniile de text din spațiile goale, chiar dacă linia nu se potrivește în container, debordând spațiul dacă este necesar și scriind afară dacă este necesar. Pentru a împărți în mod expres liniile, puteți folosi eticheta <br> de HTML.

  utilizând pre Nici spațiile goale nu sunt unificate prin unirea lor într-una singură, nici liniile nu sunt împărțite folosind spațiile ca referință.

  pre-line uniți spațiile repetate și rupeți liniile dacă este necesar folosind spațiile drept referință.

  pre-wrap păstrează spațiile albe repetate și întrerupe liniile, dacă este necesar, folosind spații albe ca referință.

Culori

En CSS culoarea poate fi exprimată în funcţie de Model de culoare RGB sau conform Model de culoare HSL și în ambele cazuri pot fi incluse informații de transparență, valoarea unui al patrulea canal care este de obicei numit canal alfa o compoziție alfa, care dă naștere modelelor RGBA și HSLA.

Pentru a exprima culoarea în format RGB folosind notația hexazecimală se folosește sintaxa #RRGGBB, cu RR fiind valoarea componentei roșii (în principiu, folosind două cifre hexazecimale), GG fiind valoarea componentei verzi și BB fiind valoarea componentei albastre. După cum sa spus deja, dacă cele două cifre ale fiecărei componente au aceeași valoare, aceasta poate fi exprimată ca #RGB limitarea numărului de culori disponibile la așa-numitele web safe

Pe lângă acest mod de a reprezenta culoarea, cel mai clasic și mai folosit, ea poate fi exprimată ca rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) pentru a o indica în format RGB, Hsl și formele lor respective cu indicație de transparență (canal alfa)

Dacă nu se solicită altfel prin adăugarea sufixului de unitate, the Model RGB folosește valori zecimale de la 0 la 255, pentru cele trei componente, valoarea lui componenta alfa este un coeficient (zecimal de la zero la unu) și prima valoare a lui Model de culoare HSL, nuanța, este o valoare zecimală care variază de la 0 la 360 (fără unități) reprezentând un unghi. Valorile de saturație și luminozitate ale Model HSL Ele sunt de obicei exprimate ca procente.

După cum sa spus deja, deși utilizarea sa nu este foarte frecventă, culorile pot fi indicate prin numele lor în format color:black; în loc de color:#000000;. Primul format este mai lizibil, dar se limitează la un scurt tabel de valori care este și mai greu de modificat numeric dintr-o aplicație scrisă în JavaScript.

Pentru propunerea noastră de reprezentare grafică a datelor de la senzorii conectați la IoT, vom avea nevoie doar de trei proprietăți legate de culoare. Acestea vor servi atât pentru a indica numele textului, care este explicat acum, cât și pentru a indica numele oricărei componente care îl susține.

• color indică culoarea elementului HTML și cea a ceea ce conține (care o moștenește) cu excepția cazului în care este modificat în mod expres prin atribuirea individuală a altor culori.

• background-color Folosit pentru a defini culoarea de fundal a unui element HTML. Pe lângă indicarea culorii ca valoare RGB o Hsl puteți folosi o valoare specială transparent pentru a face obiectul să nu aibă culoare de fundal și se poate vedea ce se află în spatele lui, adică nu acoperă elementele pe care a fost desenat.

• opacity vă permite să setați opacitatea (indirect, transparența) unui element și a întregului conținut al acestuia (a nu fi confundat cu transparența fundalului). Dacă transparența este atribuită elementelor conținute în altele care sunt ele însele transparente, aceasta va fi mărită, nu va funcționa separat. Nu puteți face un obiect conținut într-un obiect transparent mai opac. Valoarea a opacity Se exprimă ca un coeficient asemănător opacity:0.5; pentru a indica 50% opacitate.

  Versiunile mai vechi ale browserului Microsoft nu foloseau această proprietate, dar aveau proprietatea filter (filtru) care, printre alte valori, ar putea suporta alfa (pentru canal alfa) cărora li s-ar putea atribui un procent de opacitate opacity dupa format:

  CSS para dar opacidad en los antiguos navegadores web de Microsoft

  CSS

  <br /> filter:alpha(opacity=50); /* Opacidad del 50% en una versión 8.0 o anterior de Microsoft Internet Explorer */

  1	filter:alpha(opacity=50); /* Opacidad del 50% en una versión 8.0 o anterior de Microsoft Internet Explorer */

măsuri

En CSS, măsurarea elementelor <div>, cu care am ales să compunem containerul grafic, este setat width (lățimea) și height (înalt).

între conţinutul de <div> iar perimetrul acestuia există o zonă de umplere care se determină cu valoarea de padding. Înconjurând perimetrul obiectului se află muchia a cărei măsurare este specificată cu proprietatea border. Separarea exteriorului obiectului <div> dintre celelalte obiecte din jur există un spațiu a cărui măsură este determinată de margin.

În condiții normale, măsurarea spațiului folosit de obiect <div> poate fi calculată ca suma lățimii sau înălțimii sale plus umplutura (padding) plus chenar (border) plus marja (margin). Când măsurarea relevantă care se stabilește este spațiul interior util al obiectului <div>, această compoziție este foarte practică, dar dacă se știe este măsura totală disponibilă poate fi schimbat acest comportament, setat implicit, astfel încât măsurarea lățimii și înălțimii totale să fie cea indicată de width (lățimea) și height (înălțime) scăzând măsura umpluturii, marginii și marginii din acesta, în loc să o adunăm. Pentru a utiliza acest mod, atribuiți proprietate box-sizing valoarea border-box (implicit este content-box)

Următoarea diagramă prezintă grafic valorile rezultate din width (lățimea) și height (înalt) dacă se utilizează box-sizing:border-box; (totalul) saubox-sizing:content-box; (interior)

Valorile măsurătorilor sunt exprimate cu unitățile care au fost deja explicate. Când vine vorba de proprietăți definite de mai multe valori, cifrele exprimate cu diferite tipuri de medii pot fi amestecate. În plus, există câteva valori speciale care sunt relevante pentru utilizarea pe care o vom face în această implementare a graficelor senzorilor în IoT. Mai exact, putem folosi valoarea auto pe proprietate margin ca resursă pentru a centra obiectele în anumite circumstanțe.

În exemplul de mai sus, pentru clasa „small_box” este definit un chenar gros de 2 pixeli, desenat cu o contur negru (#000000) continuu (solid). În clasa „big_box” linia folosită pentru chenar este întreruptă (dashed) și culoarea roșie (#FF0000). Pentru a exprima aceste valori separat putem folosi border-width pentru grosime, border-style pentru accident vascular cerebral și border-color pentru culoare. Aceste proprietăți de margine sunt la rândul lor compozite și sunt formate de elementele de sus, dreapta, jos și stânga, urmând direcția în sensul acelor de ceasornic așa cum s-a explicat mai sus.

Cele două clase care au fost definite au aceleași măsurători, dar prima este mai mică deoarece, la utilizarea valorii border-box pentru proprietate box-sizing, umplutura, chenarul și marginea sunt desenate în interiorul obiectului și nu în jurul conținutului, așa cum este implicit. În clasa „big_box” nu este indicată, deci valoarea este luată implicit content-box ceea ce face ca umplutura, chenarul și marginea să crească la dimensiunea indicată de width y height.

Valoarea marjei clasei din exemplul de mai sus este de 10 pixeli în partea de sus, dreapta, jos și stânga, deci poate fi exprimată ca o singură valoare margin:10px;. Este foarte interesant de cunoscut această alternativă pentru a înțelege codul dezvoltat de terți, deși, în această propunere de implementare, pentru a o face mai lizibilă, se sugerează să se indice, repetat, valorile.

Cele trei clase din exemplul anterior produc același rezultat, definiția așa-numitului „laconic” fiind mai compactă și mai puțin cea a așa-zisului „loquacious” care, mai mult decât pentru a adăuga claritate la citire, este forma în mod normal. folosit pentru a modifica un aspect parțial, concret al unei proprietăți, reutilizand celelalte valori prin moștenire (sunt furnizate de container sau furnizate de una dintre clasele alocate elementului). Dacă sarcina impusă serverului de textul suplimentar al acestui mod de definire a proprietăților și alte împrejurări care, pentru a face codul mai lizibil, precum comentariile, măresc dimensiunea și deci traficul, ar fi relevante, ar fi posibil să se facă procesează-l (de exemplu) din PHP ca parte a strategiei de generare a codului din acest limbaj.

Dimensiunile modelului cutie afectează în principal elementele <div> dar este posibil să forţezi acest comportament asupra altor elemente cu proprietatea display și valoarea block. Pentru a face un element să curgă ca textul pe o linie, utilizați display:inline; și ambele comportamente, măsurători și debit, pot fi combinate cu display:inline-block;

Valoarea none pe proprietate display, folosite ca display:none;, vă permite, de asemenea, să ascundeți obiecte, care vor servi la „pornirea” și „dezactivarea” a acestora JavaScript.

Dacă dimensiunile unui element nu sunt specificate, este nevoie de orice dimensiuni sunt necesare pentru a se potrivi conținutul acestuia (de fapt, se potrivește conținutului fără a fi nevoie să stabilească o dimensiune). Dar dacă sunt indicate dimensiunile, se poate întâmpla ca obiectele conținute să nu se potrivească; într-un astfel de caz, dimensiunile nu sunt respectate, sunt mărite pentru a permite vizibilitatea întregului conținut.

Pentru ca elementele continute intr-un altul de masuratori fixe sa fie decupate atunci cand depasesc dimensiunea, se foloseste proprietatea overflow cu valoarea hidden. cu valoarea scroll, sunt decupate și obiectele care debordează recipientul, așa cum se întâmplă cu hidden dar se afișează o bară de defilare care poate fi văzută când o mutați. Valoarea auto face ca bara de defilare să apară numai atunci când este necesar, în funcție de dimensiunea conținutului.

De asemenea, puteți stabili o dimensiune minimă astfel încât containerele să ocupe acel spațiu chiar dacă conținutul nu are nevoie de el și fără a limita dimensiunile acestora să crească atunci când conținutul o cere. Proprietățile care se ocupă de această sarcină sunt min-width pentru acho si min-height pentru cel înalt. În sens opus, max-width setați o lățime maximă și max-height o înălțime maximă care se anulează width ya height.

Fluxul de elemente pe pagina web

Dreptunghiurile (blocurile) pe care le-am definit cu elemente <div>, sunt plasate unul sub celălalt în mod implicit. Pentru a schimba acest comportament puteți folosi proprietatea float, indicând left o right ca valoare, astfel încât acestea să curgă de la stânga la dreapta sau, respectiv, de la dreapta la stânga. Dimpotrivă, pentru a preveni ca un obiect să „plutească” la dreapta sau la stânga altuia, puteți folosi proprietatea clear cu valorile left, right o both, care anulează fluxul de la stânga la dreapta, de la dreapta la stânga sau ambele.

Spre deosebire de ceea ce se întâmplă în alte împrejurări, fluxul produs float nu modifică automat dimensiunile containerului, deci este util să includeți în proprietățile acestuia overflow:auto; pentru a forța dimensiunea (înălțimea) recipientului să se schimbe atunci când un obiect îl revarsă din cauza locației sale cu float.

O altă modalitate de a configura fluxul conținutului unui element este împărțirea acestuia în coloane cu proprietatea column-count (care pentru moment ar trebui să fie însoțită de -webkit-column-count şi -moz-column-count) Mărimea coloanelor poate fi indicată (de fapt sugerată) cu column-width (-webkit-column-width -moz-column-width) și separarea dintre coloane cu column-gap (-webkit-column-gap -moz-column-gap)

Pentru ca blocurile să nu fie împărțite și conținutul lor să fie distribuit pe mai multe coloane, puteți utiliza display:inline-block; deși asta implică cu siguranță. lăsați o parte din coloană nefolosită.

Poziționare

Pentru a stabili locația elementelor pe pagina web, CSS folosește mai multe moduri de poziționare care pot fi diferite pentru fiecare element, adică este posibil să amesteci diferite criterii de poziționare pe același site.

• position:static; Este poziționarea implicită (nu este necesar să o indicați dacă nu a fost modificată anterior).Acest tip de poziționare urmează fluxul „natural” al paginii: un element după altul începând din stânga, în creștere, atâta timp cât exista spatiu, in dreapta si de sus in jos. Nu folosește coordonate orizontale sau verticale pentru a-și stabili locația, urmărește poziția care corespunde ordinii obiectului.

• position:fixed; Este folosit pentru a plasa un obiect într-o poziție fixă ​​în fereastra browserului (cum ar fi un meniu, de exemplu).Locația elementului este specificată orizontal cu left o right pentru a determina separarea pe stânga sau respectiv dreapta și cu top o bottom pentru separare deasupra sau sub marginea ferestrei browserului (port de vizualizare).

  Folosind aceasta și alte tipuri de poziționare, obiectele se pot suprapune. Obiectele desenate mai întâi (definite mai devreme în cod HTML) pot fi acoperite de cele trase ulterior (cele incluse mai târziu în cod HTML). Pentru a modifica ordinea normală puteți folosi proprietatea z-index, obiectele cu cea mai mare valoare în z-index Le acoperă pe cele cu valoare mai mică.

• position:relative; Mută ​​elementul din poziția sa „normală”, așa cum este indicat de proprietăți left o right pe orizontală şi top o bottom vertical.

• position:absolute; Plasează elementul într-o poziție fixă ​​față de obiectul care îl conține. Localizarea acestuia se exprimă, ca și în cazurile anterioare, cu left,right, top y bottom

  Denumirea acestui tip de poziționare este la început confuză, întrucât poziția se stabilește față de obiectul ierarhic superior celui care folosește proprietatea, lucru discutabil dacă este absolut.

  De asemenea, este important de reținut că elementul care conține obiectele <div> pe care îl folosim la primul nivel ierarhic este <body>, prin urmare, dacă <div> Ce folosesti position:absolute; nu este cuprinsă în altul, poziționarea acestuia va fi „absolută” față de pagina web.

Proprietăți pentru medii și caracteristici specifice (interogări media)

CSS vă permite să definiți în aceeași foaie de stil apariții diferite pentru diverse medii sau suporturi în funcție de tipul de dispozitiv utilizat (cum ar fi un ecran sau o imprimantă), dimensiunile acestuia, orientarea (verticală sau peisaj) sau rezoluția acestuia. Aceasta servește pentru a putea afișa, în cel mai potrivit mod pentru un context, aceeași pagină web.

Pentru a vă referi la mass-media, utilizați @media într-un mod similar cu ceea ce a fost deja explicat pentru fonturi cu @font-face, cuprins între bretele ({ y }) definiţiile diferitelor elemente: etichete HTML, clase, identificatori...

Tipurile de media disponibile în CSS3 sunet: all, pentru a se referi la orice media (toate), screen pentru orice tip de ecran (versiuni mai vechi ale CSS Au făcut diferența între monitoarele TV și computerele) print pentru ieșirea imprimantei și speech pentru cititorii web audio care interpretează informații cu sintetizatoare de voce.

În exemplul de mai sus, elementele clasei de text au un fundal negru și text alb pe ecran, dar sunt imprimate cu un fundal alb și text negru.

Condițiile pot fi impuse media pentru a defini diferite seturi de proprietăți pe baza, de exemplu, rezoluției disponibile sau raportului de vizualizare. Aceste condiții și mijloacele în sine pot fi compuse cu operații logice and, not y only a cere să respectați mai multe, că nu vă conformați sau, respectiv, numai atunci când vă conformați.

Dintre condițiile disponibile, le găsim deosebit de interesante max-width (lățimea maximă a ferestrei), max-height (înălțimea maximă a ferestrei), min-width (lățimea minimă a ferestrei), min-height (înălțimea minimă a ferestrei), orientation (orientarea, care poate fi landscape, peisaj sau portrait, vertical), max-resolution (rezoluție maximă în dpi, puncte pe inch sau in dpcm, puncte pe centimetru) și min-resolution (rezoluție minimă, de asemenea în dpi o dpcm).

În exemplul anterior, începem prin a defini o culoare de fundal astfel încât, în toate mediile, elementele clasei main_block să aibă culoarea de fundal #CCCCCC. Când este afișată pe un ecran și fereastra are o lățime de cel puțin 320 de pixeli, marginile din stânga și din dreapta vor fi automate (centrați blocul), iar lățimea elementului va fi de 300 de pixeli. Dacă rezoluția ecranului este de 640 de pixeli, lățimea blocului va fi de 620 de pixeli. Deoarece a doua definiție media nu include informații despre marjă și dispozitivele care îndeplinesc a doua condiție o vor îndeplini și pe prima, marja orizontală va fi în continuare automată.

În cele din urmă, în exemplu, culoarea de fundal este schimbată astfel încât să fie albă în imprimare.

Modul obișnuit de definire a stilurilor pentru diferite medii este de obicei să începeți cu cele comune, de obicei culori și fonturi, urmate de cele mai restrictive geometrii (măsurătorile dispozitivelor cu cel mai mic număr de pixeli) de obicei pentru smartphone-uri și tablete unde, în plus Va fi important să știți dacă sunt folosite vertical sau orizontal cu orientation si sigur si rezolutia lui cu min-resolution. Apoi sunt indicate diferitele dimensiuni pentru ecrane mai mari și se termină de obicei cu media de tipărire și voce, care în exemplul graficii IoT au fost omise.

utilizare @media Impunerea unor condiții precum dimensiunile, rezoluția și orientarea permite designerului să creeze o singură pagină web care, cu stiluri diferite, va arăta cel mai potrivit pentru fiecare dispozitiv. Acest comportament este de obicei numit proiectare receptivă; design adaptabil, într-o traducere foarte liberă.

CSS pentru containerul grafic SVG

Cu ceea ce a fost explicat până acum, acum este posibil să se definească stilurile pe care Container HTML pentru grafică SVG cu care să reprezinte starea senzorilor conectați la IoT. În codul următor se află propunerea cuprinzând, comentată, distribuția în coloane care corespunde unui număr mai mare de grafice decât cele pe care le folosește propunerea seriei de articole, astfel încât să poată fi refolosită în alte cazuri.

Mai jos puteți vedea cum ar arăta aceste stiluri. Cod HTML din containerul propus pentru grafica SVG din articolul precedent.

Următorul articol din această serie explică cum să desenezi cu SVG Grafice de date ale stării senzorilor conectați la Internetul lucrurilor (IoT).