Yazilim Mutfagi Dersleri ( CSS ) Ders 7 – CSS Liste Özellikleri

CSS List Özellikleri

Liste özellikleri listeleme amaçli kullanilmaktadir, ayrica son yillarda list özellikleri web sitelerindeki menuleri tasarlamak için kullaniliyor.

Liste

HTML de 2 tip liste vardir:

  • Sirasiz Listeler – Liste ögelerinin önünde siyah yuvarlak bir icon çikar.
  • Sirali Listeler – Liste ögelerinin önüne sayilar veya harfler gelir. CSS ile istenirse liste ögelerinden önce resimde konulabilir.

Farkli Liste Ögesi Belirticileri (list-style-type):

Liste öge belirticileri list-style-type özelligini kullanarak degistirilebilir.

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Sirali Listeler

Sirali Listeler <ol> etiketi ile tanimlanir ve sirali listelere ait ögeleri biçimlendirmek için asagidaki list-style-type degerleri kullanilir.
.

Deger Açiklama
decimal Normal Numaralandirma (1,2,3,4, vb.)
decimal-leading-zero Sayinin Önüne Sifir Koyarak Artar. (01, 02, 03, vb.)
armenian Geleneksel Ermeni Numaralandirmasi
georgian Geleneksel Gürcü Numaralandirmasi (an, ban, gan, vb.)
lower-alpha Küçük Harflerden Olusan Alfabe (a, b, c, d, e, vb.)
lower-greek Küçük Harflerden Olusan Yunan Alfabesi (alpha, beta, gamma, vb.)
lower-latin Küçük Harflerden Olusan Latin Alfabesi (a, b, c, d, e, vb.)
lower-roman Küçük Harflerden Olusan Roman Alfabesi (i, ii, iii, iv, v,vb.)
upper-alpha Büyük Harflerden Olusan Alfabe (A, B, C, D, E, vb.)
upper-latin Büyük Harflerden Olusan Latin Alfabesi (A, B, C, D, E, vb.)
upper-roman Büyük Harflerden Olusan Roman Alfabesi (I, II, III, IV, V, vb.)

Sirali Listeler için Kullanim Örnegi

ol.dc {list-style-type:decimal;}
ol.dcz {list-style-type:decimal-leading-zero;}
ol.ar {list-style-type:armenian;}
ol.ge {list-style-type:georgian;}
ol.lr {list-style-type:lower-roman;}

list-style-type:decimal;

  1. Kahve
  2. Çay
  3. Kola

list-style-type:decimal-leading-zero;

  1. Kahve
  2. Çay
  3. Kola

list-style-type:armenian;

  1. Kahve
  2. Çay
  3. Kola

list-style-type:georgian;

  1. Kahve
  2. Çay
  3. Kolo

list-style-type:lower-roman;

  1. Kahve
  2. Çay
  3. Kola

Sirasiz Listeler

Sirasiz Listeler <ul> etiketi ile tanimlanir ve sirasiz listelere ait ögeleri biçimlendirmek için asagidaki list-style-type degerleri kullanilir.

Deger Açiklama
none Madde baslarindaki ikonu kaldirir.
disc Madde baslarinda siyah yuvarlak ikon çikarir. Varsayilan.
square Madde baslarinda siyah kare ikon çikarir.
circle Madde baslarinda siyah yuvarlak içi bos ikon çikarir.

Sirasiz Listeler için Kullanim Örnegi

ul.nn {list-style-type:none;}
ul.dsc {list-style-type:disc;}
ul.crc {list-style-type:circle;}
ul.sq {list-style-type:square;}

list-style-type:none;

  • Kahve
  • Çay
  • Kola

list-style-type:disc;

  • Kahve
  • Çay
  • Kola

list-style-type:circle;

  • Kahve
  • Çay
  • Kola

list-style-type:square;

  • Kahve
  • Çay
  • Kola

Remark Internet Explorerin hiç bir versiyonu "decimal-leading-zero", "lower-greek", "lower-latin", "upper-latin", "armenian" veya "georgian" degerlerini DOCTYPE özelligini kullanmadiginiz sürece desteklemez.

Liste Ögeleri için Resim Kullanmak (list-style-image)

Liste ögeleri için resim kullanmak için list-style-image özelligini kullaniriz. Böylece her ögenin basinda bu resim görünecektir.

Örnek

ul.resimli
{
   list-style-image: url('pembekare.gif');
}
  • Kahve
  • Çay
  • Kola

Yukaridaki örnegi farkli tarayicilarda deneyecek olursaniz IE ve Opera da Firefox,Chrome ve Safariye göre göre resimlerin biraz daha büyük çiktigini görebilirsiniz.

