Definieren Sie mit CSS das Erscheinungsbild des Sensorgrafik-Webs im IoT

Im vorherigen Artikel der Serie über wie man Zustandsdiagramme von Sensoren erstellt, die mit dem Internet der Dinge (IoT) verbunden sind erklärt den Weg Verwenden Sie eine in HTML entwickelte Webseite als Struktur für Grafiken. Die durch Objekte auf ein Minimum reduzierten Webseitenelemente <div>, definierte nicht direkt sein Aussehen, sondern bezog sich auf das Informationen zum Erscheinungsbild in ein Stylesheet übertragen CSS, was in diesem Teil der Serie erklärt wird.

In der Lösung, die ich vorschlage, um Diagramme von Sensoren zu erstellen, die mit dem IoT verbunden sind, wird ein Dokument verwendet CSS das aus dem Dokument geladen wird HTML. Wenn der Code HTML wird von einer Anwendung auf dem Server generiert, zum Beispiel in PHP, wäre es sehr einfach, es als Teil des Codes einzubinden, der die Webseite definiert, anstatt es von dort zu laden, was durch das Speichern eines Aufrufs etwas optimiert werden könnte. Welche Option auch immer gewählt wird, die bequemste Methode umfasst Bearbeiten Sie den Code CSS in einem separaten Dokument, um es komfortabler verwalten und wiederverwenden zu können. In dem im Tutorial dieser Artikelserie entwickelten Beispiel wurde ihm der Name gegeben estilo.css.

Auf die gleiche Weise, Bei komplexen Projekten empfiehlt es sich, mehrere separate Stylesheets in verschiedenen Dokumenten zu verwenden, sowohl um bestimmte Funktionalitäten wiederverwenden zu können, ohne sie jedes Mal alle laden zu müssen, als auch um den Code einfacher bearbeiten zu können, indem er entsprechend der entsprechenden logischen Struktur auf verschiedene Dokumente verteilt wird.

Die Stile CSS Sie versuchen, alle Extreme des Verhaltens und Erscheinungsbilds einer Webseite anhand mehrerer Arten von Ansätzen zu beschreiben, die alle gleichzeitig gültig sind, und gleichzeitig die Kompatibilität mit den Spezifikationen früherer Versionen so weit wie möglich zu respektieren. Das bedeutet, dass es viele mögliche Lösungen gibt, die die gleichen Bedürfnisse erfüllen. sowie eine hohe Anzahl an verfügbaren Ressourcen (Eigenschaften). CSS). Aufgrund des didaktischen Ansatzes des Artikels und um neue Benutzer nicht zu verwirren CSS, nur die Eigenschaften und die für das Endziel notwendigen Strukturen, das Daten von Sensoren grafisch darstellen soll, die mit dem Internet der Dinge verbunden sind. Gleichzeitig gibt es auch eine kleine Einführung in CSS, Cascading Style Sheets.

CSS-Eigenschaften formatieren

El Grundformat Es besteht aus einem Eigenschaftsnamen, dem Doppelpunkt, dem Eigenschaftswert und dem Semikolon. nombre:valor;

CSS ermöglicht Ihnen die Verwendung verschiedener Maßeinheiten im selben Dokument einschließlich derjenigen, die sich auf die Struktur beziehen (die Messung dessen, was ein Element enthält), als Prozentsätze, relativ zum Gerät, auf dem sie dargestellt werden, wie zum Beispiel das Pixel, oder absolute Zahlen wie Zentimeter. Die Einheiten werden nach dem Wert entsprechend der folgenden Abkürzungskodierung ausgedrückt.

Für die Anwendung, die wir durchführen werden, ist es wichtig, mindestens drei Stileinheiten zu berücksichtigen. Der Prozentsatz für Messungen im Verhältnis zur Größe des Behälters eines Artikels, der Pixel für Messungen entsprechend der Bildschirmauflösung und die Millimeter (eigentlich jede absolute Messung) für die Erstellung gedruckter Berichte.

Es gibt einige komplexe Eigenschaften, oder zusammengesetzt, die von mehreren Werten abhängen (z. B. Farbe, Größe, Stil ...), um den Wert anzugeben, gibt es in CSS zwei Möglichkeiten: Schreiben Sie alle in der entsprechenden Reihenfolge Durch Leerzeichen getrennte Werte oder die Summe einfacher Eigenschaften, die dem Komplex entsprechen. Beispielsweise können alle vier Ränder eines Objekts in einer einzigen Eigenschaft angegeben werden margin oder kann mit Eigenschaften festgelegt werden margin-top, margin-right, margin-bottom y margin-left. Diese Reihenfolge (im Uhrzeigersinn) ist übrigens diejenige, der die Beschreibungen von Werten folgen, die ein Element „umgeben“, wie zum Beispiel den inneren (Auffüllung) oder äußeren Rand, den Rand ...

Mit dem, was bisher erklärt wurde, können wir nun einige Beispiele für Eigenschaften sehen

Im obigen Beispiel Die Farbe wird mithilfe eines Codes aus 6 hexadezimalen Ziffern definiert, die paarweise den Wert der roten, grünen und blauen Komponente darstellen. Wenn es wie im Beispiel vorkommt, dass die beiden Ziffern gleich sind, kann es als abgekürzt werden #F09 (was übrigens den sogenannten „websicheren Farben“ entspricht). Im endgültigen Vorschlag werde ich auf die Verwendung dieser Abkürzungen verzichten, um die Kriterien zu vereinheitlichen und die Lesbarkeit zu verbessern. Sie können die Werte komplexer Eigenschaften auch abkürzen, z margin im Beispiel, wenn alle Werte bzw. Gegenpaare wiederholt werden. Analog zum Speichern von Text ist es auch möglich, bei der Angabe einer Eigenschaft die Einheit wegzulassen, wenn der Wert Null ist, da sie in diesem Fall irrelevant ist.

