Dalam materi belajar css seri lalu kita membahas tentang grouping dan nesting, sekarang kita akan belajar tentang dimension dan display. Dalam property css dimension memungkinkan kita untuk mengatur tinggi dan lebar suatu elemen. Berikut ini ada macam-macam property css dimension :
- Height : Mengatur tinggi elemen
- Max – height: Mengatur tinggi maksimal suatu elemen.
- Max-width : Mengatur lebar maksimal suatu elemen.
- Min-height : Mengatur tinggi minimum suatu elemen.
- Min-width : Mengatur lebar minium suatu elemen.
- Width : Mengatur lebar suatu elemen.
Kita tidak akan membahas banyak soal dimension karena sudah banyak dibahas di property-property yang lain, kita langsung belajar css display dan visibility. Properti display dan visibility ini biasanya digunakan untuk menampilkan atau menyembunyikan object di dalam halaman HTML.
Untuk Display mempunyai 2 property yang utama yaitu:
- None: Tidak kelihatan
- Block: kelihatan
Contoh kode :
1
| h1.hidden {display:none;} |
Sedangkan untuk Visibility juga mempunyai 2 property yang dapat diset nilainya yaitu:
- Hidden: Tidak kelihatan
- Visible: kelihatan
Contoh kode :
1
| h1.hidden {visibility:hidden;} |
Perbedaan diantara keduanya mungkin tidak begitu menyolok, namun hanya masalah space saja, dimana jika kita menambahkan space pada bagian yang akan dihilangkan, penggunaan style visibility:hidden akan tetap memunculkan space tersebut.
misalnya kita akan membuat sebuah trigger yang akan memunculkan dan menyembunyikan gambar ataupun object lainnya. Dapat kita tuliskan sebagai berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
| function changeme(id, action) {if (action==”hide”) {document.getElementById(id).style.display = “none”;} else {document.getElementById(id).style.display = “block”;}} |
Nah, anda bisa mencoba kode-kode diatas. Jangan berhenti untuk belajar css yaa.. karena masih banyak yang perlu dipelajari. Seri berikutnya akan kita bahas css positioning.
0 comments:
Post a Comment