Tentukan dengan CSS tampilan web grafis sensor di IoT

Pada artikel sebelumnya di seri tentang cara membuat grafik keadaan sensor yang terhubung ke Internet of Things IoT menjelaskan jalannya menggunakan halaman web yang dikembangkan dalam HTML sebagai struktur grafik. Elemen halaman web, yang telah direduksi seminimal mungkin menggunakan objek <div>, tidak secara langsung mendefinisikan tampilannya, melainkan merujuk pada informasi penampilan ke style sheet CSS, itulah yang akan dijelaskan di bagian seri ini.

Dalam solusi yang saya usulkan untuk membuat grafik sensor yang terhubung ke IoT, sebuah dokumen digunakan CSS yang diambil dari dokumen HTML. Jika kodenya HTML akan dihasilkan dari aplikasi di server, misalnya di PHP, akan sangat mudah untuk memasukkannya sebagai bagian dari kode yang mendefinisikan halaman web alih-alih memuatnya dari sana, yang dapat sedikit dioptimalkan dengan menyimpan panggilan. Opsi mana pun yang dipilih, termasuk metode yang paling nyaman mengedit kode CSS dalam dokumen terpisah untuk mengelolanya dengan lebih nyaman dan dapat digunakan kembali. Dalam contoh yang dikembangkan dalam tutorial rangkaian artikel ini, telah diberi nama estilo.css.

Di jalan yang sama, Saat menangani proyek yang kompleks, disarankan untuk menggunakan beberapa style sheet terpisah dalam dokumen berbeda, baik untuk dapat menggunakan kembali fungsi tertentu tanpa harus memuat semuanya setiap saat, dan untuk mengedit kode lebih mudah dengan mendistribusikannya ke dalam dokumen berbeda sesuai dengan struktur logis yang sesuai.

Gaya-gayanya CSS Mereka mencoba mendeskripsikan semua perilaku dan tampilan halaman web yang ekstrem dari beberapa jenis pendekatan, semuanya valid secara bersamaan, sambil berusaha menghormati kompatibilitas dengan spesifikasi versi sebelumnya sebanyak mungkin. Artinya ada banyak kemungkinan solusi yang memecahkan kebutuhan yang sama. serta sejumlah besar sumber daya yang tersedia (properti CSS). Karena pendekatan didaktik artikel dan agar tidak membingungkan pengguna baru CSS, hanya properti dan struktur yang diperlukan untuk tujuan akhir, yaitu merepresentasikan data secara grafis dari sensor yang terhubung ke Internet of Things. Pada saat yang sama, ada juga a perkenalan kecil untuk CSS, lembar gaya berjenjang.

Memformat properti CSS

El format dasar Terdiri dari nama properti, tanda titik dua, nilai properti, dan tanda titik koma. nombre:valor;

CSS memungkinkan Anda menggunakan satuan pengukuran berbeda dalam dokumen yang sama termasuk yang terkait dengan struktur (pengukuran kandungan suatu elemen) dalam bentuk persentase, relatif terhadap perangkat yang mewakilinya, seperti piksel, atau absolut seperti sentimeter. Satuan dinyatakan setelah nilai sesuai dengan kode singkatan berikut.

Untuk penerapan yang akan kita lakukan, penting untuk mempertimbangkan setidaknya tiga unit gaya. % untuk melakukan pengukuran relatif terhadap ukuran wadah suatu item, piksel untuk pengukuran berdasarkan resolusi layar, dan milimeter (sebenarnya, pengukuran absolut apa pun) untuk membuat laporan tercetak.

Ada beberapa sifat kompleks, atau gabungan, yang bergantung pada beberapa nilai (seperti warna, ukuran, gaya...), untuk menunjukkan nilai ada dua kemungkinan dalam CSS: tulis, dalam urutan yang sesuai, semua nilai yang dipisahkan spasi atau menggunakan jumlah sifat sederhana yang setara dengan sifat kompleks. Misalnya, keempat margin suatu objek dapat ditentukan dalam satu properti margin atau dapat diatur dengan properti margin-top, margin-right, margin-bottom y margin-left. Omong-omong, urutan itu (searah jarum jam) adalah yang diikuti dengan deskripsi nilai yang "mengelilingi" elemen seperti margin dalam (padding) atau margin luar, batas...

Dengan apa yang telah dijelaskan selama ini kita sekarang dapat melihat beberapa contoh properti

Pada contoh di atas Warna ditentukan menggunakan kode 6 digit heksadesimal yang mewakili, secara berpasangan, nilai komponen merah, hijau, dan biru.. Bila ternyata, seperti pada contoh, kedua angkanya sama, maka dapat disingkat menjadi #F09 (yang, omong-omong, sesuai dengan apa yang disebut "warna aman web"). Dalam proposal akhir saya akan menghindari penggunaan singkatan-singkatan ini untuk menyatukan kriteria dan membuatnya lebih mudah dibaca. Anda juga dapat menyingkat nilai properti kompleks, seperti margin dalam contoh, ketika semua nilai atau pasangan berlawanan diulang. Sejalan dengan penyimpanan teks, unit juga dapat dihilangkan saat menentukan properti ketika nilainya nol, karena unit tersebut tidak relevan dalam kasus tersebut.

