Nesnelerin İnterneti'ndeki sensör grafikleri ağının görünümünü CSS ile tanımlayın

Dizinin önceki makalesinde Nesnelerin İnterneti IoT'ye bağlı sensörlerin durum grafikleri nasıl yapılır yolu açıklıyor HTML'de geliştirilmiş bir web sayfasını grafikler için bir yapı olarak kullanmak. Nesneler kullanılarak minimuma indirilen web sayfası öğeleri <div>görünümünü doğrudan tanımlamadılar, bunun yerine stil sayfasına görünüm bilgileri CSSserinin bu bölümünde açıklanacak olan şey budur.

IoT'ye bağlı sensörlerin grafiklerini oluşturmayı önerdiğim çözümde bir belge kullanılıyor CSS belgeden yüklenen HTML. Eğer kod HTML örneğin sunucudaki bir uygulamadan oluşturulacaktır. PHP, onu web sayfasından yüklemek yerine onu tanımlayan kodun bir parçası olarak eklemek çok basit olurdu, bu da bir çağrıyı kaydederek biraz optimize edilebilir. Hangi seçenek seçilirse seçilsin, en uygun yöntem şunları içerir: kodu düzenle CSS daha rahat yönetmek ve yeniden kullanabilmek için ayrı bir belgede. Bu makale serisinin eğitiminde geliştirilen örnekte, buna şu ad verilmiştir: estilo.css.

Aynı şekilde, Karmaşık projelerle uğraşırken, farklı belgelerde birkaç ayrı stil sayfasının kullanılması tavsiye edilecektir.hem belirli işlevleri her seferinde yüklemeye gerek kalmadan yeniden kullanabilmek, hem de kodu karşılık gelen mantıksal yapıya göre farklı belgelere dağıtarak daha kolay düzenleyebilmek.

stiller CSS Bir web sayfasının davranışının ve görünümünün tüm uç noktalarını, hepsi aynı anda geçerli olan çeşitli yaklaşım türleriyle tanımlamaya çalışırken, aynı zamanda önceki sürüm spesifikasyonlarıyla uyumluluğa mümkün olduğunca saygı göstermeye çalışırlar. Bu, aynı ihtiyaçları çözen birçok olası çözümün olduğu anlamına gelir. ve çok sayıda mevcut kaynak (mülkiyet CSS). Makalenin didaktik yaklaşımı nedeniyle ve yeni kullanıcıların kafasını karıştırmamak için CSS, yalnızca özellikler ve nihai amaç için gerekli yapılarNesnelerin İnterneti'ne bağlı sensörlerden gelen verileri grafiksel olarak temsil etmektir. Aynı zamanda bir de var küçük bir giriş CSS, Basamaklı Stil Şablonu.

CSS özelliklerini biçimlendirme

El temel format Bir mülk adı, kolon işareti, özellik değeri ve noktalı virgül işaretinden oluşur. nombre:valor;

CSS Aynı belgede farklı ölçüm birimleri kullanmanızı sağlar yapı ile ilgili olanlar (bir elemanın içerdiği şeylerin ölçümü), piksel gibi temsil edildikleri cihaza göre veya santimetre gibi mutlak olarak yüzdeler olarak dahil. Birimler, aşağıdaki kısaltma kodlamasına göre değerden sonra ifade edilir.

Yapacağımız uygulama için en az üç stil biriminin dikkate alınması önemlidir. Bir öğenin kabının boyutuna göre ölçüm alma yüzdesi, ekranın çözünürlüğüne göre ölçümler için piksel ve basılı raporlar hazırlamak için milimetre (aslında herhangi bir mutlak ölçüm).

Bazı var karmaşık özelliklerveya çeşitli değerlere (renk, boyut, stil gibi) bağlı olan bileşik, değeri belirtmek için CSS'de iki olasılık vardır: tümünü uygun sırayla yazın. boşluklarla ayrılmış değerler veya komplekse eşdeğer basit özelliklerin toplamını kullanın. Örneğin, bir nesnenin dört kenar boşluğunun tümü tek bir özellikte belirtilebilir margin veya özelliklerle ayarlanabilir margin-top, margin-right, margin-bottom y margin-left. Bu arada, bu sıra (saat yönünde), iç (dolgu) veya dış kenar boşluğu, kenarlık gibi bir öğeyi "çevreleyen" değerlerin açıklamalarının takip ettiği sıradır...

Şu ana kadar anlatılanlarla artık bazı özellik örneklerini görebiliriz.

Yukarıdaki örnekte Renk, kırmızı, yeşil ve mavi bileşenin değerini çiftler halinde temsil eden 6 onaltılık basamaktan oluşan bir kod kullanılarak tanımlanır.. Örnekte olduğu gibi iki rakam eşit olduğunda şu şekilde kısaltılabilir: #F09 (bu arada, "web uyumlu renkler" olarak adlandırılan renklere karşılık gelir). Nihai teklifte kriterleri birleştirmek ve daha okunaklı hale getirmek için bu kısaltmaları kullanmaktan kaçınacağım. Ayrıca karmaşık özelliklerin değerlerini de kısaltabilirsiniz. margin örnekte tüm değerler veya zıt çiftler tekrarlandığında. Aynı şekilde, metin kaydetme işleminde, değer sıfır olduğunda bir özelliği belirtirken birimin atlanması da mümkündür, çünkü bu durumda alakasız olur.

