Naudodami CSS apibrėžkite jutiklio grafikos žiniatinklio išvaizdą IoT

Ankstesniame serijos straipsnyje apie kaip sudaryti jutiklių, prijungtų prie daiktų interneto, būsenos grafikus paaiškina kelią naudoti HTML sukurtą tinklalapį kaip grafikos struktūrą. Tinklalapio elementai, kurie buvo sumažinti iki minimumo naudojant objektus <div>, tiesiogiai neapibrėžė jo išvaizdos, vietoj to jie nurodė išvaizdos informaciją į stiliaus lapą CSS, kas bus paaiškinta šioje serijos dalyje.

Sprendime, kurį siūlau sudaryti jutiklių, prijungtų prie daiktų interneto, grafikus, naudojamas dokumentas CSS kuris įkeltas iš dokumento HTML. Jei kodas HTML bus sugeneruotas iš serverio programos, pvz PHP, būtų labai paprasta įtraukti jį į kodą, apibrėžiantį tinklalapį, o ne įkelti jį iš jo, kurį būtų galima šiek tiek optimizuoti išsaugant skambutį. Kad ir kuris variantas būtų pasirinktas, patogiausias būdas apima redaguoti kodą CSS atskirame dokumente, kad būtų patogiau jį tvarkyti ir būtų galima pakartotinai panaudoti. Šios straipsnių serijos vadovėlyje sukurtame pavyzdyje jai suteiktas pavadinimas estilo.css.

Tuo pačiu būdu, Vykdant sudėtingus projektus, skirtinguose dokumentuose patartina naudoti kelis atskirus stiliaus lapus, tiek tam, kad būtų galima pakartotinai naudoti konkrečias funkcijas, nereikėtų jų visų kiekvieną kartą įkelti, ir lengviau redaguoti kodą, paskirstant jį į skirtingus dokumentus pagal atitinkamą loginę struktūrą.

Stiliai CSS Jie bando apibūdinti visus tinklalapio elgsenos ir išvaizdos kraštutinumus naudojant kelių tipų metodus, kurie vienu metu galioja, tuo pačiu stengdamiesi kiek įmanoma gerbti suderinamumą su ankstesnės versijos specifikacijomis. Tai reiškia, kad yra daug galimų sprendimų, kurie išsprendžia tuos pačius poreikius. taip pat daug turimų išteklių (ypatybių CSS). Dėl didaktinio straipsnio požiūrio ir siekiant nesupainioti naujų vartotojų CSS, tik savybės ir galutiniam tikslui būtinų struktūrų, kuris turi grafiškai pavaizduoti duomenis iš jutiklių, prijungtų prie daiktų interneto. Kartu yra ir a mažas įvadas į CSS, pakopinio stiliaus lapai.

CSS ypatybių formatavimas

El pagrindinis formatas Jį sudaro nuosavybės pavadinimas, dvitaškis, nuosavybės vertė ir kabliataškis. nombre:valor;

CSS leidžia tame pačiame dokumente naudoti skirtingus matavimo vienetus įskaitant tuos, kurie yra susiję su struktūra (elemento sudėties matavimu) procentais, palyginti su įrenginiu, kuriame jie pavaizduoti, pvz., pikseliu, arba absoliučiais, pvz., centimetrais. Vienetai išreiškiami po reikšmės pagal šį santrumpos kodavimą.

Taikant programą, kurią ketiname daryti, svarbu atsižvelgti į bent tris stiliaus vienetus. Matavimų procentas, palyginti su prekės talpyklos dydžiu, pikselis matavimams pagal ekrano skiriamąją gebą ir milimetrai (iš tikrųjų bet koks absoliutus matavimas) spausdintoms ataskaitoms sudaryti.

Yra keletas sudėtingos savybės, arba sudėtinis, kuris priklauso nuo kelių reikšmių (pvz., spalvos, dydžio, stiliaus...), norint nurodyti reikšmę, CSS yra dvi galimybės: atitinkama tvarka įrašyti visas reikšmės atskirtos tarpais arba naudokite paprastų savybių sumą, lygiavertę kompleksui. Pavyzdžiui, visos keturios objekto paraštės gali būti nurodytos vienoje savybėje margin arba gali būti nustatyta su savybėmis margin-top, margin-right, margin-bottom y margin-left. Beje, ta tvarka (pagal laikrodžio rodyklę) yra ta, kuri seka reikšmių, kurios "supa" elementą, pvz., vidinis (pamušalas) arba išorinis paraštė, kraštinė, aprašymai...

Su tuo, kas buvo paaiškinta iki šiol, dabar galime pamatyti keletą savybių pavyzdžių

Aukščiau pateiktame pavyzdyje Spalva apibrėžiama naudojant 6 šešioliktainių skaitmenų kodą, kuris poromis reiškia raudonos, žalios ir mėlynos spalvos komponentų reikšmę.. Kai atsitinka, kaip pavyzdyje, kad du skaitmenys yra lygūs, tai gali būti sutrumpinta kaip #F09 (kuris, beje, atitinka vadinamąsias „web safe colours“). Galutiniame pasiūlyme vengsiu naudoti šias santrumpas, siekdamas suvienodinti kriterijus ir padaryti jį aiškesnį. Taip pat galite sutrumpinti sudėtingų savybių reikšmes, pvz margin pavyzdyje, kai kartojasi visos reikšmės arba priešingos poros. Be to, išsaugant tekstą, vienetą galima praleisti nurodant ypatybę, kai reikšmė lygi nuliui, nes tokiu atveju tai nesvarbu.

Kai kurios reikšmės, be to, kad jas galima išreikšti skaičiais, turi pavadinimą todėl kodas tampa lengviau skaitomas ir leidžia geriau juos atsiminti. Pavyzdžiui, vietoj tikslo šešioliktainio skaitmeninio kodo, #FFFFFF (o #FFF), galima parašyti white su tuo pačiu rezultatu. Tokiu būdu juoda spalva, #000000 (o #000), gali būti pakeistas black.

taip pat ten reikšmės išreiškiamos specialiu kodu, pavadinimu. Pavyzdžiui, norint nurodyti, kad šoninę paraštę automatiškai nustato naršyklė (paprastai ji atitiks centrinę funkciją), naudojama speciali reikšmė auto, kuris neturi skaitinės atitikties jokiai reikšmei.

į išreikšti specialų būdą, kaip panaudoti sudėtinių (sudėtinių) nuosavybės verčių seriją CSS Galite pasirinkti formatus, kurių sintaksė panaši į funkcijų sintaksę. Pavyzdžiui, norėdami išreikšti spalvą kaip tris raudonos, žalios ir mėlynos komponento reikšmes ( RGB modelis) būtų parašyta color: rgb(128, 255, 64);. Šiame išraiškos stiliuje taip pat galima naudoti vienetus; Aukščiau pateiktame pavyzdyje spalvos komponentai yra dešimtainė reikšmė nuo 0 iki 255, bet gali būti lengviau tai išreikšti procentais nuo kiekvienos spalvos komponento sumos, tokiu atveju jis taip pat gali būti parašytas kaip color: rgb(50%, 100%, 25%);.

Vertybių skaičiavimas CSS

Naujausiose versijose CSS tai galima padaryti paprastos matematinės operacijos reikšmėms apskaičiuoti. Norėdami tai padaryti, naudokite calc o atliktina operacija išreiškiama skliausteliuose. Galite nurodyti vienetus, skliaustus ir paprastus operatorius, tokius kaip suma (+), atimtis (-), daugyba (*) ir padalijimą (/). Išraiška būtų tokio tipo width:calc((90%-20px)/2));.

Kintamieji gali būti naudojami atliekant matematines operacijas CSS apskaičiuojant vieną turtą nurodoma kito turto vertė su var. Kad būtų galima naudoti kintamąjį nenurodant tikrosios stiliaus savybės, taip pat leidžiama cituoti savybę, kurios nėra. CSS rekomenduoja formatą --nombre-variable (du brūkšneliai prieš sugalvotos nuosavybės pavadinimą). Tokiu būdu, norint apibrėžti elemento aukštį kaip pusę jo pločio išraiškos CSS kaip height:calc(var(width)/2); ir norėdami apibrėžti naują kintamąjį "storis" (kurį galėtų naudoti kitos savybės), parašykite, pvz. --grosor:4px; kad vėliau būtų galima jį vadinti margin-top:calc(var(--grosor)*4);

Nuo naršyklės priklausomos CSS ypatybės

CSS Tai konsorciumo standartizuota specifikacija W3C (World Wide Web Consortium), bet daug ypatybės arba elgsenos stiliai pasiekia naršykles prieš įtraukdami į specifikaciją versijos.

kad kodas CSS veikia su dabartinėmis naršyklės funkcijomis, bet nepraraskite suderinamumo su naujomis funkcijomis, naudojamas priešdėlis. Šis priešdėlis priklauso nuo atvaizdavimo variklis kuri naudoja žiniatinklio naršyklę, kurią norite nurodyti (kurios stilius yra apibrėžtas).

Priešdėlis -webkit Jis veikia naršyklėms, pagrįstoms "WebKit" kaip "Safari" o chromas. Priešdėlis -moz Jis naudojamas naršyklėms, pagrįstoms atvaizdavimo variklis de "Mozilla, dabar Lankytojų, su nurodytomisKaip "Firefox" ir jo dariniai. Norėdami remtis EdgeHTML, atvaizdavimo variklis naršyklė kraštas iš Microsoft (anksčiau Trišakis), naudojamas priešdėlis -ms. Naršyklės atvejis Opera yra šiek tiek ypatingas, nes pradėjo naudoti savo atvaizdavimo variklis, nurodyta su -o, bet šiuo metu dirba su "WebKit", kuris išreiškiamas kaip -webkit.

Jei norite naudoti ypatybę, susijusią su naršykle, parašykite jos pavadinimą, priešdėlį ir atskirkite jį brūkšneliu, kaip nurodyta -o-border-radius:10px;, kuris būtų naudojamas nustatant suapvalintą kraštinę (suapvalintą kampą) senesnėse naršyklės versijose Opera.

Komentarai

Norėdami paaiškinti kodą CSS Galite naudoti komentarus, dėl kurių jis bus lengviau skaitomas, nors ir padidės jo dydis. Komentarų sintaksė CSS Tai tarsi kelių eilučių komentarai C + + kurią, tikiu, jau žinote: pradedant /* ir baigiasi */, kaip C + +, gali užimti kelias eilutes.