Beberapa nilai, selain dapat dinyatakan secara numerik, juga mempunyai nama yang membuat kode lebih mudah dibaca dan memungkinkan Anda mengingatnya dengan lebih baik. Misalnya, alih-alih menggunakan kode numerik heksadesimal target, #FFFFFF (o #FFF), dapat ditulis white dengan hasil yang sama. Dengan cara ini, warna hitam, #000000 (o #000), dapat digantikan oleh black.

juga di sana nilai dinyatakan dengan kode khusus, sebuah nama. Misalnya, untuk menunjukkan bahwa margin samping diatur secara otomatis oleh browser (biasanya akan sesuai dengan fungsi tengah) nilai khusus digunakan auto, yang tidak memiliki korespondensi numerik dengan nilai apa pun.

untuk menyatakan cara khusus menggunakan serangkaian nilai gabungan (kompleks) suatu properti CSS Anda dapat memilih format dengan sintaks yang mirip dengan fungsinya. Misalnya, untuk menyatakan suatu warna sebagai tiga nilai komponen merah, hijau, dan biru (the model RGBnya) akan ditulis color: rgb(128, 255, 64);. Dalam gaya ekspresi ini juga dimungkinkan untuk menggunakan satuan; Pada contoh di atas, komponen warna adalah nilai desimal dari 0 hingga 255, namun mungkin lebih mudah untuk menyatakannya sebagai persentase dari total setiap komponen warna, dalam hal ini dapat juga ditulis sebagai color: rgb(50%, 100%, 25%);.

Menghitung nilai dalam CSS

Dalam versi terbaru dari CSS itu mungkin untuk dilakukan operasi matematika sederhana untuk menghitung nilai. Untuk melakukan ini, gunakan calc dan operasi yang akan dilakukan dinyatakan dalam tanda kurung. Anda dapat menunjukkan satuan, tanda kurung, dan operator sederhana seperti jumlah (+), pengurangan (-), perkalian (*) dan pembagian (/). Ekspresinya akan menjadi tipe seperti itu width:calc((90%-20px)/2));.

Variabel dapat digunakan dalam operasi matematika di CSS merujuk dalam perhitungan satu properti dengan nilai properti lain dengan var. Agar dapat menggunakan variabel tanpa perlu mengacu pada properti gaya yang sebenarnya, diperbolehkan juga mengutip properti yang tidak ada. CSS merekomendasikan formatnya --nombre-variable (dua tanda hubung di depan nama properti yang ditemukan). Dengan cara ini, untuk mendefinisikan tinggi suatu elemen sebagai setengah lebarnya, gunakan ekspresi in CSS sebagai height:calc(var(width)/2); dan untuk mendefinisikan variabel baru "ketebalan" (yang dapat digunakan oleh properti lain), Anda akan menulis, misalnya, --grosor:4px; untuk nanti bisa menyebutnya sebagai margin-top:calc(var(--grosor)*4);

Properti CSS yang Bergantung pada Browser

CSS Ini adalah spesifikasi yang distandarisasi oleh konsorsium W3C (World Wide Web Consortium) Tapi banyak properti atau gaya perilaku mencapai browser sebelum menjadi bagian dari spesifikasi dari sebuah versi.

jadi itu kodenya CSS berfungsi dengan fitur browser terkini, namun jangan kehilangan kompatibilitas dengan fitur baru, awalan digunakan. Awalan ini bergantung pada mesin rendering yang menggunakan browser web yang ingin Anda referensikan (yang gayanya ditentukan).

Awalan -webkit Ini berfungsi untuk browser berdasarkan WebKit sebagai Safari o Chrome. Awalan -moz Ini digunakan untuk browser berdasarkan mesin rendering de Mozilla, saat ini TokekSebagai Firefox dan turunannya. Untuk merujuk ke EdgeHTML, The mesin rendering Browser Tepi dari Microsoft (sebelumnya Trisula), awalan digunakan -ms. Kasus browser Opera agak istimewa sejak dia mulai menggunakan miliknya sendiri mesin rendering, disebut dengan -o, tetapi saat ini berfungsi dengan WebKit, yang dinyatakan sebagai -webkit.

Untuk menggunakan properti yang mengacu pada browser, tuliskan namanya, beri awalan, dan pisahkan dengan tanda hubung seperti pada -o-border-radius:10px;, yang berfungsi untuk menyetel batas membulat (sudut membulat) di browser versi lama Opera.

Komentar

Untuk memperjelas kode CSS Anda dapat menggunakan komentar, yang akan membuatnya lebih mudah dibaca meskipun dengan kerugian memperbesar ukurannya. Sintaks komentar di CSS Ini seperti komentar multiline C + + yang saya yakin Anda sudah tahu: mulai dari /* dan diakhiri dengan */, Seperti dalam C + +, dapat menempati beberapa baris.

pemilih

