untung99play.xyz: Tutorial Belajar CSS Part 30 Mengenal CSS Display
Untung99 menawarkan beragam permainan yang menarik, termasuk slot online, poker, roulette, blackjack, dan taruhan olahraga langsung. Dengan koleksi permainan yang lengkap dan terus diperbarui, pemain memiliki banyak pilihan untuk menjaga kegembiraan mereka. Selain itu, Untung99 juga menyediakan bonus dan promosi menarik yang meningkatkan peluang kemenangan dan memberikan nilai tambah kepada pemain.
Berikut adalah artikel atau berita tentang Harian untung99play.xyz dengan judul untung99play.xyz: Tutorial Belajar CSS Part 30 Mengenal CSS Display yang telah tayang di untung99play.xyz terimakasih telah menyimak. Bila ada masukan atau komplain mengenai artikel berikut silahkan hubungi email kami di [email protected], Terimakasih.
Dalam tutorial kali ini kita akan membahas mengenai pengaturan property display dengan menggunakan CSS, property ini digunakan untuk mengatur bagaimana sebuah element didalam web itu ditampilkan.
Setiap elemen HTML memiliki default settingan bagaimana mereka ditampilkan, secara garis besar default tampilan tersebut dibagi menjadi 2 yaitu :
- Block Level Element (Element ditampilkan di baris baru)
- Inline Level Element (Element ditampilkan di baris yang sama)
Ini adalah konsep yang dimiliki oleh HTML untuk mengatur bagaimana sebuah elemen ditampilkan.
Element yang termasuk dalam Block Level Element
Beberapa Element yang merupakan Block Level Element adalah :
dan masih banyak lagi untuk element yang lain, anda bisa melihat dokumentasi dari mozilla di link berikut ini :
https://developer.mozilla.org/id/docs/Web/HTML/Block-level_elements
Element yang termasuk dalam Inline Level Element
Beberapa Element yang merupakan Inline Level Element adalah :
dan masih banyak lagi element lain yang masuk ke dalam inline level element, anda bisa melihat dokumentasi dari mozilla di link berikut ini :
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
Perhatikan contoh perbedaan dari Block Level Element dan Inline Element dibawah ini :
Keterangan :
Merubah Nilai Default Display
Konsep ini digunakan untuk merubah nilai default display pada sebuah element, semisal nih di contoh atas paragraf baru ditampilkan di baris baru, dan link baru ditampilkan pada baris yang sama.
Semisal nilai default untuk display itu kita rubah menjadi, paragraf baru ditampilkan dibaris yang sama, dan link baru ditampilkan di baris baru.
Nah perhatikan Skrip dibawah ini…
|
type=”text/css”> p{
display: inline;
}
a{
display: block;
}
<<>h1>Contoh Display:inline <<>/h1> <<>h1>Contoh Display:block <<>/h1> <<>a href=”google.com”>Google<<>/a><<>a href=”youtube.com”>Youtube<<>/a> |
Semisal kita simpan dengan nama display_block_inline.html, lalu kita buka di browser maka hasilnya adalah seperti berikut :
Penjelasan :
Menyembunyikan Element dengan CSS
selain fitur untuk merubah nilai default display pada sebuah element, anda juga bisa menyembunyikan sebuah element HTML dengan menggunakan property CSS terdapat 2 property yang bisa anda gunakan :
- display:none;
- visibility:hidden;
Untuk memahami konsep ini silahkan perhatikan skrip dibawah ini :
|
type=”text/css”> .a{
display: none;
}
.b{
visibility: hidden;
}
<<>h1>Contoh Display:none<<>/h1> <<>p class=”a”>Ini adalah Paragraf 2<<>/p> <<>h1>Contoh visibility:hidden<<>/h1> <<>p class=”b”>Ini adalah Paragraf 2<<>/p> |
Semisal kita simpan dengan nama display_none_hidden.html, lalu kita buka dibrowser maka hasilnya adalah :
Penjelasan :
- pada contoh display:none, paragraf 2 yang menggunakan class=’a’ mendapatkan property display:none; sehingga dianggap tidak ada sehingga setelah paragraf 1 langsung ditampilkan paragraf 3
- pada contoh visibility:hidden, paragraf 2 yang menggunakan class=’b’ mendapatkan property visibility:hidden; sehingga disembunyikan, sehingga setelah paragraf 1 ada sebuah jarak yang sebenarnya adalah paragraf 2, baru ditampilkan paragraf 3
itu adalah perbedaan dari penggunaan display:none dan visibility:hidden.
Kurang lebih seperti itu teman – teman untuk pembahasan mengenai property display dan visibility yang digunakan untuk mengatur bagaimana sebuah elemen HTML ditampilkan, jika ada yang ingin didiskusikan bisa di kolom komentar, sekian dulu sampai jumpa di tutorial CSS Selanjutnya.