Tukuyin gamit ang CSS ang hitsura ng sensor graphics web sa IoT

Sa nakaraang artikulo sa serye sa kung paano gumawa ng mga state graph ng mga sensor na konektado sa Internet of Things IoT nagpapaliwanag ng paraan gumamit ng web page na binuo sa HTML bilang istruktura para sa mga graphics. Ang mga elemento ng web page, na nabawasan sa pinakamababa gamit ang mga bagay <div>, ay hindi direktang tinukoy ang hitsura nito, sa halip, tinukoy nila ang impormasyon sa hitsura sa isang style sheet CSS, na kung ano ang ipapaliwanag sa bahaging ito ng serye.

Sa solusyon na iminungkahi kong gumawa ng mga graph ng mga sensor na konektado sa IoT, isang dokumento ang ginagamit CSS na na-load mula sa dokumento HTML. Kung ang code HTML ay bubuo mula sa isang application sa server, halimbawa sa PHP, napakasimpleng isama ito bilang bahagi ng code na tumutukoy sa web page sa halip na i-load ito mula rito, na maaaring ma-optimize nang kaunti sa pamamagitan ng pag-save ng isang tawag. Alinmang pagpipilian ang pipiliin, kasama ang pinaka-maginhawang paraan i-edit ang code CSS sa isang hiwalay na dokumento upang pamahalaan ito nang mas kumportable at upang magamit itong muli. Sa halimbawang binuo sa tutorial ng seryeng ito ng mga artikulo, binigyan ito ng pangalan estilo.css.

Sa parehong paraan, Kapag nakikitungo sa mga kumplikadong proyekto, ipinapayong gumamit ng ilang magkakahiwalay na style sheet sa iba't ibang mga dokumento, kapwa upang magamit muli ang mga partikular na pag-andar nang hindi kinakailangang i-load ang mga ito sa lahat ng pagkakataon, at upang mas madaling i-edit ang code sa pamamagitan ng pamamahagi nito sa iba't ibang mga dokumento ayon sa kaukulang lohikal na istraktura.

Ang mga istilo CSS Sinusubukan nilang ilarawan ang lahat ng sukdulan ng pag-uugali at hitsura ng isang web page mula sa ilang uri ng mga diskarte, lahat ay sabay-sabay na wasto, habang sinusubukang igalang ang pagiging tugma sa mga detalye ng nakaraang bersyon hangga't maaari. Nangangahulugan ito na maraming posibleng solusyon na lumulutas sa parehong mga pangangailangan. pati na rin ang isang mataas na bilang ng mga magagamit na mapagkukunan (properties CSS). Dahil sa didactic na diskarte ng artikulo at upang hindi malito ang mga bagong gumagamit sa CSS, tanging ang mga ari-arian at ang mga istrukturang kailangan para sa pangwakas na layunin, na graphic na kumakatawan sa data mula sa mga sensor na konektado sa Internet of Things. Kasabay nito, mayroon ding isang maliit na pagpapakilala sa CSS, mga cascading style sheet.

Pag-format ng mga katangian ng CSS

El pangunahing pormat Binubuo ito ng isang pangalan ng property, ang colon sign, ang property value, at ang semicolon sign. nombre:valor;

CSS nagbibigay-daan sa iyo na gumamit ng iba't ibang mga yunit ng pagsukat sa parehong dokumento kabilang ang mga nauugnay sa istraktura (ang pagsukat kung ano ang nilalaman ng isang elemento) bilang mga porsyento, na nauugnay sa device kung saan kinakatawan ang mga ito, tulad ng pixel, o absolute tulad ng mga sentimetro. Ang mga unit ay ipinahayag pagkatapos ng halaga ayon sa sumusunod na abbreviation coding.

Para sa aplikasyon na aming gagawin, mahalagang isaalang-alang ang hindi bababa sa tatlong mga yunit ng istilo. Ang % para sa pagkuha ng mga sukat na nauugnay sa laki ng lalagyan ng isang item, ang pixel para sa mga sukat ayon sa resolution ng screen at ang mga milimetro (sa totoo lang, anumang ganap na pagsukat) para sa paggawa ng mga naka-print na ulat.

May ilan kumplikadong mga katangian, o composite, na nakadepende sa ilang value (gaya ng kulay, laki, istilo...), para ipahiwatig ang value na mayroong dalawang posibilidad sa CSS: isulat, sa naaangkop na pagkakasunud-sunod, lahat ng mga halaga na pinaghihiwalay ng mga puwang o gamitin ang kabuuan ng mga simpleng katangian na katumbas ng complex. Halimbawa, ang lahat ng apat na margin ng isang bagay ay maaaring tukuyin sa iisang property margin o maaaring itakda sa mga katangian margin-top, margin-right, margin-bottom y margin-left. Sa pamamagitan ng paraan, ang order na iyon (clockwise) ay ang sinusundan ng mga paglalarawan ng mga halaga na "palibutan" ng isang elemento tulad ng panloob (padding) o panlabas na margin, ang hangganan...

Sa kung ano ang ipinaliwanag sa ngayon ay makikita natin ngayon ang ilang mga halimbawa ng mga ari-arian

Sa halimbawa sa itaas Tinutukoy ang kulay gamit ang isang code ng 6 na hexadecimal na digit na kumakatawan, sa magkapares, ang halaga ng pula, berde at asul na bahagi. Kapag nangyari, tulad ng sa halimbawa, na ang dalawang digit ay pantay, maaari itong paikliin bilang #F09 (na, sa pamamagitan ng paraan, ay tumutugma sa tinatawag na "web safe na mga kulay"). Sa panghuling panukala, iiwasan kong gamitin ang mga pagdadaglat na ito upang pag-isahin ang pamantayan at gawin itong mas nababasa. Maaari mo ring paikliin ang mga halaga ng mga kumplikadong katangian, tulad ng margin sa halimbawa, kapag ang lahat ng mga halaga o magkasalungat na pares ay paulit-ulit. Kasama ang parehong mga linya ng pag-save ng teksto, posible ring alisin ang unit kapag tinukoy ang isang property kapag ang halaga ay zero, dahil ito ay walang kaugnayan sa kasong iyon.

