CSS List Style Display Özellikleri

Silverday

Altın Üye
Altın Üye
Katılım
3 May 2006
Mesajlar
3,551
Reaction score
0
Puanları
0
Konum
sakarya
1207610648_liste.png


Şimdilerde Menü için sıkca kullanılan (buradaki menüde listae kullanırak yapılmıştır) list aslında menü için düşünülerek yapılmamıştır ama hayal gücü güçlü insanlar bunu menü olarak kullanmış ve çok tutulmuş ilk kim yapmış bilemiyorum ama iyi ki yapmış tabi burada menü yapmayı anlatmıyacağım daha çok liste özelliklerinden bahsetmek istiyorum başka bi zamanda uygulamlardan bahsedirim inşallah
Kod:
list-style-type:


list-style-type listemizin önündeki simgeyi, harfi veya işareti belirler bunlar nelerdir görelim
ul {list-style-type: none;} /* NONE Listemizde hiç bir simge harf ve işaret göstermez */
ul {list-style-type: disc;} /* Listemizde içi dolu yuvarlak simge gösterir */

* Bir
* İki
* Üç


ul {list-style-type: circle;} /* Listemizde içi boş yuvarlak simge gösterir*/

* Bir
* İki
* Üç


ul {list-style-type: square;} /* Listemizde Kare bir simge gösterir*/

* Bir
* İki
* Üç


ul {list-style-type: decimal;} /* Listemizde 1 den başlayarak rakamsal olarak sayım yapar*/

1. Bir
2. İki
3. Üç


ul {list-style-type: decimal-leading-zero;} /*Listemizde 01 den başlayarak rakamsal olarak sayım yapar */

* Bir
* İki
* Üç


ul {list-style-type: lower-roman;}
/* Küçük harfle roma rakamı olarak sayım yapar*/

1. Bir
2. İki
3. Üç


ul {list-style-type: upper-roman;}
/*Büyük harfle roma rakamı olarak sayım yapar*/

1. Bir
2. İki
3. Üç


ul {list-style-type: lower-alpha;} /*Küçük harfle sayım yapar*/

1. Bir
2. İki
3. Üç


ul {list-style-type: upper-alpha;}
/*Büyük harfle sayım yapar*/

1. Bir
2. İki
3. Üç


ul {list-style-type: lower-greek;} /*Küçük harfle yunanca sayım yapar*/

* Bir
* İki
* Üç


ul {list-style-type: lower-latin;} /*Küçük harfle latin olarak sayım yapar*/

1. Bir
2. İki
3. Üç


ul {list-style-type: upper-latin;} /*büyük harfle latin olarak sayım yapar*/

1. Bir
2. İki
3. Üç


ul {list-style-type: hebrew;} /*ibranice olarak sayım yapar*/

* Bir
* İki
* Üç


ul {list-style-type: armenian;} /*ermence olarak sayım yapar*/

* Bir
* İki
* Üç


ul {list-style-type: georgian;} /*gürcü ce olarak sayım yapar*/

* Bir
* İki
* Üç


ul {list-style-type: cjk-ideographic;} /*Alttaki şekilde sayım yapar*/

* Bir
* İki
* Üç


ul {list-style-type: hiragana;} /* Japon fonetik şekilde sıralama yapar*/

* Bir
* İki
* Üç


ul {list-style-type: katakana;} /*japon hece harfi şeklinde sıralar*/

* Bir
* İki
* Üç


ul {list-style-type: hiragana-iroha;}
/*japon harfleri şeklinde sıralar*/

* Bir
* İki
* Üç


ul {list-style-type: katakana-iroha;}
/*japon harfleri şeklinde sıralar*/

* Bir
* İki
* Üç


list-style-image:


list-style-image kodumuzda listemizin önüne istediğimiz bir resimi ekleyebiliriz
ul {list-style-image: url(resim klasörü/resim.gif)
Örnek için CSS sayfasına bakabilirsiniz
list-style-position:


list-style-position kodumuzda ise listemizin makale yazımızdan biraz içeride olmasını sağlayabiliriz
örnek olarak alttaki listemiz içeride olsun

* Bir
* İki
* Üç


Kullandığımız kod şu şekilde dir ul {list-style-position: inside}
diğer kodumuz outside dışarıda olmasını sağlıyoruz kodumuz ise şu şekilde
ul {list-style-position: outside} örnek

* Bir
* İki
* Üç


Alttaki resimde anlamamıza daha yardımcı olacaktır sanırım

1207661879_list-inout.png


İp Ucu:
kodlarımız tek tek kullanmak yerine kısaltılmış halini kullanabiliriz örnek
Kod:
ul {list-style: circle outside none}
ul {list-style: none outside url(images/resim.gif)}
şeklinde kullanabiliriz kullanabileceğimiz yerler liste adı üstünde örnek CSS sayfası ama yazımın ilk başında da belirtiğim gibi menü yapımında sıkca kullanılıyor list uygulaması Menü İçin Kullanmak isteyenler display özelliklerinden yaralanabilir
İp Ucu
Listemizi Yatay Olarak Sıralamak istersek menüler deki gibi
Kod:
ul {display: inline}
Kodunu kullananbiliriz
örnekler ve resimler size yardımcı olmuştur umarım hoşcakalın
 
Geri
Üst