Assallamuallaikum Wr Wb..

dis.png


Pengertian Tentang Property Display Dan Beserta Nilai Value

Selamat siang kawan, kangen rasanya lama tak jumpa dengan kalian semua di blog reot ini. Iya itu semua karena paketan sudah menipis jadi serba hemat, ups... Jadi curhat gini sih, abaikan saja dan fokus ke topik pembahasan !!

Oke, pada kesempatan kali ini saya akan membahas tentang Pengertian Tentang Property Display Dan Beserta Nilai Value, sebenarnya property display sudah pernah saya jelaskan di tutorial belajar css beberapa waktu yang lalu akan tetapi tidak menjelaskan secara keseluruhan dan apa saja macam-macam nilai value yang bisa digunakan di property display. Nah, kali ini saya akan mencoba menjelaskan secara menyeluruh dan mudah di mengerti.

Artikel seperti ini sesungguhnya sudah banyak yang membuatnya di google, tapi daripada blog ini kosong jadi saya posting juga. Hehe..

Baiklah langsung saja di simak penjelasan tentang Property Display di bawah ini, bagi para master css silahkan langsung saja menuju komentar karena pasti sudah paham betul tentang apa yang akan saya jelaskan ini !!


1. Pengertian Display

Display adalah property yang mengatur tampilan suatu elemen yang ada di blog atau website. Display merupakan hasil akhir dari suatu elemen yang di tampilkan oleh browser, browser akan menampilkan elemen sesuai dengan apa yang telah kita atur pada Property Display di dalam kode css tersebut.

Pernahkah anda saat membongkar css milik orang lain lalu di dalamnya kalian menemukan property display di salah satu selectornya, misalkan !!

#navigation { margin:0 auto;padding:5px 4px 7px;display:block;width:98%;text-align:center; }


Keterangan :

Kode berwarna merah adalah yang disebut dengan display dan property tersebut memiliki nilai value yaitu block, dari kode tersebut akan menghasilkan bentuk kotak persegi dengan panjang 98% dari lebar layar handphone kalian !!

Property display bisa kita gunakan di semua selector yang ada di css, tergantung di mana kita akan menempatkannya. Intinya selector yang kita tambahkan property display di dalamnya, tampilannya akan sesuai dengan nilai value apa yang kita gunakan untuk property display !!

Penggunaan property display memang berperan penting dalam mendesain css, namun display bukanlah hal yang wajib ada di setiap selector css yang kita buat. Display bisa saja kita gunakan atau bisa saja tidak kita gunakan, di gunakan atau tidak itu tidak ada pengaruhnya bagi tampilan elemen yang tidak membutuhkan display nantinya. Namun ada beberapa elemen yang membutuhkan property display di dalamnya, misalnya, #navigation span & #pagination-links span.


Baca Juga = Memasang Css Import Di Blogponsel


2. Macam-Macam Nilai Value Display

Property display memiliki beberapa nilai value yang bisa kita gunakan untuk mendesain css yang akan kita buat, contohnya !!


A. Inherit

Jika kita menggunakan inherit sebagai nilai value display, maka elemen akan bekerja sesuai dengan nilai value "display property" yang di gunakan pada elemen induknya.


Contohnya :

#navigation-menu { margin:2px;padding:6px 3px;display:block;text-align:left; } #navigation-menu h3 { margin:0;padding:7px 5px;display:inherit;background:#232323; }


Keterangan :

Seperti yang kalian lihat pada contoh di atas ! Selector #navigation-menu h3 akan mengikuti aturan display yang telah di atur pada selector #navigation-menu, karena selector #navigation-menu menggunakan inline-block sebagai nilai value dari display property & selector #navigation-menu h3 menggunakan inherit sebagai nilai value dari property display, maka secara otomatis tampilan #navigation-menu h3 akan mengikuti aturan display yang ada di #navigation-menu.


B. Block

Ketika kita menggunakan nilai value "Block" untuk property display, maka elemen akan ditampilkan dalam bentuk block dan elemen tersebut tidak bisa sejajar dengan elemen yang ada di sisi kiri atau kanannya. Dia akan berada di atas atau di bawah dari elemen lainnya, terkecuali kita mengaturnya menggunakan property "float".


Contohnya :

.post { margin:3px;padding:5px;display:block; }


C. Table

Cara kerja nilai value table hampir sama dengan nilai value block, cuma elemen yang menggunakan table sebagai nilai value display maka akan ditampilkan dalam bentuk tabel.


Contohnya :

.post { margin:3px;padding:5px;display:table; }


D. Inline

Inline mengartikan elemen akan tampil dalam bentuk "inline". Jika kita menggunakan inline sebagai nilai value dari property display, maka elemen akan tampil sejajar dengan elemen lainnya.


Contohnya :

.post { margin:3px;padding:5px;display:inline; }


E. Inline-block

Inline-block merupakan penggabungan antara "inline" & "block", jika kita menggunakan inline-block sebagai nilai value display, maka elemen akan di tampilkan dalam bentuk block dan sejajar dengan elemen lainnya.


Contohnya :

.post { margin:3px;padding:5px;display:inline-block; }


F. Inline-table

Ketika inline-table di gunakan sebagai nilai value display, maka elemen akan di tampilkan dalam bentuk tabel dan sejajar dengan elemen lainnya. Inline-table merupakan perpaduan antara inline & table.


Contohnya :

.post { margin:3px;padding:5px;display:inline-table; }


G. None

None mendefinisikan elemen tidak akan ditampilkan di blog/website, jika none di gunakan sebagai nilai value display maka elemen tersebut tidak akan di tampilkan oleh browser.


Contohnya :

.post { display:none; }


H. Hidden

Hidden berarti tersembunyi, saat kita menggunakan hidden sebagai nilai value dari property display maka elemen akan di sembunyikan oleh browser. Cara kerja hidden tidak jauh beda dengan nilai value none.


Contohnya :

.post { display:hidden; }


I. List-item

Ketika elemen menggunakan nilai value list-item untuk property display, maka elemen tersebut memiliki list di depannya seperti halnya listing-menu pada elemen ol li.


Contohnya :

.post { margin:3px;padding:5px;display:list-item; }


J. Run-in

Kinerja nilai value run-in pada browser hampir sama dengan nilai value block, elemen akan ditampilkan dalam bentuk block dan tidak bisa sejajar dengan elemen lainnya.


Contohnya :

.post { margin:3px;padding:5px;display:run-in; }


Baca Juga = Komentar Yang Baik Dan Benar Di Blog

Dari semua nilai value display yang saya jelaskan di atas memang tidak jauh beda dalam hal bentuk, namun yang membedakannya hanyalah ukuran dan cara kerjanya saja yang dapat kita lihat di blog/website yang kita kelola, selain itu sama.

Sebelum saya mengakhiri artikel ini, saya meminta maaf jika tidak ada contoh previewnya dan tata cara penyampaiannya sulit di mengerti. Saya masih belum sempat membuatnya di karenakan jadwal pekerjaan yang begitu padat, sekali lagi saya meminta maaf atas ketidaknyamanan tersebut !!

Demikian yang dapat saya sampaikan tentang Pengertian Tentang Property Display Dan Beserta Nilai Value, semoga apa yang saya share ini bisa bermanfaat buat kalian semua & membantu kalian dalam mempelajari dunia desain css. Terima kasih banyak sudah berkunjung ke blog sederhana saya ini iya, dan jangan pernah bosan. Hehe !!

Wassallamuallaikum Wr Wb..