Eger ögelere atadiginiz resmin tüm browserlarda ayni boyda görünmesini istiyorsaniz asagidaki çözümü uygulamaniz gerekiyor.

Tüm Tarayicilarda Ayni Görüntüyü Saglama – CrossBrowser

Asagidaki örnekde ögeler için atadiginiz resim tüm tarayicilarda ayni boyutta görünür.

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
.


Örnegin Açiklamasi:

  • ul için açiklama:
    • list-style-type özelligine none degerini veriyoruz,böylece öge belirteçlerini kaldirmis oluyoruz.
    • padding ve margin özelliklerine 0 veriyoruz.
  • li için açiklama:
    • Resmin urlsini veriyoruz ayrica resmin tekrarlanmamasini saglamak için background-repeat özelligine no-repeat degerini veriyoruz.
    • Resmin çikmasini istedigimiz kordinatlarini veriyoruz. örnekte sola 0 saga 5 piksel verdik.
    • padding-left özelligi ile metni soldan 14 piksel uzakta olacak sekilde ayarliyoruz.

Listeler – Kisa Kullanim

Listeler için tanimladigimi tüm özellikleri tek bir satirda kisaca yapabiliriz. Kisa kullanim için list-style özelligini kullaniyoruz.

ul
{
list-style: square url("pembekare.gif");
}

Kisa yazim kullandigimiz zaman degerlerin sirasi asagidaki gibi olur:

  • list-style-type
  • list-style-position
  • list-style-image

Remark Kisa yazim kullaniminda siradaki bir özellik atlanirsa tarayici verilen degere göre uygun özelligi bulur.

Özellik Deger Açiklama
list-style Tüm özelliklerin tek bir satirda tanimlanmasini saglar list-style-type
list-style-position
list-style-image
inherit
list-style-position Liste elemanlarinin daha içeriye veya biraz disariya yerlesmesini saglar. inside
outside
inherit
list-style-image Liste elemanlarinin önüne resim eklemek için kullnilir. URL
none
inherit
list-style-type Liste elemanlarini önünde çikan isaretlerin tipini belirler. none
disc
circle
square
decimal
decimal-leading-zero
armenian
georgian
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
lower-roman
upper-roman
inherit

Dersimizin ilk bölümünde listelerin son zamanlarda menü tasarlamak için kullanildigindan bahsetmistik. Simdi gelin listeleri kullanarak bir menü örnegi yapalim.

Menü olusturmak için bir liste ekliyoruz ve menümüzü olusturacak linkleri listenin birer elemani olarak asagidaki gibi ekliyoruz. Bu listeyi bir div içine koyuyoruz.

<div class="menu">
<ul>
<li><a href="#">AnaSayfa</a></li>
<li><a href="#">Makaleler</a></li>
<li><a href="#">Hakkimizda</a></li>
<li><a href="#">Iletisim</a></li>
</ul>
</div>

Simdi yukarida tanimladigimiz liste css ile sekillendirmeden önce asagidaki gibi görünecektir.

Simdi ise div için aradigimiz menu classini css ile yazalim ve bakalim menünün görünümü nasil olacak

CSS tanimlamasi asagidaki gibi olacak.
.menu_demo
{
position: relative;
height: 43px;
font-size: 14px;
text-transform: capitalize;
background: #FCFAE6 url('ust_menu_bg.png') repeat-x left bottom;
font-family: Georgia, "Times New Roman" , Times, serif;
margin-bottom: 10px;
}
.menu_demo ul
{
margin: 0;
padding: 0;
list-style-type: none;
width: auto;
float: left;
}
.menu_demo ul li
{
display: block;
float: left;
margin: 0 2px;

}
.menu_demo ul li a
{
display: block;
float: left;
color: #ffdab6;
text-decoration: none;
padding: 0 0 0 25px;
height: 43px;
line-height: 50px;
width:100%;
}
.menu_demo ul li a:hover
{
color: #894d12;
background: url('ust_menu_left-ON.gif') no-repeat left top;

}
.

Yukaridaki CSS tanimlamasini ekledigimiz zaman menümüzün görüntüsü asagidaki gibi oldu.

Yukaridaki örnegi inceleyerek sizde kendi menünüzü tasarlayabilirsiniz.

.

2 thoughts on “Yazilim Mutfagi Dersleri ( CSS ) Ders 7 – CSS Liste Özellikleri

  1. Merhaba Liste içindeki yazi, listenin boyutunu asiyorsa yazinin bir alt satira geçmesi için hangi özelligi kullanmamiz lazim. bulamadim.

    word ya da not defterindeki sözcük kaydir-word-wrap özellgi gibi

Bir cevap yazın

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