Definisi dari properti ditugaskan ke objek dalam dokumen HTML mengelompokkannya dalam penyeleksi dan melampirkannya dalam kawat gigi. Pemilih dapat mereferensikan elemen bahasa HTML (label), seperti div, sebuah kelas (ditugaskan dengan class en HTML) pengidentifikasi (ditugaskan dengan id en HTML) atau semua (“pemilih universal”) yang diwakili oleh tanda bintang (*). Contoh berikut memperlihatkan pemilih dari setiap jenis:

Label dari HTML dinyatakan dalam definisi gaya dengan namanya, kelas ditandai dengan memberi titik sebelum nama (.) dan tanda pagar (#) untuk pengidentifikasi.

Bagian dari kekuatan besar CSS tinggal di kemungkinan mengelompokkan penyeleksi saat menentukan propertinya. Ada beberapa cara untuk mengelompokkan penyeleksi. Dengan mengelompokkannya, memisahkannya dengan koma, dinyatakan bahwa masing-masing penyeleksi yang dikutip memiliki properti tersebut.

Contoh sebelumnya menunjukkan bahwa kelas konsumsi, kelembapan, dan suhu berbagi warna, lebar, dan tinggi. Konsep baru juga diperkenalkan dalam kode ini: properti dapat didefinisikan ulang, dan dalam hal ini properti yang paling baru dijelaskan akan berlaku. Dengan cara ini, elemen kelas suhu pada akhirnya akan memiliki tinggi 50% dari benda yang memuatnya.

Jika penyeleksi yang dikelompokkan tidak dipisahkan dengan koma, kondisi yang dikenakan pada properti bersifat kumulatif, artinya, suatu elemen harus memuaskan semua penyeleksi agar elemen tersebut memperoleh tampilan atau perilaku yang ditentukannya. Jika penyeleksi mengacu pada tag HTML Urutan kemunculannya harus menurun berdasarkan tingkat inklusi: pertama tingkat hierarki tertinggi dan terakhir tingkat terendah.

Dalam contoh sebelumnya, elemen didefinisikan div yang juga termasuk dalam kelas suhu dan elemen-elemen yang mempunyai kelas suhu dan kelas konsumsi (keduanya pada waktu yang sama) seperti pada class="temperatura consumo". Elemen-elemen <div> Dari kode HTML dengan class="temperatura" mereka akan memiliki tinggi 100%

Properti CSS untuk mendefinisikan teks

Kita dapat membedakan tiga jenis properti yang memengaruhi tampilan teks: (1) properti yang menentukan font penyajiannya, (2) properti yang menentukan tampilan literal (isi teks). dan (3) yang bersifat umum, yaitu yang mempengaruhi baik tampilan teks maupun komponen lainnya. Secara umum, apa yang dikatakan untuk menjelaskan sifat-sifat golongan terakhir juga berlaku pada sifat-sifat yang sama yang diterapkan pada unsur-unsur lain.

Tipografi (font)

• font-family menunjukkan nama font yang digunakan untuk suatu elemen. Anda dapat menulis satu nama atau daftar, sesuai urutan preferensi dan memisahkan nama dengan koma, dari font yang akan digunakan sebagai alternatif jika yang diinginkan tidak ada. Sejalan dengan itu, dimungkinkan untuk menggunakan font umum dengan nama monospace, serif, sans-serif, cursive, fantasy. Dari font-font umum ini, yang paling penting (untuk penyajian data yang ada) adalah yang pertama, seperti namanya, akan menggunakan font dengan spasi tetap yang tersedia di sistem dan telah diatur sebelumnya oleh browser. Kedua, serif, itu akan menggunakan yang default yang tersedia serif (penyelesaian atau rahmat). Tanpa lelang jika yang ketiga diindikasikan, sans-serif. Meniru tulisan tangan yang digambar dengan cursive (cara menyebutnya yang jelas dapat ditingkatkan) dan tipografi dekoratif sistem dengan fantasy, yang terakhir dari lima.

  Adapun kodenya CSS Spasi mempunyai arti khusus sebagai pemisah, bila nama keluarga font terdiri dari beberapa kata yang dipisahkan spasi, maka ditulis di antara tanda kutip untuk menghindari kebingungan.

  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;

  Browser web mampu menggunakan font lokal (yang diinstal pada sistem tempat mereka beroperasi) serta font lain yang dimuat secara khusus, bahkan tumpang tindih dengan font yang diinstal secara lokal. Untuk memuat font, gunakan @font-face menunjukkan namanya, lokasi pengunduhan definisinya dan, jika ada, deskripsi formatnya.

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

  Dalam definisi pertama dari dua definisi pada contoh sebelumnya, huruf dokumen dimuat Sircuito-Expanded-Light.eot yang terletak di folder EOT di dalam folder utama (root) dan ditetapkan sebagai nama keluarga SirkuitExpandedLight. Ngomong-ngomong, apakah kamu suka font ini? Gratis, Anda bisa download gratis font Sircuito yang saya desain untuk gambar GranaBot.

  Seperti dapat dilihat pada contoh, properti url, yang sesuai dengan pencari sumber daya yang seragam, memungkinkan Anda menentukan lokasi dokumen dengan font yang diunduh. Garis miring digunakan untuk memisahkan nama folder yang berbeda dari jalur ke font, dimulai dengan folder yang berisi dokumen tempat panggilan dilakukan atau dari root jika URL Mulailah dengan sebuah bar.

  Contoh kedua menggunakan beberapa dokumen alternatif sehingga definisi yang sama berfungsi untuk beberapa browser (masing-masing browser akan memuat tipe yang mampu diinterpretasikannya)

  Baris terakhir dari definisi tersebut mencakup properti font-smoothing untuk melunakkan huruf (terapkan a anti alias). Karena ini bukan properti standar, awalan digunakan -webkit.

• font-size berfungsi untuk menunjukkan besar kecilnya huruf seperti pada font-size:12px;

• font-weight Mengatur ketebalan font. Hal ini dapat dinyatakan sebagai nilai numerik, biasanya kelipatan 100 antara 100 dan 900, sesuai dengan bobot tipografi biasa, atau lebih sering dengan nama: normal untuk ketebalan dasar, bold untuk menegaskan, bolder untuk versi biasa disebut hitam, light untuk denda (biasa disebut ringan) dan lighter untuk yang paling tipis (kadang disebut tipis).

  Nilai numerik font versi normal adalah 400 (tanpa unit) dan 700 untuk huruf tebal.

  Secara default, jika tidak ada nilai lain yang ditunjukkan, tampilan font akan sesuai dengan itu normal atau 400 jadi, jika belum diubah dalam elemen generik atau dalam wadah yang diwarisinya, tidak perlu dicantumkan font-weight dengan nilai normal.

• font-stretch Digunakan untuk menunjukkan lebar surat, asalkan tersedia di keluarga yang bersangkutan. Kemungkinan nilai yang dapat diambil suatu properti, diurutkan dari yang tersempit hingga terluas, adalah: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. Dengan kriteria yang sama yang digunakan pada properti sebelumnya, lebar defaultnya adalah normal dan tidak perlu untuk menunjukkannya secara tegas kecuali telah diubah dalam urutan hierarki yang lebih tinggi daripada yang didefinisikan.

• dengan font-style Anda dapat menunjukkan apakah suatu teks digambar dengan huruf miring atau miring, yang mempengaruhi tampilannya, atau dengan huruf kursif, yang mengungkapkan arti khusus (kata-kata asing, misalnya), atau huruf bulat, bukan huruf sebelumnya. atau biasa saja. nilai oblique memenuhi fungsi pertama, yaitu penampilan dan nilai italic kedua. Kemunculan keduanya seringkali mirip atau bahkan sama, sehingga penggunaan (maknanya) terkadang rancu sehingga patut diwaspadai. Seperti properti lainnya, normal berfungsi untuk menonaktifkan nilai sebelumnya.

• text-decoration berfungsi untuk menggarisbawahi (dengan nilai underline), overline (dengan nilai overline), coret (dengan nilai line-through) atau flash (dengan nilainya blink) teks yang dipengaruhi oleh properti ini.

• Untuk melengkapi rangkaian aspek tipografi, meskipun untuk aplikasi kita tidak terlalu relevan, font-variant, memungkinkan Anda untuk melamar topi kecil (huruf kapital kecil) pada teks.

Teks

• text-align memberi tahu browser bagaimana blok teks harus disejajarkan. Kemungkinan perataan berada di sebelah kiri (yang dianggap secara default) dengan kode left, pusatkan dengan nilainya center, benar menggunakan right dan dibenarkan di kedua ujungnya dengan justify.

• line-height mengatur pemisahan antar baris teks. Dalam hal ini, jika persentase digunakan, nilai 100% sesuai dengan tinggi teks, bukan ukuran wadah. Ukuran yang paling banyak digunakan relatif terhadap teks adalah 120%. Garis 100% berarti bagian bawah satu garis menyentuh bagian atas garis berikutnya. Meskipun desain tipografi biasanya menyertakan beberapa ruang, biasanya ada lebih banyak margin di antara garis.

  Untuk menyatakan jarak antar garis, dimungkinkan juga untuk menunjukkan koefisien (nilai tanpa satuan) yang dapat digunakan untuk menghitung tinggi garis berdasarkan tinggi kotak teks.

• letter-spacing adalah nilai spasi antar huruf pada kata, yang dalam tipografi disebut kerning o pelacakan.

• word-spacing mewakili ukuran spasi antar kata.

• white-space mengatur perilaku spasi putih dalam teks. Ketika nilai tersebut digunakan normal, yang diambil secara default, menggabungkan beberapa spasi kosong dalam kode HTML di salah satu presentasi di halaman web (ditampilkan oleh browser) dan mengambil spasi putih sebagai referensi untuk memutus garis jika tidak ada spasi di blok tersebut.

  Nilainya nowrap Ini juga menggabungkan spasi kosong yang berulang menjadi satu tetapi tidak membagi baris teks di spasi kosong meskipun baris tersebut tidak muat di dalam wadah, memenuhi spasi jika perlu dan menulis di luar jika perlu. Untuk membagi garis secara tegas, Anda dapat menggunakan label <br> de HTML.

  Menggunakan pre Ruang-ruang kosong juga tidak disatukan dengan menggabungkannya menjadi satu, dan garis-garis pun tidak dipisahkan dengan menggunakan spasi sebagai acuan.

  pre-line gabungkan bagian yang kosong dan putuskan garis jika perlu dengan menggunakan bagian yang kosong sebagai referensi.

  pre-wrap mempertahankan spasi berulang dan memutus garis jika perlu menggunakan spasi putih sebagai referensi.

Warna

En CSS warna dapat dinyatakan menurut Model warna RGB atau menurut Model warna HSL dan dalam kedua kasus transparansi informasi dapat dimasukkan, nilai saluran keempat yang biasa disebut kanal alfa o komposisi alfa, yang memunculkan model RGBA dan HSLA.

Untuk mengekspresikan warna dalam format RGB menggunakan notasi heksadesimal sintaks yang digunakan #RRGGBB, dengan RR sebagai nilai komponen merah (pada prinsipnya menggunakan dua digit heksadesimal), GG sebagai nilai komponen hijau, dan BB sebagai nilai komponen biru. Seperti yang sudah dikatakan, jika dua digit masing-masing komponen mempunyai nilai yang sama maka dapat dinyatakan sebagai #RGB membatasi jumlah warna yang tersedia untuk apa yang disebut warna web aman

Selain cara merepresentasikan warna, yang paling klasik dan digunakan, dapat dinyatakan sebagai rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) untuk menunjukkannya dalam format RGB, HSL dan bentuknya masing-masing yang menunjukkan transparansi (kanal alfa)

