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

kenanakyel 24/12/2020

Sitemde hazır template kullanıyorum. tüm kodlar bana açık değil. Ama fiyat kısmında 1,250.00 yazıyor. ben burdaki (,) virgülü nasıl nokta yaparım?

yönetici 26/12/2020

Kenan, Wordpress gibi hazır bir sistem kullanıyorsun. Program uluslararası kodları destekleyecek şekilde yapılmıştır. Yukarıda verdiğin fiyat göstergesi Türkiye numara kodlamasına uygun Doğrusu bu olmalı.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

9797

KATEGORÄ°
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MÄ°THRÄ°L FRAMEWORK
  • Laravel
  • Git
  • React
POPÃœLER MAKALE
  • HTML LÄ°NK(BaÄŸlantı)EKLEME - LÄ°NK VERME
  • HTML YAZI VE RESÄ°M ORTALAMA
  • HTML RESME LÄ°NK VERME
  • HTML FORM OLUÅžTURMA
  • CSS YATAY MENÃœ YAPIMI
  • HTML RESÄ°M EKLEME
  • CSS (BOYUT) GENÄ°ÅžLÄ°K VE YÃœKSEKLÄ°K (Width-Height)
  • HTML DÄ°V ve SPAN NEDÄ°R?
  • HTML ARKAPLANA MÃœZÄ°K EKLEME
  • KALÄ°TE KAYBETMEDEN RESÄ°MLERÄ° BÃœYÃœTME
ETÄ°KET
WEBCEBİR © 2013 Tüm hakları saklıdır.