Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial CSS Bagian 34 : Cara Menggunakan Property Border Spacing di CSS. Pada tutorial kali ini, kita akan belajar cara menggunakan property display di CSS.
CSS Display adalah properti CSS yang paling penting yang digunakan untuk mengontrol tata letak elemen. Property ini menentukan bagaimana elemen ditampilkan.
Setiap elemen memiliki nilai tampilan default sesuai dengan sifatnya. Setiap elemen di halaman web adalah kotak persegi panjang dan properti CSS menentukan perilaku kotak persegi panjang tersebut.
CSS Display properti default
default value | inline |
inherited | no |
animation supporting | no |
version | css1 |
javascript syntax | object.style.display=”none” |
Nilai CSS Display
Ada nilai CSS Display berikut yang umum digunakan.
- display: inline;
- display: inline-block;
- display: block;
- display: run-in;
- display: none;
1. CSS display inline
Elemen inline mengambil lebar yang diperlukan saja, tidak memaksa jeda baris sehingga aliran teks tidak terputus dan berada dalam satu baris dalam contoh inline.
Elemen inline adalah:
- <span>
- <a>
- <em>
- <b> dll.
Mari kita lihat contoh CSS display inline.
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: inline;
}
</style>
</head>
<body>
<p>Hello Mbahwp.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>
Hasil dari kode di atas :
2. CSS display inline-block
Elemen inline-block CSS Display sangat mirip dengan elemen inline tetapi perbedaannya adalah Anda dapat mengatur lebar dan tinggi.
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: inline-block;
}
</style>
</head>
<body>
<p>Hello Mbahwp.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>
Hasil dari kode ini adalah :
3. CSS Display block
Elemen blok CSS Display membutuhkan ruang horizontal sebanyak mungkin. Berarti elemen blok mengambil lebar penuh yang tersedia. Property ini membuat garis putus sebelum dan sesudah mereka.
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: block;
}
</style>
</head>
<body>
<p>Hello Mbahwp.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>
Hasil kode di atas :
4. CSS Display Run-in
Properti ini tidak berfungsi di Mozilla Firefox. Elemen-elemen ini tidak menghasilkan kotak tertentu dengan sendirinya.
- Jika kotak run-in berisi kotak block, maka fungsinya akan sama dengan block.
- Jika kotak block mengikuti kotak run-in, kotak run-in menjadi kotak inline pertama dari kotak block.
- Jika kotak inline mengikuti kotak run-in, kotak run-in menjadi kotak block.
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: run-in;
}
</style>
</head>
<body>
<p>Hello Mbahwp.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>
Hasil kode di atas :
5. CSS display none
Nilai “none” benar-benar menghapus elemen dari halaman. Nilai ini tidak akan memakan tempat pada layar.
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>Judul ini terlihat.</h1>
<h1 class="hidden">Yang ini tidak terlihat.</h1>
<p>Anda bisa melihat bahwa judul yang di-display : none (hidden) tidak memakan ruang layar.</p>
</body>
</html>
Hasil dari kode di atas :
Nilai CSS Display lainnya
Nilai Property | Deskripsi |
flex | Ini digunakan untuk display elemen sebagai wadah fleksibel tingkat blok. Ini baru di css3 |
inline-flex | Ini digunakan untuk display elemen sebagai wadah fleksibel tingkat inline. Ini baru di css3. |
inline-table | Display elemen sebagai tabel inline-level. |
list-Item | Ini membuat elemen berperilaku seperti elemen <li>. |
table | Ini membuat elemen berperilaku seperti elemen <table>. |
table-caption | Ini membuat elemen berperilaku seperti elemen <caption>. |
table-column-group | Ini membuat elemen berperilaku seperti elemen <colgroup>. |
table-header-group | Ini membuat elemen berperilaku seperti elemen <thead>. |
table-footer-group | Ini membuat elemen berperilaku seperti elemen <tfoot>. |
table-row-group | Ini membuat elemen berperilaku seperti elemen <tbody>. |
table-cell | Ini membuat elemen berperilaku seperti elemen <td>. |
table-row | Ini membuat elemen berperilaku seperti elemen <tr>. |
table-column | Ini membuat elemen berperilaku seperti elemen <col>. |
Itu dia tutorial cara menggunakan property display di CSS. Semoga tutorial ini bisa membantu Anda memahami cara menggunakan property display dalam mengatur tampilan website.
0 Komentar