Rinktuvai

Apibrėžimas ypatybės priskiriamos objektams dokumente HTML grupuojant juos rinkikliuose ir apjuosiant juos petnešomis. Pasirinkiklis gali nurodyti kalbos elementą HTML (etiketė), kaip div, klasė (priskirta class en HTML) identifikatorius (priskirtas id en HTML) arba visi („universalus parinkiklis“), pažymėtas žvaigždute (*). Toliau pateiktame pavyzdyje parodytas kiekvieno tipo parinkiklis:

Etiketės iš HTML stiliaus apibrėžime išreiškiami jų pavadinimu, klasės pažymimos dedant tašką prieš pavadinimą (.) ir svaro ženklas (#) identifikatoriams.

Didžiosios galios dalis CSS gyvena galimybė sugrupuoti parinkiklius apibrėžiant jų savybes. Yra keletas būdų, kaip sugrupuoti parinkiklius. Sugrupuodami juos, atskiriant juos kableliais, išreiškiama, kad kiekvienas iš cituojamų rinkėjų turi tas savybes.

Ankstesnis pavyzdys rodo, kad suvartojimo, drėgmės ir temperatūros klasės yra vienodos spalvos, pločio ir aukščio. Šiame kode taip pat pateikiama nauja sąvoka: savybės gali būti apibrėžtos iš naujo ir tokiu atveju vyrauja naujausios aprašytos. Tokiu būdu temperatūros klasės elementai pagaliau turėtų 50% objekto, kuriame jie yra, aukštį.

Jei sugrupuoti parinkikliai nėra atskirti kableliais, ypatybėms nustatyta sąlyga yra kumuliacinė, tai yra, elementas turi tenkinti visus parinkiklius, kad jis įgytų išvaizdą ar elgesį, kurį jie apibrėžia. Jei selektoriai nurodo žymes HTML Jų atsiradimo tvarka turi būti mažėjanti įtraukimo lygyje: pirmas aukščiausias hierarchinis lygis, o paskutinis – žemiausias.

Ankstesniame pavyzdyje elementai yra apibrėžti div kurie taip pat priklauso temperatūros klasei ir elementai, turintys ir temperatūros klasę, ir vartojimo klasę (abi vienu metu), kaip class="temperatura consumo". Elementai <div> Iš kodo HTML su class="temperatura" jie turėtų 100 proc.

CSS ypatybės tekstui apibrėžti

Galima išskirti tris ypatybių tipus, turinčius įtakos teksto išvaizdai: (1) tas, kurios nustato šriftą, su kuriuo jis pateikiamas, (2) tas, kurios lemia pažodinio žodžio išvaizdą (teksto turinį). ir (3) bendrieji, ty tie, kurie turi įtakos ir teksto, ir kitų komponentų išvaizdai. Apskritai tai, kas buvo pasakyta siekiant paaiškinti paskutinę grupę, taip pat bus taikoma toms pačioms savybėms, taikomoms kitiems elementams.

Tipografija (šriftas)

• font-family nurodo elementui naudojamo šrifto pavadinimą. Galite parašyti vieną šriftų pavadinimą arba sąrašą, pagal pageidavimą ir pavadinimus atskirdami kableliais, šriftų, kurie bus naudojami alternatyviai, jei pageidaujamo nėra. Taip pat galima naudoti bendruosius šriftus su pavadinimais monospace, serif, sans-serif, cursive, fantasy. Iš šių bendrųjų šriftų svarbiausias (pateikiamiems duomenims pateikti) yra pirmasis, kuris, kaip rodo pavadinimas, naudos sistemoje esantį ir naršyklės iš anksto nustatytą šriftą su fiksuotais tarpais. Antras, serif, jis naudos numatytąjį galimą serifas (apdaila arba malonė). Be aukciono, jei nurodyta trečia, sans-serif. Imituoja ranka pieštą rašymą cursive (aišku, kad būtų galima patobulinti) ir dekoratyvinę sistemos tipografiją su fantasy, paskutinis iš penkių.

  Kalbant apie kodą CSS Tarpai turi ypatingą reikšmę kaip skyriklis; kai šriftų šeimos pavadinimas sudarytas iš kelių žodžių, atskirtų tarpais, jis rašomas tarp kabučių, kad būtų išvengta painiavos.

  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;

  Žiniatinklio naršyklės gali naudoti vietinius šriftus (diegtus sistemoje, kurioje jos veikia), taip pat kitus specialiai įkeltus šriftus, net sutampančius su įdiegtais vietoje. Norėdami įkelti šriftą, naudokite @font-face nurodant jo pavadinimą, apibrėžimo atsisiuntimo vietą ir, jei taikoma, formato aprašymą.

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

  Pirmajame iš dviejų ankstesniame pavyzdyje pateiktų apibrėžimų įkeliama dokumento raidė Sircuito-Expanded-Light.eot kuris yra EOT aplanke pagrindiniame (šakniniame) aplanke ir yra priskirtas kaip šeimos vardas CircuitExpandedLight. Beje, ar jums patinka šis šriftas? Tai nemokama, galite nemokamai atsisiųskite Sircuito šriftą, kurį sukūriau GranaBot atvaizdui.

  Kaip matyti pavyzdyje, url nuosavybė, kuri atitinka vienodas išteklių lokatorius, leidžia nurodyti atsisiunčiamo šrifto dokumento vietą. Pasvirasis brūkšnys naudojamas atskirti skirtingų aplankų pavadinimus nuo kelio iki šrifto, pradedant tuo, kuriame yra dokumentas, iš kurio skambinama, arba nuo šaknies, jei URL adresas Pradėkite nuo baro.

  Antrame pavyzdyje naudojami keli alternatyvūs dokumentai, kad tas pats apibrėžimas veiktų keliose naršyklėse (kiekviena iš jų įkels tokį tipą, kurį gali interpretuoti).

  Paskutinė apibrėžimo eilutė apima savybę font-smoothing norėdami sušvelninti raidę (taikykite a anti-aliasing). Kadangi tai nėra standartinė savybė, naudojamas priešdėlis -webkit.

• font-size nurodo raidės dydį, kaip nurodyta font-size:12px;

• font-weight Nustato šrifto storį. Jis gali būti išreikštas skaitine reikšme, paprastai 100 kartotiniu tarp 100 ir 900, atsižvelgiant į įprastus tipografinius svorius, arba dažniau pavadinimu: normal pagrindo storiui, bold drąsiems, bolder versijai, kuri paprastai vadinama juoda, light už baudą (dažniausiai vadinamą lengvąja) ir lighter ploniausiems (kartais vadinamiems plonais).

  Įprastos šrifto versijos skaitinė reikšmė yra 400 (be vienetų), o paryškintos versijos – 700.

  Pagal numatytuosius nustatymus, jei nenurodyta jokia kita reikšmė, šrifto išvaizda yra tokia, kurią atitinka normal arba 400, taigi, jei jis nebuvo pakeistas bendrame elemente arba konteineryje, iš kurio jis paveldimas, nurodyti nereikia font-weight su verte normal.

• font-stretch Jis naudojamas raidės pločiui nurodyti, jei ji yra atitinkamoje šeimoje. Galimos vertės, kurias gali įgyti nuosavybė, nuo siauriausios iki plačiausios, yra šios: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. Taikant tuos pačius kriterijus, kurie buvo naudojami ankstesnėje nuosavybėje, numatytasis plotis yra normal ir nebūtina to aiškiai nurodyti, nebent jis buvo pakeistas aukštesne hierarchine tvarka nei ta, kuri apibrėžiama.

• su font-style Galite nurodyti, ar tekstas nupieštas pasvirusia ar įstrine raide, kuri turi įtakos jo išvaizdai, ar kursyvine raide, išreiškiančia ypatingą reikšmę (pavyzdžiui, svetimžodžiams), ar apvalia raide, tai yra, nei ankstesnėmis raidėmis. arba normalus. vertė oblique atlieka pirmąją – išvaizdos ir vertės – funkciją italic Antras. Tai, kad abiejų išvaizda dažnai yra panaši ar net tokia pati, reiškia, kad kartais painiojama vartosena (reikšmė), todėl verta atkreipti dėmesį. Kaip ir su kitomis savybėmis, normal padeda išjungti ankstesnes reikšmes.

• text-decoration skirta pabraukti (reikšme underline), perbraukimas (su verte overline), perbraukite (su reikšme line-through) arba blyksniai (su reikšme blink) tekstas, kuriam ši savybė turi įtakos.

• Norėdami užbaigti tipografijos aspekto seriją, nors mūsų taikymui tai nėra labai aktualu, font-variant, leidžia kreiptis mažos kepurės (mažomis didžiosiomis raidėmis) prie tekstų.

Tekstas

• text-align nurodo naršyklei, kaip turi būti išlygiuotas teksto blokas. Galimas lygiavimas yra kairėje (tai laikomas pagal numatytuosius nustatymus) su kodu left, centre su verte center, teisingas naudojimas right ir pateisinamas abiejuose galuose justify.

• line-height nustato teksto eilučių atskyrimą. Šiuo atveju, jei naudojami procentai, 100% reikšmė atitinka teksto aukštį, o ne konteinerio išmatavimą. Dažniausiai naudojamas matas, palyginti su tekstu, atitinka 120%. 100 % eilutė reikštų, kad vienos eilutės apačia liečia kitos eilutės viršų. Nors tipografijos dizaine paprastai yra šiek tiek vietos, tarp eilučių įprasta palikti šiek tiek daugiau paraštės.

  Norėdami išreikšti atskyrimą tarp eilučių, taip pat galima nurodyti koeficientą (be vieneto), pagal kurį apskaičiuojamas eilutės aukštis pagal teksto laukelio aukštį.

• letter-spacing yra tarpo tarp žodžių raidžių vertė, kuri tipografijoje žinoma kaip kerning o sekti.

• word-spacing reiškia tarpų tarp žodžių matą.

• white-space nustato baltų tarpų elgesį tekste. Kai naudojama reikšmė normal, kuris paimamas pagal numatytuosius nustatymus, sujungia keletą tuščių kode tarpų HTML viename iš pristatymų tinklalapyje (rodomas naršyklėje) ir ima baltus tarpus kaip nuorodą, kad būtų nutraukta eilutė, jei bloke nėra vietos.

  Vertė nowrap Jis taip pat sujungia pasikartojančius tuščius tarpus į vieną, bet neskaido teksto eilučių tuščiose vietose, net jei eilutė netelpa į konteinerį, jei reikia, užpildo erdvę ir, jei reikia, rašo lauke. Norėdami aiškiai padalinti linijas, galite naudoti etiketę <br> de HTML.

  Naudojant pre Tuščios vietos nėra suvienodintos sujungiant jas į vieną, taip pat eilutės nėra padalintos naudojant tarpus kaip nuorodą.

  pre-line sujunkite pasikartojančius ruošinius ir, jei reikia, pertraukite eilutes naudodami ruošinius kaip nuorodą.

  pre-wrap išsaugo pasikartojančius tarpelius ir, jei reikia, pertraukia eilutes naudodama tarpą kaip nuorodą.

Spalva

En CSS spalva gali būti išreikšta pagal RGB spalvų modelis arba pagal HSL spalvos modelis ir abiem atvejais gali būti įtraukta skaidrumo informacija – ketvirtojo kanalo, kuris paprastai vadinamas, reikšmė alfa kanalas o alfa kompozicija, dėl kurio atsiranda RGBA ir HSLA modeliai.

Norėdami išreikšti spalvą formatu RGB naudojant šešioliktainį žymėjimą, naudojama sintaksė #RRGGBB, kai RR yra raudonojo komponento reikšmė (iš esmės naudojant du šešioliktainius skaitmenis), GG yra žalios komponentės vertė, o BB yra mėlynojo komponento reikšmė. Kaip jau minėta, jei kiekvieno komponento du skaitmenys turi tą pačią reikšmę, tai gali būti išreikšta kaip #RGB ribojant vadinamųjų žiniatinklio saugiųjų spalvų skaičių

Be šio spalvos vaizdavimo būdo, labiausiai klasikinis ir naudojamas, jis gali būti išreikštas kaip rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) nurodyti jį formatu RGB, Hsl ir atitinkamas jų formas su skaidrumo nuoroda (alfa kanalas)

