Css Liste Ozellikleri
Şimdilerde Menü için sıkca kullanılan (buradaki menüde liste 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
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*/
- Bir
- İki
- Üç
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*/
- Bir
- İki
- Üç
ul {list-style-type: upper-roman;} /*Büyük harfle roma rakamı olarak sayım yapar*/
- Bir
- İki
- Üç
ul {list-style-type: lower-alpha;} /*Küçük harfle sayım yapar*/
- Bir
- İki
- Üç
ul {list-style-type: upper-alpha;} /*Büyük harfle sayım yapar*/
- Bir
- İki
- Üç
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*/
- Bir
- İki
- Üç
ul {list-style-type: upper-latin;} /*büyük harfle latin olarak sayım yapar*/
- Bir
- İki
- Üç
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
İp Ucu:
kodlarımız tek tek kullanmak yerine kısaltılmış halini kullanabiliriz örnek
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
ul {display: inline} Kodunu kullananbiliriz
örnekler ve resimler size yardımcı olmuştur umarım hoşcakalın