Bazı değerlerin sayısal olarak ifade edilebilmesinin yanı sıra bir adı da vardır. bu da kodu daha okunaklı hale getirir ve onları daha iyi hatırlamanızı sağlar. Örneğin, hedefin onaltılık sayısal kodu yerine, #FFFFFF (o #FFF), yazılabilir white aynı sonuçla. Bu sayede siyah renk, #000000 (o #000), değiştirilebilir black.

ayrıca Değerler özel bir kod, bir adla ifade edilir. Örneğin, kenar boşluğunun tarayıcı tarafından otomatik olarak ayarlandığını belirtmek için (normalde merkez işlevine karşılık gelir) özel değer kullanılır. autoherhangi bir değerle sayısal bir karşılığı olmayan.

Daha bir özelliğin bir dizi bileşik (karmaşık) değerini kullanmanın özel bir yolunu ifade eder CSS İşlevlerinkine benzer sözdizimine sahip formatları seçebilirsiniz. Örneğin bir rengi, kırmızı, yeşil ve mavi bileşeninin üç değeri olarak ifade etmek için ( RGB modeli) yazılır color: rgb(128, 255, 64);. Bu anlatım tarzı içerisinde birimlerin kullanılması da mümkündür; Yukarıdaki örnekte, renk bileşenleri 0 ila 255 arasında bir ondalık değerdir ancak bunu her bir renk bileşeninin toplamının yüzdesi olarak ifade etmek daha kolay olabilir; bu durumda şu şekilde de yazılabilir: color: rgb(50%, 100%, 25%);.

CSS'de değerlerin hesaplanması

En son sürümlerinde CSS bunu yapmak mümkün değerleri hesaplamak için basit matematiksel işlemler. Bunu yapmak için şunu kullanın: calc ve gerçekleştirilecek operasyon parantez içinde ifade edilir. Birimleri, parantezleri ve toplam gibi basit operatörleri gösterebilirsiniz (+), çıkarma (-), çarpma işlemi (*) ve bölünme (/). İfade tipte olurdu width:calc((90%-20px)/2));.

Değişkenler matematiksel işlemlerde kullanılabilir. CSS bir mülkün hesaplanmasında diğerinin değerine atıfta bulunulması var. Stilin gerçek bir özelliğine atıfta bulunmaya gerek kalmadan bir değişkeni kullanabilmek için, var olmayan bir özelliğin alıntılanmasına da izin verilir. CSS Biçimi önerir --nombre-variable (icat edilen özelliğin adının önünde iki kısa çizgi). Bu şekilde bir elemanın yüksekliğini genişliğinin yarısı kadar tanımlamak, CSS olarak height:calc(var(width)/2); ve yeni bir "kalınlık" değişkeni (diğer özelliklerin kullanabileceği) tanımlamak için örneğin şunu yazabilirsiniz: --grosor:4px; daha sonra ona şu şekilde atıfta bulunabilmek için margin-top:calc(var(--grosor)*4);

Tarayıcıya Bağlı CSS Özellikleri

CSS Konsorsiyum tarafından standartlaştırılmış bir spesifikasyondur. W3C (World Wide Web Consortium) ama çoğu özellikler veya davranış stilleri, spesifikasyonun parçası olmadan önce tarayıcılara ulaşır bir versiyonunun.

böylece kod CSS bir tarayıcının mevcut özellikleriyle çalışır, ancak Yeni özelliklerle uyumluluğu kaybetmeyin, bir önek kullanılır. Bu önek şunlara bağlıdır: işleme motoru başvurmak istediğiniz web tarayıcısını kullanan (stilin tanımlandığı).

Önek -webkit tabanlı tarayıcılar için çalışır WebKit olarak Safari o krom. Önek -moz Tarayıcılara dayalı olarak kullanılır. işleme motoru de mozillaşu anda GekoGibi Firefox ve türevleri. Başvurmak için EdgeHTML, işleme motoru tarayıcı kenar Microsoft'tan (eskiden Üç dişli mızrak), önek kullanılır -ms. Tarayıcı Örneği Opera kendi kullanmaya başladığından beri biraz özel işleme motoru, ile anılan -o, ancak şu anda şununla çalışıyor: WebKit, ki -webkit.

Bir tarayıcıya atıfta bulunan bir özelliği kullanmak için, adını yazın, önüne ekleyin ve aşağıdaki gibi kısa çizgiyle ayırın. -o-border-radius:10px;tarayıcının eski sürümlerinde yuvarlatılmış bir kenarlık (yuvarlatılmış köşe) ayarlamaya yarar Opera.

Yorumlar

Kodu açıklığa kavuşturmak için CSS Boyutunu büyütme dezavantajına rağmen, onu daha okunabilir hale getirecek yorumları kullanabilirsiniz. Yorumların söz dizimi CSS Çok satırlı yorumlar gibi C + + ki bunu zaten bildiğinize eminim: başlangıç /* ve bitiyor */gibi C + +, birkaç satırı işgal edebilir.