Jei nenurodyta kitaip, pridedant vieneto galūnę, RGB modelis naudoja dešimtaines reikšmes nuo 0 iki 255, trims komponentams – reikšmę alfa komponentas yra koeficientas (dešimtainis nuo nulio iki vieneto) ir pirmoji reikšmė HSL spalvos modelis, atspalvis, yra dešimtainė reikšmė, kuri svyruoja nuo 0 iki 360 (be vienetų), reiškianti kampą. Prisotinimo ir šviesumo vertės HSL modelis Paprastai jie išreiškiami procentais.

Kaip jau buvo sakyta, nors jo naudojimas nėra labai dažnas, spalvos gali būti nurodytos pagal jų pavadinimą formate color:black; vietoj color:#000000;. Pirmasis formatas yra lengviau skaitomas, bet apsiriboja trumpa verčių lentele, kurią taip pat sunkiau skaitiniu būdu modifikuoti iš programos, parašytos JavaScript.

Mūsų pasiūlymui grafiškai atvaizduoti duomenis iš jutiklių, prijungtų prie daiktų interneto, mums reikės tik trijų savybių, susijusių su spalva. Jie bus naudojami norint nurodyti teksto pavadinimą, kuris dabar yra paaiškintas, ir nurodyti bet kurio komponento, kuris jį palaiko, pavadinimą.

• color nurodo elemento spalvą HTML ir tai, kas jame yra (kuri ją paveldi), nebent ji būtų aiškiai pakeista priskiriant kitas spalvas atskirai.

• background-color Naudojamas elemento fono spalvai apibrėžti HTML. Be to, kad spalva nurodoma kaip vertė RGB o Hsl galite naudoti specialią vertę transparent kad objektas neturėtų fono spalvos ir būtų galima matyti, kas yra už jo, tai yra, jis neuždengia elementų, ant kurių buvo nupieštas.

• opacity leidžia nustatyti elemento ir viso jo turinio neskaidrumą (netiesiogiai, skaidrumą) (nepainioti su fono skaidrumu). Jei skaidrumas priskiriamas kitiems elementams, kurie patys yra skaidrūs, jis padidės, jis neveiks atskirai. Permatomame objekte esančio objekto negalima padaryti neskaidresnio. Vertė opacity Jis išreiškiamas kaip koeficientas kaip opacity:0.5; nurodyti 50 % neskaidrumą.

  Senesnėse „Microsoft“ naršyklės versijose ši ypatybė nebuvo naudojama, tačiau ji turėjo filter (filtras), kuris, be kitų verčių, galėtų palaikyti alfa (skirta alfa kanalas), kuriai būtų galima priskirti procentinį neskaidrumą opacity pagal 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 */

Priemonės

En CSS, elementų matavimas <div>, kurį pasirinkome sudaryti grafikos konteinerį, yra nustatytas width (plotis) ir height (altas).

