CSS'de Listelerin Madde İşaretini Değiştirme

HTML listelerinde, her liste öğesi için madde işaretleri veya bir tür 'simge' bulunur. Bu, normal içerikten öne çıkmalarına yardımcı olur, ancak yerleşik seçenekler oldukça sıradandır.

Şu anda, sıralı olmayan bir listede madde işareti noktasının rengini veya şeklini değiştirmenin yerleşik bir yolu yoktur. Ancak, bu değişikliği biraz özel CSS kodları ile gerçekleştirebilirsiniz.

Yapılacak ilk şey, stilize edilemedikleri için varsayılan madde işaret noktalarını kaldırmaktır. Bu nedenle, listenin list-style özellik değerini none olarak ayarlıyoruz. Şimdi , li::before seçicisini kullanarak liste öğesinden önce bir Unicode madde işareti noktası eklemek gerekiyor. content değerini bir madde işareti noktasının Unicode kodu olan "\ 2022" olarak ayarlayacağız .

Madde işareti rengini değiştirme


HTML: Temel bir liste oluşrurun.


<ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>PHP</li>
 <li>JAVASCRİPT</li>
</ul>

Varsayılan olarak, bir liste öğesinin madde işareti rengini değiştirmek mümkün değildir. Ancak, bunu mümkün kılmak için bazı CSS Teknikleri kullanabilirsiniz. Bir CSS framework veya özel bir stil sayfası kullanıyorsanız, biraz farklı ayar yapmanız gerekebileceğini unutmayın.


ul {
    list-style: none;
}

li {
    position: relative;
}

li:before {
    content: "•";
    position: absolute;
    left: -1em;
    color: red;
}

ÇIKTI:

  1. HTML
  2. CSS
  3. PHP
  4. JAVASCRİPT

Unicode Karakteri Madde İşareti Olarak Kullanma


Varsayılan tarayıcı madde işaretlerini kapatılabilir ve bunun yerine CSS ::before sözde öğesini kullanarak bir unicode madde işareti kullanabilirsiniz.

Herhangi bir unicode karakteri kolayca ekleyebilirsiniz , ancak size kolaylık olması açısından kullanıcı tabanımızla en alakalı olan unicode karakterlerin listesini derledik.

Character Description Escaped Unicode
Bullet \2022
White Bullet \25e6
Fisheye \25c9
Bullseye \25ce
Black Square \25a0
White Square \25a1
White Square Containing Black Small Square \25a3
Black Diamond \25c6
White Diamond \25c7
White Diamond Containing Black Small Diamond \25c8
Lozenge \25ca
Black Right-Pointing Small Triangle \25b8
White Right-Pointing Small Triangle \25b9

ÖRNEK:

  
  ul {
    list-style: none;
}

li {
    position: relative;
}

li:before {
    content: "\25c6";
    position: absolute;
    left: -1em;
    color: orange;
  
  

HTML:


<ol>
	<li>HTML</li>
	<li>CSS</li>
	<li>PHP</li>
	<li>JAVASCRİPT</li>
</ol>

ÇIKTI:

  1. HTML
  2. CSS
  3. PHP
  4. JAVASCRİPT
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

7881

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • HTML KAYAN YAZI VE Marguee KULLANIMI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.