CSS - tampilan

Deskripsi

The tampilan properti mempengaruhi presentasi dasar sebagian besar unsur, secara efektif classing elemen sebagai jenis tertentu elemen. Rendering elemen mungkin sangat bergantung pada jenis tampilannya, dan properti tertentu hanya akan berfungsi pada elemen yang memiliki nilai tampilan tertentu.

Nilai yang Mungkin

• inline- Nilai ini menyebabkan elemen menghasilkan kotak level sebaris; misalnya elemen HTML STRONG, CODE, atau EM (antara lain). Elemen tersebut akan menghasilkan satu atau lebih kotak sebaris saat ditampilkan.

• block- Nilai ini menyebabkan elemen menghasilkan kotak level blok; misalnya elemen HTML P, H1, atau PRE (antara lain). Elemen tersebut akan menghasilkan kotak blok ketika ditampilkan.

• list-item- Nilai ini menyebabkan elemen menghasilkan kotak blok dan kotak sebaris item daftar. Dalam HTML, elemen LI adalah satu-satunya contoh elemen tersebut.

• run-in- Dalam kondisi tertentu, nilai ini akan menyebabkan elemen menjadi .inserted. ke awal elemen berikut. Jika elemen A disetel untuk menampilkan: run-in dan diikuti oleh elemen level-blok B, maka A menjadi kotak level-sebaris pertama dari B. Jika elemen yang mengikuti A bukan level-blok, maka A menjadi a kotak tingkat blok.

• compact - Dalam kondisi tertentu, nilai ini akan menyebabkan elemen ditempatkan ke salah satu sisi elemen berikut.

• marker- Nilai ini akan mengatur konten yang dihasilkan menjadi penanda; oleh karena itu, ini harus digunakan hanya dalam hubungannya dengan pseudo- elemen: sebelum dan: setelah ditetapkan pada elemen level blok.

• table- Nilai ini menyebabkan elemen menghasilkan kotak tabel level blok. Ini analog dengan TABEL elemen HTML.

• inline-table- Nilai ini menyebabkan elemen menghasilkan kotak tabel tingkat sebaris. Meskipun tidak ada analog dalam HTML, ini dapat dibayangkan sebagai tabel HTML tradisional yang dapat muncul di tengah baris teks.

• table-cell- Nilai ini mendeklarasikan elemen menjadi sel tabel. Ini sejalan dengan elemen HTML TD.

• table-row- Nilai ini mendeklarasikan elemen menjadi deretan sel tabel. Ini sejalan dengan elemen HTML TR.

• table-row-group- Nilai ini mendeklarasikan elemen menjadi sekelompok baris tabel. Ini analog dengan elemen HTML TBODY.

• table-column- Nilai ini mendeklarasikan elemen menjadi kolom sel tabel. Ini sejalan dengan elemen HTML COL.

• table-column-group- Nilai ini mendeklarasikan elemen menjadi sekelompok kolom tabel. Ini sejalan dengan elemen HTML COLGROUP.

• table-header-group- Nilai ini mendeklarasikan elemen sebagai grup sel yang selalu terlihat di bagian atas tabel, ditempatkan sebelum baris atau grup baris apa pun, tetapi setelah judul tabel diratakan. Ini analog dengan elemen HTML THEAD.

• table-footer-group- Nilai ini mendeklarasikan elemen sebagai grup sel yang selalu terlihat di bagian bawah tabel, ditempatkan setelah baris atau grup baris apa pun, tetapi sebelum judul tabel rata bawah. Ini sejalan dengan elemen HTML TFOOT.

• table-caption- Nilai ini mendeklarasikan elemen menjadi keterangan untuk tabel. Ini sejalan dengan elemen HTML CAPTION.

• none - Elemen tidak akan menghasilkan kotak sama sekali, dan karenanya tidak akan ditampilkan atau memengaruhi tata letak dokumen.

Berlaku untuk

Semua elemen HTML.

Sintaks DOM

object.style.cueAfter = url("music.wav");

Contoh

Inilah contohnya -

<p style = "display:inline;">
   This paragraph will inline with the next paragraph
</p>

<p style = "display:inline;">
   and will make a single line.
</p>

<br />
<br />

<div style = "display:block;">
   This paragraph will be separate from the next paragraph
</div>

<div style = "display:block;">
   and this is second paragraph.
</div>

Ini akan menghasilkan hasil sebagai berikut -

 This paragraph will inline with the next paragraph 
 and will make a single line. 





      

        This paragraph will be separate from the next paragraph 
      

      

        and this is second paragraph.