tarp turinio <div> ir jo perimetre yra užpildymo sritis, kuri nustatoma reikšme padding. Objekto perimetrą supa kraštas, kurio matavimas nurodytas su nuosavybe border. Objekto išorės atskyrimas <div> iš kitų aplinkinių objektų yra erdvė, kurios matavimą lemia margin.

Įprastomis sąlygomis objekto naudojamos erdvės matavimas <div> gali būti apskaičiuojamas kaip jo pločio arba aukščio ir paminkštinimo suma (padding) plius kraštinė (border) plius marža (margin). Kai nustatomas atitinkamas matavimas yra naudinga vidinė objekto erdvė <div>, ši sudėtis yra labai praktiška, bet jei žinoma, yra bendras matavimas ar galima pakeisti šį elgesį, nustatytas pagal numatytuosius nustatymus, kad bendras pločio ir aukščio matavimas būtų nurodytas width (plotis) ir height (aukštis), atimant iš jo užpildo, kraštinės ir paraštės matmenis, o ne jį pridedant. Norėdami naudoti šį režimą, priskirkite nuosavybė box-sizing vertė border-box (numatytasis yra content-box)

Toliau pateiktoje diagramoje grafiškai pavaizduotos vertės, gautos iš width (plotis) ir height (didelis), jei naudojamas box-sizing:border-box; (iš viso) arbabox-sizing:content-box; (viduje)

Matavimų vertės išreiškiamos jau paaiškintais vienetais. Kalbant apie savybes, apibrėžtas keliomis reikšmėmis, skaičiai, išreikšti skirtingų tipų vidurkiais, gali būti maišomi. Be to, yra keletas specialių verčių, kurios yra svarbios naudojimui, kurį ketiname panaudoti įgyvendindami jutiklių grafikus daiktų internete. Tiksliau, galime naudoti vertę auto nuosavybėje margin kaip išteklius centruoti objektus tam tikromis aplinkybėmis.