seçiciler

Tanımı Özellikler bir belgedeki nesnelere atanır HTML bunları seçiciler halinde gruplamak ve onları parantez içine alıyor. Bir seçici bir dil öğesine başvuruda bulunabilir HTML (bir etiket) gibi div, bir sınıf (ile atandı class en HTML) bir tanımlayıcı (ile atanmış) id en HTML) veya tümü (“evrensel seçici”) yıldız işaretiyle temsil edilir (*). Aşağıdaki örnekte her türden bir seçici gösterilmektedir:

Etiketler HTML stil tanımında adlarıyla ifade edilirse, sınıflar addan önce bir dönem koyarak işaretlenir (.) ve bir pound işareti (#) tanımlayıcılar için.

Büyük gücün bir parçası CSS içinde yaşıyor Özelliklerini tanımlarken seçicileri gruplandırma olasılığı. Seçicileri gruplandırmanın birkaç yolu vardır. Bunları gruplandırarak, virgülle ayrılarak alıntı yapılan seçicilerin her birinin bu özelliklere sahip olduğu ifade edilir..

Önceki örnek, tüketim, nem ve sıcaklık sınıflarının renk, genişlik ve yüksekliği paylaştığını göstermektedir. Bu kodda yeni bir kavram da tanıtılmıştır: özellikler yeniden tanımlanabilir ve bu durumda en son tanımlananlar geçerli olur. Bu şekilde, sıcaklık sınıfına ait elementler, sonunda onları içeren nesnenin %50'si kadar yüksekliğe sahip olacaktır.

Gruplandırılmış seçiciler virgülle ayrılmamışsa özelliklere uygulanan koşul kümülatiftiryani bir öğenin, tanımladıkları görünümü veya davranışı elde etmesi için tüm seçicileri karşılaması gerekir. Seçiciler etiketlere başvuruyorsa HTML Göründükleri düzen, dahil etme seviyesinde azalan olmalıdır: ilk olarak en yüksek hiyerarşik seviye ve en düşük seviyeli.

Önceki örnekte elemanlar tanımlanmıştır div aynı zamanda sıcaklık sınıfından olan ve hem sıcaklık sınıfına hem de tüketim sınıfına (her ikisi de aynı anda) sahip olan elementler, class="temperatura consumo". Elementler <div> kodun HTML ile class="temperatura" %100'lük bir yüksekliğe sahip olacaklardı

Metni tanımlamak için CSS özellikleri

Metnin görünümünü etkileyen üç tür özellik arasında bir ayrım yapılabilir: (1) Sunulan yazı tipini kuranlar, (2) Değerlendirmenin görünümünü belirleyenler (metnin içeriği) ve (3) genel olanlar, yani hem metnin hem de diğer bileşenlerin görünümünü etkileyenler. Genel olarak, son gruptakileri açıklamak için söylenenler, diğer elementlere uygulanan aynı özellikler için de geçerli olacaktır.

Tipografi (yazı tipi)

• font-family bir öğe için kullanılan yazı tipinin adını belirtir. İstenilen yazı tipinin bulunmaması halinde alternatif olarak kullanılacak yazı tiplerini, tercih sırasına göre ve adları virgülle ayırarak tek bir ad veya liste halinde yazabilirsiniz. Aynı doğrultuda, isimlerle birlikte genel yazı tiplerini kullanmak da mümkündür. monospace, serif, sans-serif, cursive, fantasy. Bu genel yazı tiplerinden en önemlisi (eldeki verilerin sunumu için), adından da anlaşılacağı gibi, sistemde mevcut olan ve tarayıcı tarafından önceden ayarlanmış sabit aralıklı yazı tipini kullanan ilk yazı tipidir. İkinci, serif, mevcut varsayılan olanı kullanacaktır serif (bitirme veya zarafet). Üçüncüsü belirtilirse açık arttırma yapılmadan, sans-serif. Elle çizilmiş yazmayı taklit etmek cursive (açıkça geliştirilebilecek bir adlandırma şekli) ve sistemin dekoratif tipografisi fantasy, beşin sonuncusu.

  Kod gelince CSS Boşlukların ayırıcı olarak özel bir anlamı vardır; yazı tipi ailesinin adı boşluklarla ayrılmış birkaç kelimeden oluştuğunda, karışıklığı önlemek için tırnak işaretleri arasında yazılır.

  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;

  Web tarayıcıları, yerel yazı tiplerinin (üzerinde çalıştıkları sistemde yüklü olanların) yanı sıra özel olarak yüklenen diğer yazı tiplerini, hatta yerel olarak yüklenenlerle örtüşen diğer yazı tiplerini kullanma yeteneğine sahiptir. Bir yazı tipi yüklemek için şunu kullanın: @font-face adını, tanımının indirilme konumunu ve varsa formatının açıklamasını belirterek.

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

  Önceki örnekteki iki tanımdan ilkinde belgenin harfi yüklenmiştir. Sircuito-Genişletilmiş-Light.eot ana (kök) klasörün içindeki EOT klasöründe bulunan ve bir aile adı olarak atanır DevreGenişletilmişIşık. Bu arada, bu yazı tipini beğendin mi? Ücretsizdir, yapabilirsin GranaBot görseli için tasarladığım Sircuito yazı tipini ücretsiz indirin.

  Örnekte görülebileceği gibi, tek tip kaynak bulucu, indirilen yazı tipiyle belgenin konumunu belirtmenize olanak tanır. Eğik çizgi, çağrının yapıldığı belgeyi içeren klasörden veya eğer çağrının yapıldığı kökten başlayarak, farklı klasörlerin adını yazı tipinin yolundan ayırmak için kullanılır. URL Bir barla başlayın.

  İkinci örnek, aynı tanımın birkaç tarayıcı için çalışması için birkaç alternatif belge kullanır (her biri yorumlayabildiği türü yükleyecek)

  Tanımın son satırı özelliği içerir font-smoothing Mektubu yumuşatmak için (bir düzgünleştirme). Standart bir özellik olmadığı için önek kullanılır -webkit.

• font-size aşağıdaki gibi mektubun boyutunu belirtmeye yarar: font-size:12px;

• font-weight Yazı tipi kalınlığını ayarlar. Her zamanki tipografik ağırlıklara göre veya bir adla daha sık olan sayısal bir değer, genellikle 100 ila 100 arasında 900'ün katı olarak ifade edilebilir: normal taban kalınlığı için bold Cesur olan için, bolder genellikle siyah olarak adlandırılan versiyon için, light para cezası için (genellikle ışık olarak adlandırılır) ve lighter en ince için (bazen ince olarak da adlandırılır).

  Yazı tipinin normal versiyonunun sayısal değeri 400 (birimsiz) ve kalın versiyonu için 700'dür.

  Varsayılan olarak başka bir değer belirtilmezse yazı tipinin görünümü şuna karşılık gelir: normal veya 400, eğer genel öğede veya miras aldığı kapsayıcıda değiştirilmemişse, belirtilmesine gerek yoktur. font-weight değeri ile normal.

• font-stretch İlgili ailede mevcut olduğu sürece mektubun genişliğini belirtmek için kullanılır. Mülkün alabileceği olası değerler, en dardan en genişliğe kadar: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. Önceki özellikte kullanılan ölçütlerin aynısıyla varsayılan genişlik şu şekildedir: normal ve tanımlanandan daha yüksek bir hiyerarşik düzende değiştirilmediği sürece bunu açıkça belirtmeye gerek yoktur.

• ile font-style Bir metnin görünümünü etkileyen eğik veya eğik bir harfle mi, yoksa özel bir anlam ifade eden el yazısı harfiyle mi (örneğin yabancı kelimeler) veya yuvarlak harfle mi, yani öncekilerle mi çizildiğini belirtebilirsiniz. veya normal. değer oblique ilk işlevi olan görünüş ve değer işlevini yerine getirir italic ikinci. Her ikisinin de görünüşünün çoğu zaman benzer, hatta aynı olması, bazen kullanımının (anlamının) karıştırılması anlamına gelir, bu nedenle dikkat etmekte fayda var. Diğer mülklerde olduğu gibi, normal önceki değerleri devre dışı bırakmaya yarar.

• text-decoration altını çizmeye yarar (değer ile underline), üst çizgi (değerle birlikte) overline), üzerini çizin (değerle birlikte) line-through) veya flaş (değerle birlikte) blink) bu özelliğin etkilediği metin.

