Tutorial CSS Tampilan dan Visibilitas

Properti menentukan tampilan dari atau bagaimana elemen ditampilkan, dan properti visibilitas menentukan jika suatu elemen akan terlihat atau disembunyikan.

Menyembunyikan sebuah Elemen – display: none atau visibility: hidden

Menyembunyikan elemen dapat dilakukan dengan menyetel properti layar untuk “none” atau properti visibilitas untuk “tersembunyi”. Namun, perhatikan bahwa kedua metode menghasilkan hasil yang berbeda:

visibility: hidden menyembunyikan elemen, tetapi masih akan mengambil ruang yang sama seperti sebelumnya. Unsur akan disembunyikan, tapi masih mempengaruhi tata letak.

h1.hidden {visibility:hidden;}
display: none menyembunyikan elemen, dan tidak akan mengambil ruang apapun. Unsur akan disembunyikan, dan halaman akan ditampilkan sebagai elemen yang tidak ada:

h1.hidden {display:none;}

Tampilan CSS – Blok dan Elemen Inline

Sebuah elemen blok merupakan elemen yang mengambil lebar penuh yang tersedia, dan memiliki satu baris sebelum dan setelah itu.

Contoh unsur-unsur blok:

  •      <h1>
  •      <p>
  •      <div>

Sebuah elemen inline hanya membutuhkan sebagai lebar sebanyak yang diperlukan, dan tidak memaksa jeda baris.

Contoh elemen inline:

  •      <span>
  •      <a>

Bagaimana Mengubah sebuah Elemen Tampilkan ?

Mengubah elemen inline untuk suatu elemen blok, atau sebaliknya, dapat berguna untuk membuat halaman terlihat dengan cara tertentu, dan masih mengikuti standar web.

Contoh berikut menampilkan daftar item sebagai elemen inline:
li {display:inline;}
Contoh berikut akan menampilkan rentang unsur sebagai unsur-unsur blok:
span {display:block;}
Catatan: Mengubah jenis tampilan elemen perubahan hanya bagaimana elemen ditampilkan, BUKAN apa jenis elemen itu. Sebagai contoh: Sebuah elemen inline diatur untuk menampilkan: blok tidak diperbolehkan untuk memiliki elemen blok bersarang di dalamnya.
Bagaimana untuk menampilkan elemen sebagai elemen inline ?
Contoh ini menunjukkan bagaimana menampilkan elemen sebagai elemen inline.Bagaimana untuk menampilkan elemen sebagai elemen blok ?
Contoh ini menunjukkan bagaimana menampilkan elemen sebagai elemen blok.Cara membuat jatuhnya elemen tabel
Contoh ini menunjukkan bagaimana membuat sebuah keruntuhan elemen tabel.


	    

Leave a Reply

Your email address will not be published. Required fields are marked *