Aukščiau pateiktame pavyzdyje klasei „small_box“ apibrėžta 2 pikselių storio kraštinė, nubrėžta juodu brūkšniu (#000000) nuolatinis (solid). „Big_box“ klasėje linija, naudojama kraštinei, yra brūkšninė (dashed) ir raudona spalva (#FF0000). Norėdami išreikšti šias reikšmes atskirai, galime naudoti border-width dėl storio, border-style dėl insulto ir border-color dėl spalvos. Šios briaunų savybės savo ruožtu yra sudėtinės ir sudaromos iš viršutinės, dešinės, apatinės ir kairės pusės, pagal laikrodžio rodyklę, kaip paaiškinta aukščiau.

Dviejų apibrėžtų klasių matmenys yra tokie patys, tačiau pirmoji yra mažesnė, nes naudojant vertę border-box už turtą box-sizing, užpildymas, kraštinė ir paraštė yra nupiešti objekto viduje, o ne aplink turinį, kaip numatyta pagal numatytuosius nustatymus. „Big_box“ klasėje ji nenurodyta, todėl reikšmė paimama pagal numatytuosius nustatymus content-box dėl to užpildas, kraštinė ir paraštė padidėja iki dydžio, nurodyto width y height.

Klasės paraštės reikšmė aukščiau pateiktame pavyzdyje yra 10 pikselių viršuje, dešinėje, apačioje ir kairėje, todėl ją galima išreikšti kaip vieną reikšmę margin:10px;. Labai įdomu žinoti šią alternatyvą norint suprasti trečiųjų šalių sukurtą kodą, nors šiame įgyvendinimo pasiūlyme, kad jis būtų lengviau skaitomas, siūloma nurodyti, pakartoti, reikšmes.

Trys ankstesniame pavyzdyje pateiktos klasės duoda tą patį rezultatą, vadinamojo „lakoniško“ apibrėžimas yra kompaktiškesnis, o mažesnis už vadinamojo „kalbaus“ apibrėžimą, kuris, daugiau nei tam, kad skaitymui būtų aiškumo, yra įprasta forma. naudojami tam tikram daliniam, konkrečiam nuosavybės aspektui modifikuoti, pakartotinai panaudojant kitas reikšmes paveldėjimo būdu (jas suteikia konteineris arba viena iš elementui priskirtų klasių). Jei būtų aktualus serverio apkrovimas dėl papildomo šio būdo apibrėžimo būdo ypatybių ir kitų aplinkybių, kurios, kad kodas būtų lengviau skaitomas, pvz., komentarai, padidintų dydį, taigi ir srautą, būtų galima apdoroti jį (pavyzdžiui) iš PHP kaip kodo generavimo strategijos iš šios kalbos dalis.

Dėžutės modelio matmenys daugiausia įtakoja elementus <div> bet galima priversti tokį elgesį kitiems savybę turintiems elementams display ir vertė block. Norėdami, kad elementas tekėtų kaip tekstas eilutėje, naudokite display:inline; ir elgesys, matavimai ir srautas, gali būti derinami su display:inline-block;

Vertė none nuosavybėje display, naudojamas kaip display:none;, taip pat leidžia paslėpti objektus, kurie padės juos „įjungti“ ir „išjungti“. JavaScript.

Jei elemento matmenys nenurodyti, reikia bet kokių matmenų, kad jo turinys būtų tinkamas (iš tikrųjų tai padaro turinį tinkantį ir nereikia nustatyti matmens). Bet jei matmenys nurodyti, gali atsitikti taip, kad esantys objektai netilps; tokiu atveju nesilaikoma matmenų, jie padidinami, kad būtų matomas visas turinys.

Kad elementai, esantys kitame fiksuotame matavime, būtų apkarpyti, kai viršija dydį, naudojama savybė overflow su verte hidden. su verte scroll, objektai, kurie perpildo konteinerį, taip pat išpjaunami, kaip tai atsitinka hidden bet rodoma slinkties juosta, kurią galima pamatyti ją perkėlus. Vertė auto slinkties juosta rodoma tik tada, kai reikia, atsižvelgiant į turinio dydį.

Taip pat galite nustatyti minimalų dydį, kad talpyklos užimtų tą vietą, net jei turiniui to nereikia, ir neribojant jų matmenų didinti, kai to reikalauja turinys. Savybės, atsakingos už šią užduotį, yra min-width už acho ir min-height už aukštaūgį. Priešinga prasme, max-width nustatyti maksimalų plotį ir max-height maksimalus aukštis, kuris panaikina width jau height.

Elementų srautas tinklalapyje

Stačiakampiai (blokai), kuriuos apibrėžėme elementais <div>, pagal numatytuosius nustatymus jie yra vienas po kito. Norėdami pakeisti šį elgesį, galite naudoti nuosavybę float, nurodant left o right kaip vertę, kad jie tekėtų atitinkamai iš kairės į dešinę arba iš dešinės į kairę. Priešingai, kad vienas objektas „neplauktų“ kito dešinėje ar kairėje pusėje, galite naudotis nuosavybe clear su vertybėmis left, right o both, kurie nepaiso srauto iš kairės į dešinę, iš dešinės į kairę arba abu.

Priešingai nei atsitinka kitomis aplinkybėmis, srautas sukuriamas float automatiškai nekeičia konteinerio matmenų, todėl naudinga įtraukti į jo savybes overflow:auto; priversti keisti konteinerio dydį (aukštį), kai objektas jį perpildo dėl savo padėties float.

Kitas būdas sukonfigūruoti elemento turinio srautą yra padalyti jį į stulpelius su nuosavybe column-count (kuris šiuo metu turėtų būti kartu su -webkit-column-count ir -moz-column-count) Stulpelių dydį galima nurodyti (iš tikrųjų siūloma) su column-width (-webkit-column-width -moz-column-width) ir atskyrimas tarp stulpelių su column-gap (-webkit-column-gap -moz-column-gap)

Kad blokai nebūtų skaidomi ir jų turinys būtų paskirstytas keliuose stulpeliuose, galite naudoti display:inline-block; nors tai tikrai reiškia. palikite dalį stulpelio nepanaudotą.

Padėties

Norėdami nustatyti elementų vietą tinklalapyje, CSS naudoja kelis pozicionavimo režimus, kurie kiekvienam elementui gali skirtis, tai yra, toje pačioje svetainėje galima maišyti skirtingus pozicionavimo kriterijus.

• position:static; Tai numatytasis pozicionavimas (jo nebūtina nurodyti, jei jis anksčiau nebuvo pakeistas). Šis pozicionavimo tipas seka „natūralią“ puslapio eigą: vienas po kito prasidedantys elementai iš kairės, augantys, tol, kol yra vietos, į dešinę ir iš viršaus į apačią. Jo vietai nustatyti nenaudojamos horizontalios ar vertikalios koordinatės, ji vadovaujasi padėtimi, atitinkančia objekto tvarką.

• position:fixed; Jis naudojamas objektui patalpinti į fiksuotą vietą naršyklės lange (pvz., meniu). Elemento vieta nurodoma horizontaliai left o right nustatyti atskyrimą atitinkamai kairėje arba dešinėje ir su top o bottom atskirti virš arba žemiau naršyklės lango krašto (peržiūros srities).

  Naudojant šį ir kitus padėties nustatymo būdus, objektai gali sutapti. Pirmiausia nupiešti objektai (anksčiau apibrėžti kode HTML) gali būti aprėpti vėliau nupieštais (vėliau į kodą įtrauktais). HTML). Norėdami pakeisti įprastą tvarką, galite naudoti nuosavybę z-index, didžiausią vertę turintys objektai z-index Jie apima tuos, kurių vertė mažesnė.

• position:relative; Perkelia elementą iš „įprastos“ padėties, kaip nurodo savybės left o right horizontaliai ir top o bottom vertikaliai.

• position:absolute; Padeda elementą į fiksuotą padėtį objekto, kuriame jis yra, atžvilgiu. Jo vieta išreiškiama, kaip ir ankstesniais atvejais, su left,right, top y bottom

  Šio tipo pozicionavimo pavadinimas iš pradžių glumina, nes padėtis nustatoma objekto atžvilgiu, hierarchiškai pranašesnė už tą, kuris naudoja savybę, o tai ginčytina, ar ji absoliuti.

  Taip pat svarbu atsiminti, kad elementas, kuriame yra objektai <div> kurį naudojame pirmame hierarchiniame lygmenyje <body>, todėl, jei <div> ką jūs naudojate position:absolute; nėra kitame, jo padėtis bus „absoliuti“ tinklalapio atžvilgiu.

