CSS ile Resimli Listeleme İşlemi

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 :

ul { list-style-image:url(‘http://i41.tinypic.com/10rk5ua.jpg’); }

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

CSS ile resimli listeleme

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.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir