Tutorial Belajar CSS Part 28 – Mengatur Tampilan List dengan CSS

Posted on Posted in Tutorial CSS

Hai teman – teman selamat datang di web warung belajar, dalam tutorial kali ini kita masih akan belajar mengenai CSS, kita akan membahas mengenai cara mengatur tampilan List dengan CSS, untuk teman – teman yang belum mengetahui mengenai apa itu list silahkan membaca artikel warung belajar yang khusus membahas list di HTML Tutorial HTML Part 16 Cara Membuat Daftar/List di HTML.

List yang digunakan untuk menampilkan daftar atau juga bisa anda gunakan untuk membuat menu navigasi, CSS menyediakan beberapa property yang bisa digunakan untuk memanipulasi tampilan dari list yang dibuat di HTML, baik tanpa panjang lebar beberapa property tersebut antara lain :

Property List-style-type

property ini sederhananya digunakan untuk mengatur icon dari daftar, ada beberapa jenis style yang bisa anda gunakan, agar lebih memahami contohnya silahkan perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama list-style-type.html, lalu silahkan dibuka di browser, maka hasilnya adalah seperti berikut ini :

penjelasannya :

  • pada list pertama iconnya adalah lingkaran hal tersebut karena kita menggunakan value circle pada property list-style-type
  • pada list kedua iconnya adalah kotak hal tersebut karena kita menggunakan value square pada property list-style-type
  • pada list ketiga iconnya adalah huruf romawi besar hal tersebut karena kita menggunakan value upper-roman pada property list-style-type
  • pada list keempat iconnya adalah huruf kecil hal tersebut karena kita menggunakan value lower-alpha pada property list-style-type

Beberapa value yang bisa anda gunakan untuk property list-style-type adalah :

Value Keterangan
disc default, bertanda lingkaran berisi warna hitam penuh.
armenian penomoran tradisional armenian.
circle lingkaran tanpa isi.
cjk-ideographic nomor ideographic.
decimal nomor biasa.
decimal-leading-zero desimal dengan leading angka seperti 01,02,03 dan seterusnya.
georgian penomoran tradisional georgian.
hebrew penomoran tradisional yahudi.
hiragana penomoran tradisional hiragana.
hiragana-iroha penomoran tradisional hiragana-iroha.
katakana penomoran tradisional katakana.
katakana-iroha penomoran tradisional katakana-iroha.
lower-alpha huruf kecil biasa.
lower-greek huruf kecil yunani.
lower-latin huruf kecil latin.
lower-roman angka romawi kecil.
none tanda atau tanpa tanda list.
square kotak.
upper-alpha huruf besar biasa.
upper-latin huruf besar latin.
upper-roman angka romawi besar.

 

 

 

 

Property list-style-image

Property ini digunakan untuk mengatur tampilan dari icon list (daftar) dengan menggunakan gambar, nah anda dapat menentukan gambar yang akan digunakan sebagai icon listnya, dalam contoh ini saya menggunakan gambar dengan format file .gif dengan ukuran 10 x 10 pixel, perhatikan skrip dibawah :

lalu  kita simpan semisal dengan nama list-style-image.html, lalu kita buka di browser maka hasilnya adalah seperti berikut ini  :

maka hasilnya adalah seperti gambar diatas, icon yang ada di list tersebut yang berwarna ungu itu adalah gambar yang kita set pada value property list-style-image

 

 

 

 

Property list-style-position

Property ini digunakan untuk mengatur posisi dari listnya apakah agak kedalam atau agak keluar, value yang bisa anda gunakan disini adalah inside ataupun outside, perhatikan contoh skrip dibawah ini :

lalu kita akan simpan dengan nama semisal list-style-position.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

penjelasan :

  • pada daftar pertama kita menggunakan value inside pada property list-style-position sehingga daftar ditampilkan agak kedalam.
  • pada daftar kedua kita menggunakan value outside pada property list-style-position sehingga daftar ditampilkan agak keluar (posisi default).

 

 

 

 

Shorthand property

Shorthand property adalah istilah dari pemendekan perintah di CSS yang juga bisa anda gunakan pada penulisan list-style, perhatikan contoh skrip dibawah ini :

semisal kita simpan dengan nama list-style-shorthand.html, lalu buka di browser maka hasilnya :

Penjelasan :

  • Pada list diatas kita menggunakan list-style-shorthand dengan beberapa value didalamnya.
  • value pertama adalah square yang menset dari list-style-type menjadi kotak(square)
  • value kedua adalah inside yang menset dari list-style-position menjadi agak kedalam (inside)
  • value ketiga adalah url(‘list-icon.gif’) yang menset icon dari list daftar menggunakan gambar list-icon.gif

Setelah kita mempelajari beberapa property yang berhubungan dengan List, berikutnya kita akan mempelajari beberapa hal yang bisa anda gunakan untuk mengatur tampilan dari list dengan menggunakan CSS.

 

 

 

 

 

Menghapus Settingan Dasar List

Secara default list yang ditampilkan telah mengatur bagian padding, margin, dan list-style-type, nah anda bisa menggunakan perintah dibawah ini untuk menghapus settingan dasar tersebut, perhatikan skrip dibawah ini :

semisal kita simpan dengan nama setting-dasar-list.html, lalu kita buka di browser :

penjelasan :

  • Pada list pertama terlihat daftar ditampilkan lebih masuk ke dalam kearah kanan, dan terdapat icon lingkaran yang merupakan default type dari list
  • Pada list kedua terlihat tidak ada margin, padding, dan icon pada list, sehingga daftar ditampilkan menampel dengan ujung browser

 

 

 

 

Memberi warna pada List

Selain menghilangkan settingan default dari list, anda juga bisa memanipulasi warna dari list, dengan menggunakan beberapa property tambahan seperti background, perhatikan skrip dibawah ini :

semisal kita beri nama background-list.html, lalu kita buka di browser maka hasilnya :

Penjelasan :

  • Pada bagian list kita berikan background dengan warna merah, background:red; pada selector ul
  • pada selector ul li kita beri background dengan warna salmon (semacam pink) dengan margin 5 pixel sehingga jarak 1 item list dengan yang lain ada jaraknya, untuk menggunakan warna lainnya bisa membuka artikel warung belajar mengenai Tutorial Belajar CSS Part 11 – Mengenal Kode Warna pada CSS

 

Bagaimana mudah bukan teman – teman, itu adalah beberapa hal yang bisa kita lakukan untuk List dengan menggunakan CSS, jika ada yang ingin didiskusikan silahkan di kolom komentar, baik sekian dulu teman – teman sampai jumpa di tutorial selanjutnya.

Leave a Reply

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