• Tipografi yönü serisini tamamlamak için, her ne kadar uygulamamız için pek alakalı olmasa da, font-variantbaşvurmanıza olanak tanır küçük şapkalar (küçük büyük harfler) metinlere.

Metin

• text-align Tarayıcıya metin bloğunun nasıl hizalanması gerektiğini söyler. Olası hizalamalar, kodla sola (varsayılan olarak kabul edilir) left, değeri ortalayın center, doğru kullanma right ve her iki uçta da haklı justify.

• line-height metin satırları arasındaki ayrımı ayarlar. Bu durumda yüzdeler kullanılırsa %100 değeri kabın ölçüsü yerine metnin yüksekliğine karşılık gelir. Metne göre en çok kullanılan ölçü %120’ye karşılık gelmektedir. %100 çizgi, bir satırın alt kısmının bir sonrakinin üstüne değdiği anlamına gelir. Tipografi tasarımında genellikle bir miktar boşluk bulunmasına rağmen, çizgiler arasında biraz daha fazla kenar boşluğu bırakılması yaygındır.

  Çizgiler arasındaki ayrımı ifade etmek için, metin kutusunun yüksekliğine göre çizginin yüksekliğini hesaplamak için bir katsayı (birimsiz bir değer) belirtmek de mümkündür.

• letter-spacing Tipografide adı geçen kelimelerin harfleri arasındaki boşluğun değeridir. karakter aralığı o izleme.

• word-spacing kelimeler arasındaki boşlukların ölçüsünü temsil eder.