Ang ilang mga halaga, bilang karagdagan sa kakayahang maipahayag ayon sa numero, ay may pangalan na ginagawang mas nababasa ang code at nagbibigay-daan sa iyong matandaan ang mga ito nang mas mahusay. Halimbawa, sa halip na hexadecimal numeric code ng target, #FFFFFF (o #FFF), maaaring isulat white na may parehong resulta. Sa ganitong paraan, ang kulay itim, #000000 (o #000), maaaring palitan ng black.

Rin mayroong mga halaga ay ipinahayag ng isang espesyal na code, isang pangalan. Halimbawa, upang ipahiwatig na ang side margin ay awtomatikong itinakda ng browser (karaniwan ay tumutugma ito sa center function) ang espesyal na halaga ay ginagamit auto, na walang numerical na sulat na may anumang halaga.

Sa ipahayag ang isang espesyal na paraan ng paggamit ng isang serye ng mga composite (complex) na halaga ng isang ari-arian CSS Maaari kang pumili ng mga format na may syntax na katulad ng sa mga function. Halimbawa, upang ipahayag ang isang kulay bilang ang tatlong halaga ng pula, berde, at asul na bahagi nito (ang modelo ng RGB) ay isusulat color: rgb(128, 255, 64);. Sa loob ng istilong ito ng pagpapahayag posible ring gumamit ng mga yunit; Sa halimbawa sa itaas, ang mga bahagi ng kulay ay isang decimal na halaga mula 0 hanggang 255, ngunit maaaring mas madaling ipahayag ito bilang isang porsyento ng kabuuan ng bawat bahagi ng kulay, kung saan maaari rin itong isulat bilang color: rgb(50%, 100%, 25%);.

Pagkalkula ng mga halaga sa CSS

Sa mga pinakabagong bersyon ng CSS posible itong gawin simpleng mathematical operations para makalkula ang mga value. Upang gawin ito, gamitin calc at ang operasyon na isasagawa ay ipinahayag sa panaklong. Maaari mong ipahiwatig ang mga unit, panaklong at simpleng operator tulad ng sum (+), pagbabawas (-), pagpaparami (*) at dibisyon (/). Ang expression ay magiging sa uri width:calc((90%-20px)/2));.

Maaaring gamitin ang mga variable sa mga pagpapatakbo ng matematika sa CSS tumutukoy sa pagkalkula ng isang ari-arian sa halaga ng isa pang may var. Upang magamit ang isang variable nang hindi kinakailangang sumangguni sa isang aktwal na pag-aari ng estilo, pinapayagan din na banggitin ang isang pag-aari na hindi umiiral. CSS inirerekomenda ang format --nombre-variable (dalawang gitling sa harap ng pangalan ng naimbentong ari-arian). Sa ganitong paraan, upang tukuyin ang taas ng isang elemento bilang kalahati ng lapad nito sa isang expression CSS bilang height:calc(var(width)/2); at upang tukuyin ang isang bagong variable na "kapal" (na maaaring gamitin ng ibang mga katangian) isusulat mo, halimbawa, --grosor:4px; upang matukoy ito sa ibang pagkakataon bilang margin-top:calc(var(--grosor)*4);

Mga Katangian ng CSS na Nakadepende sa Browser

CSS Ito ay isang espesipikasyon na na-standardize ng consortium W3C (World Wide Web Consortium) ngunit marami Ang mga katangian o istilo ng gawi ay umaabot sa mga browser bago maging bahagi ng detalye ng isang bersyon.

upang ang code CSS gumagana sa mga kasalukuyang feature ng isang browser, ngunit huwag mawalan ng pagiging tugma sa mga bagong tampok, isang prefix ang ginagamit. Ang prefix na ito ay nakasalalay sa rendering engine na gumagamit ng web browser na gusto mong sanggunian (kung saan tinukoy ang istilo).

Ang prefix -webkit Gumagana ito para sa mga browser batay sa WebKit bilang ekspedisyon ng pamamaril o kromo. Ang prefix -moz Ito ay ginagamit para sa mga browser batay sa rendering engine de Mozillasa kasalukuyan TukoBilang Firefox at mga derivatives nito. Upang sumangguni sa EdgeHTML, Ang rendering engine browser Gilid mula sa Microsoft (dating salapang), ang prefix ay ginagamit -ms. Ang kaso ng browser Opera ay medyo espesyal dahil nagsimula siyang gumamit ng sarili niya rendering engine, tinutukoy sa -o, ngunit kasalukuyang gumagana sa WebKit, na ipinahayag bilang -webkit.

Upang gumamit ng isang property na tumutukoy sa isang browser, isulat ang pangalan nito, lagyan ng prefix ito at paghiwalayin ito ng isang gitling tulad ng sa -o-border-radius:10px;, na magsisilbing magtakda ng isang bilugan na hangganan (isang bilugan na sulok) sa mga mas lumang bersyon ng browser Opera.

Komento

Upang linawin ang code CSS Maaari kang gumamit ng mga komento, na gagawing mas madaling mabasa kahit na may kawalan ng pagtaas ng laki nito. Ang syntax ng mga komento sa CSS Parang multiline comments C + + na sigurado akong alam mo na: simula sa /* at nagtatapos sa */, tulad ng sa C + +, maaaring sakupin ang ilang linya.

Mga pipili