Einige Werte können nicht nur numerisch ausgedrückt werden, sondern haben auch einen Namen Dadurch wird der Code besser lesbar und Sie können ihn sich besser merken. Anstelle des hexadezimalen Zahlencodes des Ziels beispielsweise #FFFFFF (o #FFF), kann geschrieben werden white mit dem gleichen Ergebnis. Auf diese Weise wird die Farbe Schwarz, #000000 (o #000), kann ersetzt werden durch black.

auch Dort werden Werte durch einen speziellen Code, einen Namen, ausgedrückt. Um beispielsweise anzugeben, dass der Seitenrand automatisch vom Browser festgelegt wird (normalerweise entspricht er der Mittelfunktion), wird der Sonderwert verwendet auto, die keine numerische Entsprechung zu irgendeinem Wert hat.

zu drücken eine besondere Art der Verwendung einer Reihe zusammengesetzter (komplexer) Werte einer Eigenschaft aus CSS Sie können Formate wählen, deren Syntax der der Funktionen ähnelt. Um beispielsweise eine Farbe als die drei Werte ihrer Rot-, Grün- und Blaukomponente auszudrücken (die RGB-Modell) würde geschrieben werden color: rgb(128, 255, 64);. Innerhalb dieses Ausdrucksstils ist es auch möglich, Einheiten zu verwenden; Im obigen Beispiel sind die Farbkomponenten ein Dezimalwert von 0 bis 255, aber es könnte einfacher sein, dies als Prozentsatz der Gesamtsumme jeder Farbkomponente auszudrücken. In diesem Fall könnte es auch als geschrieben werden color: rgb(50%, 100%, 25%);.

Berechnen von Werten in CSS

In den neuesten Versionen von CSS es ist möglich einfache mathematische Operationen zur Berechnung von Werten. Verwenden Sie dazu calc und die auszuführende Operation wird in Klammern ausgedrückt. Sie können Einheiten, Klammern und einfache Operatoren wie Summe (+), Subtraktion (-), Multiplikation (*) und Division (/). Der Ausdruck wäre vom Typ width:calc((90%-20px)/2));.

Variablen können in mathematischen Operationen verwendet werden CSS sich bei der Berechnung einer Immobilie auf den Wert einer anderen mit beziehen var. Um eine Variable verwenden zu können, ohne auf eine tatsächliche Eigenschaft des Stils verweisen zu müssen, ist es auch erlaubt, eine Eigenschaft zu zitieren, die nicht existiert. CSS empfiehlt das Format --nombre-variable (zwei Bindestriche vor dem Namen des erfundenen Eigentums). Um die Höhe eines Elements als die Hälfte seiner Breite zu definieren, ist auf diese Weise ein Ausdruck erforderlich CSS als height:calc(var(width)/2); und um eine neue Variable „Dicke“ zu definieren (die andere Eigenschaften verwenden könnten), würden Sie zum Beispiel schreiben: --grosor:4px; um es später als bezeichnen zu können margin-top:calc(var(--grosor)*4);

Browserabhängige CSS-Eigenschaften

CSS Es handelt sich um eine vom Konsortium standardisierte Spezifikation W3C (World Wide Web Consortium) aber viele Eigenschaften oder Verhaltensstile erreichen Browser, bevor sie Teil der Spezifikation werden einer Version.

damit der Code CSS funktioniert mit den aktuellen Funktionen eines Browsers, aber Um die Kompatibilität mit neuen Funktionen nicht zu verlieren, wird ein Präfix verwendet. Dieses Präfix hängt von der ab Rendering-Engine das den Webbrowser verwendet, auf den Sie verweisen möchten (für den der Stil definiert ist).

Das Präfix -webkit Es funktioniert für Browser, die auf basieren WebKit als Safari o Chrome. Das Präfix -moz Es wird für Browser verwendet, die auf dem basieren Rendering-Engine de Mozillamomentan GeckoAls Firefox und seine Derivate. Zu beziehen EdgeHTMLdas Rendering-Engine Browser Edge von Microsoft (ehemals Dreizack), wird das Präfix verwendet -ms. Der Fall des Browsers Opera ist etwas Besonderes, da er angefangen hat, sein eigenes zu verwenden Rendering-Engine, bezeichnet mit -o, funktioniert aber derzeit mit WebKit, was ausgedrückt wird als -webkit.

Um eine Eigenschaft zu verwenden, die sich auf einen Browser bezieht, schreiben Sie ihren Namen, stellen Sie ihm ein Präfix voran und trennen Sie ihn durch einen Bindestrich, wie in -o-border-radius:10px;, was in älteren Versionen des Browsers dazu dienen würde, einen abgerundeten Rand (eine abgerundete Ecke) festzulegen Opera.

Mitteilung

Um den Code zu verdeutlichen CSS Sie können Kommentare verwenden, die die Lesbarkeit verbessern, jedoch den Nachteil haben, dass sie größer werden. Die Syntax von Kommentaren in CSS Es ist wie mehrzeilige Kommentare C + + was Sie sicher schon wissen: beginnend mit /* und endet in */Wie in C + +, kann mehrere Zeilen belegen.

Selektoren

