Definisci con CSS l'aspetto del web grafico del sensore nell'IoT

Nel precedente articolo della serie su come realizzare grafici di stato di sensori connessi all'Internet of Things IoT spiega la strada utilizzare una pagina web sviluppata in HTML come struttura per la grafica. Gli elementi della pagina web, ridotti al minimo utilizzando oggetti <div>, non ne definivano direttamente l'aspetto, si riferivano invece a informazioni sull'aspetto in un foglio di stile CSS, che è ciò che verrà spiegato in questa parte della serie.

Nella soluzione che propongo per realizzare grafici di sensori collegati all'IoT viene utilizzato un documento CSS caricato dal documento HTML. Se il codice HTML verrà generato da un'applicazione sul server, ad esempio in PHP, sarebbe molto semplice includerlo come parte del codice che definisce la pagina web invece di caricarla da essa, il che potrebbe essere leggermente ottimizzato salvando una chiamata. Qualunque sia l'opzione scelta, include il metodo più conveniente modificare il codice CSS in un documento separato per gestirlo più comodamente e poterlo riutilizzare. Nell'esempio sviluppato nel tutorial di questa serie di articoli gli è stato assegnato il nome estilo.css.

Nello stesso modo, Quando si affrontano progetti complessi sarà consigliabile utilizzare più fogli di stile separati in documenti diversi, sia per poter riutilizzare funzionalità specifiche senza doverle caricare tutte ogni volta, sia per modificare più facilmente il codice distribuendolo in diversi documenti secondo la corrispondente struttura logica.

Gli stili CSS Cercano di descrivere tutti gli estremi del comportamento e dell'aspetto di una pagina web utilizzando diversi tipi di approcci, tutti validi contemporaneamente, cercando di rispettare il più possibile la compatibilità con le specifiche della versione precedente. Ciò significa che ci sono molte soluzioni possibili che risolvono le stesse esigenze. nonché un elevato numero di risorse disponibili (proprietà CSS). Per l'approccio didattico dell'articolo e per non confondere i nuovi utenti CSS, solo le proprietà e le strutture necessarie per l’obiettivo finale, che consiste nel rappresentare graficamente i dati provenienti dai sensori connessi all'Internet delle cose. Allo stesso tempo, c'è anche a piccola introduzione a CSS, Fogli di stile.

Formattazione delle proprietà CSS

El formato di base È costituito dal nome della proprietà, dai due punti, dal valore della proprietà e dal punto e virgola. nombre:valor;

CSS consente di utilizzare diverse unità di misura nello stesso documento compresi quelli relativi alla struttura (la misura di cosa contiene un elemento) in percentuale, relativi al dispositivo su cui sono rappresentati, come il pixel, o assoluti come i centimetri. Le unità sono espresse dopo il valore secondo la seguente codifica abbreviata.

Per l'applicazione che andremo a realizzare è importante considerare almeno tre unità di stile. La % per effettuare misurazioni relative alla dimensione del contenitore di un oggetto, il pixel per misurazioni in base alla risoluzione dello schermo e i millimetri (in realtà, qualsiasi misura assoluta) per realizzare report stampati.

Ce ne sono alcuni proprietà complesse, o compositi, che dipendono da più valori (come colore, dimensione, stile...), per indicare il valore ci sono due possibilità nei CSS: scrivere, nell'ordine opportuno, tutti i valori separati da spazi o utilizzano la somma di proprietà semplici equivalenti al complesso. Ad esempio, tutti e quattro i margini di un oggetto possono essere specificati in un'unica proprietà margin o può essere impostato con le proprietà margin-top, margin-right, margin-bottom y margin-left. A proposito, quest'ordine (in senso orario) è quello seguito dalle descrizioni dei valori che "circondano" un elemento come il margine interno (padding) o esterno, il bordo...

Con quanto spiegato finora possiamo ora vedere alcuni esempi di proprietà

Nell'esempio sopra Il colore viene definito mediante un codice di 6 cifre esadecimali che rappresentano, a coppie, il valore della componente rossa, verde e blu. Quando accade, come nell'esempio, che le due cifre sono uguali, si può abbreviare come #F09 (che, tra l'altro, corrisponde ai cosiddetti "colori web safe"). Nella proposta finale eviterò di utilizzare queste abbreviazioni per unificare i criteri e renderla più leggibile. Puoi anche abbreviare i valori di proprietà complesse, come margin nell'esempio, quando vengono ripetuti tutti i valori o le coppie opposte. Analogamente al salvataggio del testo, è anche possibile omettere l'unità quando si specifica una proprietà quando il valore è zero, poiché in quel caso è irrilevante.

Alcuni valori, oltre a poter essere espressi numericamente, hanno un nome che rende il codice più leggibile e permette di ricordarli meglio. Ad esempio, invece del codice numerico esadecimale del target, #FFFFFF (o #FFF), può essere scritto white con lo stesso risultato. In questo modo il colore nero, #000000 (o #000), può essere sostituito da black.

anche i valori sono espressi da un codice speciale, un nome. Ad esempio per indicare che il margine laterale viene impostato automaticamente dal browser (normalmente corrisponderà alla funzione centro) si utilizza l'apposito valore auto, che non ha corrispondenza numerica con alcun valore.

a esprimere un modo speciale di utilizzare una serie di valori compositi (complessi) di una proprietà CSS Puoi scegliere formati con una sintassi simile a quella delle funzioni. Ad esempio, per esprimere un colore come i tre valori delle sue componenti rosso, verde e blu (the Modello RGB) verrebbe scritto color: rgb(128, 255, 64);. All'interno di questo stile espressivo è possibile utilizzare anche le unità; Nell'esempio sopra, i componenti del colore sono un valore decimale compreso tra 0 e 255, ma potrebbe essere più semplice esprimerlo come percentuale del totale di ciascun componente del colore, nel qual caso potrebbe anche essere scritto come color: rgb(50%, 100%, 25%);.

Calcolo dei valori nei CSS

Nelle versioni più recenti di CSS è possibile farlo semplici operazioni matematiche per calcolare i valori. Per fare questo, usa calc e tra parentesi è espressa l'operazione da eseguire. È possibile indicare unità, parentesi e operatori semplici come somma (+), sottrazione (-), moltiplicazione (*) e divisione (/). L'espressione sarebbe del tipo width:calc((90%-20px)/2));.

Le variabili possono essere utilizzate nelle operazioni matematiche in CSS riferendosi nel calcolo di un immobile al valore di un altro con var. Per poter utilizzare una variabile senza dover fare riferimento ad una vera e propria proprietà dello stile, è consentito citare anche una proprietà che non esiste. CSS consiglia il formato --nombre-variable (due trattini davanti al nome della proprietà inventata). In questo modo, per definire l'altezza di un elemento come metà della sua larghezza si usa l'espressione in CSS come height:calc(var(width)/2); e per definire una nuova variabile "spessore" (che altre proprietà potrebbero utilizzare) scriveresti, ad esempio, --grosor:4px; per poterlo successivamente chiamare margin-top:calc(var(--grosor)*4);

Proprietà CSS dipendenti dal browser

CSS Si tratta di un disciplinare standardizzato dal consorzio W3C (World Wide Web Consortium) ma molti le proprietà o gli stili di comportamento raggiungono i browser prima di far parte delle specifiche di una versione.

in modo che il codice CSS funziona con le funzionalità attuali di un browser, ma non perdere la compatibilità con le nuove funzionalità, viene utilizzato un prefisso. Questo prefisso dipende da motore di rendering che utilizza il browser web a cui vuoi fare riferimento (per il quale è definito lo stile).

Il prefisso -webkit Funziona per i browser basati su WebKit come Safari o Chrome. Il prefisso -moz Viene utilizzato per i browser basati su motore di rendering de Mozilla, attualmente GecoCome Firefox e i suoi derivati. In riferimento a edgehtml, la motore di rendering del browser bordo da Microsoft (precedentemente Tridente), viene utilizzato il prefisso -ms. Il caso del navigatore Opera è un po' speciale da quando ha iniziato a usare il suo motore di rendering, citato con -o, ma attualmente funziona con WebKit, che si esprime come -webkit.

Per utilizzare una proprietà riferita ad un browser, scriverne il nome, anteponendolo e separandolo con un trattino come in -o-border-radius:10px;, che servirebbe a impostare un bordo arrotondato (un angolo arrotondato) nelle versioni precedenti del browser Opera.

Commenti

Per chiarire il codice CSS Puoi utilizzare i commenti, che lo renderanno più leggibile anche se con lo svantaggio di aumentarne le dimensioni. La sintassi dei commenti in CSS È come i commenti su più righe C++ che sono sicuro che già conosci: a partire da /* e termina con */, come in C++, può occupare più righe.

Selettori

