Atribut Display
Dalam CSS, anda dapat pula memanipulaskan elemen-elemen dalam html agar tampilannya menjadi sesuai dengan yang anda inginkan, Saat ini kebanyakan halaman web dapat di buat hanya dengan menggunakan sedikit tag yang di susun rapi ke dalam style css yang akan mengatur tampilan dokumen web hingga sesuai dengan keinginan anda.
Kebanyakan dokumen html yang di tampilkan dalam browser saat ini terdiri dari berbagai style font, margin, padding, dan pada dasarnya adalah tipe display. Adapun penulisan display dalam css dapat di masukan ke dalam sebuah selector seperti contoh script berikut ini:
selector {display : tipe display;}
kebanyakan tipe pokok dari display adalah berupa tipe inline, block-line, dan none yang dapat di manipulasi dengan property display dan nilai inline, block serta none tersebut. Adapun maksud dari tipe display adalah:
Tipe-tipe Display
| Inline | : | Seperti artinya di mana elemen-elemen yang di tampilkan secara inline akan mengikuti alur dari sebuah garis/line. Elemen-elemen seperti strong, anchor, dan emphasis adalah elemen yang biasa nya di tampilkan secara inline |
| Block | : | Akan menempatkan sebuah line break sebelum dan sesudah elemen yang di berikan property ini. Header dan paragraf adalah contoh dari elemen yang biasanya di tampilkan secara blok-line dalam display. |
| None | : | Maksud dari property ini adalah tidak akan menampilkan elemen yang memiliki property ini, walaupun terlihat tidak berguna, tetapi property ini dapat di gunakan dan akan terlihat bagus jika di gabungkan dengan elemen-elemen accessibility seperti accessbility link, alternate stylesheet, atau efek hover tingkat lanjut. |
Berikut sebuah contoh penerapan property display dalam membuat layout sebuah dokumen web:
- <html>
- <head>
- <title>Belajar Display</title>
- </style>
- #bg{
- display: inline;
- z-index: 1;
- background: #ffccff;
- left: 10px;
- width : 100%;
- border-bottom: #fc9b52 20px solid;
- position: absolute;
- top: 10px;
- height: 150;
- }
- </style>
- </head>
- <body>
- div id=bg> </div>
- </body>
- <html>
Pada contoh kode di atas di gunakan sebuah property display yang di terapkan secara inline, kemudian posisi z-index 1, warna background #ffccff warna border bawah dengan nilai 20 piksel, posisi absolute, besar margin atas 10 piksel dan tinggi sebesar 150 piksel. Jika di dalam browser akan terlihat seperti pada gambar di bawah ini :
Tampilan Dalam Tabel
Dalam CSS kita dapat pula menampilkan data dalam bentuk tabel seperti yang di buat dengan html menggunakan property display css, seperti :
selector {display : table;}
Pada nilai inline-table tersebut akan mengatur data dalam sebuah tabel tanpa adanya line break sebelum dan sesudahnya.
Mungkin cara terbaik untuk memahami tabel yang berhubungan dengan nilai dari prperty display ini adalah dengan menggunakannya seperti tabel dalam Html. Tabel dalam CSS adalah display insial dan anda dapat menirukan elemen ter dan td dengan nilai dari baris tabel menggunakan table-roe dan cell table menggunakan table-cell secara terpisah. Penulissannya dalam CSS adalah:
selector {display : nilai table;}
Property display semakin baik dengan menawarkan nilai yang lebih lengkap untuk tabel berupa table-column, table-row-group, table-column-group, dan table-caption guna pengaturan data dalam sebuah tabel menggunakan css, di mana seluruh nilai tersebut cukup deskriptif untuk mewakili tampilan dari tabel dalam css.
Keunggulan dari nilai ini adalah bahwa anda dapat membuat tabel dengan kolom di bandingkan tabel yang di gunakan dalam html yang lebih condong pada metode menggunakan baris.
Catatan : Menggunakan sebuah tabel css dalam dokumen web yang anda buat dapat merusak tampilan dokumen web yang anda buat menggunkan html. Html biasanya di gunakan untuk menyampaikan pesan. Jadi, jika anda memiliki data-data yang tersusun dalam tabel, ada baiknya jika data tersebut di susun dalam tabel html.
Tipe-tipe display lainnya:
| 1.List-item | : | Untuk tampilan data daftar yang biasanya di gunakan seperti pada tag li dalam elemen html. Agar tipe ini bekerja dengan baik, elemen yang akan menggunakan tipe ini sebaiknya menggunakan elemen ul atau ol sehingga akan menampilkan berupa daftar |
| 2.Run-in | : | Akan membuat sebuah elemen baik berupa in-line maupun block-line tergantung tipe ini adalah tidak dapata bekerja dalam browser Internet Explorer atau Mozilla |
| 3.Compact | : | Sama dengan run-in, yaitu membuat elemen terlihat dalam bentuk inline atau block-line tergantung pada isinya. Namun tipe ini tidak dapat bekerja dengan baik pula dalam kedua browser di atas |
| 4.Marker | : | Di gunakan bersama dengan pseudo element : before dan after untuk menentukan tampilan dari nilai property isi yang telah di tandai dengan tag ini. Jadi tipe ini hanya dapat berjalan dengan baik jika anda mengesampingkan nilai pseudo elemen property display sebelumnya. |
Nah itulah pembahasan dari saya mengenai Display Dalam CSS, semoga artikel ini dapat membantu, ok saya pamit dulu sampai bertemu di artikel selanjutnya. Salam Sukai Penulis
0 Komentar