Die Definition von Eigenschaften werden Objekten in einem Dokument zugewiesen HTML Gruppieren Sie sie in Selektoren und sie in geschweiften Klammern einzuschließen. Ein Selektor kann auf ein Sprachelement verweisen HTML (ein Etikett), wie div, eine Klasse (zugewiesen mit class en HTML) eine Kennung (zugewiesen mit id en HTML) oder alle (der „universelle Selektor“), dargestellt durch das Sternchen (*). Das folgende Beispiel zeigt einen Selektor jedes Typs:

Die Etiketten von HTML werden in der Stildefinition mit ihrem Namen ausgedrückt, die Klassen werden durch einen Punkt vor dem Namen gekennzeichnet (.) und ein Nummernzeichen (#) für Bezeichner.

Ein Teil der großen Macht von CSS wohnt in der Möglichkeit, Selektoren bei der Definition ihrer Eigenschaften zu gruppieren. Es gibt verschiedene Möglichkeiten, Selektoren zu gruppieren. Indem man sie gruppiert, Durch Kommas getrennt wird ausgedrückt, dass jeder der genannten Selektoren über diese Eigenschaften verfügt.

Das vorherige Beispiel zeigt, dass die Verbrauchs-, Feuchtigkeits- und Temperaturklassen gemeinsame Farben, Breiten und Höhen haben. In diesem Code wird auch ein neues Konzept eingeführt: Eigenschaften können neu definiert werden, und in diesem Fall haben die zuletzt beschriebenen Vorrang. Auf diese Weise hätten die Elemente der Temperaturklasse schließlich eine Höhe von 50 % des Objekts, das sie enthält.

Wenn die gruppierten Selektoren nicht durch Kommas getrennt sind, ist die den Eigenschaften auferlegte Bedingung kumulativDas heißt, ein Element muss alle Selektoren erfüllen, damit es das von ihnen definierte Erscheinungsbild oder Verhalten annimmt. Wenn Selektoren auf Tags verweisen HTML Die Reihenfolge, in der sie erscheinen, muss mit der Ebene der Einbeziehung absteigend sein: zuerst die höchste Hierarchieebene und zuletzt die niedrigste.

Im vorherigen Beispiel werden die Elemente definiert div die ebenfalls der Temperaturklasse angehören, und die Elemente, die sowohl die Temperaturklasse als auch die Verbrauchsklasse (beide gleichzeitig) haben, wie in class="temperatura consumo". Die Elemente <div> Von Code HTML mit class="temperatura" sie hätten einen Höchstwert von 100 %

CSS-Eigenschaften zum Definieren des Textes

Es kann zwischen drei Arten von Eigenschaften unterschieden werden, die das Erscheinungsbild des Textes beeinflussen: (1) diejenigen, die die Schriftart festlegen, mit der er dargestellt wird, (2) diejenigen, die das Erscheinungsbild des Literals (des Inhalts des Textes) bestimmen. und (3) generische, also solche, die sich sowohl auf das Erscheinungsbild des Textes als auch auf das anderer Komponenten auswirken. Im Allgemeinen gilt das, was zur Erklärung der letzten Gruppe gesagt wurde, auch für die gleichen Eigenschaften, die auf andere Elemente angewendet werden.

Typografie (Schriftart)

• font-family gibt den Namen der Schriftart an, die für ein Element verwendet wird. Sie können einen einzelnen Namen oder eine Liste der Schriftarten schreiben, die alternativ verwendet werden, wenn die gewünschte Schriftart nicht vorhanden ist, und zwar in der Reihenfolge ihrer Präferenz und durch Kommas getrennt. Ebenso ist es möglich, generische Schriftarten für die Namen zu verwenden monospace, serif, sans-serif, cursive, fantasy. Von diesen generischen Schriftarten ist die wichtigste (für die Darstellung der vorliegenden Daten) die erste, die, wie der Name schon sagt, die im System verfügbare und vom Browser voreingestellte Schriftart mit festem Abstand verwendet. Der Zweite, serif, wird die verfügbare Standardversion verwendet Serife (Abschluss oder Anmut). Ohne Auktion, wenn der Dritte angegeben ist, sans-serif. Nachahmung handgezeichneter Schrift mit cursive (eine Bezeichnung, die eindeutig verbesserungswürdig ist) und die dekorative Typografie des Systems mit fantasy, der letzte der fünf.

  Was den Code betrifft CSS Leerzeichen haben als Trennzeichen eine besondere Bedeutung; wenn der Name der Schriftfamilie aus mehreren durch Leerzeichen getrennten Wörtern besteht, wird er zur Vermeidung von Verwechslungen in Anführungszeichen geschrieben.

  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;

  Webbrowser sind in der Lage, sowohl lokale Schriftarten (die auf dem System, auf dem sie laufen, installiert sind) als auch andere, die speziell geladen werden, zu verwenden und sich sogar mit den lokal installierten zu überschneiden. Um eine Schriftart zu laden, verwenden Sie @font-face unter Angabe seines Namens, des Download-Speicherorts seiner Definition und gegebenenfalls einer Beschreibung seines Formats.

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

  In der ersten der beiden Definitionen im vorherigen Beispiel wird der Buchstabe des Dokuments geladen Sircuito-Expanded-Light.eot Dieser befindet sich im EOT-Ordner im Hauptordner (Stammordner) und wird als Familienname zugewiesen CircuitExpandedLight. Gefällt dir übrigens diese Schriftart? Es ist kostenlos, das können Sie Laden Sie kostenlos die Sircuito-Schriftart herunter, die ich für das GranaBot-Bild entworfen habe.

  Wie im Beispiel zu sehen ist, entspricht die URL-Eigenschaft dem einheitlicher Ressourcen-LocatorMit dieser Option können Sie den Speicherort des Dokuments mit der heruntergeladenen Schriftart angeben. Der Schrägstrich wird verwendet, um die Namen der verschiedenen Ordner vom Pfad zur Schriftart zu trennen, beginnend mit dem Ordner, der das Dokument enthält, von dem aus der Aufruf erfolgt, oder vom Stammverzeichnis, wenn dies der Fall ist URL Beginnen Sie mit einer Bar.

  Das zweite Beispiel verwendet mehrere alternative Dokumente, sodass dieselbe Definition für mehrere Browser funktioniert (von denen jeder den Typ lädt, den er interpretieren kann).

  Die letzte Zeile der Definition enthält die Eigenschaft font-smoothing um den Buchstaben weicher zu machen (a. anwenden) Antialiasing). Da es sich nicht um eine Standardeigenschaft handelt, wird das Präfix verwendet -webkit.