Ang kahulugan ng ang mga katangian ay itinalaga sa mga bagay sa isang dokumento HTML pagpapangkat sa kanila sa mga tagapili at isinasara ang mga ito sa mga braces. Ang isang tagapili ay maaaring sumangguni sa isang elemento ng wika HTML (isang label), tulad ng div, isang klase (na itinalaga kasama ang class en HTML) isang identifier (na itinalaga kasama ng id en HTML) o lahat (ang “universal selector”) na kinakatawan ng asterisk (*). Ang sumusunod na halimbawa ay nagpapakita ng isang tagapili ng bawat uri:

Ang mga label ng HTML ay ipinahayag sa kahulugan ng estilo kasama ang kanilang pangalan, ang mga klase ay minarkahan sa pamamagitan ng paglalagay ng tuldok bago ang pangalan (.) at isang pound sign (#) para sa mga identifier.

Bahagi ng dakilang kapangyarihan ng CSS naninirahan sa posibilidad ng pagpapangkat ng mga tagapili kapag tinutukoy ang kanilang mga katangian. Mayroong ilang mga paraan upang pagpangkatin ang mga pumipili. Sa pamamagitan ng pagpapangkat sa kanila, sa paghihiwalay ng mga ito sa pamamagitan ng mga kuwit, ipinapahayag na ang bawat isa sa mga binanggit na tagapili ay may mga katangiang iyon.

Ang nakaraang halimbawa ay nagpapahiwatig na ang mga klase ng pagkonsumo, halumigmig at temperatura ay nagbabahagi ng kulay, lapad at taas. Ang isang bagong konsepto ay ipinakilala din sa code na ito: ang mga pag-aari ay maaaring muling tukuyin, at sa kasong iyon ang mga pinakahuling inilarawan ay mananaig. Sa ganitong paraan, ang mga elemento ng klase ng temperatura ay sa wakas ay magkakaroon ng taas na 50% ng bagay na naglalaman ng mga ito.

Kung ang mga nakagrupong tagapili ay hindi pinaghihiwalay ng mga kuwit, ang kundisyong ipinataw sa mga katangian ay pinagsama-sama, ibig sabihin, dapat masiyahan ng isang elemento ang lahat ng mga pumipili para makuha nito ang hitsura o gawi na kanilang tinukoy. Kung ang mga pumipili ay tumutukoy sa mga tag HTML Ang pagkakasunud-sunod ng paglitaw ng mga ito ay dapat na pababa sa antas ng pagsasama: una ang pinakamataas na hierarchical na antas at huli ang pinakamababa.

Sa nakaraang halimbawa ang mga elemento ay tinukoy div na kabilang din sa klase ng temperatura at sa mga elemento na may parehong klase ng temperatura at klase ng pagkonsumo (parehong sabay) tulad ng sa class="temperatura consumo". Ang mga elemento <div> Ng code HTML sa class="temperatura" magkakaroon sila ng mataas na 100%

Mga katangian ng CSS upang tukuyin ang teksto

Maaaring gumawa ng pagkakaiba sa pagitan ng tatlong uri ng mga katangian na nakakaapekto sa hitsura ng teksto: (1) yaong nagtatatag ng font kung saan ito ipinakita, (2) yaong tumutukoy sa hitsura ng literal (ang nilalaman ng teksto) at (3) mga generic, iyon ay, ang mga nakakaapekto sa parehong hitsura ng teksto at ng iba pang mga bahagi. Sa pangkalahatan, kung ano ang sinabi upang ipaliwanag ang mga nasa huling grupo ay malalapat din sa parehong mga katangian na inilapat sa iba pang mga elemento.

Typography (font)

• font-family ay nagpapahiwatig ng pangalan ng font na ginamit para sa isang elemento. Maaari kang magsulat ng isang pangalan o isang listahan, sa pagkakasunud-sunod ng kagustuhan at paghihiwalay ng mga pangalan sa pamamagitan ng mga kuwit, ng mga font na gagamitin bilang kahalili kung ang nais ay hindi umiiral. Sa parehong linya, posibleng gumamit ng mga generic na font na may mga pangalan monospace, serif, sans-serif, cursive, fantasy. Sa mga generic na font na ito, ang pinakamahalaga (para sa presentasyon ng data sa kamay) ay ang una na, gaya ng iminumungkahi ng pangalan nito, ay gagamit ng fixed spacing font na available sa system at na-preset ng browser. Ang ikalawa, serif, gagamitin nito ang default na available serif (pagtatapos o biyaya). Nang walang auction kung ang pangatlo ay ipinahiwatig, sans-serif. Ginagaya ang iginuhit ng kamay na pagsulat gamit ang cursive (isang paraan ng pagtawag dito na malinaw na mapapabuti) at ang pandekorasyon na typography ng system na may fantasy, ang huli sa lima.

  Tulad ng para sa code CSS Ang mga espasyo ay may espesyal na kahulugan bilang isang separator; kapag ang pangalan ng font family ay binubuo ng ilang mga salita na pinaghihiwalay ng mga puwang, ito ay isinusulat sa pagitan ng mga panipi upang maiwasan ang pagkalito.

  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;

  Ang mga web browser ay may kakayahang gumamit ng mga lokal na font (mga naka-install sa system kung saan sila nagpapatakbo) pati na rin ang iba na partikular na na-load, kahit na nagsasapawan sa mga naka-install nang lokal. Upang mag-load ng font, gamitin @font-face na nagpapahiwatig ng pangalan nito, ang lokasyon ng pag-download ng kahulugan nito at, kung naaangkop, isang paglalarawan ng format nito.

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

  Sa una sa dalawang kahulugan sa nakaraang halimbawa, ang titik ng dokumento ay na-load Sircuito-Expanded-Light.eot na matatagpuan sa EOT folder sa loob ng pangunahing (ugat) na folder at itinalaga bilang isang pangalan ng pamilya CircuitExpandedLight. By the way, gusto mo ba ang font na ito? Ito ay libre, maaari mo i-download nang libre ang Sircuito font na idinisenyo ko para sa imahe ng GranaBot.

  Tulad ng makikita sa halimbawa, ang url property, na tumutugma sa pare-parehong tagahanap ng mapagkukunan, ay nagbibigay-daan sa iyong tukuyin ang lokasyon ng dokumento gamit ang font na na-download. Ang slash ay ginagamit upang paghiwalayin ang pangalan ng iba't ibang mga folder mula sa landas patungo sa font, simula sa isa na naglalaman ng dokumento kung saan ginawa ang tawag o mula sa ugat kung ang URL Magsimula sa isang bar.

  Ang pangalawang halimbawa ay gumagamit ng ilang alternatibong dokumento upang ang parehong kahulugan ay gumagana para sa ilang mga browser (bawat isa ay maglo-load ng uri na kaya nitong bigyang-kahulugan)

  Kasama sa huling linya ng kahulugan ang property font-smoothing upang mapahina ang titik (ilapat ang a antialiasing). Dahil hindi ito isang karaniwang pag-aari, ang prefix ay ginagamit -webkit.

• font-size nagsisilbing ipahiwatig ang laki ng titik tulad ng sa font-size:12px;

• font-weight Itinatakda ang kapal ng font. Maaari itong ipahayag bilang isang numerical na halaga, karaniwang isang multiple ng 100 sa pagitan ng 100 at 900, ayon sa karaniwang mga typographical na timbang, o mas madalas na may pangalan: normal para sa kapal ng base, bold para sa matapang, bolder para sa bersyon na karaniwang tinatawag na itim, light para sa multa (karaniwang tinatawag na liwanag) at lighter para sa pinakapayat (minsan tinatawag na manipis).

  Ang numerical value ng normal na bersyon ng font ay 400 (unitless) at 700 para sa bold na bersyon.

  Bilang default, kung walang ibang value ang ipinahiwatig, ang hitsura ng font ang tumutugma sa normal o 400 kaya, kung hindi ito binago sa generic na elemento o sa lalagyan, kung saan ito namamana, hindi kinakailangang ipahiwatig font-weight sa tapang normal.

• font-stretch Ito ay ginagamit upang ipahiwatig ang lapad ng liham, hangga't ito ay magagamit sa kaukulang pamilya. Ang mga posibleng halaga na maaaring kunin ng ari-arian, na inayos mula sa pinakamaliit hanggang sa pinakamalawak, ay: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. Gamit ang parehong pamantayan na ginamit sa nakaraang property, ang default na lapad ay normal at hindi kinakailangang hayagang ipahiwatig ito maliban kung binago ito sa mas mataas na hierarchical order kaysa sa tinukoy.

• may font-style Maaari mong ipahiwatig kung ang isang teksto ay iginuhit gamit ang isang slanted o pahilig na titik, na nakakaapekto sa hitsura nito, o may isang cursive na titik, na nagpapahayag ng isang espesyal na kahulugan (mga dayuhang salita, halimbawa), o bilog na titik, iyon ay, alinman sa mga nauna. o normal. ang halaga oblique tinutupad ang unang tungkulin, ang hitsura at halaga italic ang ikalawa. Ang katotohanan na ang hitsura ng pareho ay madalas na magkatulad o kahit na pareho ay nangangahulugan na ang paggamit (ang kahulugan) ay minsan nalilito, kaya ito ay nagkakahalaga ng pagbibigay pansin. Tulad ng ibang mga ari-arian, normal nagsisilbing i-deactivate ang mga naunang halaga.

• text-decoration nagsisilbing salungguhit (na may halaga underline), overline (na may value overline), ekis (na may halaga line-through) o flash (na may halaga blink) ang text na naaapektuhan ng property na ito.

• Upang makumpleto ang serye ng aspeto ng palalimbagan, bagaman para sa aming aplikasyon ito ay hindi masyadong nauugnay, font-variant, pinapayagan kang mag-apply maliit na takip (maliit na malalaking titik) sa mga teksto.

Teksto

• text-align nagsasabi sa browser kung paano dapat ihanay ang block ng text. Ang mga posibleng pagkakahanay ay nasa kaliwa (na itinuturing bilang default) kasama ang code left, center na may value center, tamang gamit right at makatwiran sa magkabilang dulo na may justify.

• line-height nagtatakda ng paghihiwalay sa pagitan ng mga linya ng teksto. Sa kasong ito, kung ang mga porsyento ay ginagamit, ang halaga ng 100% ay tumutugma sa taas ng teksto sa halip na ang sukat ng lalagyan. Ang pinaka ginagamit na sukat na may kaugnayan sa teksto ay tumutugma sa 120%. Ang isang 100% na linya ay nangangahulugan na ang ibaba ng isang linya ay dumadampi sa tuktok ng susunod. Bagama't karaniwang may kasamang espasyo ang disenyo ng typography, karaniwan nang mag-iwan ng kaunti pang margin sa pagitan ng mga linya.

  Upang ipahayag ang paghihiwalay sa pagitan ng mga linya, posible ring magpahiwatig ng koepisyent (isang walang yunit na halaga) kung saan makalkula ang taas ng linya batay sa taas ng kahon ng teksto.

• letter-spacing ay ang halaga ng espasyo sa pagitan ng mga titik ng mga salita, na sa palalimbagan ay kilala bilang kerning o pagsubaybay.

• word-spacing kumakatawan sa sukat ng mga puwang sa pagitan ng mga salita.

• white-space nagtatakda ng gawi ng mga puting espasyo sa isang text. Kapag ginamit ang halaga normal, na kinukuha bilang default, ay sumasali sa ilang blangkong puwang sa code HTML sa isa sa mga presentasyon sa web page (ipinapakita ng browser) at kinukuha ang mga puting espasyo bilang sanggunian upang masira ang isang linya kung walang puwang sa block.

  Ang halaga nowrap Pinagsasama rin nito ang mga paulit-ulit na blangkong puwang sa isa ngunit hindi hinahati ang mga linya ng teksto sa mga blangkong puwang kahit na ang linya ay hindi magkasya sa lalagyan, umaapaw sa espasyo kung kinakailangan at sumulat sa labas kung kinakailangan. Upang hayagang hatiin ang mga linya maaari mong gamitin ang label <br> de HTML.

  Paggamit pre Ni ang mga blangkong puwang ay hindi pinag-isa sa pamamagitan ng pagsasama sa kanila sa isa, ni ang mga linya ay nahahati gamit ang mga puwang bilang isang sanggunian.

  pre-line samahan ang mga paulit-ulit na blangko at putulin ang mga linya kung kinakailangan gamit ang mga blangko bilang sanggunian.

  pre-wrap pinapanatili ang paulit-ulit na whitespace at pinuputol ang mga linya kung kinakailangan gamit ang whitespace bilang reference.

kulay

En CSS maaaring ipahayag ang kulay ayon sa Modelo ng kulay ng RGB o ayon sa Modelo ng kulay ng HSL at sa parehong mga kaso ay maaaring isama ang transparency information, ang halaga ng ikaapat na channel na karaniwang tinatawag alpha channel o komposisyon ng alpha, na nagbibigay ng mga modelong RGBA at HSLA.

Upang ipahayag ang kulay sa format RGB gamit ang hexadecimal notation ang syntax ay ginagamit #RRGGBB, na ang RR ang value ng pulang component (sa prinsipyo, gamit ang dalawang hexadecimal digit), GG ang value ng green component at BB ang value ng blue component. Tulad ng nasabi na, kung ang dalawang digit ng bawat bahagi ay may parehong halaga maaari itong ipahayag bilang #RGB nililimitahan ang bilang ng mga kulay na magagamit sa tinatawag na mga ligtas sa web

Bilang karagdagan sa ganitong paraan ng kumakatawan sa kulay, ang pinaka-klasikong at ginagamit, maaari itong ipahayag bilang rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) upang ipahiwatig ito sa format RGB, HSL at ang kani-kanilang mga anyo na may indikasyon ng transparency (alpha channel)

