CSS Part 14: DISPLAY CSS
DISPLAY
ASSALAMUALAIKUM wr wb.
apa kabar teman teman kali ini saya akan membahas tentang Display dalam css apa teman teman pernah menggunakan Display.Display dibagi dalam beberapa jenis berikut jenis dari Display tersebut.
apa kabar teman teman kali ini saya akan membahas tentang Display dalam css apa teman teman pernah menggunakan Display.Display dibagi dalam beberapa jenis berikut jenis dari Display tersebut.
1.Pengertian CSS Styling link.
adalahuntuk menentukanbagaimana suatu elemen dapat ditampilkan di halaman website.
2.MAKSUD dan TUJUAN.
untuk mengatur posisi seperti horisontal atau vertikal dan dapat pula menghilangkan tampilan yang sudah dibuat walaupun tag yang dibut masih ada.
3.BAHAN dan ALAT.
- laptop/pc
-web browser contohnya seperti mozilla fire fox atau yang lain
-memiliki aplikasi seperti sublime text/notepad
4.Materi
CSS memberikan kita kemampuan penuh untuk menentukan suatu elemen ditampilkan pada web browseer.
properti tag yang digunakan untuk menggunakan DISPLAY antara lain :
display-inline.
display-block.
dispaly-hidden
Berikut contoh penggunaan dari Display.
1.display-inline
dibawah ini contoh penggunaan dari Display-inline:
adalahuntuk menentukanbagaimana suatu elemen dapat ditampilkan di halaman website.
2.MAKSUD dan TUJUAN.
untuk mengatur posisi seperti horisontal atau vertikal dan dapat pula menghilangkan tampilan yang sudah dibuat walaupun tag yang dibut masih ada.
3.BAHAN dan ALAT.
- laptop/pc
-web browser contohnya seperti mozilla fire fox atau yang lain
-memiliki aplikasi seperti sublime text/notepad
4.Materi
CSS memberikan kita kemampuan penuh untuk menentukan suatu elemen ditampilkan pada web browseer.
properti tag yang digunakan untuk menggunakan DISPLAY antara lain :
display-inline.
display-block.
dispaly-hidden
Berikut contoh penggunaan dari Display.
1.display-inline
dibawah ini contoh penggunaan dari Display-inline:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
li{
display: inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">penggunaan inline</a></li>
<li><a href="#">pengertian HTML</a></li>
<li><a href="#">pengertian CSS</a></li>
</ul>
</body>
</html>
berikut hasil dari dari penggunaan inline:
2.display-block
berikut contoh sintaks dari dispaly block:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
li{
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#">penggunaan inline</a></li>
<li><a href="#">pengertian HTML</a></li>
<li><a href="#">pengertian CSS</a></li>
</ul>
</body>
</html>
berikut hasilnya:
berikut contoh sintaks dari dispaly block:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
li{
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#">penggunaan inline</a></li>
<li><a href="#">pengertian HTML</a></li>
<li><a href="#">pengertian CSS</a></li>
</ul>
</body>
</html>
berikut hasilnya:
3.display-hidden
berikut contoh dari penggunaan dari tag display hidden/none:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
h1.hidden{
display: none;
}
</style>
</head>
<body>
<h1>
Fungsi property CSS Display adalah untuk menentukan bagaimana suatu elemen ditampilkan. Fungsi property CSS Display ini hampir mirip dengan property CSS Visibility, kedua-duanya memiliki fungsi untuk menyembunyikan suatu elemen.
</h1>
<h1 class="hidden"c>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</h1>
<p>Catatan penggunaan hidden/none hanya menyembunyikan tulisan yang anda buat</p>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
h1.hidden{
display: none;
}
</style>
</head>
<body>
<h1>
Fungsi property CSS Display adalah untuk menentukan bagaimana suatu elemen ditampilkan. Fungsi property CSS Display ini hampir mirip dengan property CSS Visibility, kedua-duanya memiliki fungsi untuk menyembunyikan suatu elemen.
</h1>
<h1 class="hidden"c>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</h1>
<p>Catatan penggunaan hidden/none hanya menyembunyikan tulisan yang anda buat</p>
</body>
</html>
dibawah ini hasil dari sintaks diatas:
sebelum diberi tag none:
setelah diberi tag none:
Sekian dari artikel saya sampai bertemu lagi di artikel selanjutnya.
REFERENSI:
WASSALAMUALAIKUM wr wb.
Komentar
Posting Komentar