• white-space Beyaz boşlukların davranışını bir metinde ayarlar. Değer kullanıldığında normalVarsayılan olarak alınan, koddaki birkaç boş alanı birleştirir HTML Web sayfasındaki sunumlardan birinde (tarayıcı tarafından görüntülenir) ve blokta boşluk yoksa satırı kesmek için beyaz boşlukları referans olarak alır.

  Değer nowrap Ayrıca, tekrarlanan boş boşlukları bire birleştirir, ancak çizgi kabına sığmasa bile, gerekirse boşluğu taşıyan ve gerekirse dışarıda yazsa bile, boş alanlarda metin satırlarını ayırmaz. Satırları açıkça bölmek için etiketi kullanabilirsiniz <br> de HTML.

  kullanma pre Ne boşluklar bir araya getirilerek birleştirilir, ne de boşluklar referans alınarak çizgiler bölünür.

  pre-line tekrarlanan boşlukları birleştirin ve gerekirse boşlukları referans olarak kullanarak satırları kırın.

  pre-wrap tekrarlanan boşlukları korur ve gerekirse boşlukları referans olarak kullanarak satırları keser.

Renk

En CSS renk buna göre ifade edilebilir RGB renk modeli veya göre HSL renk modeli ve her iki durumda da şeffaflık bilgisi eklenebilir; genellikle adı verilen dördüncü kanalın değeri alfa kanalı o alfa kompozisyonuRGBA ve HSLA modellerine yol açar.

Rengi formatta ifade etmek RGB onaltılı gösterim kullanılarak sözdizimi kullanılır #RRGGBBRR kırmızı bileşenin değeridir (prensipte iki onaltılık basamak kullanılarak), GG yeşil bileşenin değeridir ve BB mavi bileşenin değeridir. Daha önce de söylediğimiz gibi, her bileşenin iki basamağı aynı değere sahipse şu şekilde ifade edilebilir: #RGB sözde web güvenli olanların kullanabileceği renk sayısını sınırlamak

Rengi temsil etmenin en klasik ve en yaygın yolu olan bu şeklinin yanı sıra şu şekilde de ifade edilebilir. rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) formatta belirtmek için RGB, HSL ve bunların şeffaflık göstergesiyle ilgili formları (alfa kanalı)

Birim eki eklenerek aksi istenmedikçe, RGB modeli üç bileşen için 0'dan 255'e kadar ondalık değerleri kullanır; alfa bileşeni bir katsayıdır (sıfırdan bire kadar ondalık sayı) ve HSL renk modeli, renk tonu, bir açıyı temsil eden 0 ila 360 (birimsiz) arasında değişen ondalık bir değerdir. Doygunluk ve parlaklık değerleri HSL modeli Genellikle yüzde olarak ifade edilirler.

Daha önce de söylediğimiz gibi kullanımı çok sık olmasa da formatta renkler isimleriyle belirtilebilmektedir. color:black; yerine color:#000000;. İlk format daha okunabilirdir, ancak yazılı bir uygulamadan sayısal olarak değiştirilmesi daha zor olan kısa bir değer tablosu ile sınırlıdır. JavaScript.

IoT'ye bağlı sensörlerden gelen verilerin grafiksel temsiline yönelik önerimiz için yalnızca renkle ilgili üç özelliğe ihtiyacımız olacak. Hem şimdi açıklanacak olan metnin adını belirtmeye hem de onu destekleyen herhangi bir bileşenin adını göstermeye hizmet edeceklerdir.

• color elementin rengini gösterir HTML ve diğer renkleri ayrı ayrı atayarak açıkça değiştirilmedikçe (miras alan) içerdiği şey.

• background-color Bir öğenin arka plan rengini tanımlamak için kullanılır HTML. Değer olarak rengi belirtmenin yanı sıra RGB o HSL özel değer kullanabilirsiniz transparent nesnenin arka plan renginin olmaması ve arkasında ne bulunduğunu görebilmenin mümkün olması, yani üzerine çizildiği öğeleri kapsamaması.

• opacity Bir elemanın ve tüm içeriğinin opaklığını (dolaylı olarak, şeffaflık) ayarlamanıza olanak tanır (arka planın şeffaflığı ile karıştırılmamalıdır). Kendileri şeffaf olan diğerlerinde bulunan elemanlara şeffaflık atanırsa, bu artar, ayrı ayrı çalışmaz. Şeffaf bir nesnede bulunan bir nesneyi daha opak yapamazsınız. Değeri opacity Aşağıdaki gibi bir katsayı olarak ifade edilir: opacity:0.5; %50 opaklığı belirtmek için.

  Microsoft'un tarayıcısının eski sürümleri bu özelliği kullanmıyordu ancak bu özelliğe sahipti filter (filtre), diğer değerlerin yanı sıra alfayı da destekleyebilir (için) alfa kanalı) bir yüzde opaklığın atanabileceği opacity formata göre:

  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 */

Önlemler

En CSS, öğelerin ölçümü <div>grafik konteyneri oluşturmayı seçtiğimiz, width (genişlik) ve height (yüksek).

içeriği arasındaki <div> ve çevresi değeri ile belirlenen dolgu alanı bulunmaktadır. padding. Nesnenin çevresini çevreleyen, ölçümü mülkle belirtilen kenardır border. Nesnenin dışını ayırmak <div> Çevredeki diğer nesnelerin arasında, ölçümü şu şekilde belirlenen bir alan vardır: margin.