Maliban kung hiniling sa pamamagitan ng pagdaragdag ng unit suffix, ang modelo ng RGB gumagamit ng mga decimal na halaga mula 0 hanggang 255, para sa tatlong bahagi, ang halaga ng sangkap ng alpha ay isang koepisyent (decimal mula sa zero hanggang isa) at ang unang halaga ng Modelo ng kulay ng HSL, ang hue, ay isang decimal na value na mula 0 hanggang 360 (walang mga unit) na kumakatawan sa isang anggulo. Ang mga halaga ng saturation at luminosity ng HSL model Karaniwang ipinapahayag ang mga ito bilang mga porsyento.

Tulad ng nasabi na, kahit na ang paggamit nito ay hindi masyadong madalas, ang mga kulay ay maaaring ipahiwatig ng kanilang pangalan sa format color:black; sa halip ng color:#000000;. Ang unang format ay mas nababasa ngunit limitado sa isang maikling talahanayan ng mga halaga na mas mahirap ding baguhin ayon sa numero mula sa isang application na nakasulat sa JavaScript.

Para sa aming panukala para sa graphical na representasyon ng data mula sa mga sensor na konektado sa IoT, kakailanganin lang namin ng tatlong katangian na nauugnay sa kulay. Sila ay magsisilbing parehong upang ipahiwatig ang pangalan ng teksto, na ngayon ay ipinaliwanag, at upang ipahiwatig ang pangalan ng anumang bahagi na sumusuporta dito.

• color ay nagpapahiwatig ng kulay ng elemento HTML at kung ano ang nilalaman nito (na nagmamana nito) maliban kung ito ay malinaw na binago sa pamamagitan ng pagtatalaga ng iba pang mga kulay nang paisa-isa.

• background-color Ginagamit upang tukuyin ang kulay ng background ng isang elemento HTML. Bilang karagdagan sa pagpahiwatig ng kulay bilang isang halaga RGB o HSL maaari kang gumamit ng espesyal na halaga transparent upang gawin ang bagay na walang kulay ng background at posible na makita kung ano ang matatagpuan sa likod nito, iyon ay, hindi nito saklaw ang mga elemento kung saan ito iginuhit.

• opacity ay nagbibigay-daan sa iyo upang itakda ang opacity (hindi direkta, transparency) ng isang elemento at lahat ng nilalaman nito (hindi malito sa transparency ng background). Kung ang transparency ay itinalaga sa mga elementong nakapaloob sa iba na sila mismo ay transparent, ito ay tataas, hindi ito gagana nang hiwalay. Hindi mo maaaring gawing mas malabo ang isang bagay na nasa isang transparent na bagay. Ang halaga ng opacity Ito ay ipinahayag bilang isang koepisyent tulad ng opacity:0.5; upang ipahiwatig ang 50% opacity.

  Hindi ginamit ng mga lumang bersyon ng browser ng Microsoft ang property na ito, ngunit mayroon silang property filter (filter) na, bukod sa iba pang mga halaga, ay maaaring suportahan ang alpha (para sa alpha channel) kung saan maaaring magtalaga ng porsyento ng opacity opacity ayon sa 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 */

Panukala

En CSS, ang pagsukat ng mga elemento <div>, na pinili naming bumuo ng lalagyan ng graphics, ay nakatakda sa width (lapad) at height (mataas).

sa pagitan ng nilalaman ng <div> at ang perimeter nito ay mayroong lugar na pagpuno na tinutukoy sa halaga ng padding. Ang nakapalibot sa perimeter ng bagay ay ang gilid na ang pagsukat ay tinukoy kasama ang ari-arian border. Paghihiwalay sa panlabas ng bagay <div> ng iba pang nakapalibot na mga bagay ay may espasyo na ang sukat ay tinutukoy ng margin.