• font-size dient dazu, die Größe des Buchstabens wie in anzuzeigen font-size:12px;

• font-weight Legt die Schriftstärke fest. Er kann als numerischer Wert ausgedrückt werden, normalerweise ein Vielfaches von 100 zwischen 100 und 900, gemäß den üblichen typografischen Gewichten, oder häufiger mit einem Namen: normal für die Basisdicke, bold für die Mutigen, bolder für die Version, die normalerweise Schwarz genannt wird, light für das Feine (allgemein Licht genannt) und lighter für die dünnsten (manchmal auch dünn genannt).

  Der Zahlenwert der normalen Version der Schriftart beträgt 400 (ohne Einheit) und 700 für die fette Version.

  Wenn kein anderer Wert angegeben ist, ist das Erscheinungsbild der Schriftart standardmäßig das entsprechende normal oder 400. Wenn es also im generischen Element oder im Container, von dem es erbt, nicht geändert wurde, ist eine Angabe nicht erforderlich font-weight mit dem Wert normal.

• font-stretch Es wird verwendet, um die Breite des Buchstabens anzugeben, sofern dieser in der entsprechenden Familie verfügbar ist. Die möglichen Werte, die die Eigenschaft annehmen kann, geordnet vom schmalsten zum breitesten, sind: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. Mit denselben Kriterien, die in der vorherigen Eigenschaft verwendet wurden, beträgt die Standardbreite normal und es ist nicht notwendig, es ausdrücklich anzugeben, es sei denn, es wurde in einer höheren hierarchischen Reihenfolge als der definierten geändert.

• Mit font-style Sie können angeben, ob ein Text mit einem schrägen oder schrägen Buchstaben gezeichnet wird, was sich auf sein Aussehen auswirkt, oder mit einem kursiven Buchstaben, der eine besondere Bedeutung ausdrückt (z. B. Fremdwörter), oder mit einem runden Buchstaben, d. h. weder mit den vorherigen Buchstaben noch mit den vorherigen oder normal. der Wert oblique erfüllt die erste Funktion, nämlich die des Aussehens und des Wertes italic der Zweite. Die Tatsache, dass das Erscheinungsbild beider Wörter häufig ähnlich oder sogar gleich ist, führt dazu, dass die Verwendung (die Bedeutung) manchmal verwechselt wird, weshalb es sich lohnt, darauf zu achten. Wie bei anderen Eigenschaften auch, normal dient dazu, die bisherigen Werte zu deaktivieren.

• text-decoration dient zum Unterstreichen (mit dem Wert underline), überstrichen (mit dem Wert overline), durchstreichen (mit dem Wert line-through) oder blinken (mit dem Wert). blink) der Text, auf den sich diese Eigenschaft auswirkt.

• Um die Reihe des typografischen Aspekts zu vervollständigen, obwohl dieser für unsere Anwendung nicht sehr relevant ist, font-variant, ermöglicht Ihnen die Bewerbung Kapitälchen (kleine Großbuchstaben) zu den Texten.

Text

• text-align teilt dem Browser mit, wie der Textblock ausgerichtet werden soll. Die möglichen Ausrichtungen erfolgen links (was standardmäßig berücksichtigt wird) mit dem Code left, zentrieren Sie sich mit dem Wert center, richtig verwenden right und an beiden Enden mit gerechtfertigt justify.

• line-height Legt den Abstand zwischen Textzeilen fest. In diesem Fall entspricht bei Verwendung von Prozentangaben der Wert 100 % der Höhe des Textes und nicht dem Maß des Behälters. Das am häufigsten verwendete Maß im Verhältnis zum Text entspricht 120 %. Eine 100 %-Linie würde bedeuten, dass das Ende einer Linie das Ende der nächsten berührt. Obwohl typografische Gestaltung in der Regel etwas Platz vorsieht, ist es üblich, etwas mehr Abstand zwischen den Zeilen zu lassen.

  Um den Abstand zwischen Zeilen auszudrücken, ist es auch möglich, einen Koeffizienten (einen Wert ohne Einheit) anzugeben, mit dem die Höhe der Zeile basierend auf der Höhe des Textfelds berechnet wird.

• letter-spacing ist der Wert des Abstands zwischen den Buchstaben von Wörtern, der in der Typografie als bezeichnet wird Kerning o und die Nachverfolgung.

• word-spacing stellt das Maß für die Abstände zwischen Wörtern dar.

• white-space legt das Verhalten von Leerzeichen in einem Text fest. Wenn der Wert verwendet wird normal, das standardmäßig verwendet wird, verbindet mehrere Leerzeichen im Code HTML in einer der Präsentationen auf der Webseite (vom Browser angezeigt) und verwendet die Leerzeichen als Referenz, um eine Zeile umzubrechen, wenn im Block kein Leerzeichen vorhanden ist.

  Der Wert nowrap Es fügt auch wiederholte Leerzeichen zu einem zusammen, teilt die Textzeilen in den Leerzeichen jedoch nicht auf, selbst wenn die Zeile nicht in den Container passt. Bei Bedarf wird das Leerzeichen überfüllt und bei Bedarf außerhalb geschrieben. Um die Zeilen ausdrücklich zu unterteilen, können Sie die Beschriftung verwenden <br> de HTML.

  Mit pre Weder werden die Leerzeichen durch Zusammenfügen vereinheitlicht, noch werden die Zeilen unter Verwendung der Leerzeichen als Referenz geteilt.

  pre-line Verbinden Sie die wiederholten Leerzeichen und brechen Sie die Zeilen bei Bedarf um, indem Sie die Leerzeichen als Referenz verwenden.

  pre-wrap Behält wiederholte Leerzeichen bei und unterbricht bei Bedarf Zeilen unter Verwendung von Leerzeichen als Referenz.

Farbe

En CSS Farbe kann entsprechend ausgedrückt werden RGB-Farbmodell oder entsprechend HSL-Farbmodell und in beiden Fällen können Transparenzinformationen enthalten sein, der Wert eines vierten Kanals, der üblicherweise aufgerufen wird Alphakanal o Alpha-Zusammensetzung, wodurch die RGBA- und HSLA-Modelle entstehen.

Um Farbe im Format auszudrücken RGB Die Syntax wird in hexadezimaler Schreibweise verwendet #RRGGBB, wobei RR der Wert der roten Komponente ist (im Prinzip unter Verwendung von zwei hexadezimalen Ziffern), GG der Wert der grünen Komponente und BB der Wert der blauen Komponente. Wie bereits gesagt, wenn die beiden Ziffern jeder Komponente den gleichen Wert haben, kann dies ausgedrückt werden als #RGB Beschränkung der Anzahl der verfügbaren Farben auf die sogenannten websicheren Farben

Zusätzlich zu dieser Art der Farbdarstellung, der klassischsten und gebräuchlichsten, kann sie auch ausgedrückt werden als rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) um es im Format anzugeben RGB, Hsl und ihre jeweiligen Formen mit Angabe der Transparenz (Alphakanal)

Sofern durch Hinzufügen des Einheitensuffixes nichts anderes verlangt wird, gilt die RGB-Modell Verwendet Dezimalwerte von 0 bis 255, für die drei Komponenten der Wert Alpha-Komponente ist ein Koeffizient (dezimal von Null bis Eins) und der erste Wert von HSL-Farbmodell, der Farbton, ist ein Dezimalwert im Bereich von 0 bis 360 (ohne Einheiten), der einen Winkel darstellt. Die Sättigungs- und Leuchtkraftwerte der HSL-Modell Sie werden normalerweise als Prozentsätze ausgedrückt.

Wie bereits erwähnt, können Farben im Format durch ihren Namen angegeben werden, obwohl ihre Verwendung nicht sehr häufig vorkommt color:black; statt color:#000000;. Das erste Format ist besser lesbar, beschränkt sich jedoch auf eine kurze Wertetabelle, die auch schwieriger numerisch aus einer geschriebenen Anwendung heraus zu ändern ist JavaScript.

Für unseren Vorschlag zur grafischen Darstellung von Daten von Sensoren, die mit dem IoT verbunden sind, benötigen wir nur drei farbbezogene Eigenschaften. Sie dienen sowohl dazu, den Namen des Textes anzugeben, der jetzt erklärt wird, als auch den Namen einer beliebigen Komponente anzugeben, die ihn unterstützt.

• color gibt die Farbe des Elements an HTML und das dessen, was es enthält (das es erbt), es sei denn, es wird ausdrücklich durch individuelle Zuweisung anderer Farben geändert.

• background-color Wird verwendet, um die Hintergrundfarbe eines Elements zu definieren HTML. Zusätzlich zur Angabe der Farbe als Wert RGB o Hsl Sie können einen Sonderwert verwenden transparent Damit das Objekt keine Hintergrundfarbe hat und man sehen kann, was sich dahinter befindet, d. h. es verdeckt nicht die Elemente, auf denen es gezeichnet wurde.

• opacity ermöglicht es Ihnen, die Deckkraft (indirekt Transparenz) eines Elements und seines gesamten Inhalts festzulegen (nicht zu verwechseln mit der Transparenz des Hintergrunds). Wenn Transparenz Elementen zugewiesen wird, die in anderen enthalten sind, die selbst transparent sind, wird diese erhöht, sie funktioniert jedoch nicht separat. Sie können ein in einem transparenten Objekt enthaltenes Objekt nicht undurchsichtiger machen. Der Wert von opacity Es wird als Koeffizient ausgedrückt opacity:0.5; um eine Deckkraft von 50 % anzuzeigen.

  Ältere Versionen des Microsoft-Browsers nutzten diese Eigenschaft nicht, verfügten aber über die Eigenschaft filter (Filter), der neben anderen Werten Alpha unterstützen könnte (für die Alphakanal), dem eine prozentuale Deckkraft zugewiesen werden konnte opacity je nach 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 */

Maße

En CSS, die Messung der Elemente <div>, das wir zum Zusammenstellen des Grafikcontainers ausgewählt haben, ist mit festgelegt width (Breite) und height (Alt).

