Mengenal properti display pada CSS
Mengenal properti display pada bahasa pemrogrman CSS
Pada artikel sebelumnya admin sudah membahas tentang Tutorial Margin dan Padding pada Bahasa Pemrograman CSS yakni untuk memberi jarak isi dan sisi pada suatu elemen tertentu.
Nah artikel kali ini admin akan membahas tentang mengenal dan cara penggunaan property display pada bahasa pemrograman CSS.
Property Display merupakan salah satu property pada CSS yang sering digunakan yakni untuk menentukan bagaimana suatu elemen ditampilkan.
Ada beberapa fungsi yanng dapat dihasilkan oleh property display ini diantaranya seperti suatu elemen yang mengalir kesamping, kotak mengalir kebawah dan juga dapat membuat tabel layaknya tag table pada HTML.
Terdapat 6 value pada properti display yakni inline, block, flex, inline-block, table, dan none. Yang paling sering digunakan biasanya inline, block, inline-block, flex, dan none. Value ini akan admin bahas satu persatu di bawah ini.
Contohnya sebagai berikut.
Hasilnya sebagai berikut.
Display inline ini tidak bisa diberikan margin top/bottom, tidak bisa diberikan wight/height dan padding. Jadi inline ini hanya cocok digunakan untuk teks dan gambar saja.
Contoh syntaknya sebagai berikut.
Jika dijalankan hasilnya seperti berikut :
Defaultnya jika elemen pada display : block; tidak diberikan nilai width, maka lebar elemen tersebut akan memenuhi layar kesamping. Oleh karena itu aturlah width/lebar sesuai kebutuhan.
Contoh syntaknya sebagai berikut.
Jika dijalankan hasilnya seperti berikut.
Dsiplay : inline-block; ini juga bisa diatur width/heigth sama halnya display block yang juga dapat diatur lebar dan tingginya, namun dia akan tetap mengalir kesamping layaknya display inline.
Contoh syntaknya seperti berikut.
Jika dijalankan hasilnya seperti berikut.
Selain ketiga value diatas masih ada value display yang memilki kesamaan dengan tag table HTML dalam membuat tabel, berikut value tersebut.
Nah artikel kali ini admin akan membahas tentang mengenal dan cara penggunaan property display pada bahasa pemrograman CSS.
Apa itu property Display?
 |
