Css Liste Biçimlendirmesi - Css Dersleri

[VexraDev]

ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!

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>Css Dersleri</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;
}

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

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

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

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

** 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.