Kecuali diminta lain dengan menambahkan akhiran satuan, the model RGBnya menggunakan nilai desimal dari 0 hingga 255, untuk ketiga komponen tersebut, nilai tersebut komponen alfa adalah koefisien (desimal dari nol hingga satu) dan nilai pertama dari Model warna HSL, rona, adalah nilai desimal yang berkisar antara 0 hingga 360 (tanpa satuan) yang mewakili suatu sudut. Nilai saturasi dan luminositas Model HSL Biasanya dinyatakan dalam persentase.

Seperti yang telah dikatakan, meskipun penggunaannya tidak terlalu sering, warna dapat ditunjukkan berdasarkan namanya dalam format color:black; di tempat color:#000000;. Format pertama lebih mudah dibaca tetapi terbatas pada tabel nilai singkat yang juga lebih sulit untuk diubah secara numerik dari aplikasi yang ditulis dalam bahasa Inggris. JavaScript.

Untuk proposal kami mengenai representasi grafis data dari sensor yang terhubung ke IoT, kami hanya memerlukan tiga properti yang terkait dengan warna. Mereka akan berfungsi untuk menunjukkan nama teks, yang sekarang dijelaskan, dan untuk menunjukkan nama komponen apa pun yang mendukungnya.

• color menunjukkan warna elemen HTML dan apa yang dikandungnya (yang mewarisinya) kecuali jika diubah secara tegas dengan memberikan warna lain satu per satu.