Normal şartlarda nesnenin kullandığı alanın ölçümü <div> genişliği veya yüksekliği artı dolgunun toplamı olarak hesaplanabilir (padding) artı kenarlık (border) artı kenar boşluğu (margin). Belirlenen ilgili ölçüm, nesnenin yararlı iç alanı olduğunda <div>, bu kompozisyon çok pratiktir, ancak biliniyorsa, mevcut toplam ölçümdür bu davranış değiştirilebilir mi, varsayılan olarak ayarlayın, böylece toplam genişlik ve yükseklik ölçümü, width (genişlik) ve height (yükseklik) dolgu, kenarlık ve kenar boşluğu ölçümünü eklemek yerine bundan çıkararak. Bu modu kullanmak için Propiedad box-sizing değer border-box (varsayılan: content-box)

Aşağıdaki şemada sonuçta ortaya çıkan değerler grafiksel olarak gösterilmektedir. width (genişlik) ve height (Yüksek) Kullanıyorsanız box-sizing:border-box; (toplam) veyabox-sizing:content-box; (içeri)

Ölçümlerin değerleri zaten açıklanmış birimlerle ifade edilir. Birkaç değerle tanımlanan özellikler söz konusu olduğunda, farklı ortalamalarla ifade edilen rakamlar karıştırılabilir. Ayrıca, IoT'deki sensör grafiklerinin bu uygulamasında yapacağımız kullanımla ilgili bazı özel değerler vardır. Özellikle, değeri kullanabiliriz auto mülkte margin bazı durumlarda nesneleri ortalamak için bir kaynak olarak.

Yukarıdaki örnekte “small_box” sınıfı için siyah konturla çizilen 2 piksel kalınlığında bir kenarlık tanımlanmıştır (#000000) sürekli (solid). “big_box” sınıfında kenarlık için kullanılan çizgi kesiklidir (dashed) ve kırmızı renk (#FF0000). Bu değerleri ayrı ayrı ifade etmek için şunu kullanabiliriz: border-width kalınlık için, border-style felç için ve border-color renk için. Bu kenar özellikleri de bileşiktir ve yukarıda açıklandığı gibi saat yönünde yönü takip eden üst, sağ, alt ve sol özelliklerden oluşturulur.

Tanımlanan iki sınıf aynı ölçümlere sahiptir ancak ilki daha küçüktür, çünkü değer kullanılırken border-box mülk için box-sizing, dolgu, kenarlık ve kenar boşluğu, varsayılan olarak içeriğin etrafı yerine nesnenin içine çizilir. "Big_box" sınıfında belirtilmediğinden değer varsayılan olarak alınır. content-box bu da dolgu, sınır ve marjın belirtilen boyutta artmasına neden olur width y height.

Yukarıdaki örnekte sınıf kenar boşluğu değeri üstte, sağda, altta ve solda 10 piksel olduğundan tek bir değer olarak ifade edilebilir. margin:10px;. Üçüncü taraflarca geliştirilen kodu anlamak için bu alternatifi bilmek çok ilginçtir, ancak bu uygulama teklifinde daha okunabilir hale getirmek için değerlerin belirtilmesi ve tekrarlanması önerilmektedir.

Önceki örnekteki üç sınıf aynı sonucu üretir; "kısa ve öz" olarak adlandırılan tanımın tanımı daha kısadır ve "konuşkan" olarak adlandırılan tanımın tanımından daha azdır; bu, okumaya netlik kazandırmaktan çok, normal formdur. bir özelliğin bazı kısmi, somut yönlerini değiştirmek, diğer değerleri miras yoluyla yeniden kullanmak için kullanılır (bunlar konteyner tarafından sağlanır veya öğeye atanan sınıflardan biri tarafından sağlanır). Bu şekilde özellikleri tanımlamanın ekstra metninin sunucuya getirdiği yük ve kodun daha okunabilir hale getirilmesi, yorum gibi boyutun ve dolayısıyla trafiğin arttırılması gibi diğer durumlar ilgili olsaydı, aşağıdakileri yapmak mümkün olurdu: onu işleyin (örneğin) PHP bu dilden kod üretme stratejisinin bir parçası olarak.

Kutu modelinin boyutları esas olarak elemanları etkiler <div> Ancak bu davranışı mülkle diğer unsurlara zorlamak mümkündür display ve değer block. Bir öğenin satırdaki metin gibi akmasını sağlamak için şunu kullanın: display:inline; hem davranışlar, ölçümler hem de akış, display:inline-block;

Değer none mülkte display, olarak kullanılır display:none;, ayrıca "onları açmaya" ve onları "kapatmaya" hizmet edecek nesneleri gizlemenize izin verir. JavaScript.

Bir öğenin boyutları belirtilmemişse, içeriğinin uygun olması için gerekli olan boyutları alır (aslında bir boyut oluşturmaya gerek kalmadan içeriği uygun hale getirir). Ancak boyutlar belirtilirse, içerilen nesneler sığmayabilir; böyle bir durumda boyutlara uyulmaz, tüm içeriğin görülebilmesini sağlayacak şekilde büyütülür.

Böylece sabit ölçümlerin bir başkasında yer alan elemanlar boyutu aştıklarında kırpılır, özellik kullanılır overflow değeri ile hidden. değer ile scrolldurumunda olduğu gibi kaptan taşan nesneler de kesilir. hidden ancak hareket ettirirken görülebilecek bir kaydırma çubuğu görüntülenir. Değer auto Kaydırma çubuğunun yalnızca içeriğin boyutuna göre gerektiğinde görünmesini sağlar.

Ayrıca, kapsayıcıların içerik ihtiyaç duymasa bile bu alanı kaplaması ve içerik gerektirdiğinde boyutlarının artmasını sınırlamadan bir minimum boyut da belirleyebilirsiniz. Bu görevden sorumlu olan mülkler şunlardır: min-width acho için ve min-height uzun boylu olan için. Tam tersi anlamda, max-width maksimum genişliği ayarlayın ve max-height iptal eden maksimum yükseklik width ya height.

Web sayfasındaki öğelerin akışı

Öğelerle tanımladığımız dikdörtgenler (bloklar) <div>, varsayılan olarak diğerinin altına yerleştirilirler. Bu davranışı değiştirmek için mülkü kullanabilirsiniz floatbelirten left o right bir değer olarak, sırasıyla soldan sağa veya sağdan sola akacak şekilde. Aksine, bir nesnenin diğerinin sağında veya solunda "süzülmesini" önlemek için bu özelliği kullanabilirsiniz. clear değerlerle left, right o bothakışı soldan sağa, sağa veya her ikisini de geçersiz kılar.

Diğer durumlarda olanın aksine, üretilen akış float kabın boyutlarını otomatik olarak değiştirmez, bu nedenle özelliklerine dahil etmek yararlıdır overflow:auto; konumu nedeniyle bir nesne kabın dışına taştığında kabın boyutunu (yüksekliğini) değiştirmeye zorlamak float.

Bir öğenin içeriğinin akışını yapılandırmanın bir başka yolu, onu özellikli sütunlara bölmektir. column-count (şimdilik buna eşlik etmelidir) -webkit-column-count ve -moz-column-count) Sütunların boyutu şu şekilde belirtilebilir (aslında önerilir). column-width (-webkit-column-width -moz-column-width) ve sütunlar arasındaki ayrım column-gap (-webkit-column-gap -moz-column-gap)

Böylece bloklar bölünmez ve içerikleri birkaç sütun üzerinden dağıtılır, kullanabilirsiniz display:inline-block; Her ne kadar bu kesinlikle ima ediyor olsa da. sütunun bir kısmını kullanılmadan bırakın.

Konumlandırma

Web sayfasındaki öğelerin konumunu belirlemek için CSS, her öğe için farklı olabilen çeşitli konumlandırma modları kullanır; yani, aynı web sitesinde farklı konumlandırma kriterlerini karıştırmak mümkündür.

• position:static; Varsayılan konumlandırmadır (daha önce değiştirilmediyse bunu belirtmek gerekli değildir). Bu tür konumlandırma, sayfanın "doğal" akışını takip eder: bir öğe soldan başlayan, büyüyen, büyüyen bir öğe. Sağda ve yukarıdan aşağıya alan var. Konumunu oluşturmak için yatay veya dikey koordinatlar kullanmaz, nesnenin sırasına karşılık gelen konumu takip eder.

• position:fixed; Bir nesneyi tarayıcı penceresinde sabit bir konuma yerleştirmek için kullanılır (örneğin bir menü gibi). Elemanın konumu yatay olarak belirtilir left o right sırasıyla sol veya sağdaki ayrımı belirlemek için ve top o bottom tarayıcı penceresinin (görüntü alanı) kenarının üstünde veya altında ayırma için.

  Bu ve diğer konumlandırma türlerini kullanarak nesneler üst üste gelebilir. Önce çizilen nesneler (kodda daha önce tanımlanmıştır HTML) daha sonra çizilenlerin (koda daha sonra dahil edilenlerin) kapsamına girebilir HTML). Normal sırayı değiştirmek için bu özelliği kullanabilirsiniz. z-index, en yüksek değere sahip nesneler z-index Daha az değerli olanları kapsarlar.

• position:relative; Öğeyi, özelliklerin gösterdiği şekilde "normal" konumundan taşır left o right yatay olarak ve top o bottom dikey olarak.

• position:absolute; Öğeyi, onu içeren nesneye göre sabit bir konuma yerleştirir. Konumu, önceki durumlarda olduğu gibi, şu şekilde ifade edilir: left,right, top y bottom

  Bu tür konumlandırmanın adı ilk başta kafa karıştırıcıdır, çünkü konum, mülkü kullanan ve mutlak olup olmadığı tartışmalı olan nesneye göre belirlenir.

  Nesneleri içeren öğenin de unutulmaması önemlidir. <div> ilk hiyerarşik seviyede kullandığımız <body>, bu nedenle ise <div> ne kullaniyorsun position:absolute; başka birinde bulunmaz, konumlandırması web sayfasına göre "mutlak" olacaktır.