| Display CSS |
Ada beberapa fungsi yanng dapat dihasilkan oleh property display ini diantaranya seperti suatu elemen yang mengalir kesamping, kotak mengalir kebawah dan juga dapat membuat tabel layaknya tag table pada HTML.
Terdapat 6 value pada properti display yakni inline, block, flex, inline-block, table, dan none. Yang paling sering digunakan biasanya inline, block, inline-block, flex, dan none. Value ini akan admin bahas satu persatu di bawah ini.
Inline
Adalah value yang berfungsi menampilkan elemen HTML mengalir kesamping. Misal ada 3 buah elemen yang diberikan Display : inline; akan terus mengalir kesamping.Contohnya sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Mengenal Display</title>
<style type="text/css">
.inline1 {
background-color: yellow;
display: inline;
}
.inline2 {
background-color: red;
display: inline;
}
.inline3 {
background-color: green;
display: inline;
}
</style>
</head>
<body>
<span class="inline1">Contoh Display Inline</span>
<span class="inline2">Elemen Kedua</span>
<span class="inline3">Elemen Ketiga </span>
</body>
</html>
<html>
<head>
<title>Mengenal Display</title>
<style type="text/css">
.inline1 {
background-color: yellow;
display: inline;
}
.inline2 {
background-color: red;
display: inline;
}
.inline3 {
background-color: green;
display: inline;
}
</style>
</head>
<body>
<span class="inline1">Contoh Display Inline</span>
<span class="inline2">Elemen Kedua</span>
<span class="inline3">Elemen Ketiga </span>
</body>
</html>
Hasilnya sebagai berikut.
Block
Ketika elemen yang memiliki property display : block; maka hasilnya akan membentuk kotak mengalir kebawah (kebalikan dari display inline), bedanya display : block; ini dapat diatur width dan heigth nya.Contoh syntaknya sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Mengenal Display</title>
<style type="text/css">
.block1 {
background-color: yellow;
display: block;
margin: 10px;
padding: 20px;
width: 150px;
}
.block2 {
background-color: red;
display: block;
margin: 10px;
padding: 20px;
width: 150px;
}
.block3 {
background-color: green;
display: block;
margin: 10px;
padding: 20px;
width: 150px;
}
</style>
</head>
<body>
<p class="block1">Contoh Display Block</p>
<p class="block2">Elemen Kedua</p>
<p class="block3">Elemen Ketiga </p>
</body>
</html>
<html>
<head>
<title>Mengenal Display</title>
<style type="text/css">
.block1 {
background-color: yellow;
display: block;
margin: 10px;
padding: 20px;
width: 150px;
}
.block2 {
background-color: red;
display: block;
margin: 10px;
padding: 20px;
width: 150px;
}
.block3 {
background-color: green;
display: block;
margin: 10px;
padding: 20px;
width: 150px;
}
</style>
</head>
<body>
<p class="block1">Contoh Display Block</p>
<p class="block2">Elemen Kedua</p>
<p class="block3">Elemen Ketiga </p>
</body>
</html>
Jika dijalankan hasilnya seperti berikut :
Inline-Block
Nah.. sesuai namanya value display ini adalah gabungan dari display: inline; dan display : block; jadi dapat ditulis display : inline-block; fungsinya juga merupakan gabungan dari keduanya yakni elemen berbentuk kotak yang mengalir kesamping.Contoh syntaknya sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Mengenal Display</title>
<style type="text/css">
.menu {
background-color: blue;
display: block;
}
.inline-block1 {
background-color: yellow;
display: inline-block;
margin: 10px;
padding: 10px;
}
.inline-block2 {
background-color: red;
display: inline-block;
margin: 10px;
padding: 10px;
}
.inline-block3 {
background-color: green;
display: inline-block;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="menu">
<p class="inline-block1">Home</p>
<p class="inline-block2">Menu 1</p>
<p class="inline-block3">Menu 2 </p>
</div>
</body>
</html>
<html>
<head>
<title>Mengenal Display</title>
<style type="text/css">
.menu {
background-color: blue;
display: block;
}
.inline-block1 {
background-color: yellow;
display: inline-block;
margin: 10px;
padding: 10px;
}
.inline-block2 {
background-color: red;
display: inline-block;
margin: 10px;
padding: 10px;
}
.inline-block3 {
background-color: green;
display: inline-block;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="menu">
<p class="inline-block1">Home</p>
<p class="inline-block2">Menu 1</p>
<p class="inline-block3">Menu 2 </p>
</div>
</body>
</html>
Jika dijalankan hasilnya seperti berikut.
Table
Merupakan value display yang dapat membuat tamapilan berupa tabel layaknya tag table pada HTML.Contoh syntaknya seperti berikut.
<!DOCTYPE html>
<html>
<head>
<title>Mengenal Display</title>
<style type="text/css">
.table {
display: table;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 2px outset maroon;
padding: 2px 12px;
}
</style>
</head>
<body>
<div class="table">
<div class="table-row">
<div class="table-cell">No</div>
<div class="table-cell">Nama Siswa</div>
<div class="table-cell">Nilai</div>
</div>
<div class="table-row">
<div class="table-cell">1</div>
<div class="table-cell">Budi surya</div>
<div class="table-cell">80</div>
</div>
<div class="table-row">
<div class="table-cell">2</div>
<div class="table-cell">Ricardo</div>
<div class="table-cell">90</div>
</div>
<div class="table-row">
<div class="table-cell">3</div>
<div class="table-cell">Dimas</div>
<div class="table-cell">85</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>Mengenal Display</title>
<style type="text/css">
.table {
display: table;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 2px outset maroon;
padding: 2px 12px;
}
</style>
</head>
<body>
<div class="table">
<div class="table-row">
<div class="table-cell">No</div>
<div class="table-cell">Nama Siswa</div>
<div class="table-cell">Nilai</div>
</div>
<div class="table-row">
<div class="table-cell">1</div>
<div class="table-cell">Budi surya</div>
<div class="table-cell">80</div>
</div>
<div class="table-row">
<div class="table-cell">2</div>
<div class="table-cell">Ricardo</div>
<div class="table-cell">90</div>
</div>
<div class="table-row">
<div class="table-cell">3</div>
<div class="table-cell">Dimas</div>
<div class="table-cell">85</div>
</div>
</div>
</body>
</html>
Jika dijalankan hasilnya seperti berikut.
- Table, sama dengan <table>
- Table-caption, sama dengan <caption>
- Table-cell, sama dengan <td>
- Table-column, sama dengan <col>
- Table-row, sama dengan <tr>
- Table-column-group, sama dengan <colgroup>
- Table-header-group, sama dengan <thead>
- Table-footer-group, sama dengan <tfoot>
- Table-row-group, sama dengan <tbody>
0 Response to "Mengenal properti display pada CSS"
Post a Comment