zwischen dem Inhalt von <div> und an seinem Umfang gibt es eine Füllfläche, die mit dem Wert von bestimmt wird padding. Der Umfang des Objekts wird von der Kante umgeben, deren Maße mit der Eigenschaft angegeben werden border. Trennen des Äußeren des Objekts <div> Von den anderen umgebenden Objekten gibt es einen Raum, dessen Größe bestimmt wird durch margin.

Unter normalen Bedingungen die Messung des vom Objekt genutzten Raums <div> kann als Summe seiner Breite oder Höhe plus der Polsterung berechnet werden (padding) plus Rand (border) plus Marge (margin). Als relevantes Maß wird der nutzbare Innenraum des Objekts ermittelt <div>Diese Zusammensetzung ist sehr praktisch, aber wenn das bekannt ist, ist die Gesamtmessung verfügbar Kann dieses Verhalten geändert werden?, standardmäßig eingestellt, sodass die Gesamtbreite und -höhe mit der durch angegeben ist width (Breite) und height (Höhe), indem Sie das Maß für Innenabstand, Rand und Rand davon subtrahieren, anstatt es zu addieren. Um diesen Modus zu verwenden, weisen Sie zu Eigentum box-sizing der Wert border-box (Standard ist content-box)

Das folgende Diagramm stellt die sich daraus ergebenden Werte grafisch dar width (Breite) und height (hoch) bei Verwendung box-sizing:border-box; (die Summe) oderbox-sizing:content-box; (innen)

Die Werte der Messungen werden mit den bereits erläuterten Einheiten ausgedrückt. Wenn es sich um Eigenschaften handelt, die durch mehrere Werte definiert sind, können Zahlen, die mit unterschiedlichen Durchschnittstypen ausgedrückt werden, gemischt werden. Darüber hinaus gibt es einige spezielle Werte, die für die Verwendung relevant sind, die wir in dieser Implementierung von Sensorgraphen im IoT vornehmen werden. Konkret können wir den Wert verwenden auto auf dem Grundstück margin unter bestimmten Umständen als Ressource zum Zentrieren von Objekten dienen.

Im obigen Beispiel wird für die Klasse „small_box“ ein 2 Pixel dicker Rahmen definiert, der mit einem schwarzen Strich gezeichnet wird (#000000) kontinuierlich (solid). In der Klasse „big_box“ ist die für den Rand verwendete Linie gestrichelt (dashed) und die Farbe Rot (#FF0000). Um diese Werte separat auszudrücken, können wir verwenden border-width für Dicke, border-style für den Schlaganfall und border-color für Farbe. Diese Kanteneigenschaften sind wiederum zusammengesetzt und werden durch die oberen, rechten, unteren und linken Merkmale gebildet, wobei der oben erläuterten Richtung im Uhrzeigersinn gefolgt wird.

Die beiden definierten Klassen haben die gleichen Maße, aber die erste ist seitdem kleiner, wenn der Wert verwendet wird border-box für Eigentum box-sizing, Innenabstand, Rand und Rand werden innerhalb des Objekts gezeichnet und nicht wie standardmäßig um den Inhalt herum. In der Klasse „big_box“ wird dies nicht angegeben, daher wird der Wert standardmäßig übernommen content-box Dadurch werden Polsterung, Rand und Rand auf die durch angegebene Größe vergrößert width y height.

Der Klassenrandwert im obigen Beispiel beträgt 10 Pixel oben, rechts, unten und links, sodass er als einzelner Wert ausgedrückt werden kann margin:10px;. Es ist sehr interessant, diese Alternative zum Verständnis des von Dritten entwickelten Codes zu kennen, obwohl in diesem Implementierungsvorschlag zur besseren Lesbarkeit empfohlen wird, die Werte wiederholt anzugeben.

Die drei Klassen im vorherigen Beispiel führen zum gleichen Ergebnis, wobei die Definition des sogenannten „Lakonischen“ kompakter ist und weniger die des sogenannten „Geschwätzigen“, was normalerweise die Form ist, die nicht nur der Klarheit des Lesens dient Wird verwendet, um einen teilweisen, konkreten Aspekt einer Eigenschaft zu ändern und die anderen Werte durch Vererbung wiederzuverwenden (sie werden vom Container bereitgestellt oder von einer der dem Element zugewiesenen Klassen bereitgestellt). Wenn die Belastung des Servers durch den zusätzlichen Text dieser Art der Definition der Eigenschaften und andere Umstände relevant wäre, die zur Verbesserung der Lesbarkeit des Codes, wie z. B. Kommentare, die Größe und damit den Datenverkehr erhöhen, wäre dies möglich Verarbeiten Sie es (zum Beispiel) aus PHP als Teil der Codegenerierungsstrategie aus dieser Sprache.

Die Abmessungen des Kastenmodells wirken sich hauptsächlich auf die Elemente aus <div> Es ist jedoch möglich, dieses Verhalten mit der Eigenschaft anderen Elementen aufzuzwingen display und der Wert block. Um ein Element wie Text in einer Zeile fließen zu lassen, verwenden Sie display:inline; und beide Verhaltensweisen, Messungen und Fluss, können mit kombiniert werden display:inline-block;

Der Wert none auf dem Grundstück display, benutzt als display:none;ermöglicht es Ihnen auch, Objekte auszublenden, was dazu dient, sie ein- und auszuschalten JavaScript.

Wenn die Abmessungen eines Elements nicht angegeben sind, werden alle erforderlichen Abmessungen verwendet, damit der Inhalt passt (tatsächlich wird der Inhalt angepasst, ohne dass eine Dimension festgelegt werden muss). Bei Maßangaben kann es jedoch vorkommen, dass die enthaltenen Objekte nicht passen; In einem solchen Fall werden die Abmessungen nicht beachtet, sie werden vergrößert, damit der gesamte Inhalt sichtbar ist.

Damit die in einem anderen festen Maß enthaltenen Elemente abgeschnitten werden, wenn sie die Größe überschreiten, wird die Eigenschaft genutzt overflow mit dem Wert hidden. mit dem Wert scroll, werden auch Gegenstände, die über den Behälter hinausragen, herausgeschnitten, wie es bei der Fall ist hidden Es wird jedoch eine Bildlaufleiste angezeigt, die beim Verschieben sichtbar ist. Der Wert auto Lässt die Bildlaufleiste je nach Größe des Inhalts nur dann erscheinen, wenn dies erforderlich ist.

Sie können auch eine Mindestgröße festlegen, sodass die Behälter diesen Platz auch dann einnehmen, wenn der Inhalt ihn nicht benötigt, und ohne ihre Abmessungen einzuschränken, um zu wachsen, wenn der Inhalt es erfordert. Die Eigenschaften, die für diese Aufgabe zuständig sind, sind: min-width für den Acho und min-height für den Großen. Im umgekehrten Sinne, max-width Legen Sie eine maximale Breite fest und max-height eine maximale Höhe, die sich aufhebt width bereits height.

Fluss von Elementen auf der Webseite

Die Rechtecke (Blöcke), die wir mit Elementen definiert haben <div>, werden sie standardmäßig untereinander platziert. Um dieses Verhalten zu ändern, können Sie die Eigenschaft verwenden floatanzeigt, left o right als Wert, so dass sie von links nach rechts bzw. von rechts nach links fließen. Im Gegenteil: Um zu verhindern, dass ein Objekt rechts oder links von einem anderen „schwebt“, können Sie die Eigenschaft verwenden clear mit den Werten left, right o both, die den Fluss von links nach rechts, von rechts nach links oder von beiden außer Kraft setzen.

Im Gegensatz zu dem, was unter anderen Umständen passiert, wird der Fluss erzeugt float ändert die Abmessungen des Containers nicht automatisch, daher ist es sinnvoll, es in seine Eigenschaften aufzunehmen overflow:auto; um zu erzwingen, dass sich die Größe (Höhe) des Containers ändert, wenn ein Objekt ihn aufgrund seiner Position überfüllt float.

Eine andere Möglichkeit, den Fluss des Inhalts eines Elements zu konfigurieren, besteht darin, ihn mit der Eigenschaft in Spalten zu unterteilen column-count (was im Moment begleitet sein sollte von -webkit-column-count y de -moz-column-count) Die Größe der Spalten kann mit angegeben (eigentlich vorgeschlagen) werden column-width (-webkit-column-width -moz-column-width) und die Trennung zwischen Spalten mit column-gap (-webkit-column-gap -moz-column-gap)

Damit die Blöcke nicht geteilt werden und ihr Inhalt auf mehrere Spalten verteilt wird, können Sie verwenden display:inline-block; obwohl das sicherlich impliziert. Lassen Sie einen Teil der Spalte ungenutzt.

Positionierung

Um die Position der Elemente auf der Webseite festzulegen, verwendet CSS mehrere Positionierungsmodi, die für jedes Element unterschiedlich sein können, d. h. es ist möglich, verschiedene Positionierungskriterien auf derselben Website zu mischen.

• position:static; Es handelt sich um die Standardpositionierung (es ist nicht erforderlich, sie anzugeben, wenn sie nicht zuvor geändert wurde). Diese Art der Positionierung folgt dem „natürlichen“ Fluss der Seite: ein Element nach dem anderen, beginnend von links, ansteigend, solange Es gibt Platz, rechts und von oben nach unten. Es verwendet keine horizontalen oder vertikalen Koordinaten, um seinen Standort festzulegen, sondern folgt der Position, die der Reihenfolge des Objekts entspricht.

• position:fixed; Es wird verwendet, um ein Objekt an einer festen Position im Browserfenster zu platzieren (z. B. ein Menü). Die Position des Elements wird horizontal mit angegeben left o right um den Abstand links bzw. rechts zu bestimmen und mit top o bottom zur Trennung oberhalb oder unterhalb des Randes des Browserfensters (Viewport).

  Durch diese und andere Positionierungsarten können sich Objekte überlappen. Zuerst gezeichnete Objekte (zuvor im Code definiert). HTML) können durch diejenigen abgedeckt werden, die später gezeichnet werden (die später in den Code aufgenommen werden). HTML). Um die normale Reihenfolge zu ändern, können Sie die Eigenschaft verwenden z-index, die Objekte mit dem höchsten Wert in z-index Sie decken diejenigen mit geringerem Wert ab.

• position:relative; Verschiebt das Element aus seiner „normalen“ Position, wie in den Eigenschaften angegeben left o right horizontal und top o bottom vertikal.

• position:absolute; Platziert das Element an einer festen Position in Bezug auf das Objekt, das es enthält. Sein Standort wird wie in den vorherigen Fällen mit ausgedrückt left,right, top y bottom

  Der Name dieser Art der Positionierung ist zunächst verwirrend, da die Position in Bezug auf das Objekt festgelegt wird, das hierarchisch höher ist als das Objekt, das die Eigenschaft verwendet, und es ist fraglich, ob es absolut ist.

  Es ist auch wichtig, sich an das Element zu erinnern, das die Objekte enthält <div> das wir auf der ersten Hierarchieebene verwenden, ist <body>, also, wenn die <div> was benutzt du position:absolute; nicht in einer anderen enthalten ist, ist seine Positionierung „absolut“ in Bezug auf die Webseite.

