Merhaba arkadaşlar,

Bu paylaşımımda sizlere Css ile liste tanımlamayı ve liste özelliğini kullanarak yapabileceğiniz uygulamalardan bahsedeceğim.

İlk olarak konu hakkında genel bi bilgi vermek gerekirse,Css liste özelliği ilk zamanlarda konuları veya maddeleri listelemede kullanılıyordu fakat artık liste yapısı menu yapımında daha çok kullanılmakta.Yani güzel menüler tasarlamak için Css ve liste yapısını bilmek çok etkilidir.

Şimdi liste özelliklerine madde madde göz atalım ;

1 – List Style Type :

disc,circle,square,decimal,lower-roman,upper roman gibi farklı kullanım özellikleri bulunmaktadır,Bu özellikler list-style-image değeri none olduğunda kullanılan özelliklerdir.Listelerin başındaki simgeleri bu özellikleri kullanarak değiştirebilir,listelerin başında daire,çember,kare veya sayı değerleri şeklinde sıralayabilirsiniz.

Kullanımı aşağıdaki gibidir,İlk olarak Css tanımlamasını belirleyip sonra Html kısmını düzenliyoruz.

ul.a {list-style-type:circle;}  // circle yazan kısma diğer parametleri koyarak deneme yapabilirsiniz.

/////////////////////////////////////

<ul class="a">
<li>Adana</li>
<li>İstanbul</li>
<li>Zonguldak</li>
</ul>

List-Style-Type | değer ; Diğer değerlerle listelendiğinde nasıl göründüğü önizlemek için buraya bakabilirsiniz.

2 – List-Style-Position :

Bu özellikle list-item işaretlerinin metinin içindenmi , dışındanmı olacağını belirleyebilirsiniz.Bu şekilde net anlaşılmasada buradaki örneğe bakara dediğimi daha iyi anlayabilirsiniz.

3 – List-Style-İmage :

Bence bu konuda bilmeniz gereken en önemli özellik budur,Çünkü yazımın başındada söylediğim gibi bu özellik sayesinde çok güzel menüler oluşturabilirsiniz.Ben bu yazımda bu bölümü direk eski paylaşımıma yönlendirmek istiyorum çünkü geçmiş zamanda bu konu hakkında ayrıntılı bir paylaşımda bulunmuştum.Ayrıntılı bilgi için buraya

 

Umarım faydalı bir paylaşım olmuştur,Kafanıza takılan veya merak ettiğiniz kısımları bana yorum bölümünden iletebilirsiniz.

Devamını Oku