Határozza meg a CSS segítségével a szenzorgrafikus web megjelenését az IoT-ben
A sorozat előző cikkében hogyan készítsünk állapotgrafikonokat a tárgyak internetéhez kapcsolódó érzékelőkről elmagyarázza az utat HTML-ben fejlesztett weboldalt használjon grafikai struktúraként. A weblapelemek, amelyeket objektumokkal minimálisra csökkentettek <div>
, nem határozta meg közvetlenül a megjelenését, helyette utaltak a megjelenési információkat egy stíluslaphoz CSS, amit a sorozat ezen részében elmagyarázunk.
Az általam javasolt megoldásban az IoT-hez csatlakoztatott érzékelők grafikonjainak elkészítésére egy dokumentumot használnak CSS amely a dokumentumból van betöltve HTML. Ha a kód HTML a szerveren lévő alkalmazásból jön létre, például PHP, nagyon egyszerű lenne a weboldalt definiáló kód részeként szerepeltetni ahelyett, hogy onnan töltené be, amit egy hívás mentésével egy kicsit optimalizálni lehetne. Bármelyik opciót is választja, a legkényelmesebb módszert tartalmazza módosítsa a kódot CSS külön dokumentumban, hogy kényelmesebben kezelhessék és újra felhasználhassák. A cikksorozat oktatóanyagában kidolgozott példában a nevet kapta estilo.css
.
Ugyanúgy, Komplex projektek kezelésekor ajánlatos több különálló stíluslapot használni a különböző dokumentumokban, hogy bizonyos funkciókat újra lehessen használni anélkül, hogy minden alkalommal be kellene töltenie őket, és könnyebben szerkesztheti a kódot azáltal, hogy a megfelelő logikai struktúra szerint szétosztja a különböző dokumentumokba.
A stílusok CSS Egy weboldal viselkedésének és megjelenésének minden szélsőségét többféle megközelítésből próbálják leírni, amelyek mindegyike egyszerre érvényes, miközben a lehető legnagyobb mértékben tiszteletben tartják a korábbi verzió specifikációival való kompatibilitást. Ez azt jelenti, hogy számos lehetséges megoldás létezik, amelyek ugyanazokat az igényeket oldják meg. valamint a rendelkezésre álló erőforrások (tulajdonságok) nagy száma CSS). A cikk didaktikai megközelítése miatt, és azért, hogy ne keverjük össze az új felhasználókat CSS, csak a tulajdonságok és a végső cél eléréséhez szükséges struktúrákat, amely grafikusan ábrázolja a tárgyak internetéhez csatlakoztatott érzékelők adatait. Ugyanakkor van még a kis bevezető CSS, lépcsőzetes stíluslapok.
A CSS-tulajdonságok formázása
El alapformátum Ez egy tulajdonságnévből, a kettőspont jeléből, a tulajdonság értékéből és a pontosvessző jelből áll. nombre:valor;
CSS lehetővé teszi különböző mértékegységek használatát ugyanabban a dokumentumban beleértve a szerkezettel kapcsolatosakat (az elem tartalmának mérése) százalékos arányban, ahhoz az eszközhöz képest, amelyen ábrázolják, például a pixelhez, vagy abszolút értékben, például centiméterben. Az egységeket az érték után a következő rövidítési kódolás szerint fejezzük ki.
Kód | egység |
% | konténer százalékos |
ch | a nulla szám szélességéhez képest |
cm | centiméter |
em | a tartály alaptípusához képest |
ex | x betű magasságához képest |
in | a hüvelyk |
mm | mm |
pc | picas (tipográfiai mérés) |
pt | pontok (tipográfiai) |
px | képpont |
rem | a dokumentum alaptípusához képest |
vh | a szemmagasság 1%-ához képest (mobilképernyő) |
v | a nézet legnagyobb dimenziójának 1%-ához képest (mobilképernyő) |
vmin | a nézet legkisebb méretének 1%-ához képest (mobilképernyő) |
vw | a nézet szélességének 1%-ához képest (mobilképernyő) |
A tervezett alkalmazásnál legalább három stílusegységet figyelembe kell venni. A cikk tárolójának méretéhez viszonyított mérések %-a, a képernyő felbontásának megfelelő pixel és a nyomtatott jelentések készítésének milliméterei (valójában bármilyen abszolút mérés).
Vannak összetett tulajdonságok, vagy kompozit, amelyek több értéktől (pl. szín, méret, stílus...) függenek, az érték jelzésére két lehetőség van a CSS-ben: megfelelő sorrendben írja be az összes szóközökkel elválasztott értékeket, vagy a komplexnek megfelelő egyszerű tulajdonságok összegét használja. Például egy objektum mind a négy margója megadható egyetlen tulajdonságban margin
vagy tulajdonságokkal állítható be margin-top
, margin-right
, margin-bottom
y margin-left
. Egyébként ezt a sorrendet (az óramutató járásával megegyezően) követik az értékek leírása, amelyek "körbevesznek" egy elemet, mint például a belső (padding) vagy a külső margó, a szegély...
Az eddig kifejtettek alapján most láthatunk néhány példát a tulajdonságokra
1
2
3
4
|
margin:10px 20px 0 10px;
width:500px;
height:100%;
color:#FF0099;
|
Az előző példában A szín meghatározása egy 6 hexadecimális számjegyből álló kóddal történik, amelyek páronként a piros, zöld és kék komponens értékét jelentik.. Ha megtörténik, mint a példában, hogy a két számjegy egyenlő, akkor ez rövidíthető: #F09
(ami egyébként az úgynevezett "webbiztos színeknek" felel meg). A végső javaslatban kerülni fogom e rövidítések használatát a kritériumok egységesítése és olvashatóbbá tétele érdekében. Az összetett tulajdonságok értékeit is lerövidítheti, mint pl margin
a példában, amikor minden érték vagy ellentétes pár ismétlődik. Ugyanezen szövegmentés mentén lehetőség van arra is, hogy egy tulajdonság megadásakor elhagyjuk a mértékegységet, ha az érték nulla, mivel ez ebben az esetben irreleváns.
Néhány értéknek amellett, hogy számszerűen kifejezhető, van neve is ami olvashatóbbá teszi a kódot és lehetővé teszi, hogy jobban emlékezzen rájuk. Például a cél hexadecimális numerikus kódja helyett #FFFFFF
(o #FFF
), írható white
ugyanazzal az eredménnyel. Ily módon a fekete szín, #000000
(o #000
), helyettesíthető a black
.
is ott az értékeket egy speciális kód, egy név fejezi ki. Például annak jelzésére, hogy az oldalsó margót a böngésző automatikusan beállítja (általában a középső funkciónak felel meg), a speciális értéket használják auto
, amelynek nincs numerikus megfeleltetése semmilyen értékkel.
hogy kifejezni egy tulajdonság összetett (összetett) értékeinek sorozatának speciális felhasználási módját CSS A függvényekhez hasonló szintaxisú formátumokat választhat. Például, ha egy színt a piros, zöld és kék összetevő három értékeként szeretne kifejezni (a RGB modell) lenne kiírva color: rgb(128, 255, 64);
. Ezen a kifejezésmódon belül lehetőség van egységek használatára is; A fenti példában a színösszetevők 0-tól 255-ig terjedő decimális értékek, de egyszerűbb lehet ezt az egyes színösszetevők összességének százalékában kifejezni, ebben az esetben úgy is felírható, hogy color: rgb(50%, 100%, 25%);
.
Értékek kiszámítása CSS-ben
A legújabb verziókban CSS meg lehet tenni egyszerű matematikai műveletek az értékek kiszámításához. Ehhez használja calc
az elvégzendő műveletet pedig zárójelben fejezzük ki. Megadhat mértékegységeket, zárójeleket és egyszerű operátorokat, például összeget (+
), kivonás (-
), szorzás (*
) és felosztás (/
). A kifejezés a következő típusú lenne width:calc((90%-20px)/2));
.
A változók matematikai műveletekben használhatók CSS az egyik ingatlan számításánál egy másik ingatlan értékére utalva var
. Annak érdekében, hogy egy változót anélkül tudjunk használni, hogy a stílus tényleges tulajdonságára kellene hivatkozni, megengedett egy nem létező tulajdonság idézése is. CSS formátumot ajánlja --nombre-variable
(két kötőjel a kitalált tulajdonság neve előtt). Ily módon egy elem magasságának meghatározása a szélessége felében egy kifejezésben CSS mint height:calc(var(width)/2);
és egy új "vastagság" változó meghatározásához (amelyet más tulajdonságok is használhatnak) írjon be pl. --grosor:4px;
hogy később úgy hivatkozhassunk rá margin-top:calc(var(--grosor)*4);
Böngészőfüggő CSS-tulajdonságok
CSS Ez a konzorcium által szabványosított specifikáció W3C (World Wide Web Consortium), de sok A tulajdonságok vagy viselkedési stílusok azelőtt érik el a böngészőket, hogy a specifikáció részei lennének egy verzióból.
hogy a kód CSS működik a böngésző jelenlegi szolgáltatásaival, de ne veszítse el az új funkciókkal való kompatibilitást, előtagot használnak. Ez az előtag attól függ renderelő motor amely a hivatkozni kívánt webböngészőt használja (amelyhez a stílus meg van határozva).
Az előtag -webkit
Ez alapján működik böngészőknél WebKit mint Safari o króm. Az előtag -moz
Azon alapuló böngészőkhöz használatos renderelő motor de Mozillajelenleg GekkóMint Firefox és származékai. hivatkozni EdgeHTML, The renderelő motor böngésző él a Microsofttól (korábban háromágú szigony), az előtag használatos -ms
. A böngésző esete Opera egy kicsit különleges, mióta elkezdte használni a sajátját renderelő motor-val hivatkozott -o
, de jelenleg azzal működik WebKit, amelyet úgy fejezünk ki -webkit
.
Böngészőre utaló tulajdonság használatához írja be a nevét, előtaggal és kötőjellel válassza el, mint a -o-border-radius:10px;
, amely lekerekített szegély (lekerekített sarok) beállítására szolgálna a böngésző régebbi verzióiban Opera.
Comments
A kód tisztázása érdekében CSS Használhat megjegyzéseket, amelyek olvashatóbbá teszik, bár azzal a hátránnyal, hogy megnövelik a méretét. A megjegyzések szintaxisa CSS Olyan ez, mint egy többsoros megjegyzés C + + amit már biztosan tud: induló /*
és ezzel végződik */
, Akárcsak C + +, több sort is elfoglalhat.
Választók
A meghatározás tulajdonságok vannak hozzárendelve a dokumentum objektumaihoz HTML válogatókba csoportosítva őket és zárójelbe zárva őket. A választó hivatkozhat egy nyelvi elemre HTML (címke), mint div
, egy osztály (hozzárendelt class
en HTML) egy azonosító (hozzárendelt id
en HTML) vagy az összes (az „univerzális választó”), amelyet a csillag (*
). A következő példa az egyes típusok választóját mutatja be:
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;
}
|
A címkék HTML a stílusdefinícióban a nevükkel vannak kifejezve, az osztályokat pont a név elé helyezve jelöljük (.
) és egy font jel (#
) az azonosítókhoz.
Része a nagy hatalmának CSS -ben lakik a szelektorok csoportosításának lehetősége tulajdonságaik meghatározásakor. A kiválasztók csoportosításának többféle módja van. Csoportosításukkal vesszővel elválasztva azt fejezzük ki, hogy az idézett szelektorok mindegyike rendelkezik azokkal a tulajdonságokkal.
1
2
3
4
5
6
7
8
9
10
11
|
.consumo, .humedad, .temperatura
{
color:#FF00AA;
width:100%;
height:100%;
}
.temperatura
{
height:50%;
}
|
Az előző példa azt mutatja, hogy a fogyasztás, a páratartalom és a hőmérséklet osztályok színe, szélessége és magassága megegyezik. Ebben a kódban egy új koncepciót is bevezetnek: A tulajdonságok újradefiniálhatók, és ebben az esetben a legutóbb leírtak érvényesülnek. Ily módon a hőmérsékleti osztály elemeinek magassága végül az őket tartalmazó objektum 50%-a lenne.
Ha a csoportos választókat nem választja el vessző, akkor a tulajdonságokra vonatkozó feltétel kumulatív, vagyis egy elemnek meg kell felelnie minden választónak, hogy elnyerje az általuk meghatározott megjelenést vagy viselkedést. Ha a szelektorok címkékre hivatkoznak HTML Megjelenésük sorrendjének csökkenőnek kell lennie a befogadás szintjén: először a legmagasabb hierarchikus szint, végül a legalacsonyabb.
1
2
3
4
5
6
7
8
9
10
11
|
div.temperatura
{
color:#FF00AA;
width:100%;
height:100%;
}
.temperatura .consumo
{
height:50%;
}
|
Az előző példában az elemek definiáltak div
amelyek szintén a hőmérsékleti osztályba tartoznak, és azok az elemek, amelyek rendelkeznek hőmérsékleti és fogyasztási osztályokkal (mindkettő egyszerre), mint class="temperatura consumo"
. Az elemek <div>
A kódtól HTML a class="temperatura"
100%-os csúcsuk lenne
CSS-tulajdonságok a szöveg meghatározásához
A szöveg megjelenését befolyásoló tulajdonságok három típusa különböztethető meg: (1) azok, amelyek meghatározzák azt a betűtípust, amellyel megjelenítik, (2) azok, amelyek meghatározzák a literál megjelenését (a szöveg tartalmát). és (3 ) általánosak, azaz olyanok, amelyek a szöveg megjelenését és a többi komponens megjelenését egyaránt befolyásolják. Általánosságban elmondható, hogy az utolsó csoporthoz tartozók magyarázataként elmondottak ugyanazokra a tulajdonságokra is vonatkoznak, amelyek más elemekre vonatkoznak.
Tipográfia (betűtípus)
-
font-family
az elemhez használt betűtípus nevét jelzi. Írhat egy nevet vagy egy listát, preferencia sorrendben és a neveket vesszővel elválasztva azokról a betűtípusokról, amelyeket alternatív módon használ, ha a kívánt betű nem létezik. Ugyanezen elvek mentén lehetséges általános betűtípusok használata a nevekkel együttmonospace
,serif
,sans-serif
,cursive
,fantasy
. Ezek közül az általános betűtípusok közül a legfontosabb (az aktuális adatok megjelenítéséhez) az első, amely – ahogy a neve is sugallja – a rendszerben elérhető és a böngésző által előre beállított fix térközű betűtípust fogja használni. A második,serif
, az elérhető alapértelmezettet fogja használni serif (befejezés vagy kegyelem). Árverés nélkül, ha a harmadik fel van tüntetve,sans-serif
. Kézzel rajzolt írást utánzócursive
(egyértelmű, hogy javítható lenne) és a rendszer dekoratív tipográfiájafantasy
, az utolsó az öt közül.Ami a kódot illeti CSS A szóközök elválasztóként különleges jelentéssel bírnak, ha a betűcsalád neve több szóközzel elválasztott szóból áll, a félreértés elkerülése végett idézőjelek közé írjuk.
1font-family: DejaVu, Helvetica, Arial, “a palo seco”, sans-serif;A webböngészők képesek helyi betűtípusok (azon a rendszeren telepített betűtípusok, amelyeken működnek) és más, kifejezetten betöltött betűtípusok használatára is alkalmasak, akár átfedésben is a helyileg telepítettekkel. Betűtípus betöltéséhez használja a
@font-face
feltüntetve a nevét, a definíció letöltési helyét és adott esetben a formátum leírását.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;}Az előző példa két definíciója közül az elsőben a dokumentum betűjele töltődik be Sircuito-Expanded-Light.eot amely a fő (gyökér) mappán belüli EOT mappában található és családnévként van hozzárendelve CircuitExpandedLight. Egyébként tetszik ez a betűtípus? Ingyenes, megteheti töltse le ingyen a Sircuito betűtípust, amelyet a GranaBot képhez terveztem.
Amint a példában látható, az url tulajdonság, amely megfelel a egységes erőforrás-kereső, lehetővé teszi a dokumentum helyének megadását a letöltött betűtípussal. A perjel a különböző mappák nevének elválasztására szolgál a betűtípus elérési útjától, kezdve azzal, amelyik a hívást kezdeményező dokumentumot tartalmazza, vagy a gyökértől, ha a URL Kezdje egy bárral.
A második példa több alternatív dokumentumot használ, így ugyanaz a definíció több böngészőben is működik (mindegyik az általa értelmezhető típust tölti be)
A definíció utolsó sora tartalmazza a tulajdonságot
font-smoothing
a betű lágyításához (alkalmazzon a élsimítás). Mivel nem szabványos tulajdonság, az előtag kerül felhasználásra-webkit
. -
font-size
a betű méretének jelzésére szolgálfont-size:12px;
-
font-weight
Beállítja a betűtípus vastagságát. Kifejezhető számértékként, általában 100 többszöröse 100 és 900 között, a szokásos tipográfiai súlyok szerint, vagy gyakrabban névvel:normal
az alap vastagságához,bold
a merészeknek,bolder
az általában feketének nevezett változathoz,light
a bírságért (általános nevén könnyű) éslighter
a legvékonyabbaknak (néha vékonynak is nevezik).A betűtípus normál verziójának számértéke 400 (egység nélküli), a félkövér változat esetében pedig 700.
Alapértelmezés szerint, ha nincs más érték megadva, akkor a betűtípus megjelenése a megfelelő
normal
vagy 400 így, ha nem változott az általános elemben vagy abban a tárolóban, amelyből öröklődik, nem szükséges feltüntetnifont-weight
a bátorsággalnormal
. -
font-stretch
A betű szélességének jelzésére szolgál, amennyiben a megfelelő családban elérhető. Az ingatlan lehetséges értékei a legszűkebbtől a legszélesebbig rendezve a következők:ultra-condensed
,extra-condensed
,condensed
,semi-condensed
,normal
,semi-expanded
,expanded
,extra-expanded
yultra-expanded
. Ugyanazokkal a feltételekkel, amelyeket az előző tulajdonságnál használtunk, az alapértelmezett szélesség a következőnormal
és nem szükséges kifejezetten jelezni, hacsak nem módosították a meghatározottnál magasabb hierarchikus sorrendben. -
a
font-style
Megadhatja, hogy egy szöveg ferde vagy ferde betűvel van-e rajzolva, ami befolyásolja a megjelenését, vagy egy speciális jelentést kifejező kurzív betűvel (pl. idegen szavak), vagy kerek betűvel, vagyis az előzőekkel sem. vagy normális. az értékoblique
teljesíti az első funkciót, a megjelenés és az érték funkciójátitalic
a második. Az a tény, hogy mindkettő megjelenése gyakran hasonló, vagy akár ugyanaz, azt jelenti, hogy a használat (a jelentés) néha összekeveredett, ezért érdemes odafigyelni. Más tulajdonságokhoz hasonlóannormal
az előző értékek kikapcsolására szolgál. -
text-decoration
aláhúzásra szolgál (az értékkelunderline
), overline (az értékkeloverline
), át kell húzni (az értékkelline-through
) vagy villog (az értékkelblink
) azt a szöveget, amelyre ez a tulajdonság hatással van. -
A tipográfiai szempont sorozatának kiegészítéséhez, bár alkalmazásunk szempontjából ez nem túl lényeges,
font-variant
, lehetővé teszi a jelentkezést kis sapkák (kis nagybetűk) a szövegekhez.
Szöveg
-
text-align
megmondja a böngészőnek, hogy a szövegblokkot hogyan kell igazítani. A lehetséges igazítások balra vannak (ezt alapértelmezés szerint figyelembe veszik) a kóddalleft
, középre az értékkelcenter
, helyes használatright
és mindkét végén azzal indokoltjustify
. -
line-height
beállítja a szövegsorok elválasztását. Ebben az esetben, ha százalékokat használunk, akkor a 100% érték a szöveg magasságának felel meg, nem pedig a konténer méretének. A szöveghez képest leggyakrabban használt mérték a 120%-nak felel meg. A 100%-os vonal azt jelenti, hogy az egyik sor alja érinti a következő sor tetejét. Bár a tipográfiai tervezés általában tartalmaz némi helyet, gyakori, hogy egy kicsit több margót hagynak a sorok között.A sorok közötti elválasztás kifejezésére lehetőség van egy együttható (egység nélküli érték) feltüntetésére is, amellyel a szövegdoboz magassága alapján ki lehet számítani a sor magasságát.
-
letter-spacing
a szavak betűi közötti térköz értéke, amelyet a tipográfiában ún kerning o követés. -
word-spacing
a szavak közötti szóköz mértékét jelenti. -
white-space
beállítja a szóközök viselkedését a szövegben. Amikor az értéket használjáknormal
, amely alapértelmezés szerint több üres helyet egyesít a kódban HTML a weblap egyik prezentációjában (amelyet a böngésző jelenít meg), és a szóközöket hivatkozásként veszi a sor törésére, ha nincs szóköz a blokkban.Az érték
nowrap
Az ismétlődő üres helyeket is egyesíti, de nem bontja fel az üres helyeken lévő szövegsorokat akkor sem, ha a sor nem fér el a tárolóban, szükség esetén túlcsordítja a szóközt, és ha kell, kifelé ír. A vonalak kifejezett felosztásához használhatja a címkét<br>
de HTML.használva
pre
Sem az üres helyeket nem egyesítik egybe, sem a sorokat a szóközök referenciaként való felosztása.pre-line
csatlakoztassa az ismételt üres helyeket, és szükség esetén törje meg a sorokat, referenciaként használva az üreseket.pre-wrap
megőrzi az ismétlődő szóközöket, és szükség esetén megtöri a sorokat, szóközt használva referenciaként.
színek
En CSS színe szerint fejezhető ki RGB színmodell vagy aszerint HSL színes modell és mindkét esetben átlátszósági információ szerepelhet, egy negyedik csatorna értéke, amelyet általában hívnak alfa csatorna o alfa kompozíció, amely az RGBA és a HSLA modelleket eredményezi.
A színek formátumban történő kifejezésére RGB hexadecimális jelöléssel a szintaxis használatos #RRGGBB
, ahol RR a piros komponens értéke (elvileg két hexadecimális számjegy használatával), GG a zöld komponens értéke, BB pedig a kék komponens értéke. Ahogy már említettük, ha az egyes komponensek két számjegye azonos értékű, akkor ezt így lehet kifejezni #RGB
a rendelkezésre álló színek számának korlátozása az úgynevezett webbiztos színekre
Amellett, hogy ez a színábrázolási mód, a legklasszikusabb és leghasználtabb, úgy fejezhető ki rgb(R,G,B)
, hsl(HSL)
, rgba(R,G,B,A)
y hsla(HSLA)
hogy jelezze a formátumban RGB, Hsl és azok megfelelő nyomtatványai az átláthatóság jelzésével (alfa csatorna)
Hacsak az egységutótag hozzáadásával másképp nem kérik, a RGB modell 0 és 255 közötti decimális értékeket használ, a három komponenshez az értéket alfa komponens egy együttható (tizedesjegy nullától egyig) és az első értéke HSL színes modellA színárnyalat egy 0 és 360 közötti tizedesjegy (egységek nélkül), amely egy szöget jelent. A telítettség és a fényerő értékei a HSL modell Általában százalékban fejezik ki.
Mint már elhangzott, bár használata nem túl gyakori, a színeket a formátumban a nevükkel lehet jelezni color:black;
helyett color:#000000;
. Az első formátum jobban olvasható, de egy rövid értéktáblázatra korlátozódik, amelyet szintén nehezebb számszerűen módosítani egy nyelven írt alkalmazásból. JavaScript.
Az IoT-hez csatlakoztatott érzékelők adatainak grafikus megjelenítésére vonatkozó javaslatunkhoz mindössze három színnel kapcsolatos tulajdonságra lesz szükségünk. Egyszerre szolgálnak a szöveg nevének jelzésére, amelyet most magyarázunk, és jelzik az azt támogató összetevők nevét.
-
color
az elem színét jelzi HTML és azt, amit tartalmaz (ami örökli), hacsak más színek egyedi hozzárendelésével kifejezetten nem változtatják meg. -
background-color
Egy elem háttérszínének meghatározására szolgál HTML. A szín értékként való feltüntetése mellett RGB o Hsl speciális értéket használhattransparent
hogy az objektumnak ne legyen háttérszíne, és látható legyen, mi van mögötte, vagyis nem fedi le azokat az elemeket, amelyekre rárajzolták. -
opacity
lehetővé teszi egy elem és annak teljes tartalmának átlátszatlanságának (közvetetten, átlátszóságának) beállítását (nem tévesztendő össze a háttér átlátszóságával). Ha az átlátszóságot olyan elemekhez rendeljük hozzá, amelyek maguk is átlátszóak, akkor ez megnő, külön nem működik. Egy átlátszó objektumban lévő objektumot nem lehet átlátszatlanabbá tenni. Az értékeopacity
Hasonló együtthatóként van kifejezveopacity:0.5;
50%-os átlátszatlanság jelzésére.A Microsoft böngészőjének régebbi verziói nem használták ezt a tulajdonságot, de rendelkeztek ezzel a tulajdonsággal
filter
(szűrő), amely más értékek mellett támogathatja az alfát (a alfa csatorna), amelyhez százalékos átlátszóságot lehetett rendelniopacity
formátum szerint:1filter:alpha(opacity=50); /* Opacidad del 50% en una versión 8.0 o anterior de Microsoft Internet Explorer */
Intézkedések
En CSS, az elemek mérése <div>
, amelyet a grafikus tároló összeállításához választottunk, be van állítva width
(szélesség) és height
(alt).
tartalma között <div>
kerületében pedig egy töltési terület van, amelyet értékével határozunk meg padding
. Az objektum kerületét veszi körül az az él, amelynek a mérete a tulajdonsággal van megadva border
. Az objektum külsejének elválasztása <div>
a többi környező objektum közül van egy tér, amelynek méretét az határozza meg margin
.
Normál körülmények között az objektum által használt tér mérése <div>
kiszámítható a szélessége vagy magassága plusz a párnázás összege (padding
) plusz szegély (border
) plusz margó (margin
). Amikor a megállapított releváns mérés az objektum hasznos belső tere <div>
, ez az összetétel nagyon praktikus, de ha mi ismert az elérhető teljes mérés megváltoztatható-e ez a viselkedés, alapértelmezés szerint beállítva, így a teljes szélesség és magasság méretét a jel jelzi width
(szélesség) és height
(magasság) úgy, hogy az összeadás helyett kivonjuk belőle a kitöltés, a szegély és a margó méretét. Ennek az üzemmódnak a használatához rendelje hozzá a tulajdon box-sizing
az érték border-box
(alapértelmezett content-box
)
Az alábbi diagram grafikusan mutatja a kapott értékeket width
(szélesség) és height
(magas), ha használja box-sizing:border-box;
(a teljes) illbox-sizing:content-box;
(belül)
A mérések értékeit a már ismertetett mértékegységekkel fejezzük ki. Ha több értékkel definiált tulajdonságokról van szó, akkor a különböző típusú átlagokkal kifejezett számadatok keverhetők. Ezen kívül van néhány speciális érték, amelyek relevánsak a szenzorgrafikonok IoT-ben történő megvalósítása során történő felhasználáshoz. Konkrétan használhatjuk az értéket auto
az ingatlanon margin
mint erőforrás bizonyos körülmények között az objektumok központosítására.
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;
}
|
A fenti példában a „small_box” osztályhoz egy 2 pixel vastag szegély van megadva, fekete körvonallal (#000000
) folyamatos (solid
). A „big_box” osztályban a szegélyhez használt vonal szaggatott (dashed
) és a piros szín (#FF0000
). Ezen értékek külön kifejezésére használhatjuk border-width
vastagsághoz, border-style
a stroke és border-color
színért. Ezek az éltulajdonságok viszont összetettek, és a felső, jobb, alsó és bal oldali elemek alkotják, az óramutató járásával megegyező irányban, a fentebb leírtak szerint.
A két definiált osztálynak ugyanazok a méretei, de az első kisebb, mivel az érték használatakor border-box
ingatlanért box-sizing
, a kitöltés, a szegély és a margó az alapértelmezés szerint az objektumon belül, nem a tartalom körül rajzolódik meg. A "big_box" osztályban nincs feltüntetve, így alapértelmezés szerint az értéket veszik fel content-box
ami miatt a párnázás, a szegély és a margó a jelzett méretre nő width
y height
.
A fenti példában az osztálymargó értéke 10 pixel felül, jobb, lent és bal oldalon, így egyetlen értékként is kifejezhető margin:10px;
. Nagyon érdekes megismerni ezt az alternatívát a harmadik felek által kifejlesztett kód megértéséhez, bár ebben a megvalósítási javaslatban az olvashatóbbá tétel érdekében javasolt az értékek megismétlése.
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;
}
|
Az előző példában szereplő három osztály ugyanazt az eredményt adja: az úgynevezett "lakonikus" definíciója tömörebb, és kevésbé az úgynevezett "beszédű" definíciója, amely nem csak az olvasás tisztázását szolgálja, hanem a szokásos forma. egy tulajdonság bizonyos részleges, konkrét aspektusának módosítására szolgál, a többi érték öröklődés útján történő újrafelhasználásával (ezeket a tároló biztosítja, vagy az elemhez rendelt osztályok egyike biztosítja). Ha relevánsak lennének azok a tulajdonságok és egyéb körülmények, amelyek a kód olvashatóbbá tétele érdekében, mint például a megjegyzések, növelik a méretet és ezáltal a forgalmat, a kiszolgálót ezen definíciós mód extraszövege által okozott terhelés, akkor lehetséges lenne feldolgozza (például) innen PHP az ebből a nyelvből származó kódgenerálási stratégia részeként.
A dobozmodell méretei elsősorban az elemekre hatnak <div>
de a tulajdonsággal más elemekre is rákényszeríthető ez a viselkedés display
és az érték block
. Ha egy elemet úgy szeretne folyni, mint a szöveg egy sorban, használja a display:inline;
és mindkét viselkedés, a mérések és az áramlás kombinálható display:inline-block;
Az érték none
az ingatlanon display
, használva, mint display:none;
, lehetővé teszi az objektumok elrejtését is, ami arra szolgál, hogy „bekapcsolja” és „kikapcsolja” őket JavaScript.
Ha egy elem méretei nincsenek megadva, akkor bármilyen méretre van szükség ahhoz, hogy a tartalom illeszkedjen (valójában a tartalmat úgy alakítja ki, hogy nem kell méretet megállapítania). De ha a méretek fel vannak tüntetve, előfordulhat, hogy a benne lévő tárgyak nem férnek el; ilyenkor a méreteket nem veszik figyelembe, megnövelik, hogy minden tartalom látható legyen.
Annak érdekében, hogy egy másik rögzített mérésben szereplő elemek levágásra kerüljenek, amikor túllépik a méretet, a tulajdonságot használják overflow
a bátorsággal hidden
. az értékkel scroll
, a tárolót túlcsorduló tárgyak is kivágásra kerülnek, ahogy az a hidden
de megjelenik egy görgetősáv, amely mozgatásakor látható. Az érték auto
A görgetősáv csak akkor jelenik meg, ha a tartalom mérete alapján szükséges.
Megállapíthat egy minimális méretet is, hogy a tárolók akkor is elfoglalják ezt a helyet, ha a tartalomnak nincs rá szüksége, és méretük korlátozása nélkül növekedjen, amikor a tartalom igényli. Azok a tulajdonságok, amelyek ezt a feladatot látják el min-width
az acho és min-height
a magasért. Ellenkező értelemben, max-width
állítsa be a maximális szélességet és max-height
egy maximális magasság, amely kioltja width
ya height
.
Elemek áramlása a weboldalon
Az általunk elemekkel meghatározott téglalapok (blokkok). <div>
, alapértelmezés szerint egymás alá kerülnek. Ennek a viselkedésnek a megváltoztatásához használhatja a tulajdonságot float
, jelezve left
o right
értékként, hogy balról jobbra, illetve jobbról balra folyjanak. Éppen ellenkezőleg, annak megakadályozására, hogy egy objektum "lebegjen" a másiktól jobbra vagy balra, használhatja a tulajdonságot clear
az értékekkel left
, right
o both
, amelyek felülírják a balról jobbra, jobbról balra vagy mindkettőt.
Ellentétben azzal, ami más körülmények között történik, az áramlás létrejött float
nem módosítja automatikusan a tároló méreteit, ezért célszerű a tulajdonságai közé belefoglalni overflow:auto;
a tartály méretének (magasságának) megváltoztatására kényszeríteni, amikor egy tárgy túlcsordul rajta a helye miatt float
.
Egy másik módja annak, hogy konfigurálhassa egy elem tartalmának folyamatát, ha oszlopokra osztja a tulajdonsággal column-count
(amihez jelen pillanatban együtt kell járnia -webkit-column-count
és -moz-column-count
) Az oszlopok mérete a -val jelezhető (valójában javasolt). column-width
(-webkit-column-width
-moz-column-width
) és az oszlopok közötti elválasztást a column-gap
(-webkit-column-gap
-moz-column-gap
)
Annak érdekében, hogy a blokkok ne legyenek felosztva, és tartalmuk több oszlopra oszlik el, használhatja display:inline-block;
bár ez biztosan azt jelenti. hagyja kihasználatlanul az oszlop egy részét.
Helymeghatározás
Az elemek weblapon való elhelyezkedésének megállapításához a CSS többféle pozicionálási módot használ, amelyek elemenként eltérőek lehetnek, azaz lehetőség van ugyanazon a weboldalon különböző pozicionálási kritériumok keverésére.
-
position:static;
Ez az alapértelmezett pozicionálás (nem szükséges feltüntetni, ha korábban nem módosították) Ez a fajta pozicionálás az oldal „természetes” folyását követi: egyik elem a másik után indul balról, növekszik, mindaddig, amíg van hely, jobbra és fentről lefelé. Helyének megállapításához nem használ vízszintes vagy függőleges koordinátákat, az objektum sorrendjének megfelelő pozíciót követi. -
position:fixed;
Egy objektum fix pozícióba helyezésére szolgál a böngészőablakban (például menüben). Az elem helye vízszintesen adható megleft
oright
a bal vagy jobb oldali elválasztás meghatározásához, illetve atop
obottom
a böngészőablak (nézetablak) széle felett vagy alatt történő elválasztáshoz.Ezzel és más típusú helymeghatározással az objektumok átfedhetik egymást. Az elsőként rajzolt objektumok (a kódban korábban meghatározva HTML) lefedhetők a később kihúzottak (a kódban később szereplők). HTML). A normál sorrend megváltoztatásához használhatja az ingatlant
z-index
, a legnagyobb értékű objektumokz-index
Lefedik a kisebb értékűeket. -
position:relative;
Elmozdítja az elemet a "normál" helyzetéből a tulajdonságok szerintleft
oright
vízszintesen éstop
obottom
függőlegesen. -
position:absolute;
Rögzített pozícióba helyezi az elemet az azt tartalmazó objektumhoz képest. Helyét, mint az előző esetekben, azzal fejezzük kileft
,right
,top
ybottom
Ennek a pozícionálási típusnak az elnevezése elsőre zavaró, hiszen a pozíciót a tulajdonságot használónál hierarchikusan magasabb rendű objektumhoz képest állapítják meg, ami vitatható, hogy abszolút-e.
Azt is fontos megjegyezni, hogy az objektumokat tartalmazó elem
<div>
amelyet az első hierarchikus szinten használunk az<body>
, ezért ha a<div>
mit használszposition:absolute;
más nem tartalmazza, elhelyezése "abszolút" lesz a weboldalhoz képest.
Adott adathordozók és jellemzők tulajdonságai (médialekérdezések)
CSS lehetővé teszi, hogy ugyanazon a stíluslapon különböző megjelenéseket határozzon meg a különböző médiákhoz vagy támogatásokhoz a használt eszköz típusától (például képernyő vagy nyomtató), méretétől, tájolásától (függőleges vagy fekvő) vagy felbontásától függően. Ez arra szolgál, hogy ugyanazt a weboldalt a kontextusnak legmegfelelőbb módon tudjuk megjeleníteni.
A médiára való hivatkozáshoz használja a @media
hasonló módon, mint amit a betűtípusoknál már elmagyaráztunk @font-face
, kapcsos zárójelbe zárva ({
y }
) a különböző elemek meghatározásai: címkék HTML, osztályok, azonosítók...
A rendelkezésre álló médiatípusok CSS3 hang: all
, bármilyen médiára hivatkozni (minden), screen
bármilyen típusú képernyőhöz (régebbi verzióihoz CSS Megkülönböztették a tévét és a számítógép-monitort) print
nyomtató kimenethez és speech
audio webolvasók számára, amelyek hangszintetizátorokkal értelmezik az információkat.
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;
}
}
|
A fenti példában a szövegosztály elemei fekete háttérrel és fehér szöveggel jelennek meg a képernyőn, de fehér háttérrel és fekete szöveggel vannak nyomtatva.
Feltételek szabhatók a médiára különböző tulajdonságkészletek meghatározásához, például a rendelkezésre álló felbontás vagy nézetarány alapján. Ezek a feltételek és maguk az eszközök logikai műveletekkel összeállíthatók and
, not
y only
többnek betartását követelni, nem vagy csak akkor, amikor megfelel, ill.
Az elérhető feltételek közül különösen érdekesnek találjuk őket max-width
(maximális ablakszélesség), max-height
(maximális ablakmagasság), min-width
(minimális ablakszélesség), min-height
(minimális ablakmagasság), orientation
(az orientáció, ami lehet landscape
, táj, ill portrait
, függőleges), max-resolution
(maximális felbontás in dpi
, pont per hüvelyk, vagy inch dpcm
, pont per centiméter) és min-resolution
(minimális felbontás, szintén be 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;
}
}
|
Az előző példában a háttérszín meghatározásával kezdjük, hogy minden adathordozóban a main_block osztály elemei #CCCCCC háttérszínnel rendelkezzenek. Ha egy képernyőn jelenik meg, és az ablak legalább 320 pixel széles, a bal és jobb margó automatikus lesz (a blokk közepére), az elem szélessége pedig 300 pixel. Ha a képernyő felbontása 640 pixel, akkor a blokk szélessége 620 pixel lesz. Mivel a második adathordozó definíció nem tartalmazza a margóinformációkat, és a második feltételnek megfelelő eszközök megfelelnek az elsőnek is, a vízszintes margó továbbra is automatikus lesz.
Végül a példában a háttérszínt úgy változtatjuk meg, hogy az fehér legyen a nyomtatásban.
A stílusok meghatározásának szokásos módja a különböző médiákhoz általában az elterjedtekkel, általában színekkel és betűtípusokkal kezdődik, majd ezt követik a leginkább korlátozó geometriák (a legalacsonyabb pixelszámmal rendelkező eszközök mérései), általában okostelefonok és táblagépek esetében, ahol ráadásul Fontos lesz tudni, hogy függőlegesen vagy vízszintesen használják orientation
és minden bizonnyal a felbontását is min-resolution
. Ezután a nagyobb képernyők különböző méreteit jelzik, és általában a nyomtatással és a hanghordozókkal végződik, amelyek az IoT-grafikák példájában kimaradtak.
használat @media
Az olyan feltételek, mint a méretek, a felbontás és a tájolás, lehetővé teszi a tervező számára, hogy egyetlen weboldalt hozzon létre, amely különböző stílusokkal minden eszköz számára a legmegfelelőbbnek tűnik. Ezt a viselkedést általában reszponzív tervezésnek nevezik; adaptálható design, nagyon szabad fordításban.
CSS SVG grafikus tárolóhoz
Az eddig kifejtettekkel most már meg lehet határozni azokat a stílusokat, amelyeket a SVG grafikus HTML tároló amellyel az IoT-hez csatlakoztatott szenzorok állapotát ábrázolják. A következő kódban a javaslat olyan oszlopokban történő elosztását tartalmazza kommentálva, amely több grafikonnak felel meg, mint a cikksorozat javaslata, így más esetekben újra felhasználható.
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”;
}
}
*/
|
Alább láthatja, hogyan néznek ki ezek a stílusok. HTML-kód az SVG-grafikákhoz javasolt tárolóból az előző cikkből.
A sorozat következő cikke elmagyarázza hogyan rajzoljunk SVG-vel Adatgrafikonok a dolgok internetéhez (IoT) kapcsolódó érzékelők állapotáról.
Hozzászólás Comment