• background-color Digunakan untuk menentukan warna latar belakang suatu elemen HTML. Selain menunjukkan warna sebagai nilai RGB o HSL Anda dapat menggunakan nilai khusus transparent untuk membuat objek tidak memiliki warna latar belakang dan dapat melihat apa yang ada di belakangnya, yaitu tidak menutupi elemen yang digambarnya.

• opacity memungkinkan Anda mengatur opacity (secara tidak langsung, transparansi) suatu elemen dan seluruh kontennya (jangan bingung dengan transparansi latar belakang). Jika transparansi diberikan kepada unsur-unsur yang terkandung dalam unsur-unsur lain yang bersifat transparan, maka hal ini akan ditingkatkan, tidak akan berfungsi secara terpisah. Anda tidak dapat membuat objek yang terdapat dalam objek transparan menjadi lebih buram. Nilai dari opacity Hal ini dinyatakan sebagai koefisien seperti opacity:0.5; untuk menunjukkan opacity 50%.

  Versi browser Microsoft yang lebih lama tidak menggunakan properti ini, namun memiliki properti tersebut filter (filter) yang, di antara nilai-nilai lainnya, dapat mendukung alpha (untuk kanal alfa) yang persentase opacitynya dapat ditetapkan opacity menurut formatnya:

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

Tindakan

En CSS, pengukuran elemen <div>, yang telah kita pilih untuk membuat wadah grafis, disetel dengan width (lebar) dan height (tinggi).

antara isi <div> dan kelilingnya terdapat luas pengisian yang ditentukan dengan nilai padding. Keliling keliling suatu benda adalah tepi yang ukurannya ditentukan dengan sifat border. Memisahkan bagian luar objek <div> diantara benda-benda lain disekitarnya terdapat suatu ruang yang besarnya ditentukan oleh margin.

