Definujte pomocou CSS vzhľad webovej senzorovej grafiky v IoT
V predchádzajúcom článku zo série o ako vytvoriť stavové grafy senzorov pripojených k internetu vecí IoT vysvetľuje cestu použiť webovú stránku vyvinutú v HTML ako štruktúru pre grafiku. Prvky webovej stránky, ktoré boli pomocou objektov zredukované na minimum <div>
, priamo nedefinovali jeho vzhľad, namiesto toho sa odvolávali na informácie o vzhľade do šablóny štýlov CSS, čo bude vysvetlené v tejto časti seriálu.
V riešení, ktoré navrhujem urobiť grafy senzorov pripojených k IoT, je použitý dokument CSS ktorý sa načíta z dokumentu HTML. Ak kód HTML budú generované z aplikácie na serveri, napríklad v PHP, bolo by veľmi jednoduché zahrnúť ho ako súčasť kódu, ktorý definuje webovú stránku, namiesto toho, aby sa z nej načítala, čo by sa dalo trochu optimalizovať uložením hovoru. Bez ohľadu na to, ktorá možnosť je zvolená, zahŕňa najpohodlnejšiu metódu upraviť kód CSS v samostatnom dokumente, aby ste ho mohli pohodlnejšie spravovať a mohli ho znova použiť. V príklade vyvinutom v návode k tejto sérii článkov dostal názov estilo.css
.
Rovnakym sposobom, Pri riešení zložitých projektov bude vhodné použiť niekoľko samostatných štýlov v rôznych dokumentoch, aby bolo možné opätovne použiť špecifické funkcie bez toho, aby ste ich museli zakaždým načítať, a aby sa kód dal ľahšie upravovať jeho distribúciou do rôznych dokumentov podľa zodpovedajúcej logickej štruktúry.
Štýly CSS Snažia sa popísať všetky extrémy správania a vzhľadu webovej stránky z viacerých typov prístupov, všetky súčasne platné, pričom sa snažia v maximálnej možnej miere rešpektovať kompatibilitu so špecifikáciami predchádzajúcej verzie. To znamená, že existuje veľa možných riešení, ktoré riešia rovnaké potreby. ako aj vysoký počet dostupných zdrojov (vlastností CSS). Vzhľadom na didaktický prístup článku a aby nedošlo k zmätku nových používateľov v CSS, len vlastnosti a štruktúry potrebné pre konečný cieľ, ktorý má graficky znázorňovať dáta zo senzorov pripojených k internetu vecí. Zároveň existuje aj a malý úvod do CSS, kaskádové štýly.
Formátovanie vlastností CSS
El základný formát Pozostáva z názvu vlastnosti, dvojbodky, hodnoty vlastnosti a bodkočiarky. nombre:valor;
CSS umožňuje použiť rôzne merné jednotky v tom istom dokumente vrátane tých, ktoré súvisia so štruktúrou (meranie toho, čo prvok obsahuje) ako percentá, relatívne k zariadeniu, na ktorom sú znázornené, napríklad pixel, alebo absolútne, napríklad centimetre. Jednotky sú vyjadrené za hodnotou podľa nasledujúceho kódovania skratkou.
Kód | jednotka |
% | percento kontajnera |
ch | vzhľadom na šírku čísla nula |
cm | centimetre |
em | vzhľadom na základný typ nádoby |
ex | vzhľadom na výšku písmena x |
in | sú palce |
mm | mm |
pc | picas (typografické meranie) |
pt | body (typografické) |
px | pixely |
rem | vzhľadom na základný typ dokumentu |
vh | vo vzťahu k 1 % výšky očí (mobilná obrazovka) |
vmax | v pomere k 1 % najväčšieho rozmeru zobrazenia (obrazovka mobilu) |
vmin | vo vzťahu k 1 % najmenšieho rozmeru zobrazenia (obrazovka mobilu) |
vw | vzhľadom na 1 % šírky zobrazenia (obrazovka mobilu) |
Pre aplikáciu, ktorú budeme robiť, je dôležité zvážiť aspoň tri slohové jednotky. Percento na meranie vo vzťahu k veľkosti obalu položky, pixel na meranie podľa rozlíšenia obrazovky a milimetre (v skutočnosti akékoľvek absolútne meranie) na vytváranie tlačených správ.
Niektoré sú komplexné vlastnosti, alebo kompozit, ktoré závisia od niekoľkých hodnôt (ako je farba, veľkosť, štýl...), na označenie hodnoty sú v CSS dve možnosti: napísať v príslušnom poradí všetky hodnoty oddelené medzerami alebo použite súčet jednoduchých vlastností ekvivalentných komplexu. Napríklad všetky štyri okraje objektu môžu byť špecifikované v jednej vlastnosti margin
alebo sa dá nastaviť pomocou vlastností margin-top
, margin-right
, margin-bottom
y margin-left
. Mimochodom, toto poradie (v smere hodinových ručičiek) je poradie, za ktorým nasledujú popisy hodnôt, ktoré „obklopujú“ prvok, ako je vnútorný (vypchávka) alebo vonkajší okraj, okraj...
S tým, čo bolo doteraz vysvetlené, môžeme teraz vidieť niekoľko príkladov vlastností
1 2 3 4 | margin:10px 20px 0 10px; width:500px; height:100%; color:#FF0099; |
V predchádzajúcom príklade Farba je definovaná pomocou kódu 6 hexadecimálnych číslic, ktoré predstavujú v pároch hodnotu červenej, zelenej a modrej zložky. Keď sa stane, ako v príklade, že sa dve číslice rovnajú, možno to skrátiť ako #F09
(čo mimochodom zodpovedá tzv. „web safe colors“). V konečnom návrhu sa vyhnem používaniu týchto skratiek, aby som zjednotil kritériá a aby bol čitateľnejší. Skrátiť môžete aj hodnoty komplexných vlastností, ako napr margin
v príklade, keď sa opakujú všetky hodnoty alebo opačné páry. V rovnakých riadkoch ukladania textu je tiež možné vynechať jednotku pri zadávaní vlastnosti, keď je hodnota nula, pretože v tomto prípade je irelevantná.
Niektoré hodnoty, okrem toho, že sa dajú vyjadriť číselne, majú aj názov čo robí kód čitateľnejším a umožňuje vám ho lepšie zapamätať. Napríklad namiesto hexadecimálneho číselného kódu cieľa, #FFFFFF
(o #FFF
), dá sa napísať white
s rovnakým výsledkom. Týmto spôsobom čierna farba, #000000
(o #000
), možno nahradiť výrazom black
.
tiež tam sú hodnoty vyjadrené špeciálnym kódom, názvom. Napríklad na označenie, že bočný okraj je nastavený automaticky prehliadačom (zvyčajne bude zodpovedať funkcii stredu), použije sa špeciálna hodnota auto
, ktorý nemá číselnú zhodu so žiadnou hodnotou.
na vyjadruje špeciálny spôsob použitia radu zložených (komplexných) hodnôt vlastnosti CSS Môžete si vybrať formáty so syntaxou podobnou syntaxi funkcií. Napríklad, ak chcete farbu vyjadriť ako tri hodnoty jej červenej, zelenej a modrej zložky ( RGB model) by bolo napísané color: rgb(128, 255, 64);
. V rámci tohto štýlu vyjadrovania je možné použiť aj jednotky; Vo vyššie uvedenom príklade sú farebné zložky desatinnou hodnotou od 0 do 255, ale môže byť jednoduchšie vyjadriť to ako percento z celkového počtu každej farebnej zložky, v takom prípade by to mohlo byť napísané aj ako color: rgb(50%, 100%, 25%);
.
Výpočet hodnôt v CSS
V najnovších verziách CSS je možné urobiť jednoduché matematické operácie na výpočet hodnôt. Ak to chcete urobiť, použite calc
a operácia, ktorá sa má vykonať, je vyjadrená v zátvorkách. Môžete uviesť jednotky, zátvorky a jednoduché operátory, ako napríklad súčet (+
), odčítanie (-
), násobenie (*
) a rozdelenie (/
). Výraz by bol typu width:calc((90%-20px)/2));
.
Premenné môžu byť použité v matematických operáciách v CSS odvolávajúc sa pri výpočte jednej nehnuteľnosti na hodnotu inej s var
. Aby bolo možné použiť premennú bez toho, aby ste museli odkazovať na skutočnú vlastnosť štýlu, je dovolené citovať aj vlastnosť, ktorá neexistuje. CSS odporúča formát --nombre-variable
(dva spojovníky pred názvom vynájdenej vlastnosti). Týmto spôsobom definovať výšku prvku ako polovicu jeho šírky výrazu CSS ako height:calc(var(width)/2);
a na definovanie novej premennej "hrúbka" (ktorú by mohli použiť iné vlastnosti) by ste napísali napr. --grosor:4px;
aby som na to mohol neskôr odkazovať ako margin-top:calc(var(--grosor)*4);
Vlastnosti CSS závislé od prehliadača
CSS Ide o špecifikáciu štandardizovanú konzorciom W3C (World Wide Web Consortium), ale veľa vlastnosti alebo štýly správania sa dostanú do prehliadačov skôr, ako budú súčasťou špecifikácie verzie.
takže kód CSS funguje s aktuálnymi funkciami prehliadača, ale nestrácajte kompatibilitu s novými funkciami, používa sa predpona. Táto predpona závisí od renderovací engine ktorý používa webový prehliadač, na ktorý chcete odkazovať (pre ktorý je definovaný štýl).
Predpona -webkit
Funguje pre prehliadače založené na WebKit ako safari o chróm. Predpona -moz
Používa sa pre prehliadače založené na renderovací engine de Mozillav súčasnosti JaštericaAko Firefox a jeho deriváty. Odkazovať na EdgeHTML, renderovací engine prehliadač hrana od spoločnosti Microsoft (predtým trojzubec), používa sa predpona -ms
. Prípad prehliadača Opera je trochu zvláštny, keďže začal používať svoje vlastné renderovací engine, s odkazom na -o
, ale momentálne pracuje s WebKit, ktorý je vyjadrený ako -webkit
.
Ak chcete použiť vlastnosť odkazujúcu na prehliadač, napíšte jej názov s predponou a oddeľte ho pomlčkou ako v -o-border-radius:10px;
, ktorý by slúžil na nastavenie zaobleného okraja (zaobleného rohu) v starších verziách prehliadača Opera.
komentáre
Na objasnenie kódu CSS Môžete použiť komentáre, vďaka ktorým bude čitateľnejší, aj keď s nevýhodou zväčšenia jeho veľkosti. Syntax komentárov v CSS Je to ako viacriadkové komentáre C + + čo už určite poznáte: začína sa v /*
a končiace na */
ako v C + +, môže zaberať niekoľko riadkov.
Selektory
Vymedzenie pojmu vlastnosti sú priradené objektom v dokumente HTML ich zoskupenie do selektorov a ich uzavretím do zátvoriek. Selektor môže odkazovať na prvok jazyka HTML (štítok), ako div
, trieda (priradená s class
en HTML) identifikátor (priradený s id
en HTML) alebo všetky („univerzálny volič“) reprezentované hviezdičkou (*
). Nasledujúci príklad zobrazuje selektor každého typu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | * /* El asterisco es el selector universal */ { margin:2px 6px 4px 20px; } div /* div es una etiqueta HTML */ { width:500px; height:200px; } .grafico /* «grafico» es el nombre de una clase que se usará en HTML con class=”grafico” */ { color:#A0B0C0; } #superior /* «superior» es un identificador que se usará en HTML con id=”superior” */ { width:100%; color:#CCCCCC; } |
Štítky z HTML sú vyjadrené v definícii štýlu svojim názvom, triedy sú označené bodkou pred názvom (.
) a znak libry (#
) pre identifikátory.
Časť veľkej sily CSS sídli v možnosť zoskupenia selektorov pri definovaní ich vlastností. Existuje niekoľko spôsobov, ako zoskupiť selektory. Tým, že ich zoskupíte, oddelením čiarkami je vyjadrené, že každý z uvedených selektorov má tieto vlastnosti.
1 2 3 4 5 6 7 8 9 10 11 | .consumo, .humedad, .temperatura { color:#FF00AA; width:100%; height:100%; } .temperatura { height:50%; } |
Predchádzajúci príklad naznačuje, že triedy spotreby, vlhkosti a teploty zdieľajú farbu, šírku a výšku. V tomto kóde je tiež zavedený nový koncept: vlastnosti môžu byť predefinované av takom prípade prevládajú tie najnovšie opísané. Takto by prvky teplotnej triedy mali nakoniec výšku 50 % objektu, ktorý ich obsahuje.
Ak zoskupené selektory nie sú oddelené čiarkami, podmienka kladená na vlastnosti je kumulatívna, to znamená, že prvok musí spĺňať všetky selektory, aby získal vzhľad alebo správanie, ktoré definujú. Ak selektory odkazujú na značky HTML Poradie, v ktorom sa objavujú, musí byť klesajúce na úrovni inklúzie: najprv najvyššia hierarchická úroveň a posledná najnižšia.
1 2 3 4 5 6 7 8 9 10 11 | div.temperatura { color:#FF00AA; width:100%; height:100%; } .temperatura .consumo { height:50%; } |
V predchádzajúcom príklade sú prvky definované div
ktoré sú tiež teplotnej triedy a prvky, ktoré majú teplotnú triedu aj triedu spotreby (obe súčasne) ako v class="temperatura consumo"
. Prvky <div>
Kódu HTML s class="temperatura"
mali by vysoko 100%
CSS vlastnosti na definovanie textu
Je možné rozlišovať medzi tromi typmi vlastností, ktoré ovplyvňujú vzhľad textu: (1) tie, ktoré určujú typ písma, ktorým je text prezentovaný, (2) tie, ktoré určujú vzhľad literálu (obsah textu) a (3) generické, teda také, ktoré ovplyvňujú vzhľad textu aj vzhľad ostatných komponentov. Vo všeobecnosti platí, že to, čo bolo povedané na vysvetlenie vlastností poslednej skupiny, bude platiť aj pre rovnaké vlastnosti aplikované na iné prvky.
typografia (font)
-
font-family
označuje názov písma použitého pre prvok. Môžete napísať jeden názov alebo zoznam, v poradí podľa preferencie a oddelením názvov čiarkami, fontov, ktoré sa budú alternatívne používať, ak požadovaný neexistuje. V rovnakom duchu je možné použiť všeobecné písma s názvamimonospace
,serif
,sans-serif
,cursive
,fantasy
. Z týchto všeobecných písiem je najdôležitejšie (na prezentáciu dostupných údajov) prvé, ktoré, ako už názov napovedá, bude používať písmo s pevnými medzerami dostupnými v systéme a prednastavené prehliadačom. Druhy,serif
, použije predvolenú dostupnú serif (dokončenie alebo grácia). Bez aukcie, ak je uvedené tretie,sans-serif
. Napodobňovanie ručne kresleného písania scursive
(spôsob nazývania, ktorý by sa dal jednoznačne vylepšiť) a dekoratívna typografia systému sfantasy
, posledný z piatich.Čo sa týka kódu CSS Medzery majú špeciálny význam ako oddeľovač, ak sa názov rodiny písiem skladá z niekoľkých slov oddelených medzerami, píše sa do úvodzoviek, aby nedošlo k zámene.
1font-family: DejaVu, Helvetica, Arial, “a palo seco”, sans-serif;Webové prehliadače sú schopné používať lokálne fonty (tie nainštalované v systéme, na ktorom fungujú), ako aj iné, ktoré sú špecificky načítané, dokonca sa prekrývajú s tými, ktoré sú nainštalované lokálne. Ak chcete načítať písmo, použite
@font-face
s uvedením jeho názvu, miesta sťahovania jeho definície a prípadne popisu jeho formátu.12345678910111213141516@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;}V prvej z dvoch definícií v predchádzajúcom príklade sa načíta písmeno dokumentu Sircuito-Expanded-Light.eot ktorý sa nachádza v priečinku EOT v hlavnom (koreňovom) priečinku a je priradený ako priezvisko CircuitExpandedLight. Mimochodom, páči sa vám toto písmo? Je to zadarmo, môžete stiahnite si zadarmo písmo Sircuito, ktoré som navrhol pre obrázok GranaBot.
Ako je možné vidieť v príklade, vlastnosť url, ktorá zodpovedá jednotný vyhľadávač zdrojov, umožňuje určiť umiestnenie dokumentu s písmom, ktoré sa sťahuje. Lomka sa používa na oddelenie názvov rôznych priečinkov od cesty k písmu, počnúc tým, ktorý obsahuje dokument, z ktorého sa volá, alebo od koreňového adresára, ak URL Začnite s barom.
Druhý príklad používa niekoľko alternatívnych dokumentov, takže rovnaká definícia funguje pre niekoľko prehliadačov (každý z nich načíta typ, ktorý je schopný interpretovať)
Posledný riadok definície obsahuje vlastnosť
font-smoothing
na zmäkčenie písmena (aplikujte a vyhladzovanie). Keďže nejde o štandardnú vlastnosť, používa sa predpona-webkit
. -
font-size
slúži na označenie veľkosti písmena ako vfont-size:12px;
-
font-weight
Nastavuje hrúbku písma. Môže byť vyjadrená ako číselná hodnota, zvyčajne násobkom 100 medzi 100 a 900, podľa obvyklých typografických váh, alebo častejšie s názvom:normal
pre hrúbku základne,bold
pre odvážnych,bolder
pre verziu, ktorá sa zvyčajne nazýva čierna,light
za pokutu (bežne nazývanú svetlo) alighter
pre najtenšie (niekedy nazývané tenké).Číselná hodnota normálnej verzie písma je 400 (bez jednotiek) a 700 pre tučnú verziu.
V predvolenom nastavení, ak nie je uvedená iná hodnota, zodpovedá vzhľad písma
normal
alebo 400, takže ak nebol zmenený vo generickom prvku alebo v kontajneri, z ktorého sa dedí, nie je potrebné uvádzaťfont-weight
s hodnotounormal
. -
font-stretch
Používa sa na označenie šírky písmena, pokiaľ je k dispozícii v príslušnej skupine. Možné hodnoty, ktoré môže mať nehnuteľnosť, zoradené od najužšej po najširšiu, sú:ultra-condensed
,extra-condensed
,condensed
,semi-condensed
,normal
,semi-expanded
,expanded
,extra-expanded
yultra-expanded
. Pri rovnakých kritériách, aké boli použité v predchádzajúcej vlastnosti, je predvolená šírkanormal
a nie je potrebné ho výslovne uvádzať, pokiaľ nebol zmenený vo vyššom hierarchickom poradí, ako je ten, ktorý je definovaný. -
s
font-style
Môžete označiť, či je text nakreslený šikmým alebo šikmým písmenom, čo ovplyvňuje jeho vzhľad, alebo kurzívou, ktorá vyjadruje osobitný význam (napríklad cudzie slová), alebo okrúhlym písmenom, teda ani predchádzajúcim alebo normálne. hodnotaoblique
plní prvú funkciu, vzhľad a hodnotuitalic
druhy. Skutočnosť, že vzhľad oboch je často podobný alebo dokonca rovnaký, znamená, že použitie (význam) je niekedy zamieňané, takže stojí za to venovať pozornosť. Rovnako ako u iných nehnuteľností,normal
Používa sa na deaktiváciu predchádzajúcich hodnôt. -
text-decoration
slúži na podčiarknutie (s hodnotouunderline
), prečiarknuté (s hodnotouoverline
), prečiarknite (s hodnotouline-through
) alebo blikať (s hodnotoublink
) text, ktorý táto vlastnosť ovplyvňuje. -
Na dokončenie série typografického aspektu, aj keď pre našu aplikáciu to nie je veľmi dôležité,
font-variant
, vám umožňuje podať žiadosť malé čiapky (malé veľké písmená) k textom.
Text
-
text-align
informuje prehliadač, ako má byť blok textu zarovnaný. Možné zarovnania sú vľavo (čo sa štandardne zvažuje) s kódomleft
, stred s hodnotoucenter
, správne používaťright
a odôvodnené na oboch koncoch sjustify
. -
line-height
nastavuje oddelenie medzi riadkami textu. V tomto prípade, ak sa použijú percentá, hodnota 100 % zodpovedá výške textu namiesto rozmeru kontajnera. Najpoužívanejšia miera v pomere k textu zodpovedá 120 %. Čiara 100 % by znamenala, že spodná časť jednej čiary sa dotýka hornej časti ďalšej. Hoci typografický dizajn zvyčajne zahŕňa určitý priestor, je bežné ponechať medzi riadkami trochu väčší priestor.Na vyjadrenie oddelenia medzi riadkami je tiež možné uviesť koeficient (bezjednotkovú hodnotu), pomocou ktorého sa vypočíta výška riadku na základe výšky textového poľa.
-
letter-spacing
je hodnota medzery medzi písmenami slov, ktorá je v typografii známa ako vyrovnanie párov o sledovanie. -
word-spacing
predstavuje mieru medzier medzi slovami. -
white-space
nastavuje správanie bielych miest v texte. Keď sa použije hodnotanormal
, ktorý sa používa štandardne, spája niekoľko prázdnych miest v kóde HTML v jednej z prezentácií na webovej stránke (zobrazenej prehliadačom) a berie biele miesta ako odkaz na prerušenie riadku, ak v bloku nie je žiadne miesto.Hodnota
nowrap
Tiež spája opakujúce sa prázdne miesta do jedného, ale nerozdeľuje riadky textu v medzier, aj keď sa riadok nezmestí do kontajnera, v prípade potreby prepĺňa priestor a v prípade potreby píše mimo. Na jednoznačné rozdelenie čiar môžete použiť štítok<br>
de HTML.použitím
pre
Ani prázdne miesta nie sú zjednotené ich spojením do jednej, ani riadky nie sú rozdelené pomocou medzier ako referencie.pre-line
spojte opakované polotovary a v prípade potreby prerušte riadky pomocou polotovarov ako referenciu.pre-wrap
zachováva opakované medzery a v prípade potreby láme riadky pomocou medzery ako referencie.
Farba
En CSS farba môže byť vyjadrená podľa RGB farebný model alebo podľa HSL farebný model a v oboch prípadoch môžu byť zahrnuté informácie o transparentnosti, hodnota štvrtého kanála, ktorý sa zvyčajne volá alfa kanál o alfa zloženie, z čoho vznikajú modely RGBA a HSLA.
Na vyjadrenie farby vo formáte RGB pri použití hexadecimálneho zápisu sa používa syntax #RRGGBB
, pričom RR je hodnota červenej zložky (v princípe s použitím dvoch hexadecimálnych číslic), GG je hodnota zelenej zložky a BB je hodnota modrej zložky. Ako už bolo povedané, ak majú dve číslice každej zložky rovnakú hodnotu, môže byť vyjadrená ako #RGB
obmedzenie počtu dostupných farieb na takzvané webové bezpečné
Okrem tohto spôsobu znázornenia farby, najklasickejšieho a najpoužívanejšieho, sa dá vyjadriť ako rgb(R,G,B)
, hsl(HSL)
, rgba(R,G,B,A)
y hsla(HSLA)
uviesť ho vo formáte RGB, HSL a ich príslušné formy s označením transparentnosti (alfa kanál)
Ak sa pridaním prípony jednotky nevyžaduje inak, RGB model používa desatinné hodnoty od 0 do 255, pre tri zložky je to hodnota alfa zložka je koeficient (desatinné od nuly do jedna) a prvá hodnota HSL farebný model, odtieň, je desatinná hodnota v rozsahu od 0 do 360 (bez jednotiek) predstavujúca uhol. Hodnoty saturácie a svietivosti HSL model Zvyčajne sú vyjadrené v percentách.
Ako už bolo povedané, aj keď jeho použitie nie je príliš frekventované, farby môžu byť označené ich názvom vo formáte color:black;
namiesto color:#000000;
. Prvý formát je čitateľnejší, ale obmedzuje sa na stručnú tabuľku hodnôt, ktorá sa tiež ťažšie upravuje číselne z aplikácie napísanej v jazyku JavaScript.
Pre náš návrh grafického znázornenia dát zo senzorov pripojených k IoT nám budú stačiť tri vlastnosti súvisiace s farbou. Budú slúžiť na označenie názvu textu, ktorý je teraz vysvetlený, ako aj na označenie akéhokoľvek komponentu, ktorý ho podporuje.
-
color
označuje farbu prvku HTML a toho, čo obsahuje (ktoré to zdedí), pokiaľ nie je výslovne zmenené individuálnym priradením iných farieb. -
background-color
Používa sa na definovanie farby pozadia prvku HTML. Okrem označenia farby ako hodnoty RGB o HSL môžete použiť špeciálnu hodnotutransparent
aby objekt nemal žiadnu farbu pozadia a bolo možné vidieť, čo sa nachádza za ním, to znamená, že nezakrýva prvky, na ktorých je nakreslený. -
opacity
umožňuje nastaviť nepriehľadnosť (nepriamo, priehľadnosť) prvku a celého jeho obsahu (nezamieňať s priehľadnosťou pozadia). Ak je priehľadnosť priradená prvkom obsiahnutým v iných, ktoré sú samy o sebe priehľadné, zvýši sa, nebude fungovať samostatne. Objekt obsiahnutý v priehľadnom objekte nemôžete urobiť viac nepriehľadným. Hodnotaopacity
Vyjadruje sa ako koeficientopacity:0.5;
na označenie 50% nepriehľadnosti.Staršie verzie prehliadača od Microsoftu túto vlastnosť nepoužívali, ale mali ju
filter
(filter), ktorý by okrem iných hodnôt mohol podporovať alfa (pre alfa kanál), ktorému možno priradiť percento nepriehľadnostiopacity
podľa formátu:1filter:alpha(opacity=50); /* Opacidad del 50% en una versión 8.0 o anterior de Microsoft Internet Explorer */
Opatrenia
En CSS, meranie prvkov <div>
, ktorý sme zvolili na zostavenie grafického kontajnera, je nastavený width
(šírka) a height
(alt).
medzi obsahom <div>
a na jej obvode sa nachádza výplňová plocha, ktorá je určená hodnotou padding
. Po obvode objektu je hrana, ktorej rozmer je špecifikovaný vlastnosťou border
. Oddelenie exteriéru objektu <div>
z ostatných okolitých objektov je priestor, ktorého meranie je určené margin
.
Za normálnych podmienok je to meranie priestoru, ktorý objekt využíva <div>
možno vypočítať ako súčet jeho šírky alebo výšky plus vypchávky (padding
) plus orámovanie (border
) plus marža (margin
). Keď je príslušným meraním stanovený užitočný vnútorný priestor objektu <div>
, toto zloženie je veľmi praktické, ale ak je známe, je celkové dostupné meranie dá sa toto správanie zmeniť, predvolene nastavené tak, aby celková šírka a výška bola taká, aká je označená width
(šírka) a height
(výška) tak, že sa od nej namiesto pridania odpočítajú rozmery výplne, okraja a okraja. Ak chcete použiť tento režim, priraďte vlastnosť box-sizing
hodnota border-box
(predvolené je content-box
)
Nasledujúci diagram graficky zobrazuje hodnoty vyplývajúce z width
(šírka) a height
(vysoká), ak sa používa box-sizing:border-box;
(celkom) respbox-sizing:content-box;
(vnútri)
Hodnoty meraní sú vyjadrené v jednotkách, ktoré už boli vysvetlené. Pokiaľ ide o vlastnosti definované niekoľkými hodnotami, čísla vyjadrené rôznymi typmi priemerov sa môžu miešať. Okrem toho existujú niektoré špeciálne hodnoty, ktoré sú relevantné pre použitie, ktoré použijeme pri tejto implementácii senzorových grafov v IoT. Konkrétne môžeme použiť hodnotu auto
na pozemku margin
ako zdroj na vycentrovanie objektov za určitých okolností.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .caja_chica { box-sizing:border-box; width:400px; height:100px; padding:5px 10px 15px 20px; border:2px solid #000000; margin:10px 10px 10px 10px; } .caja_grande { width:400px; height:100px; padding:5px 10px 15px 20px; border:2px dashed #FF0000; margin:10px 10px 10px 10px; } |
Vo vyššie uvedenom príklade je pre triedu „small_box“ definovaný okraj s hrúbkou 2 pixely nakreslený čiernym ťahom (#000000
) nepretržité (solid
). V triede „big_box“ je riadok použitý na ohraničenie prerušovaný (dashed
) a červená farba (#FF0000
). Na vyjadrenie týchto hodnôt oddelene môžeme použiť border-width
pre hrúbku, border-style
pre mŕtvicu a border-color
pre farbu. Tieto vlastnosti hrán sú zase kompozitné a sú tvorené hornými, pravým, spodným a ľavým prvkom v smere hodinových ručičiek, ako je vysvetlené vyššie.
Dve triedy, ktoré boli definované, majú rovnaké rozmery, ale prvá z nich je odvtedy pri použití hodnoty menšia border-box
za majetok box-sizing
, výplň, orámovanie a okraj sú nakreslené vo vnútri objektu namiesto okolo obsahu, ako je to predvolené. V triede "big_box" to nie je uvedené, takže hodnota sa berie štandardne content-box
čo spôsobí, že výplň, okraj a okraj sa zväčšia na veľkosť označenú symbolom width
y height
.
Hodnota okraja pre triedy vo vyššie uvedenom príklade je 10 pixelov hore, vpravo, dole a vľavo, takže by sa dala vyjadriť ako jedna hodnota margin:10px;
. Je veľmi zaujímavé poznať túto alternatívu, aby sme porozumeli kódu vyvinutému tretími stranami, hoci v tomto návrhu implementácie, aby bola čitateľnejšia, sa odporúča uvádzať, opakovať, hodnoty.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | .laconica /* Clase lacónica */ { background-color:#00F; /* Equivale a background-color:#0000FF; */ padding:10px 5px; /* Equivale a padding:10px 5px 10px 5px; */ margin:1%; /* Equivale a margin:1% 1%; que equivale a margin:1% 1% 1% 1%; */ border:1px solid #000; /* Lo anterior puede expresarse de forma menos compacta como: border-width:1px; border-style:solid; border-color:#000; */ } .explicita { background-color:#0000FF; padding:10px 5px 10px 5px; margin:1% 1% 1% 1%; border-width:1px 1px 1px 1px; border-style:solid solid solid solid; border-color:#000000 #000000 #000000 #000000; } .locuaz { /* Color de fondo */ background-color:rgb(0,0,255); /* Relleno, dimensiones */ padding-top:10px; padding-right:5px; padding-bottom:10px; padding-left:5px; /* Margen, dimensiones */ margin-top:1%; margin-right:1%; margin-bottom:1%; margin-left:1%; /* Borde, grosor */ border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; /* Borde, estilo */ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; /* Borde, color */ border-top-color:#000000; border-right-color:#000000; border-bottom-color:#000000; border-left-color:#000000; } |
Tri triedy v predchádzajúcom príklade poskytujú rovnaký výsledok, pričom definícia takzvaného „lakonického“ je kompaktnejšia a menej ako definícia takzvaného „loquacious“, čo viac než len na zvýšenie jasnosti čítania je normálna forma používa sa na úpravu niektorého čiastočného konkrétneho aspektu vlastnosti, pričom sa znova používajú ostatné hodnoty dedením (poskytuje ich kontajner alebo ich poskytuje jedna z tried priradených prvku). Ak by záťaž, ktorú na server kladie dodatočný text tohto spôsobu definovania vlastností a iných okolností, ktoré by boli relevantné, aby bol kód čitateľnejší, ako sú komentáre, zväčšiť veľkosť a tým aj návštevnosť, bolo by možné spracovať ho (napríklad) z PHP ako súčasť stratégie generovania kódu z tohto jazyka.
Rozmery krabicového modelu ovplyvňujú najmä prvky <div>
ale je možné toto správanie vynútiť iným prvkom s vlastnosťou display
a hodnota block
. Ak chcete, aby prvok plynul ako text na riadku, použite display:inline;
a obe správanie, merania a prietok, možno kombinovať s display:inline-block;
Hodnota none
na pozemku display
, používaný ako display:none;
, tiež umožňuje skryť objekty, ktoré poslúžia na ich „zapnutie“ a „vypnutie“. JavaScript.
Ak rozmery prvku nie sú špecifikované, sú potrebné akékoľvek rozmery, aby sa jeho obsah zmestil (v skutočnosti sa zmestí do obsahu bez toho, aby bolo potrebné určiť rozmer). Ak sú však uvedené rozmery, môže sa stať, že obsiahnuté predmety nebudú sedieť; v takom prípade sa rozmery nerešpektujú, zväčšia sa, aby bolo možné vidieť všetok obsah.
Aby sa prvky obsiahnuté v inom z pevných meraní orezali, keď presiahnu veľkosť, použije sa vlastnosť overflow
s hodnotou hidden
. s hodnotou scroll
, predmety, ktoré pretečú nádobu, sú tiež vyrezané, ako sa to stáva pri hidden
ale zobrazí sa posuvná lišta, ktorú je možné vidieť pri pohybe. Hodnota auto
spôsobí, že sa posuvná lišta zobrazí iba v prípade potreby na základe veľkosti obsahu.
Môžete tiež stanoviť minimálnu veľkosť, aby kontajnery zaberali tento priestor, aj keď to obsah nepotrebuje, a bez obmedzenia ich rozmerov, aby sa zväčšili, keď si to obsah vyžaduje. Vlastnosti, ktoré majú túto úlohu na starosti, sú min-width
pre acho a min-height
pre toho vysokého. V opačnom zmysle, max-width
nastavte maximálnu šírku a max-height
maximálna výška, ktorá sa ruší width
už height
.
Tok prvkov na webovej stránke
Obdĺžniky (bloky), ktoré sme definovali pomocou prvkov <div>
, sú štandardne umiestnené pod sebou. Ak chcete zmeniť toto správanie, môžete použiť vlastnosť float
, čo naznačuje left
o right
ako hodnotu, takže prúdia zľava doprava alebo sprava doľava. Naopak, aby ste zabránili tomu, aby sa jeden predmet „vznášal“ napravo alebo naľavo od druhého, môžete použiť vlastnosť clear
s hodnotami left
, right
o both
, ktoré prepíšu tok zľava doprava, sprava doľava alebo oboje.
Na rozdiel od toho, čo sa deje za iných okolností, tok produkoval float
neupravuje automaticky rozmery kontajnera, preto je užitočné zahrnúť do jeho vlastností overflow:auto;
vynútiť zmenu veľkosti (výšky) kontajnera, keď ho objekt pretečie kvôli jeho umiestneniu s float
.
Ďalším spôsobom, ako nakonfigurovať tok obsahu prvku, je rozdeliť ho do stĺpcov s vlastnosťou column-count
(ktoré by momentálne malo byť sprevádzané -webkit-column-count
a -moz-column-count
) Veľkosť stĺpcov môže byť označená (v skutočnosti navrhovaná) pomocou column-width
(-webkit-column-width
-moz-column-width
) a oddelenie medzi stĺpcami s column-gap
(-webkit-column-gap
-moz-column-gap
)
Aby bloky neboli rozdelené a ich obsah bol rozdelený do niekoľkých stĺpcov, môžete použiť display:inline-block;
aj keď to určite znamená. ponechajte časť stĺpca nevyužitú.
Umiestnenie
Na určenie umiestnenia prvkov na webovej stránke používa CSS niekoľko režimov určovania polohy, ktoré sa môžu pre každý prvok líšiť, to znamená, že na tej istej webovej lokalite je možné kombinovať rôzne kritériá umiestnenia.
-
position:static;
Ide o predvolené umiestnenie (nie je potrebné ho uvádzať, ak nebolo predtým upravené). Tento typ umiestnenia sleduje „prirodzený“ priebeh stránky: jeden prvok za druhým začína zľava, rastie, pokiaľ je priestor, vpravo a zhora nadol. Na určenie polohy nepoužíva horizontálne ani vertikálne súradnice, riadi sa polohou, ktorá zodpovedá poradiu objektu. -
position:fixed;
Používa sa na umiestnenie objektu na pevnú pozíciu v okne prehliadača (ako napríklad menu). Umiestnenie prvku je určené horizontálne pomocouleft
oright
na určenie oddelenia vľavo alebo vpravo a stop
obottom
na oddelenie nad alebo pod okrajom okna prehliadača (výrez).Pomocou tohto a iných typov polohovania sa môžu objekty prekrývať. Objekty nakreslené ako prvé (definované skôr v kóde HTML) môžu byť pokryté tými, ktoré sú nakreslené neskôr (tie, ktoré sú zahrnuté neskôr v kóde HTML). Ak chcete zmeniť normálne poradie, môžete použiť nehnuteľnosť
z-index
, objekty s najvyššou hodnotou vz-index
Pokrývajú tie s menšou hodnotou. -
position:relative;
Presunie prvok z jeho "normálnej" pozície, ako je to označené vlastnosťamileft
oright
horizontálne atop
obottom
vertikálne. -
position:absolute;
Umiestňuje prvok do pevnej polohy vzhľadom na objekt, ktorý ho obsahuje. Jeho umiestnenie je vyjadrené, ako v predchádzajúcich prípadoch, sleft
,right
,top
ybottom
Názov tohto typu polohovania je spočiatku mätúci, keďže pozícia je stanovená vzhľadom na objekt hierarchicky nadradený objektu, ktorý vlastnosť využíva, pričom je diskutabilné, či je absolútna.
Je tiež dôležité mať na pamäti, že prvok, ktorý obsahuje objekty
<div>
ktorý používame na prvej hierarchickej úrovni je<body>
, teda ak<div>
čo používašposition:absolute;
nie je obsiahnutý v inom, jeho umiestnenie bude „absolútne“ vzhľadom na webovú stránku.
Vlastnosti pre konkrétne médiá a charakteristiky (dotazy na médiá)
CSS umožňuje definovať v rovnakej šablóne štýlov rôzne vzhľady pre rôzne médiá alebo podpory v závislosti od typu použitého zariadenia (napríklad obrazovky alebo tlačiarne), jeho rozmerov, jeho orientácie (vertikálne alebo na šírku) alebo jeho rozlíšenia. To slúži na to, aby bolo možné zobraziť tú istú webovú stránku najvhodnejším spôsobom pre kontext.
Ak chcete odkazovať na médiá, použite @media
podobným spôsobom, ako už bolo vysvetlené pre písma s @font-face
, uzavreté v zátvorkách ({
y }
) definície rôznych prvkov: štítky HTML, triedy, identifikátory...
Typy médií dostupné v CSS3 Sú to: all
, odkazovať na akékoľvek médiá (všetky), screen
pre akýkoľvek typ obrazovky (staršie verzie CSS Rozlišovali medzi televíznymi a počítačovými monitormi) print
pre výstup na tlačiareň a speech
pre zvukové webové čítačky, ktoré interpretujú informácie pomocou hlasových syntetizátorov.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | @media screen { .texto { color:#FFFFFF; background-color:#000000; } } @media print { .texto { color:#000000; background-color:#FFFFFF; } } |
Vo vyššie uvedenom príklade majú prvky triedy text čierne pozadie a biely text na obrazovke, ale sú vytlačené s bielym pozadím a čiernym textom.
Na médiá možno uložiť podmienky na definovanie rôznych skupín vlastností, napríklad na základe dostupného rozlíšenia alebo pomeru výrezov. Tieto podmienky a samotné prostriedky možno skladať pomocou logických operácií and
, not
y only
požadovať, aby ste splnili viaceré, že nevyhoviete alebo až keď splníte, resp.
Medzi dostupnými podmienkami ich považujeme za obzvlášť zaujímavé max-width
(maximálna šírka okna), max-height
(maximálna výška okna), min-width
(minimálna šírka okna), min-height
(minimálna výška okna), orientation
(orientácia, ktorá môže byť landscape
, krajinka, príp portrait
, vertikálne), max-resolution
(maximálne rozlíšenie v dpi
, bodov na palec alebo in dpcm
, bodov na centimeter) a min-resolution
(minimálne rozlíšenie, aj v dpi
o dpcm
).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | @media all { .bloque_principal { background-color:#CCCCCC; } } @media screen and (min-width:320px) { .bloque_principal { width:300px; margin-left:auto; margin-rigth:auto; } } @media screen and (min-width:640px) { .bloque_principal { width:620px; } } @media print { .bloque_principal { background-color:#FFFFFF; } } |
V predchádzajúcom príklade začneme definovaním farby pozadia tak, aby na všetkých médiách mali prvky triedy main_block farbu pozadia #CCCCCC. Keď je okno zobrazené na obrazovke a má šírku aspoň 320 pixelov, ľavý a pravý okraj bude automatický (v strede bloku) a šírka prvku bude 300 pixelov. Ak je rozlíšenie obrazovky 640 pixelov, šírka bloku bude 620 pixelov. Keďže druhá definícia média nezahŕňa informácie o okrajoch a zariadenia, ktoré spĺňajú druhú podmienku, budú spĺňať aj prvú, horizontálny okraj bude stále automatický.
Nakoniec sa v príklade zmení farba pozadia tak, aby bola vo výtlačku biela.
Zvyčajným spôsobom definovania štýlov pre rôzne médiá je zvyčajne začať s bežnými, zvyčajne farbami a typmi písma, po ktorých nasledujú najobmedzujúcejšie geometrie (merania zariadení s najnižším počtom pixelov), zvyčajne pre smartfóny a tablety, kde navyše Bude dôležité vedieť, či sa používajú vertikálne alebo horizontálne orientation
a určite aj jeho rozlíšenie s min-resolution
. Potom sú uvedené rôzne veľkosti pre väčšie obrazovky a zvyčajne to končí pri tlači a hlasových médiách, ktoré boli v príklade grafiky IoT vynechané.
použitie @media
Uloženie podmienok, ako sú rozmery, rozlíšenie a orientácia, umožňuje dizajnérovi vytvoriť jednu webovú stránku, ktorá s rôznymi štýlmi bude vyzerať najvhodnejšie pre každé zariadenie. Toto správanie sa zvyčajne nazýva responzívny dizajn; prispôsobivý dizajn, vo veľmi voľnom preklade.
CSS pre grafický kontajner SVG
S tým, čo bolo doteraz vysvetlené, je teraz možné definovať štýly, ktoré SVG grafický HTML kontajner pomocou ktorých reprezentovať stav senzorov pripojených k IoT. V nasledujúcom kóde je návrh vrátane komentovaného rozdelenia v stĺpcoch, ktoré zodpovedá väčšiemu počtu grafov, ako používa návrh série článkov, aby bolo možné ho opätovne použiť v iných prípadoch.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 | @font-face /* Descripción del tipo de letra ancho */ { font-family:“SircuitoExpandedLight”;/* Nombre de la tipografía */ /* Documentos con la tipografía en los formatos disponibles */ src: url(‘tipos/Sircuito-Expanded-Light.eot’); src: url(‘tipos/Sircuito-Expanded-Light.eot?iefix’) format(‘eot’), url(‘tipos/Sircuito-Expanded-Light.woff’) format(‘woff’), url(‘tipos/Sircuito-Expanded-Light.ttf’) format(‘truetype’), url(‘tipos/Sircuito-Expanded-Light.svg#webfont’) format(‘svg’); /* Forzar alisado de la tipografía (Normalmente por defecto) */ -webkit-font-smoothing:antialiased; } @font-face /* Descripción del tipo de letra normal */ { font-family:“SircuitoRegularLight”; /* Nombre de la tipografía */ /* Documentos con la tipografía en los formatos disponibles */ src: url(‘tipos/Sircuito-Regular-Light.eot’); src: url(‘tipos/Sircuito-Regular-Light.eot?iefix’) format(‘eot’), url(‘tipos/Sircuito-Regular-Light.woff’) format(‘woff’), url(‘tipos/Sircuito-Regular-Light.ttf’) format(‘truetype’), url(‘tipos/Sircuito-Regular-Light.svg#webfont’) format(‘svg’); /* Forzar alisado de la tipografía (Normalmente por defecto) */ -webkit-font-smoothing:antialiased; } @font-face /* Descripción del tipo de letra comprimido */ { font-family:“SircuitoCondensedLight”; /* Nombre de la tipografía */ /* Documentos con la tipografía en los formatos disponibles */ src: url(‘tipos/Sircuito-Condensed-Light.eot’); src: url(‘tipos/Sircuito-Condensed-Light.eot?iefix’) format(‘eot’), url(‘tipos/Sircuito-Condensed-Light.woff’) format(‘woff’), url(‘tipos/Sircuito-Condensed-Light.ttf’) format(‘truetype’), url(‘tipos/Sircuito-Condensed-Light.svg#webfont’) format(‘svg’); /* Forzar alisado de la tipografía (Normalmente por defecto) */ -webkit-font-smoothing:antialiased; } @font-face /* Descripción del tipo de letra normal de grosor normal */ { font-family:“SircuitoRegularMedium”; /* Nombre de la tipografía */ /* Documentos con la tipografía en los formatos disponibles */ src: url(‘tipos/Sircuito-Regular-Medium.eot’); src: url(‘tipos/Sircuito-Regular-Medium.eot?iefix’) format(‘eot’), url(‘tipos/Sircuito-Regular-Medium.woff’) format(‘woff’), url(‘tipos/Sircuito-Regular-Medium.ttf’) format(‘truetype’), url(‘tipos/Sircuito-Regular-Medium.svg#webfont’) format(‘svg’); /* Forzar alisado de la tipografía (Normalmente por defecto) */ -webkit-font-smoothing:antialiased; } @media all { body { font-family:“SircuitoCondensedLight”; margin:0px; column-count:1; -webkit-column-count:1; /* Viejos Chrome, Opera y Safari */ -moz-column-count:1; /* Viejos Firefox */ column-gap:8px; -webkit-column-gap:8px; -moz-column-gap:8px; background-color:#FFFFFF; } .bloque_sensor, .bloque_titulo, .bloque_descripcion, .bloque_fecha, .bloque_grafico { display:inline-block; box-sizing:border-box; width:100%; color:#205587; } .bloque_sensor { min-width:320px; height:100%; background-color:#EDEDED; } .bloque_titulo { padding:16px 16px 0px 20px; font-size:25px; } .bloque_descripcion { padding:2px 16px 0px 20px; font-size:15px; } .bloque_fecha { padding:2px 16px 8px 20px; font-size:17px; } .bloque_grafico { height:200px; padding:4px 20px 20px 20px; } .grafico { background-color:#A8C3EA; } } @media (min-width:360px) { body { margin:8px 8px 0px 8px; } .bloque_sensor { margin:0px 0px 8px 0px; background-color:#E9E9E9; } } @media (min-width:460px) { body { font-family:“SircuitoRegularLight”; } } @media (min-width:530px) { body { font-family:“SircuitoExpandedLight”; } } @media (min-width:690px) { body { font-family:“SircuitoCondensedLight”; column-count:2; -webkit-column-count:2; /* Viejos Chrome, Opera y Safari */ -moz-column-count:2; /* Viejos Firefox */ } } @media (min-width:870px) { body { font-family:“SircuitoRegularLight”; } } @media (min-width:1010px) { body { font-family:“SircuitoExpandedLight”; } } /* @media (min-width:1020px) { body { font-family:”SircuitoCondensedLight”; column-count:3; -webkit-column-count:3; -moz-column-count:3; } } @media (min-width:1280px) { body { font-family:”SircuitoRegularLight”; } } @media (min-width:1570px) { body { font-family:”SircuitoExpandedLight”; } } */ @media (min-width:1610px) { body { font-family:“SircuitoCondensedLight”; column-count:4; -webkit-column-count:4; /* Viejos Chrome, Opera y Safari */ -moz-column-count:4; /* Viejos Firefox */ } } @media (min-width:1710px) { body { font-family:“SircuitoRegularLight”; } } @media (min-width:2010px) { body { font-family:“SircuitoExpandedLight”; } } /* @media (min-width:2200px) { body { font-family:”SircuitoRegularLight”; column-count:5; -webkit-column-count:5; -moz-column-count:5; } } @media (min-width:2520px) { body { font-family:”SircuitoExpandedLight”; } } */ |
Nižšie môžete vidieť, ako by tieto štýly vyzerali. HTML kód z navrhovaného kontajnera pre grafiku SVG z predchádzajúceho článku.
Ďalší článok tejto série vysvetľuje ako kresliť pomocou SVG Dátové grafy stavu senzorov pripojených k internetu vecí (IoT).
Pridať komentár