CSS kodlamasında listeleme işlemi yapılırken çok sık kullanılan bir ikili. Bu ikilide özellikle <ul> kullanarak maddeleme yapılırken resimli bir şekilde nasıl maddeleme işlemini yapabileceğimizi göreceğiz.

Bilindiği üzere CSS ile maddeleme veya listeleme yapılırken <ol> ve <ul> elementleri kullanılır. <ol> kullanıldığında 1'den başlayarak aşağıya doğru size bir liste hazırlar. Bunun dışında <ul> kullanıldığında ise maddeleme olarak bir liste oluşacaktır.

Düz bir şekilde, stilde herhangi bir değişiklik yapmadan listeleme yapıldığında aşağıdaki gibi bir görüntü oluşur.

İşte bu listemizin sol tarafındaki siyah maddeleme işaretlerinin yerine bir resim koymak istiyoruz. Bu işlemi list-style-image CSS kodu ile yapıyoruz. Kullanımı aşağıdaki şekildedir.

Bu kodu stil dosyamıza ekledikten sonra şu şekilde bir görüntü ortaya çıkıyor.

Peki hiç bir madde işareti görmek istemiyorsak?
Bu durumda list-style-image:none; olarak belirlemeliyiz. None ifadesi kullanıldığında herhangi bir işaret görünmez. Bu kullanım da oldukça yaygındır.

Resimin dışında alternatif olarak yuvarlak, içi boş yuvarlak veya kare biçimde de listeleme işlemi yapılabilir. Bu işlem list-style-type ile yapılabilmekte.

ul {list-style-type:disc;} dediğimizde içi dolu bir yuvarlak ile listeler, ki bu varsayılan değerdir.
ul {list-style-type:circle;} dediğimizde içi boş yuvarlak ile listeler.
ul {list-style-type:square;} dediğimizde ise isminden de anlaşılacağı gibi kare olarak listeleme yapacaktır.