Dalam kondisi normal, pengukuran ruang yang digunakan oleh benda <div> dapat dihitung sebagai jumlah dari lebar atau tinggi ditambah padding (padding) ditambah batas (border) ditambah margin (margin). Ketika pengukuran relevan yang ditetapkan adalah ruang interior yang berguna dari objek tersebut <div>, komposisi ini sangat praktis, namun jika yang diketahui adalah total pengukuran yang tersedia dapatkah perilaku ini diubah, diatur secara default, sehingga total pengukuran lebar dan tinggi adalah yang ditunjukkan oleh width (lebar) dan height (tinggi) dengan mengurangi pengukuran padding, border dan margin, bukan menambahkannya. Untuk menggunakan mode ini, tetapkan kepemilikan box-sizing nilai border-box (standarnya adalah content-box)

Diagram berikut menunjukkan secara grafis nilai-nilai yang dihasilkan width (lebar) dan height (tinggi) jika menggunakan box-sizing:border-box; (total) ataubox-sizing:content-box; (di dalam)

Nilai-nilai pengukuran dinyatakan dengan satuan yang telah dijelaskan. Jika menyangkut properti yang ditentukan oleh beberapa nilai, angka yang dinyatakan dengan jenis rata-rata berbeda dapat dicampur. Selain itu, ada beberapa nilai khusus yang relevan dengan penggunaan yang akan kita lakukan dalam implementasi grafik sensor di IoT ini. Secara khusus, kita dapat menggunakan nilainya auto di properti margin sebagai sumber daya untuk memusatkan objek dalam keadaan tertentu.

