1167

Komple Uygulamalı Web Geliştirme Eğitimi

Css Liste Biçimlendirmesi

Css list style özellikleri nelerdir ? Css ile link görünümlerini nasıl düzeltirim ? Css ile yatay ve dikey menü nasıl oluşturulur ?

Html sayfalarımızda css list etiketlerini sıklıkla kullanırız. Css listeleri bazen liste oluştururken bazen de bir link grubu şeklinde css yatay menü ya da css dikey menü oluşturduğumuzda kullanırız bu yüzden css listelerine css stil kodlarını nasıl eklememiz gerektiğini iyi bilmemiz gerekiyor.

<ul>
  <li>Komple Uygulamalı Web Geliştirme</li>
  <li>Modern Javascript Kursu</li>
  <li>Nodejs Kursu</li>
</ul>

Basit bir liste görüntüsüne css list stil kodlarını ekleyelim.

ol,ul {
    background: purple;
    padding: 20px;
}

ul li {
    background: white;
    margin: 5px;
}

Örnek 1 için için tıklayınız.

Örneğimizde <ol> ya da <ul> nesnesi ve sayfada olabilecek her <li> etiketi için bazı css list stil kodlarını ekledim. ve aldığımız görüntü bize css listeleri ile nasıl çalışmamız gerektiği hakkında detaylı bilgi vermektedir. 

Örneğin <ul> etiketinin ya da <li> etiketinin kapsamı neresidir bunu rahatlıkla görebiliyoruz. Ayrıca list için çıkan liste işaretinin nokta şeklinde geldiğide görüyoruz. Şimdi gelin bu liste elemanlarını css style kodları ile değiştirelim.

ul {
   list-style-type:none;
}

Örnek 2 için için tıklayınız.

** Burada list-style-type:none; diyerek varsayılan olarak gelen liste tipini kaldırmış oluyoruz.

list-style-type özelliğinin alabileceği diğer alternatifler için aşağıdaki örneği inceleyelim.

<ul class="a">
  <li>Html</li>
  <li>Css</li>
  <li>Javascript</li>
</ul>

<ul class="b">
  <li>Html</li>
  <li>Css</li>
  <li>Javascript</li>
</ul>

<ol class="c">
  <li>Html</li>
  <li>Css</li>
  <li>Javascript</li>
</ol>

<ol class="d">
  <li>Html</li>
  <li>Css</li>
  <li>Javascript</li>
</ol>
.a {
    list-style-type: circle;
}

.b {
    list-style-type: square;
}

.c {
    list-style-type: upper-roman;
}

.d {
    list-style-type: lower-alpha;
}

Örnek 3 için için tıklayınız.

Css List ve Link Style Kodları ile Dikey Menü Yapımı

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Article</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
</ul>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 150px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #555;
    color: white;
}

Örnek 4 için için tıklayınız.

** list-style-type: none; ile liste işaretlerini kaldırıyoruz.

** margin:0 ve padding:0 ile tarayıcının varsayılan olarak atadığı margin ve padding değerlerini sıfırlıyoruz.

** <ul> etiketi varsayılan olarak block etiket olduğundan dolayı satırı olduğu gibi kaplar ve verdiğimiz zemin rengi satırı olduğu gibi doldurur dolayısıyla block etiket için bir genişlik vermek arkaplan renginide kısaltacağından güzel görünür.

** <a> etiketi inline etiket eğer bu etiketi block etiket haline çevirirsek <li> block etiketinin içini olduğu gibi doldurur.

** <a> etiketi için 4 köşeden vereceğimiz padding değeri zemin renginin genişliğini arttırır.

** text-decoration: none; diyerek varsayılan alt çizgi özelliğini linklerden almış oluruz.

** li:hover olayı ile mouse linkin üzerine geldiği anda bir zemin ve yazı rengini değiştirerek efekt vermiş oluruz.

Css List ve Link Style Kodları ile Yatay Menü Yapımı

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Article</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
</ul>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

Örnek 5 için için tıklayınız.

** list-style-type: none; ile liste işaretlerini kaldırıyoruz.

** margin:0 ve padding:0 ile tarayıcının varsayılan olarak atadığı margin ve padding değerlerini sıfırlıyoruz.

** <li> etiketlerine float:left uygulayacağımızdan dolayı <li> etiketlerini kapsayan bir elemana ya clear uygulamamız ya da overflow uygulamamız gerekiyor, bu konuyu floating dersinde görmüştük dersi tekrar incleyebilirsiniz. Dolayısıyla burada overflow:auto; kullanıyoruz.

** Her bir <li> etiketi varsayılan olarak block etiketi olduğundan dolayı alt alta gelirker ancak float:left; uygularsak yan yana getirmiş oluruz.

** <a> etiketi inline etiket eğer bu etiketi block etiket haline çevirirsek <li> block etiketinin içini olduğu gibi doldurur.

** <a> etiketi için 4 köşeden vereceğimiz padding değeri zemin renginin genişliğini arttırır.

** text-decoration: none; diyerek varsayılan alt çizgi özelliğini linklerden almış oluruz.

** li:hover olayı ile mouse linkin üzerine geldiği anda bir zemin rengini değiştirerek efekt vermiş oluruz.