Sa ilalim ng normal na mga kondisyon, ang pagsukat ng espasyo na ginagamit ng bagay <div> maaaring kalkulahin bilang kabuuan ng lapad o taas nito kasama ang padding (padding) plus hangganan (border) plus margin (margin). Kapag ang nauugnay na pagsukat na itinatag ay ang kapaki-pakinabang na espasyo sa loob ng bagay <div>, ang komposisyon na ito ay napakapraktikal, ngunit kung ang alam ay ang kabuuang sukat na magagamit mababago ba ang ugali na ito, itinakda bilang default, upang ang kabuuang sukat ng lapad at taas ay ang ipinahiwatig ng width (lapad) at height (taas) sa pamamagitan ng pagbabawas ng sukat ng padding, border at margin mula dito, sa halip na idagdag ito. Upang gamitin ang mode na ito, italaga ang pagmamay-ari box-sizing ang halaga border-box (Ang default ay content-box)

Ang sumusunod na diagram ay nagpapakita ng graphic na paraan ng mga halaga na nagreresulta mula sa width (lapad) at height (mataas) kung gumagamit box-sizing:border-box; (ang kabuuan) obox-sizing:content-box; (sa loob)

Ang mga halaga ng mga sukat ay ipinahayag sa mga yunit na naipaliwanag na. Pagdating sa mga pag-aari na tinukoy ng ilang mga halaga, ang mga figure na ipinahayag sa iba't ibang uri ng mga average ay maaaring ihalo. Bilang karagdagan, mayroong ilang mga espesyal na halaga na nauugnay sa paggamit na gagawin namin sa pagpapatupad na ito ng mga sensor graph sa IoT. Sa partikular, maaari naming gamitin ang halaga auto sa ari-arian margin bilang isang mapagkukunan upang isentro ang mga bagay sa ilang mga pangyayari.