Eigenschaften für bestimmte Medien und Merkmale (Medienabfragen)

CSS ermöglicht es Ihnen, im selben Stylesheet unterschiedliche Erscheinungsbilder für verschiedene Medien oder Träger zu definieren, abhängig von der Art des verwendeten Geräts (z. B. einem Bildschirm oder einem Drucker), seinen Abmessungen, seiner Ausrichtung (vertikal oder quer) oder seiner Auflösung. Dies dient dazu, die gleiche Webseite kontextgerecht darstellen zu können.

Um auf die Medien zu verweisen, verwenden Sie @media in ähnlicher Weise, wie es bereits für Schriftarten mit erklärt wurde @font-face, eingeschlossen in geschweiften Klammern ({ y }) die Definitionen der verschiedenen Elemente: Etiketten HTML, Klassen, Bezeichner...

Die verfügbaren Medientypen in CSS3 sind: all, um sich auf jedes Medium (alle) zu beziehen, screen für jede Art von Bildschirm (ältere Versionen von CSS Sie unterschieden zwischen TV- und Computermonitoren) print für Druckerausgabe und speech für Audio-Webreader, die Informationen mit Sprachsynthesizern interpretieren.

Im obigen Beispiel haben Elemente der Textklasse einen schwarzen Hintergrund und weißen Text auf dem Bildschirm, werden jedoch mit weißem Hintergrund und schwarzem Text gedruckt.

Medien können Bedingungen auferlegt werden, um unterschiedliche Eigenschaftensätze zu definieren, beispielsweise basierend auf der verfügbaren Auflösung oder dem Darstellungsverhältnis. Diese Bedingungen und die Mittel selbst können mit logischen Operationen zusammengesetzt werden and, not y only von Ihnen zu verlangen, dass Sie mehreren nachkommen, dass Sie nicht nachkommen oder nur wenn Sie nachkommen.

Unter den verfügbaren Konditionen finden wir sie besonders interessant max-width (maximale Fensterbreite), max-height (maximale Fensterhöhe), min-width (minimale Fensterbreite), min-height (minimale Fensterhöhe), orientation (die Orientierung, die sein kann landscape, Landschaft, oder portrait, vertikal), max-resolution (maximale Auflösung in dpi, Punkte pro Zoll oder Zoll dpcm, Punkte pro Zentimeter) und min-resolution (Mindestauflösung, auch in dpi o dpcm).

Im vorherigen Beispiel definieren wir zunächst eine Hintergrundfarbe, sodass die Elemente der Klasse main_block in allen Medien die Hintergrundfarbe #CCCCCC haben. Wenn es auf einem Bildschirm angezeigt wird und das Fenster mindestens 320 Pixel breit ist, wird der linke und rechte Rand automatisch eingestellt (zentriert den Block) und die Elementbreite beträgt 300 Pixel. Wenn die Bildschirmauflösung 640 Pixel beträgt, beträgt die Blockbreite 620 Pixel. Da die zweite Mediendefinition keine Randinformationen enthält und Geräte, die die zweite Bedingung erfüllen, auch die erste erfüllen, erfolgt der horizontale Rand weiterhin automatisch.

Abschließend wird im Beispiel die Hintergrundfarbe so geändert, dass sie im Ausdruck weiß ist.

Die übliche Art und Weise, Stile für verschiedene Medien zu definieren, besteht in der Regel darin, mit den üblichen zu beginnen, in der Regel Farben und Schriftarten, gefolgt von den restriktivsten Geometrien (den Maßen von Geräten mit der niedrigsten Pixelanzahl), normalerweise für Smartphones und Tablets, wo zusätzlich Es ist wichtig zu wissen, ob sie vertikal oder horizontal verwendet werden orientation und sicherlich auch seine Auflösung mit min-resolution. Dann werden die unterschiedlichen Größen für größere Bildschirme angegeben und es endet meist mit Druck- und Sprachmedien, die im Beispiel der IoT-Grafiken weggelassen wurden.

Verwenden @media Durch die Festlegung von Bedingungen wie Abmessungen, Auflösung und Ausrichtung kann der Designer eine einzelne Webseite erstellen, die mit unterschiedlichen Stilen für jedes Gerät am besten aussieht. Dieses Verhalten wird üblicherweise als responsives Design bezeichnet. anpassungsfähiges Design, in einer sehr freien Übersetzung.

CSS für SVG-Grafikcontainer

Mit dem bisher Erklärten ist es nun möglich, die Stile zu definieren, die die SVG-Grafik-HTML-Container mit dem der Zustand der mit dem IoT verbundenen Sensoren dargestellt werden kann. Im folgenden Code ist der Vorschlag einschließlich der Verteilung in Spalten kommentiert, die einer größeren Anzahl von Diagrammen entspricht als diejenigen, die der Vorschlag der Artikelserie verwendet, so dass er in anderen Fällen wiederverwendet werden kann.

Unten können Sie sehen, wie diese Stile aussehen würden. HTML-Code aus dem vorgeschlagenen Container für SVG-Grafiken aus dem vorherigen Artikel.

Der nächste Artikel dieser Reihe erklärt es wie man mit SVG zeichnet Datendiagramme zum Status von Sensoren, die mit dem Internet der Dinge (IoT) verbunden sind.