Pada contoh di atas, untuk kelas “small_box” batas setebal 2 piksel ditentukan, digambar dengan goresan hitam (#000000) terus menerus (solid). Di kelas “big_box” garis yang digunakan untuk pembatas adalah garis putus-putus (dashed) dan warna merah (#FF0000). Untuk menyatakan nilai-nilai tersebut secara terpisah dapat kita gunakan border-width untuk ketebalan, border-style untuk pukulan dan border-color untuk warna. Properti tepi ini selanjutnya bersifat komposit dan dibentuk oleh fitur atas, kanan, bawah, dan kiri, mengikuti arah jarum jam seperti dijelaskan di atas.

Kedua kelas yang telah didefinisikan memiliki ukuran yang sama, tetapi kelas pertama lebih kecil karena nilainya digunakan border-box untuk properti box-sizing, padding, border, dan margin digambar di dalam objek, bukan di sekitar konten, seperti defaultnya. Di kelas "big_box" tidak ditentukan, jadi nilainya diambil secara default content-box yang menyebabkan padding, border dan margin bertambah ke ukuran yang ditunjukkan oleh width y height.

Nilai margin kelas pada contoh diatas adalah 10 piksel atas, kanan, bawah dan kiri, sehingga dapat dinyatakan sebagai nilai tunggal margin:10px;. Sangat menarik untuk mengetahui alternatif ini untuk memahami kode yang dikembangkan oleh pihak ketiga meskipun, dalam proposal implementasi ini, agar lebih mudah dibaca, disarankan untuk menunjukkan, mengulangi, nilainya.

Ketiga kelas pada contoh sebelumnya menghasilkan hasil yang sama, definisi yang disebut "singkat" menjadi lebih kompak dan kurang dari apa yang disebut "celoteh" yang, lebih dari sekedar menambah kejelasan membaca, adalah bentuk biasanya digunakan untuk memodifikasi sebagian aspek konkret dari suatu properti, menggunakan kembali nilai-nilai lain melalui warisan (nilai-nilai tersebut disediakan oleh wadah atau disediakan oleh salah satu kelas yang ditugaskan ke elemen). Jika beban dikenakan pada server oleh teks tambahan dengan cara mendefinisikan properti dan keadaan lain yang, untuk membuat kode lebih mudah dibaca, seperti komentar, menambah ukuran dan lalu lintas, relevan, maka akan mungkin untuk memprosesnya (misalnya misalnya) dari PHP sebagai bagian dari strategi pembuatan kode dari bahasa ini.

Dimensi model kotak terutama mempengaruhi elemennya <div> tetapi ada kemungkinan untuk memaksakan perilaku ini pada elemen lain yang memiliki properti tersebut display dan nilai block. Untuk membuat elemen mengalir seperti teks pada satu baris, gunakan display:inline; dan kedua perilaku, pengukuran dan aliran, dapat digabungkan display:inline-block;

Nilainya none di properti display, digunakan sebagai display:none;, juga memungkinkan Anda menyembunyikan objek, yang berfungsi untuk "menghidupkan" dan "mematikan" objek tersebut JavaScript.

Jika dimensi suatu elemen tidak ditentukan, diperlukan dimensi apa pun yang diperlukan agar kontennya sesuai (sebenarnya, konten tersebut sesuai tanpa perlu menetapkan dimensi). Tetapi jika dimensinya disebutkan, mungkin saja benda yang ditampungnya tidak muat; dalam kasus seperti itu, dimensinya tidak diperhatikan, dimensinya diperbesar agar semua konten dapat terlihat.

Agar elemen-elemen yang terdapat dalam pengukuran tetap lainnya terpotong ketika melebihi ukurannya, digunakan properti overflow dengan nilai hidden. dengan nilainya scroll, objek yang meluap dari wadah juga terpotong, seperti yang terjadi dengan hidden tetapi ditampilkan bilah gulir yang dapat dilihat saat dipindahkan. Nilai auto membuat bilah gulir hanya muncul bila diperlukan berdasarkan ukuran konten.

Anda juga dapat menetapkan ukuran minimum sehingga wadah menempati ruang tersebut meskipun konten tidak memerlukannya dan tanpa membatasi dimensinya untuk bertambah saat konten membutuhkannya. Properti yang bertanggung jawab atas tugas ini adalah min-width untuk acho dan min-height untuk yang tinggi. Sebaliknya, max-width atur lebar maksimum dan max-height ketinggian maksimum yang dibatalkan width sudah height.

Aliran elemen pada halaman web

Persegi panjang (blok) yang telah kita definisikan dengan elemen <div>, keduanya ditempatkan satu di bawah yang lain secara default. Untuk mengubah perilaku ini Anda dapat menggunakan properti float, menunjukkan left o right sebagai suatu nilai, sehingga masing-masing mengalir dari kiri ke kanan atau dari kanan ke kiri. Sebaliknya, untuk mencegah suatu benda “melayang” ke kanan atau ke kiri benda lain, Anda dapat menggunakan properti clear dengan nilai-nilai left, right o both, yang mengesampingkan aliran dari kiri ke kanan, kanan ke kiri, atau keduanya.

Bertentangan dengan apa yang terjadi pada keadaan lain, aliran dihasilkan float tidak secara otomatis mengubah dimensi wadah, sehingga berguna untuk disertakan dalam propertinya overflow:auto; untuk memaksa ukuran (tinggi) wadah berubah ketika suatu benda meluap karena lokasinya float.

Cara lain untuk mengonfigurasi aliran konten elemen adalah dengan membaginya menjadi kolom dengan properti column-count (yang untuk saat ini harus disertai dengan -webkit-column-count dan -moz-column-count) Ukuran kolom dapat ditunjukkan (sebenarnya disarankan) dengan column-width (-webkit-column-width -moz-column-width) dan pemisahan antar kolom dengan column-gap (-webkit-column-gap -moz-column-gap)

Agar blok tidak terpecah dan isinya didistribusikan ke beberapa kolom, Anda dapat menggunakan display:inline-block; meskipun itu pasti menyiratkannya. biarkan sebagian kolom tidak digunakan.

Penentuan posisi

Untuk menentukan letak elemen pada halaman web, CSS menggunakan beberapa mode pemosisian yang dapat berbeda untuk setiap elemen, yaitu dimungkinkan untuk menggabungkan kriteria pemosisian yang berbeda pada situs web yang sama.

• position:static; Ini adalah pemosisian default (tidak perlu menunjukkannya jika belum pernah diubah sebelumnya). Jenis pemosisian ini mengikuti alur halaman yang "alami": satu demi satu elemen dimulai dari kiri, terus bertambah, sepanjang ada ruang, ke kanan dan dari atas ke bawah. Ia tidak menggunakan koordinat horizontal atau vertikal untuk menentukan lokasinya, melainkan mengikuti posisi yang sesuai dengan urutan benda tersebut.

• position:fixed; Ini digunakan untuk menempatkan suatu objek pada posisi tetap di jendela browser (seperti menu, misalnya). Letak elemen ditentukan secara horizontal dengan left o right untuk menentukan pemisahan di kiri atau kanan masing-masing dan dengan top o bottom untuk pemisahan di atas atau di bawah tepi jendela browser (viewport).

  Menggunakan ini dan jenis pemosisian lainnya, objek dapat tumpang tindih. Objek yang digambar terlebih dahulu (didefinisikan sebelumnya dalam kode HTML) dapat dicakup oleh yang ditarik kemudian (yang dimasukkan kemudian dalam kode HTML). Untuk mengubah tatanan normal Anda dapat menggunakan properti z-index, objek dengan nilai tertinggi z-index Mereka mencakup mereka yang nilainya lebih rendah.

• position:relative; Memindahkan elemen dari posisi "normal" seperti yang ditunjukkan oleh properti left o right secara horizontal dan top o bottom Tegak lurus.

• position:absolute; Menempatkan elemen pada posisi tetap terhadap objek yang memuatnya. Lokasinya dinyatakan, seperti dalam kasus sebelumnya, dengan left,right, top y bottom

  Nama jenis positioning ini pada awalnya membingungkan, karena posisi tersebut ditetapkan sehubungan dengan objek yang secara hierarki lebih tinggi dari objek yang menggunakan properti, yang masih diperdebatkan apakah bersifat absolut.

  Penting juga untuk diingat bahwa elemen yang memuat objek tersebut <div> yang kami gunakan pada tingkat hierarki pertama adalah <body>, oleh karena itu, jika <div> apa yang kamu gunakan position:absolute; tidak terdapat di halaman lain, posisinya akan "mutlak" terhadap halaman web.

Properti untuk media dan karakteristik tertentu (kueri media)

CSS memungkinkan Anda menentukan dalam style sheet yang sama tampilan berbeda untuk berbagai media atau dukungan tergantung pada jenis perangkat yang digunakan (seperti layar, atau printer), dimensinya, orientasinya (vertikal atau lanskap) atau resolusinya. Ini berfungsi untuk dapat menampilkan, dengan cara yang paling tepat untuk suatu konteks, halaman web yang sama.

Untuk merujuk ke media, gunakan @media dengan cara yang mirip dengan apa yang telah dijelaskan untuk font dengan @font-face, diapit kurung kurawal ({ y }) definisi berbagai elemen: label HTML, kelas, pengidentifikasi...

Jenis media yang tersedia di CSS3 suara: all, untuk merujuk ke media apa pun (semua), screen untuk semua jenis layar (versi lama CSS Mereka membedakan antara TV dan monitor komputer) print untuk keluaran printer dan speech untuk pembaca web audio yang menafsirkan informasi dengan penyintesis suara.

Pada contoh di atas, elemen kelas teks memiliki latar belakang hitam dan teks putih di layar, namun dicetak dengan latar belakang putih dan teks hitam.

Kondisi dapat diterapkan pada media untuk menentukan rangkaian properti yang berbeda berdasarkan, misalnya, resolusi yang tersedia atau rasio area pandang. Kondisi-kondisi ini dan cara-caranya sendiri dapat disusun dengan operasi logis and, not y only untuk menuntut agar Anda mematuhi beberapa, bahwa Anda tidak mematuhi atau hanya jika Anda mematuhinya.

Di antara kondisi yang tersedia, kami menganggapnya sangat menarik max-width (lebar jendela maksimum), max-height (tinggi jendela maksimum), min-width (lebar jendela minimum), min-height (tinggi jendela minimum), orientation (orientasinya, yang bisa landscape, lanskap, atau portrait, vertikal), max-resolution (resolusi maksimum dalam dpi, titik per inci, atau dalam dpcm, poin per sentimeter) dan min-resolution (resolusi minimum, juga dalam dpi o dpcm).

Pada contoh sebelumnya, kita mulai dengan mendefinisikan warna latar belakang sehingga, di semua media, elemen kelas main_block memiliki warna latar belakang #CCCCCC. Saat ditampilkan di layar dan lebar jendela minimal 320 piksel, margin kiri dan kanan akan otomatis (tengah blok) dan lebar elemen akan menjadi 300 piksel. Jika resolusi layar 640 piksel, lebar bloknya adalah 620 piksel. Karena definisi media kedua tidak mencakup informasi margin dan perangkat yang memenuhi kondisi kedua juga akan memenuhi kondisi pertama, margin horizontal akan tetap otomatis.

Terakhir pada contoh warna background diubah menjadi putih pada hasil print.

Cara umum untuk menentukan gaya untuk berbagai media biasanya dimulai dengan yang umum, biasanya warna dan font, diikuti dengan geometri yang paling ketat (pengukuran perangkat dengan jumlah piksel paling sedikit) biasanya untuk ponsel cerdas dan tablet yang, sebagai tambahan, Penting untuk mengetahui apakah mereka digunakan secara vertikal atau horizontal orientation dan tentunya juga resolusinya dengan min-resolution. Kemudian ukuran berbeda untuk layar yang lebih besar ditunjukkan, dan biasanya diakhiri dengan pencetakan dan media suara, yang dalam contoh grafik IoT telah dihilangkan.

Gunakan @media Kondisi yang diterapkan seperti dimensi, resolusi, dan orientasi memungkinkan perancang membuat satu halaman web yang, dengan gaya berbeda, akan terlihat paling sesuai untuk setiap perangkat. Perilaku ini biasanya disebut desain responsif; desain yang dapat disesuaikan, dalam terjemahan yang sangat gratis.

CSS untuk wadah grafis SVG

Dengan apa yang telah dijelaskan sejauh ini, sekarang dimungkinkan untuk mendefinisikan gaya yang ada Wadah HTML grafis SVG yang dapat digunakan untuk mewakili keadaan sensor yang terhubung ke IoT. Pada kode berikut adalah proposal yang memuat, diberi komentar, distribusi dalam kolom-kolom yang sesuai dengan jumlah grafik yang lebih banyak daripada yang digunakan dalam proposal rangkaian artikel, sehingga dapat digunakan kembali dalam kasus lain.

Di bawah ini Anda dapat melihat seperti apa gaya-gaya tersebut. Kode HTML dari wadah yang diusulkan untuk grafik SVG dari artikel sebelumnya.

Artikel selanjutnya dalam seri ini menjelaskan cara menggambar dengan SVG Grafik data status sensor yang terhubung ke Internet of Things (IoT).