Css ile Liste Kullanımı

Merhaba dostlar, bu dersimizde Css ile Listelerimizi nasıl şekillendireceğimizi öğreneceğiz. Öncelikle 2 tip listemiz vardır. Bunlar; <ul> ve <ol> dir. Liste elemanları <li> bu iki elementler içerisine yazılırlar. <ul> ve <ol> arasındaki fark ul içersin de ki liste elemanları işaret ile ol içerisinde yer alana elementler ise sayı, abc, romen rakam gibi yazılabilmek te.

Yukarıda anlattıklarımızı şimdi daha iyi anlamak için aşağıdaki örnek kodlarımızı inceleyelim.

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;
}

Yukarıdaki örnek kodumuzu incelediğimizde 2 element arasındaki farkı daha rahat anlayacağız.

Liste Elemanlarına Resim Vermek

Css ile liste elemanlarımıza resim atamak mümkündür. Aşağıdaki kodumuzu inceleyelim.

ul {
  list-style-image: url('sqpurple.gif');
}

Varsayılan Listele Ayarlarını Kaldırmak

Css ile liste elemenlarımızın varsayılan ayarlarını kaldırıp kendi istediğimiz şekilde ayar verebiliriz. Varsayılan ayarları kaldırmak için aşağıda yer alan örnek kodumuzu inceleyelim.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Liste Elemanlarını Yan Yana Yazdırmak

Daha çok menü yapmak için kullanılan bir özelliktir. Css ile liste elemanlarını yan yana yazdırmak için öncelikle aşağıda yer alana örnek kodumuzu inceleyelim.

ul{
    list-style: none
    display: block;
}

ul li{
    display: inline;
    position: relative;
}

Evet dostları görüldüğü gibi oldukça basit işlem.Bir diğer derste görüşmek üzere.

Bir cevap yazın

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

Shares