Konkrečių laikmenų ir charakteristikų ypatybės (medijos užklausos)

CSS leidžia tame pačiame stiliaus lape apibrėžti skirtingas įvairių laikmenų ar atramų išvaizdas, atsižvelgiant į naudojamo įrenginio tipą (pvz., ekraną ar spausdintuvą), jo matmenis, orientaciją (vertikali arba gulsčia) arba skiriamąją gebą. Tai padeda tam pačiam tinklalapiui pateikti tinkamiausiu kontekstui būdu.

Norėdami kreiptis į žiniasklaidą, naudokite @media panašiai, kaip jau buvo paaiškinta šriftams su @font-face, užsegamas petnešomis ({ y }) skirtingų elementų apibrėžimai: etiketės HTML, klasės, identifikatoriai...

Galimos medijos rūšys CSS3 garsas: all, nurodyti bet kokią laikmeną (visas), screen bet kokio tipo ekranams (senesnėms CSS Jie skyrė televizorių ir kompiuterių monitorius) print spausdintuvo išvestims ir speech garso žiniatinklio skaitytuvams, kurie interpretuoja informaciją balso sintezatoriais.

Aukščiau pateiktame pavyzdyje teksto klasės elementai turi juodą foną ir baltą tekstą ekrane, bet spausdinami baltame fone ir juodu tekstu.

Laikmenai gali būti nustatytos sąlygos, kad būtų galima apibrėžti skirtingus ypatybių rinkinius, remiantis, pavyzdžiui, turima skiriamąja geba arba peržiūros srities santykiu. Šios sąlygos ir pačios priemonės gali būti sudarytos naudojant logines operacijas and, not y only reikalauti, kad laikytųsi kelių, kad nesilaikytų arba tik tada, kai laikosi, atitinkamai.

Tarp galimų sąlygų mums jos atrodo ypač įdomios max-width (didžiausias lango plotis), max-height (didžiausias lango aukštis), min-width (minimalus lango plotis), min-height (minimalus lango aukštis), orientation (orientacija, kuri gali būti landscape, kraštovaizdis arba portrait, vertikaliai), max-resolution (didžiausia skiriamoji geba dpi, taškai colyje arba in dpcm, taškų per centimetrą) ir min-resolution (minimali skiriamoji geba, taip pat in dpi o dpcm).

Ankstesniame pavyzdyje pradedame apibrėždami fono spalvą, kad visose laikmenose main_block klasės elementų fono spalva būtų #CCCCCC. Kai rodoma ekrane ir langas yra bent 320 pikselių pločio, kairioji ir dešinioji paraštė bus automatinė (bloko centre), o elemento plotis bus 300 pikselių. Jei ekrano skiriamoji geba yra 640 pikselių, bloko plotis bus 620 pikselių. Kadangi antrajame laikmenos apibrėžime nėra informacijos apie paraštes, o antrąją sąlygą atitinkantys įrenginiai atitiks ir pirmąją, horizontali paraštė vis tiek bus automatinė.

Galiausiai pavyzdyje fono spalva pakeista taip, kad spaudinyje ji būtų balta.

Įprastas skirtingų laikmenų stilių apibrėžimo būdas yra pradėti nuo įprastų stilių, dažniausiai spalvų ir šriftų, o po to seka labiausiai ribojančios geometrijos (mažiausią pikselių skaičių turinčių įrenginių matavimai), paprastai išmaniesiems telefonams ir planšetiniams kompiuteriams, kur, be to, Bus svarbu žinoti, ar jie naudojami vertikaliai ar horizontaliai orientation ir tikrai taip pat jo rezoliucija su min-resolution. Tada nurodomi skirtingi didesnių ekranų dydžiai ir dažniausiai baigiasi spausdinimu ir balso laikmenomis, kurios daiktų interneto grafikos pavyzdyje buvo praleistos.

Naudokite @media Nustačius tokias sąlygas kaip matmenys, skiriamoji geba ir orientacija, dizaineris gali sukurti vieną tinklalapį, kuris su skirtingais stiliais atrodys tinkamiausias kiekvienam įrenginiui. Toks elgesys paprastai vadinamas reaguojančiu dizainu; pritaikomas dizainas, labai laisvas vertimas.

CSS, skirtas SVG grafikos konteineriui

Atsižvelgiant į tai, kas buvo paaiškinta iki šiol, dabar galima apibrėžti stilius, kuriuos SVG grafikos HTML konteineris su kuriais galima pavaizduoti prie daiktų interneto prijungtų jutiklių būseną. Toliau pateiktame kode yra pasiūlymas, kuriame pateikiamas komentaras, paskirstymas stulpeliuose, atitinkantis didesnį grafikų skaičių nei tie, kurie naudojami straipsnių serijos pasiūlyme, kad jį būtų galima pakartotinai panaudoti kitais atvejais.

Žemiau galite pamatyti, kaip atrodytų šie stiliai. HTML kodas iš siūlomo konteinerio SVG grafikai iš ankstesnio straipsnio.

Kitame šios serijos straipsnyje paaiškinama kaip piešti su SVG Prie daiktų interneto (IoT) prijungtų jutiklių būsenos duomenų diagramos.