Belirli ortamlara ve özelliklere ilişkin özellikler (medya sorguları)

CSS kullanılan aygıtın türüne (ekran veya yazıcı gibi), boyutlarına, yönüne (dikey veya yatay) veya çözünürlüğüne bağlı olarak aynı stil sayfasında çeşitli ortamlar veya destekler için farklı görünümler tanımlamanıza olanak tanır. Bu, aynı web sayfasının bağlam için en uygun şekilde görüntülenmesine olanak sağlar.

Medyaya başvurmak için kullanın @media yazı tipleri için daha önce açıklananlara benzer şekilde @font-face, parantez içine alınmış ({ y }) farklı öğelerin tanımları: etiketler HTML, sınıflar, tanımlayıcılar...

Mevcut medya türleri CSS3 ses: all, herhangi bir medyaya (hepsi) başvurmak için, screen her tür ekran için (eski sürümleri) CSS TV ve bilgisayar monitörleri arasında ayrım yaptılar) print yazıcı çıktısı için ve speech bilgileri ses sentezleyicilerle yorumlayan sesli web okuyucuları için.

Yukarıdaki örnekte, metin sınıfının öğeleri ekranda siyah arka plana ve beyaz metne sahiptir ancak beyaz arka plan ve siyah metinle yazdırılır.

Örneğin mevcut çözünürlük veya görüntü alanı oranına dayalı olarak farklı özellik kümelerini tanımlamak için ortama koşullar uygulanabilir. Bu koşullar ve araçların kendisi mantıksal işlemlerle oluşturulabilir. and, not y only sırasıyla birkaçına uymanızı, uymamanızı veya yalnızca uyduğunuzda uymanızı talep etmek.

Mevcut koşullar arasında onları özellikle ilginç buluyoruz max-width (maksimum pencere genişliği), max-height (maksimum pencere yüksekliği), min-width (minimum pencere genişliği), min-height (minimum pencere yüksekliği), orientation (yönelim, şunlar olabilir: landscape, manzara veya portrait, dikey), max-resolution (maksimum çözünürlük dpi, inç başına nokta sayısı veya inç dpcm, santimetre başına nokta) ve min-resolution (minimum çözünürlük, ayrıca dpi o dpcm).

Önceki örnekte, tüm ortamlarda main_block sınıfının öğelerinin #CCCCCC arka plan rengine sahip olmasını sağlayacak şekilde bir arka plan rengi tanımlayarak başlıyoruz. Bir ekranda görüntülendiğinde ve pencere en az 320 piksel genişliğinde olduğunda, sol ve sağ kenar boşluğu otomatik olacak (bloğun ortasında) ve öğe genişliği 300 piksel olacaktır. Ekran çözünürlüğü 640 piksel ise blok genişliği 620 piksel olacaktır. İkinci ortam tanımı kenar boşluğu bilgisini içermediğinden ve ikinci koşulu karşılayan cihazlar da birinciyi karşılayacağından yatay kenar boşluğu yine otomatik olacaktır.

Son olarak, örnekte arka plan rengi, çıktıda beyaz olacak şekilde değiştirilir.

Farklı medyalar için stilleri tanımlamanın genel yolu genellikle genel olanlarla başlamaktır, genellikle renkler ve yazı tipleri, bunu genellikle akıllı telefonlar ve tabletler için en kısıtlayıcı geometriler (en düşük piksel sayısına sahip cihazların ölçümleri) takip eder; Dikey veya yatay olarak mı kullanıldıklarını bilmek önemli olacaktır. orientation ve elbette aynı zamanda çözümü min-resolution. Daha sonra daha büyük ekranlar için farklı boyutlar belirtilir ve genellikle, IoT grafik örneğinde ihmal edilen yazdırma ve ses ortamıyla biter.

Utilizar @media Boyutlar, çözünürlük ve yönlendirme gibi koşulların uygulanması, tasarımcının farklı stillerle her cihaz için en uygun görünecek tek bir web sayfası oluşturmasına olanak tanır. Bu davranışa genellikle duyarlı tasarım adı verilir; Uyarlanabilir tasarım, çok ücretsiz bir çeviri.

SVG grafik kapları için CSS

Şimdiye kadar açıklananlarla, artık stilleri tanımlamak mümkündür. SVG Graphics HTML kapsayıcısı IoT'ye bağlı sensörlerin durumunu temsil edecek. Aşağıdaki kodda, diğer durumlarda yeniden kullanılabilecek şekilde, makale dizisi teklifinin kullandığı grafiklerden daha fazla sayıda grafiğe karşılık gelen sütunlardaki dağılımı içeren, yorumlanmış öneri yer almaktadır.

Aşağıda bu stillerin neye benzeyeceğini görebilirsiniz. SVG grafikleri için önerilen kaptan html kodu önceki makaleden.

Bu serideki bir sonraki makale açıklıyor SVG ile nasıl çizim yapılır Nesnelerin İnterneti'ne (IoT) bağlı sensörlerin durumuna ilişkin veri grafikleri.