Sa halimbawa sa itaas, para sa klase na "small_box" isang 2 pixel ang kapal na hangganan ay tinukoy, na iginuhit gamit ang isang itim na stroke (#000000) tuloy-tuloy (solid). Sa klase ng "big_box" ang linyang ginamit para sa hangganan ay putol-putol (dashed) at ang kulay pula (#FF0000). Upang ipahayag ang mga halagang ito nang hiwalay maaari naming gamitin border-width para sa kapal, border-style para sa stroke at border-color para sa kulay. Ang mga katangian ng gilid na ito ay pinagsama-sama at nabuo sa pamamagitan ng itaas, kanan, ibaba at kaliwang mga tampok, na sumusunod sa direksyon ng orasan tulad ng ipinaliwanag sa itaas.

Ang dalawang klase na tinukoy ay may parehong mga sukat, ngunit ang una ay mas maliit dahil, kapag ginagamit ang halaga border-box para sa ari-arian box-sizing, padding, border, at margin ay iginuhit sa loob ng bagay sa halip na sa paligid ng nilalaman, gaya ng default. Sa klase na "big_box" hindi ito ipinahiwatig, kaya ang halaga ay kinuha bilang default content-box na nagiging sanhi ng pagtaas ng padding, border at margin sa laki na ipinahiwatig ng width y height.

Ang value ng margin ng klase sa halimbawa sa itaas ay 10 pixels sa itaas, kanan, ibaba at kaliwa, para maipahayag ito bilang isang value margin:10px;. Napaka-interesante na malaman ang alternatibong ito upang maunawaan ang code na binuo ng mga ikatlong partido bagaman, sa panukalang pagpapatupad na ito, upang gawin itong mas nababasa, iminumungkahi na ipahiwatig, paulit-ulit, ang mga halaga.

Ang tatlong klase sa nakaraang halimbawa ay gumagawa ng parehong resulta, ang kahulugan ng tinatawag na "laconic" ay mas siksik at mas mababa kaysa sa tinatawag na "loquacious" na, higit pa sa pagdaragdag ng kalinawan ng pagbasa, ay ang karaniwang anyo. ginagamit upang baguhin ang ilang bahagyang, kongkretong aspeto ng isang ari-arian, muling paggamit ng iba pang mga halaga sa pamamagitan ng mana (ibinibigay sila ng lalagyan o ibinigay ng isa sa mga klase na itinalaga sa elemento). Kung ang pag-load na ipinataw sa server sa pamamagitan ng dagdag na teksto ng ganitong paraan ng pagtukoy sa mga katangian at iba pang mga pangyayari na, upang gawing mas nababasa ang code, tulad ng mga komento, dagdagan ang laki at samakatuwid ang trapiko, ay may kaugnayan, magiging posible na iproseso ito (halimbawa halimbawa) mula sa PHP bilang bahagi ng diskarte sa pagbuo ng code mula sa wikang ito.

Ang mga sukat ng modelo ng kahon ay pangunahing nakakaapekto sa mga elemento <div> ngunit posibleng pilitin ang pag-uugaling ito sa ibang mga elemento na may ari-arian display at ang halaga block. Upang gawing daloy ang isang elemento tulad ng teksto sa isang linya, gamitin display:inline; at ang parehong mga pag-uugali, mga sukat at daloy, ay maaaring pagsamahin sa display:inline-block;

Ang halaga none sa ari-arian display, ginamit bilang display:none;, ay nagpapahintulot din sa iyo na itago ang mga bagay, na magsisilbing "i-on" at "i-off" ang mga ito mula sa JavaScript.

Kung hindi tinukoy ang mga dimensyon ng isang elemento, kinakailangan ang anumang dimensyon na kinakailangan para maging akma ang nilalaman nito (sa totoo lang, ginagawa nitong magkasya ang nilalaman nang hindi kinakailangang magtatag ng dimensyon). Ngunit kung ang mga sukat ay ipinahiwatig, maaaring mangyari na ang mga nakapaloob na bagay ay hindi magkasya; sa ganoong kaso, ang mga sukat ay hindi iginagalang, sila ay dinadagdagan upang payagan ang lahat ng nilalaman na makita.

Upang ang mga elemento na nakapaloob sa isa pang nakapirming mga sukat ay na-crop kapag lumampas sila sa laki, ang ari-arian ay ginagamit overflow sa tapang hidden. kasama ang halaga scroll, ang mga bagay na umaapaw sa lalagyan ay pinuputol din, gaya ng nangyayari sa hidden ngunit may ipinapakitang scroll bar na makikita kapag ginagalaw ito. Ang halaga auto pinapalabas lamang ang scroll bar kapag kinakailangan batay sa laki ng nilalaman.

Maaari ka ring magtatag ng pinakamababang sukat upang ang mga lalagyan ay sumakop sa espasyong iyon kahit na hindi ito kailangan ng nilalaman at nang hindi nililimitahan ang kanilang mga sukat na tumaas kapag hinihingi ito ng nilalaman. Ang mga ari-arian na namamahala sa gawaing ito ay min-width para sa acho at min-height para sa matangkad. Sa kabaligtaran na kahulugan, max-width magtakda ng maximum na lapad at max-height isang maximum na taas na nakakakansela width na height.

Daloy ng mga elemento sa web page

Ang mga parihaba (mga bloke) na tinukoy namin sa mga elemento <div>, ang mga ito ay inilalagay ang isa sa ilalim ng isa bilang default. Para baguhin ang gawi na ito maaari mong gamitin ang property float, na nagpapahiwatig left o right bilang isang halaga, upang dumaloy ang mga ito mula kaliwa hanggang kanan o mula kanan pakaliwa ayon sa pagkakabanggit. Sa kabaligtaran, upang maiwasan ang isang bagay na "lumulutang" sa kanan o kaliwa ng isa pa, maaari mong gamitin ang ari-arian clear na may mga halaga left, right o both, na nag-o-override sa daloy mula kaliwa pakanan, kanan papuntang kaliwa, o pareho.

Taliwas sa kung ano ang nangyayari sa ibang mga pangyayari, ang daloy na ginawa float ay hindi awtomatikong binabago ang mga sukat ng lalagyan, kaya kapaki-pakinabang na isama sa mga katangian nito overflow:auto; upang piliting baguhin ang laki (taas) ng lalagyan kapag umapaw ang isang bagay dahil sa lokasyon nito float.

Ang isa pang paraan para i-configure ang daloy ng content ng isang elemento ay hatiin ito sa mga column na may property column-count (na sa sandaling ito ay dapat na sinamahan ng -webkit-column-count at -moz-column-count) Ang laki ng mga column ay maaaring ipahiwatig (aktwal na iminungkahi) gamit ang column-width (-webkit-column-width -moz-column-width) at ang paghihiwalay sa pagitan ng mga column na may column-gap (-webkit-column-gap -moz-column-gap)

Upang ang mga bloke ay hindi nahahati at ang kanilang nilalaman ay ibinahagi sa ilang mga haligi, maaari mong gamitin display:inline-block; bagaman iyon ay tiyak na nagpapahiwatig. mag-iwan ng bahagi ng column na hindi nagamit.

Positioning

Upang maitatag ang lokasyon ng mga elemento sa web page, gumagamit ang CSS ng ilang mga mode ng pagpoposisyon na maaaring magkaiba para sa bawat elemento, iyon ay, posibleng paghaluin ang iba't ibang pamantayan sa pagpoposisyon sa parehong website.

• position:static; Ito ang default na pagpoposisyon (hindi kinakailangang ipahiwatig ito kung hindi pa ito nabago dati). Ang ganitong uri ng pagpoposisyon ay sumusunod sa "natural" na daloy ng pahina: sunud-sunod na elemento simula sa kaliwa, lumalaki, hangga't may espasyo, sa kanan at mula sa itaas hanggang sa ibaba. Hindi ito gumagamit ng pahalang o patayong mga coordinate upang maitatag ang lokasyon nito, sinusunod nito ang posisyon na tumutugma sa pagkakasunud-sunod ng bagay.

• position:fixed; Ito ay ginagamit upang ilagay ang isang bagay sa isang nakapirming posisyon sa window ng browser (tulad ng isang menu, halimbawa). Ang lokasyon ng elemento ay tinukoy nang pahalang na may left o right upang matukoy ang paghihiwalay sa kaliwa o kanan ayon sa pagkakabanggit at may top o bottom para sa paghihiwalay sa itaas o ibaba ng gilid ng browser window (viewport).

  Gamit ito at iba pang uri ng pagpoposisyon, maaaring mag-overlap ang mga bagay. Mga bagay na unang iginuhit (tinukoy nang mas maaga sa code HTML) ay maaaring saklawin ng mga iginuhit sa ibang pagkakataon (mga kasama sa bandang huli sa code HTML). Upang baguhin ang normal na pagkakasunud-sunod maaari mong gamitin ang property z-index, ang mga bagay na may pinakamataas na halaga sa z-index Sinasaklaw nila ang mga may mababang halaga.

• position:relative; Inililipat ang elemento mula sa "normal" nitong posisyon tulad ng ipinahiwatig ng mga katangian left o right pahalang at top o bottom patayo

• position:absolute; Inilalagay ang elemento sa isang nakapirming posisyon na may paggalang sa bagay na naglalaman nito. Ang lokasyon nito ay ipinahayag, tulad ng sa mga nakaraang kaso, na may left,right, top y bottom

  Ang pangalan ng ganitong uri ng pagpoposisyon ay nakalilito sa una, dahil ang posisyon ay itinatag na may paggalang sa bagay na hierarchically superior sa isa na gumagamit ng ari-arian, na kung saan ay debatable kung ito ay ganap.

  Mahalaga rin na tandaan na ang elemento na naglalaman ng mga bagay <div> na ginagamit natin sa unang hierarchical level ay <body>, samakatuwid, kung ang <div> ano ang ginagamit mo position:absolute; ay hindi nakapaloob sa isa pa, ang pagpoposisyon nito ay magiging "ganap" na may paggalang sa web page.

Mga katangian para sa partikular na media at mga katangian (mga query sa media)

CSS nagbibigay-daan sa iyong tukuyin sa parehong style sheet ang iba't ibang hitsura para sa iba't ibang media o suporta depende sa uri ng device na ginamit (gaya ng screen, o printer), mga dimensyon nito, oryentasyon nito (vertical o landscape) o resolution nito. Nagsisilbi itong maipakita, sa pinakaangkop na paraan para sa isang konteksto, ang parehong web page.

Upang sumangguni sa media, gamitin @media sa katulad na paraan sa kung ano ang naipaliwanag na para sa mga font na may @font-face, nakapaloob sa mga braces ({ y }) ang mga kahulugan ng iba't ibang elemento: mga label HTML, mga klase, mga identifier...

Ang mga uri ng media na magagamit sa CSS3 tunog: all, upang sumangguni sa anumang media (lahat), screen para sa anumang uri ng screen (mga lumang bersyon ng CSS Nakikilala nila ang pagitan ng mga monitor ng TV at computer) print para sa output ng printer at speech para sa mga audio web reader na nagbibigay-kahulugan sa impormasyon gamit ang mga voice synthesizer.

Sa halimbawa sa itaas, ang mga elemento ng klase ng teksto ay may itim na background at puting teksto sa screen ngunit naka-print na may puting background at itim na teksto.

Maaaring magpataw ng mga kundisyon sa media upang tukuyin ang iba't ibang hanay ng mga katangian batay sa, halimbawa, ang available na resolution o viewport ratio. Ang mga kundisyong ito at ang mga paraan mismo ay maaaring binubuo ng mga lohikal na operasyon and, not y only upang hilingin na sumunod ka sa ilan, na hindi ka sumunod o kapag sumunod ka lamang, ayon sa pagkakabanggit.

Kabilang sa mga magagamit na kondisyon, nakita namin ang mga ito lalo na kawili-wili max-width (maximum na lapad ng window), max-height (maximum na taas ng bintana), min-width (minimum na lapad ng window), min-height (minimum na taas ng bintana), orientation (ang oryentasyon, na maaaring landscape, landscape, o portrait, patayo), max-resolution (maximum na resolution sa dpi, mga tuldok sa bawat pulgada, o sa dpcm, puntos kada sentimetro) at min-resolution (minimum na resolution, din sa dpi o dpcm).

Sa nakaraang halimbawa, magsisimula tayo sa pamamagitan ng pagtukoy ng kulay ng background upang, sa lahat ng media, ang mga elemento ng main_block na klase ay may kulay ng background na #CCCCCC. Kapag ipinakita sa isang screen at ang window ay hindi bababa sa 320 pixels ang lapad, ang kaliwa at kanang margin ay magiging awtomatiko (gitna ang block) at ang lapad ng elemento ay magiging 300 pixels. Kung ang resolution ng screen ay 640 pixels, ang block width ay magiging 620 pixels. Dahil ang pangalawang kahulugan ng media ay hindi kasama ang impormasyon sa margin at ang mga device na nakakatugon sa pangalawang kundisyon ay makakatugon din sa una, ang pahalang na margin ay magiging awtomatiko pa rin.

Sa wakas, sa halimbawa ang kulay ng background ay binago upang ito ay puti sa printout.

Ang karaniwang paraan ng pagtukoy ng mga istilo para sa iba't ibang media ay karaniwang nagsisimula sa mga karaniwan, kadalasang mga kulay at mga font, na sinusundan ng mga pinaka-mahigpit na geometries (ang mga sukat ng mga device na may pinakamababang bilang ng mga pixel) na karaniwan ay para sa mga smartphone at tablet kung saan, bilang karagdagan Mahalagang malaman kung ginagamit ang mga ito nang patayo o pahalang orientation at tiyak din ang resolusyon nito sa min-resolution. Pagkatapos ay ipinahiwatig ang iba't ibang laki para sa mas malalaking screen, at karaniwan itong nagtatapos sa pag-print at voice media, na sa halimbawa ng IoT graphics ay tinanggal.

Gamitin @media Ang pagpapataw ng mga kundisyon gaya ng mga dimensyon, resolution at oryentasyon ay nagbibigay-daan sa taga-disenyo na lumikha ng isang web page na, na may iba't ibang mga estilo, ay magiging pinakaangkop para sa bawat device. Ang pag-uugaling ito ay karaniwang tinatawag na tumutugon na disenyo; naaangkop na disenyo, sa isang napaka-libreng pagsasalin.

CSS para sa SVG graphics container

Sa kung ano ang ipinaliwanag sa ngayon, posible na ngayong tukuyin ang mga estilo na ang SVG graphics HTML container kung saan kinakatawan ang estado ng mga sensor na konektado sa IoT. Sa sumusunod na code ay ang panukalang kasama, nagkomento, ang pamamahagi sa mga column na tumutugma sa mas malaking bilang ng mga graph kaysa sa mga ginagamit ng panukala ng serye ng mga artikulo, upang ito ay magamit muli sa ibang mga kaso.

Sa ibaba makikita mo kung ano ang magiging hitsura ng mga istilong ito. HTML code mula sa iminungkahing container para sa SVG graphics mula sa nakaraang artikulo.

Ang susunod na artikulo sa seryeng ito ay nagpapaliwanag paano gumuhit gamit ang SVG Mga data graph ng status ng mga sensor na nakakonekta sa Internet of Things (IoT).