La definizione di le proprietà vengono assegnate agli oggetti in un documento HTML raggruppandoli in selettori e racchiudendoli tra parentesi graffe. Un selettore può fare riferimento a un elemento del linguaggio HTML (un'etichetta), come div, una classe (assegnata con class en HTML) un identificatore (assegnato con id en HTML) o tutti (il “selettore universale”) rappresentati dall'asterisco (*). L'esempio seguente mostra un selettore di ciascun tipo:

Le etichette di HTML sono espressi nella definizione dello stile con il loro nome, le classi sono contrassegnate anteponendo un punto prima del nome (.) e un segno di cancelletto (#) per gli identificatori.

Parte del grande potere di CSS risiede nel possibilità di raggruppare i selettori durante la definizione delle loro proprietà. Esistono diversi modi per raggruppare i selettori. Raggruppandoli, separandoli con virgole si esprime che ciascuno dei selettori citati possiede tali proprietà.

L'esempio precedente indica che le classi di consumo, umidità e temperatura condividono colore, larghezza e altezza. In questo codice viene introdotto anche un nuovo concetto: le proprietà possono essere ridefinite, e in tal caso prevalgono quelle descritte più recentemente. In questo modo gli elementi della classe di temperatura avrebbero finalmente un'altezza pari al 50% dell'oggetto che li contiene.

Se i selettori raggruppati non sono separati da virgole, la condizione imposta sulle proprietà è cumulativa, ovvero un elemento deve soddisfare tutti i selettori affinché acquisisca l'aspetto o il comportamento da essi definito. Se i selettori si riferiscono ai tag HTML L'ordine in cui compaiono deve essere discendente nel livello di inclusione: prima il livello gerarchico più alto e per ultimo quello più basso.

Nell'esempio precedente gli elementi sono definiti div che appartengono anche alla classe di temperatura e gli elementi che hanno sia la classe di temperatura che la classe di consumo (entrambe contemporaneamente) come in class="temperatura consumo". Gli elementi <div> Di codice HTML con class="temperatura" avrebbero un massimo del 100%

Proprietà CSS per definire il testo

Si può fare una distinzione tra tre tipi di proprietà che influenzano l'aspetto del testo: (1) quelle che stabiliscono il carattere con cui viene presentato, (2) quelle che determinano l'aspetto del letterale (il contenuto del testo) e (3) quelli generici, cioè quelli che influenzano sia l'aspetto del testo che quello di altri componenti. In generale, quanto detto per spiegare quelle dell'ultimo gruppo varrà anche per le stesse proprietà applicate agli altri elementi.

Tipografia (carattere)

• font-family indica il nome del carattere utilizzato per un elemento. È possibile scrivere un solo nome oppure un elenco, in ordine di preferenza e separando i nomi da virgole, dei font che verranno utilizzati alternativamente nel caso in cui quello desiderato non esista. Sulla stessa linea è possibile utilizzare font generici con i nomi monospace, serif, sans-serif, cursive, fantasy. Di questi font generici, il più importante (per la presentazione dei dati in mano) è il primo che, come suggerisce il nome, utilizzerà il font a spaziatura fissa disponibile nel sistema e preimpostato dal browser. Il secondo, serif, utilizzerà quello predefinito disponibile serif (finitura o grazia). Senza asta se viene indicato il terzo, sans-serif. Imitando la scrittura disegnata a mano con cursive (un modo di chiamarlo che chiaramente potrebbe essere migliorato) e la tipografia decorativa del sistema con fantasy, l'ultimo dei cinque.

  Per quanto riguarda il codice CSS Gli spazi hanno un significato speciale come separatore; quando il nome della famiglia di caratteri è composto da più parole separate da spazi, viene scritto tra virgolette per evitare confusione.

  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;

  I browser Web sono in grado di utilizzare caratteri locali (quelli installati sul sistema su cui operano) così come altri caricati appositamente, anche sovrapponendosi a quelli installati localmente. Per caricare un carattere, utilizzare @font-face indicandone il nome, il percorso di download della sua definizione e, se applicabile, una descrizione del suo formato.

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

  Nella prima delle due definizioni dell'esempio precedente viene caricata la lettera del documento Sircuito-Expanded-Light.eot che si trova nella cartella EOT all'interno della cartella principale (root) e viene assegnato come cognome CircuitExpandedLight. A proposito, ti piace questo carattere? È gratis, puoi scarica gratuitamente il font Sircuito che ho disegnato per l'immagine GranaBot.

  Come si può vedere nell'esempio, la proprietà url, che corrisponde al file localizzatore uniforme di risorse, consente di specificare la posizione del documento con il carattere scaricato. La barra serve per separare il nome delle diverse cartelle dal percorso del font, a partire da quella contenente il documento da cui viene effettuata la chiamata o dalla root se il URL Inizia con una barra.

  Il secondo esempio utilizza diversi documenti alternativi in ​​modo che la stessa definizione funzioni per diversi browser (ognuno dei quali caricherà il tipo che è in grado di interpretare)

  L'ultima riga della definizione include la proprietà font-smoothing per ammorbidire la lettera (applicare a antialiasing). Poiché non è una proprietà standard, viene utilizzato il prefisso -webkit.

• font-size serve per indicare la dimensione della lettera come in font-size:12px;

• font-weight Imposta lo spessore del carattere. Può essere espresso come valore numerico, solitamente un multiplo di 100 compreso tra 100 e 900, secondo i consueti pesi tipografici, o più frequentemente con un nome: normal per lo spessore della base, bold per il grassetto, bolder per la versione solitamente chiamata nera, light per la multa (comunemente detta leggera) e lighter per i più magri (a volte chiamati magri).

  Il valore numerico della versione normale del carattere è 400 (senza unità) e 700 per la versione in grassetto.

  Per impostazione predefinita, se non viene indicato nessun altro valore, l'aspetto del carattere è quello corrispondente normal oppure 400 quindi, se non è stato modificato nell'elemento generico o nel contenitore, da cui eredita, non è necessario indicare font-weight con il valore normal.

• font-stretch Si utilizza per indicare la larghezza della lettera, purché disponibile nella famiglia corrispondente. I possibili valori che può assumere la proprietà, ordinati dal più stretto al più largo, sono: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. Con gli stessi criteri utilizzati nella proprietà precedente, la larghezza predefinita è normal e non è necessario indicarlo espressamente a meno che non sia stato modificato in un ordine gerarchico superiore a quello che si intende definire.

• Con font-style Puoi indicare se un testo è disegnato con una lettera obliqua o obliqua, che ne influenza l'aspetto, oppure con una lettera corsiva, che esprime un significato particolare (parole straniere, per esempio), o con lettera tonda, cioè nessuna delle precedenti o normale. il valore oblique adempie alla prima funzione, quella dell'apparenza e del valore italic il secondo. Il fatto che l'aspetto di entrambi sia spesso simile o addirittura identico significa che l'uso (il significato) a volte è confuso, quindi vale la pena prestare attenzione. Come per altre proprietà, normal serve a disattivare i valori precedenti.

• text-decoration serve a sottolineare (con il valore underline), sopralineato (con il valore overline), barrare (con il valore line-through) o lampeggiano (con il valore blink) il testo interessato da questa proprietà.

• Per completare il discorso sull'aspetto tipografico, anche se per la nostra applicazione non è molto rilevante, font-variant, ti consente di applicare maiuscoletto (minuscolo) ai testi.

Testo

• text-align dice al browser come dovrebbe essere allineato il blocco di testo. I possibili allineamenti sono a sinistra (che viene considerata di default) con il codice left, centrare con il valore center, proprio usando right e giustificato ad entrambe le estremità con justify.

• line-height imposta la separazione tra le righe di testo. In questo caso, se si utilizzano le percentuali, il valore 100% corrisponde all'altezza del testo anziché alla misura del contenitore. La misura più utilizzata relativa al testo corrisponde al 120%. Una linea al 100% significherebbe che la parte inferiore di una linea tocca la parte superiore di quella successiva. Sebbene il design tipografico di solito includa un po’ di spazio, è normale lasciare un po’ più di margine tra le righe.

  Per esprimere la separazione tra righe è anche possibile indicare un coefficiente (un valore senza unità) con cui calcolare l'altezza della riga in base all'altezza della casella di testo.

• letter-spacing è il valore dello spazio tra le lettere delle parole, che in tipografia è noto come crenatura o monitoraggio.

• word-spacing rappresenta la misura degli spazi tra le parole.

• white-space imposta il comportamento degli spazi bianchi in un testo. Quando viene utilizzato il valore normal, che viene utilizzato per impostazione predefinita, unisce diversi spazi vuoti nel codice HTML in una delle presentazioni della pagina web (visualizzata dal browser) e prende gli spazi bianchi come riferimento per interrompere una riga se non c'è spazio nel blocco.

  Il valore nowrap Unisce inoltre gli spazi vuoti ripetuti in uno solo, ma non divide le righe di testo negli spazi vuoti anche se la riga non entra nel contenitore, traboccando lo spazio se necessario e scrivendo all'esterno se necessario. Per dividere espressamente le righe è possibile utilizzare l'etichetta <br> de HTML.

  utilizzando pre Né gli spazi vuoti vengono unificati unendoli in uno solo, né le linee vengono divise utilizzando gli spazi come riferimento.

  pre-line unisci gli spazi ripetuti e spezza le righe se necessario utilizzando gli spazi come riferimento.

  pre-wrap conserva gli spazi bianchi ripetuti e interrompe le righe se necessario utilizzando gli spazi bianchi come riferimento.

Colore

En CSS il colore può essere espresso secondo Modello di colore RGB o secondo Modello di colore HSL ed in entrambi i casi può essere inclusa l'informazione di trasparenza, il valore di un quarto canale che viene solitamente chiamato canale alfa o composizione alfa, che dà origine ai modelli RGBA e HSLA.

Per esprimere il colore nel formato RGB utilizzando la notazione esadecimale viene utilizzata la sintassi #RRGGBB, dove RR è il valore della componente rossa (utilizzando in linea di principio due cifre esadecimali), GG il valore della componente verde e BB il valore della componente blu. Come già detto, se le due cifre di ciascun componente hanno lo stesso valore può essere espresso come #RGB limitando il numero di colori disponibili a quelli cosiddetti web-safe

Oltre a questo modo di rappresentare il colore, il più classico ed utilizzato, può essere espresso come rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) per indicarlo nel formato RGB, HSL e relativa modulistica con indicazione di trasparenza (canale alfa)

Se non diversamente richiesto aggiungendo il suffisso dell'unità, il Modello RGB utilizza valori decimali da 0 a 255, per le tre componenti, il valore di componente alfa è un coefficiente (decimale da zero a uno) e il primo valore di Modello di colore HSL, la tonalità, è un valore decimale compreso tra 0 e 360 ​​(senza unità) che rappresenta un angolo. I valori di saturazione e luminosità del Modello HSL Solitamente sono espressi in percentuale.

Come già detto, nonostante il suo utilizzo non sia molto frequente, i colori possono essere indicati con il loro nome nel formato color:black; al posto di color:#000000;. Il primo formato è più leggibile ma si limita ad una breve tabella di valori che è anche più difficile da modificare numericamente da un applicativo scritto in JavaScript.

Per la nostra proposta di rappresentazione grafica dei dati provenienti da sensori collegati all'IoT, avremo bisogno solo di tre proprietà relative al colore. Serviranno sia per indicare il nome del testo, che ora viene spiegato, sia per indicare il nome dell'eventuale componente che lo supporta.

• color indica il colore dell'elemento HTML e quello di ciò che contiene (che lo eredita) a meno che non venga espressamente modificato assegnando individualmente altri colori.

• background-color Utilizzato per definire il colore di sfondo di un elemento HTML. Oltre a indicare il colore come valore RGB o HSL puoi usare un valore speciale transparent per fare in modo che l'oggetto non abbia colore di sfondo e sia possibile vedere cosa si trova dietro di esso, ovvero non copra gli elementi su cui è stato disegnato.

• opacity permette di impostare l'opacità (indirettamente, trasparenza) di un elemento e di tutto il suo contenuto (da non confondere con la trasparenza dello sfondo). Se si assegna la trasparenza ad elementi contenuti in altri che sono essi stessi trasparenti, questa verrà aumentata, non funzionerà separatamente. Non è possibile rendere più opaco un oggetto contenuto in un oggetto trasparente. Il valore di opacity È espresso come un coefficiente simile opacity:0.5; per indicare un'opacità del 50%.

  Le versioni precedenti del browser Microsoft non utilizzavano questa proprietà, ma ne avevano la proprietà filter (filtro) che, tra gli altri valori, potrebbe supportare alpha (per il canale alfa) a cui si potrebbe assegnare una percentuale di opacità opacity secondo il formato:

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

Misure

En CSS, la misurazione degli elementi <div>, con cui abbiamo scelto di comporre il contenitore grafico width (larghezza) e height (contralto).

tra il contenuto di <div> e sul suo perimetro c'è un'area di riempimento che viene determinata con il valore di padding. Intorno al perimetro dell'oggetto c'è il bordo la cui misura è specificata con la proprietà border. Separare l'esterno dell'oggetto <div> degli altri oggetti circostanti esiste uno spazio la cui misura è determinata da margin.

In condizioni normali, la misura dello spazio utilizzato dall'oggetto <div> può essere calcolato come la somma della sua larghezza o altezza più il riempimento (padding) più bordo (border) più margine (margin). Quando la misura rilevante che si stabilisce è lo spazio utile interno dell'oggetto <div>, questa composizione è molto pratica, ma se si conosce la misura totale disponibile è possibile modificare questo comportamento?, impostato di default, in modo che la misura totale di larghezza e altezza sia quella indicata da width (larghezza) e height (altezza) sottraendo da esso la misura del riempimento, del bordo e del margine, invece di aggiungerla. Per utilizzare questa modalità, assegnare il proprietà box-sizing il valore border-box (l'impostazione predefinita è content-box)

Il diagramma seguente mostra graficamente i valori risultanti da width (larghezza) e height (alto) se utilizzato box-sizing:border-box; (il totale) obox-sizing:content-box; (dentro)

I valori delle misurazioni sono espressi con le unità che sono già state spiegate. Quando si tratta di proprietà definite da più valori, i dati espressi con diversi tipi di medie possono essere mescolati. Inoltre, ci sono alcuni valori speciali che sono rilevanti per l'uso che faremo in questa implementazione dei grafici dei sensori nell'IoT. Nello specifico, possiamo utilizzare il valore auto sulla proprietà margin come risorsa per centrare gli oggetti in alcune circostanze.

Nell'esempio sopra, per la classe “small_box” viene definito un bordo spesso 2 pixel, disegnato con un tratto nero (#000000) continuo (solid). Nella classe “big_box” la linea utilizzata per il bordo è tratteggiata (dashed) e il colore rosso (#FF0000). Per esprimere questi valori separatamente possiamo usare border-width per spessore, border-style per l'ictus e border-color per colore. Queste proprietà del bordo sono a loro volta composte e sono formate dalle caratteristiche superiore, destra, inferiore e sinistra, seguendo la direzione oraria come spiegato sopra.

Le due classi definite hanno le stesse misure, ma la prima è più piccola rispetto all'utilizzo del valore border-box per proprietà box-sizing, la spaziatura interna, il bordo e il margine vengono disegnati all'interno dell'oggetto anziché attorno al contenuto, come avviene per impostazione predefinita. Nella classe "big_box" non è indicato, quindi il valore viene preso di default content-box che fa sì che il riempimento, il bordo e il margine aumentino alla dimensione indicata da width y height.

Il valore del margine della classe nell'esempio sopra è di 10 pixel in alto, a destra, in basso e a sinistra, quindi potrebbe essere espresso come un singolo valore margin:10px;. È molto interessante conoscere questa alternativa per comprendere il codice sviluppato da terze parti anche se, in questa proposta di implementazione, per renderlo più leggibile, si suggerisce di indicare, ripetuti, i valori.

Le tre classi dell'esempio precedente producono lo stesso risultato, essendo più compatta la definizione del cosiddetto “laconico” e meno quella del cosiddetto “loquace” che, più che aggiungere chiarezza di lettura, è la forma normalmente utilizzato per modificare qualche aspetto parziale e concreto di una proprietà, riutilizzando gli altri valori per ereditarietà (vengono forniti dal contenitore o forniti da una delle classi assegnate all'elemento). Se il carico imposto al server dal testo in più di questo modo di definire le proprietà e altre circostanze che, per rendere il codice più leggibile, come i commenti, ne aumentano la dimensione e quindi il traffico, fossero rilevanti, sarebbe possibile elaborarlo (ad esempio esempio) da PHP come parte della strategia di generazione del codice da questo linguaggio.

Le dimensioni del modello box influiscono principalmente sugli elementi <div> ma è possibile forzare questo comportamento su altri elementi con la proprietà display e il valore block. Per far scorrere un elemento come testo su una riga, utilizzare display:inline; ed entrambi i comportamenti, misurazioni e flusso, possono essere combinati display:inline-block;

Il valore none sulla proprietà display, usato come display:none;, permette anche di nascondere gli oggetti, che serviranno ad "accenderli" e "spegnerli". JavaScript.

Se le dimensioni di un elemento non sono specificate, sono necessarie tutte le dimensioni necessarie per adattare il suo contenuto (in realtà, si adatta al contenuto senza bisogno di stabilire una dimensione). Ma se vengono indicate le dimensioni, può succedere che gli oggetti contenuti non entrino; in tal caso le dimensioni non vengono rispettate, ma vengono aumentate per consentire la visibilità di tutto il contenuto.

Affinché gli elementi contenuti in un'altra misura fissa vengano ritagliati quando superano la dimensione, viene utilizzata la proprietà overflow con il valore hidden. con il valore scroll, vengono ritagliati anche gli oggetti che traboccano dal contenitore, come avviene con hidden ma viene visualizzata una barra di scorrimento che potrebbe essere vista quando la si sposta. Il valore auto fa apparire la barra di scorrimento solo quando necessario in base alla dimensione del contenuto.

Puoi anche stabilire una dimensione minima in modo che i contenitori occupino quello spazio anche se il contenuto non ne ha bisogno e senza limitare le loro dimensioni ad aumentare quando il contenuto lo richiede. Le proprietà che sono incaricate di questo compito sono min-width per l'acho e min-height per quello alto. In senso opposto, max-width impostare una larghezza massima e max-height un'altezza massima che si annulla width già height.

Flusso di elementi sulla pagina web

I rettangoli (blocchi) che abbiamo definito con gli elementi <div>, per impostazione predefinita vengono posizionati uno sotto l'altro. Per modificare questo comportamento è possibile utilizzare la proprietà floatindicando left o right come valore, in modo che scorrano rispettivamente da sinistra a destra o da destra a sinistra. Al contrario, per evitare che un oggetto "fluttui" a destra o a sinistra di un altro, è possibile utilizzare la proprietà clear con i valori left, right o both, che sovrascrivono il flusso da sinistra a destra, da destra a sinistra o entrambi.

Contrariamente a quanto accade in altre circostanze, il flusso prodotto float non modifica automaticamente le dimensioni del contenitore, quindi è utile includerlo nelle sue proprietà overflow:auto; per forzare la dimensione (altezza) del contenitore a cambiare quando un oggetto lo trabocca a causa della sua posizione float.

Un altro modo per configurare il flusso del contenuto di un elemento è dividerlo in colonne con la proprietà column-count (che per il momento dovrebbe essere accompagnato da -webkit-column-count e -moz-column-count) La dimensione delle colonne può essere indicata (anzi suggerita) con column-width (-webkit-column-width -moz-column-width) e la separazione tra le colonne con column-gap (-webkit-column-gap -moz-column-gap)

In modo che i blocchi non siano divisi e il loro contenuto sia distribuito su più colonne, è possibile utilizzare display:inline-block; anche se questo sicuramente implica. lasciare inutilizzata una parte della colonna.

Posicionamiento

Per stabilire la posizione degli elementi sulla pagina web, i CSS utilizzano diverse modalità di posizionamento che possono essere diverse per ogni elemento, ovvero è possibile mescolare diversi criteri di posizionamento sullo stesso sito web.

• position:static; È il posizionamento predefinito (non è necessario indicarlo se non è stato precedentemente modificato).Questo tipo di posizionamento segue il flusso "naturale" della pagina: un elemento dopo l'altro partendo da sinistra, crescendo, finché c'è spazio, a destra e dall'alto verso il basso. Non utilizza coordinate orizzontali o verticali per stabilire la sua posizione, segue la posizione che corrisponde all'ordine dell'oggetto.

• position:fixed; Serve per posizionare un oggetto in una posizione fissa nella finestra del browser (come un menu, ad esempio). La posizione dell'elemento è specificata orizzontalmente con left o right per determinare la separazione rispettivamente a sinistra o a destra e con top o bottom per la separazione sopra o sotto il bordo della finestra del browser (viewport).

  Utilizzando questo e altri tipi di posizionamento, gli oggetti possono sovrapporsi. Oggetti disegnati per primi (definiti in precedenza nel codice HTML) possono essere coperti da quelli disegnati successivamente (quelli inseriti successivamente nel codice HTML). Per alterare l'ordine normale è possibile utilizzare la proprietà z-index, gli oggetti con il valore più alto in z-index Coprono quelli con meno valore.

• position:relative; Sposta l'elemento dalla sua posizione "normale" come indicato dalle proprietà left o right orizzontalmente e top o bottom verticalmente.

• position:absolute; Posiziona l'elemento in una posizione fissa rispetto all'oggetto che lo contiene. La sua posizione è espressa, come nei casi precedenti, con left,right, top y bottom

  Il nome di questo tipo di posizionamento crea inizialmente confusione, poiché la posizione viene stabilita rispetto all'oggetto gerarchicamente superiore a quello che utilizza la proprietà, che è discutibile se sia assoluta.

  È anche importante ricordare che l'elemento che contiene gli oggetti <div> che usiamo al primo livello gerarchico è <body>, pertanto, se il <div> cosa usi position:absolute; non è contenuto in altro, il suo posizionamento sarà “assoluto” rispetto alla pagina web.

Proprietà per media e caratteristiche specifici (query multimediali)

CSS permette di definire nello stesso foglio di stile aspetti diversi per diversi media o supporti a seconda del tipo di dispositivo utilizzato (come uno schermo o una stampante), delle sue dimensioni, del suo orientamento (verticale o orizzontale) o della sua risoluzione. Questo serve per poter visualizzare, nel modo più adeguato al contesto, la stessa pagina web.

Per fare riferimento ai media, utilizzare @media in modo analogo a quanto già spiegato per i font con @font-face, racchiudendo tra parentesi graffe ({ y }) le definizioni dei diversi elementi: etichette HTML, classi, identificatori...

I tipi di media disponibili in CSS3 sono: all, per riferirsi a qualsiasi media (tutti), screen per qualsiasi tipo di schermo (versioni precedenti di CSS Hanno distinto tra monitor TV e monitor di computer) print per l'output della stampante e speech per lettori web audio che interpretano le informazioni con sintetizzatori vocali.

Nell'esempio precedente, gli elementi della classe text hanno uno sfondo nero e testo bianco sullo schermo ma vengono stampati con uno sfondo bianco e testo nero.

È possibile imporre condizioni ai media per definire diversi set di proprietà in base, ad esempio, alla risoluzione disponibile o al rapporto di visualizzazione. Queste condizioni e i mezzi stessi possono essere composti con operazioni logiche and, not y only rispettivamente, esigere che tu rispetti diversi, che non rispetti o solo quando rispetti.

Tra le condizioni disponibili le troviamo particolarmente interessanti max-width (larghezza massima della finestra), max-height (altezza massima della finestra), min-width (larghezza minima della finestra), min-height (altezza minima della finestra), orientation (l'orientamento, che può essere landscape, paesaggio o portrait, verticale), max-resolution (risoluzione massima in dpi, punti per pollice o pollici dpcm, punti per centimetro) e min-resolution (risoluzione minima, anche in dpi o dpcm).

Nell'esempio precedente iniziamo definendo un colore di sfondo in modo che, in tutti i media, gli elementi della classe main_block abbiano il colore di sfondo #CCCCCC. Quando viene visualizzato su uno schermo e la finestra è larga almeno 320 pixel, i margini sinistro e destro saranno automatici (centrare il blocco) e la larghezza dell'elemento sarà di 300 pixel. Se la risoluzione dello schermo è di 640 pixel, la larghezza del blocco sarà di 620 pixel. Poiché la seconda definizione del supporto non include informazioni sui margini e i dispositivi che soddisfano la seconda condizione soddisferanno anche la prima, il margine orizzontale sarà comunque automatico.

Infine, nell'esempio viene modificato il colore dello sfondo in modo che risulti bianco nella stampa.

Il modo usuale per definire gli stili per i diversi media è solitamente quello di iniziare con quelli comuni, solitamente colori e caratteri, seguiti dalle geometrie più restrittive (le misurazioni dei dispositivi con il minor numero di pixel) solitamente per smartphone e tablet dove, oltre Sarà importante sapere se vengono utilizzati in verticale o in orizzontale orientation e sicuramente anche la sua risoluzione con min-resolution. Successivamente vengono indicate le diverse dimensioni per gli schermi più grandi e di solito si conclude con la stampa e i supporti vocali, che nell'esempio della grafica IoT sono stati omessi.

uso @media Condizioni imponenti come dimensioni, risoluzione e orientamento consentono al progettista di creare un'unica pagina Web che, con stili diversi, apparirà più appropriata per ciascun dispositivo. Questo comportamento è solitamente chiamato responsive design; design adattabile, in una traduzione molto libera.

CSS per contenitore grafico SVG

Con quanto spiegato finora è ora possibile definire gli stili che il Contenitore HTML di grafica SVG con cui rappresentare lo stato dei sensori connessi all'IoT. Nel codice seguente si propone la proposta comprendente, commentata, la distribuzione in colonne che corrisponde ad un numero di grafici maggiore rispetto a quelli che utilizza la proposta della serie di articoli, in modo da poter essere riutilizzata in altri casi.

Di seguito puoi vedere come sarebbero questi stili. Codice HTML dal contenitore proposto per la grafica SVG dall'articolo precedente.

Il prossimo articolo di questa serie spiega come disegnare con SVG Grafici di dati dello stato dei sensori connessi all'Internet of Things (IoT).