Ahmad Faizin

"Sebarkan ilmu walau hanya satu ayat ^^"

Breaking

Wednesday 15 March 2017

Belajar CSS Part 7 List di Dalam CSS

Belajar CSS Part 7 List di Dalam CSS




Assalamualaikum Wr. Wb.

PENGERTIAN

List (Daftar) di dalam HTML sudah dijelaskan ada dua jenis utama dari daftar:
  • Daftar unordered (<ul>) - daftar item ditandai dengan bullet
  • Daftar memerintahkan (<ol>) - daftar item ditandai dengan angka atau huruf
Sifat daftar CSS memungkinkan Anda untuk:
  • Mengatur foto sebagai item daftar penanda 
  • Menambahkan warna latar belakang untuk daftar dan daftar item
  • Mengatur tanda item untuk daftar 

LATAR BELAKANG

Ingin mempelajari bagaimana mengatur style list di dalam CSS.

MAKSUD & TUJUAN

Memudahkan kita dalam memberikan style dalam daftar.
Dapat mengatur item tanda pada daftar. 


ALAT & BAHAN
  • Text Editor
  •  Browser
LANGKAH KERJA

Pada CSS List, list atau daftar ini memiliki beberapa konten, yang pertama yaitu 
  • Perbedaan simbol daftar item  
Simbol di dalam CSS list memiliki berbagai macam variasi ada kotak, lingkaran, angka, huruf, dll. Untuk lebih jelasnya lihat contoh berikut.



Nb: untuk mengganti style item pada daftar menggunakan syntax "list-style-type: tipe item"



Gambar di atas merupakan contoh dari item daftar yang berbeda di CSS list. Kemudian konten yang kedua

  • Item daftar dalam bentuk gambar
 Pada CSS list kita bisa mengganti item daftar dengan menggunakan gambar yang kita suka. Contohnya sebagai berikut.


 Nb : Untuk mengganti item pada CSS list bisa menggunakan syntax "list-style-image: url('alamat gambar')"


Gambar di atas merupakan contoh dari item daftar dengan menggunakan gambar. Jika gambarnya kebesaran bisa diatur sesuai kebutuhan anda. Konten selanjutnya yaitu

  • Posisi dari item daftar


Nb: Untuk mengubah posisi dari daftar tersebut bisa menggunakan syntax "list-style-position" attributenya bisa inside atau outside. Tapi secara default posisi daftar list itu secara outside.



Nah di atas merupakan hasilnya. Bisa dilihat sendiri perbedaannya. Kemudian konten selanjutnya yaitu 

  • Memberikan warna pada daftar atau list.
Pada CSS list ini kita dapat mengubah background pada sebuah daftar agar datar tersebut terlihat lebih indah dan menarik. Untuk lebih jelasnya kita lihat contohnya.


Nb: Untuk menambahkan warna ke dalam daftar bisa menggunakan perintah background di dalam listnya. karena disini yang diubah adalah backgroundnya.



 

Nah di atas merupakan hasilnya. Bagaimana keren kan, sekarang giliran anda yang mencoba. Silahkan mencoba !! Semoga Sukses!!

Mungkin itu saja dari saya kurang lebihnya mohon maaf.

Syukron

Wassalamualaikum Wr. Wb.


Referensi

No comments:

Post a Comment

Adbox