Fungsi Property Display pada CSS

Fungsi Property Display pada CSS

106

Pada tutorial ini kita akan membahas tentang fungsi dari property display pada CSS. Jadi property display itu digunakan untuk mengatur tampilan elemen, apakah elemen tersebut akan ditampilkan sebaris dengan elemen sebelumnya ? ataukah akan ditampilkan pada baris baru atau malah elemen tersebut tidak akan ditampilkan ?.

Secara default setiap elemen HTML memiliki display bawa’annya masing – masing. Seperti elemen <p> secara otomatis akan membuat baris baru pada halaman website, sedangkan elemen <b> tidak akan membuat baris baru, namun hanya akan menebalkan tulisan.

Seperti contoh gambar di bawah ini, dimana secara default elemen <li> akan tampil vertical ke bawah atau membuat baris baru.

Fungsi Property Display pada CSS

Namun dengan property display : inline, anda dapat membuatnya tampil secara mendatar (inline).

XHTML

<!DOCTYPE HTML>

<html>

<head>

<style>

  li{display: inline}

</style>

</head>

<body>

<ul>

  <li>Menu 1</li>

  <li>Menu 2</li>

  <li>Menu 3</li>

  <li>Menu 4</li>

</ul>

</body>

</html>

Berikut outputnya :

display pada css

Jadi property display ini dapat digunakan untuk mengatur tampilan elemen. Dalam property display ini pula terdapat nilai property none, yakni untuk menghilangkan elemen tersebut.

CSS

display: none;

maksud display pada css

Penggunaan nilai property none, biasa di kombinasikan dengan Javascipt. Yakni elemen akan ditampilkan jika telah memenuhi berbagai syarat tertentu seperti pengisian Form contohnya. Demikian tutorial dari fungsi property display pada CSS.

Keyword: fungsi properti display css, cara display css

Share:



Postingan Sebelumnya:


Postingan Selanjutnya: