Tek istediğim, listedeki bir merminin rengini açık griye çevirebilmek. Varsayılan olarak siyahtır ve onu nasıl değiştireceğimi çözemiyorum.
Sadece bir resim kullanabileceğimi biliyorum; Yardım edebilirsem bunu yapmamayı tercih ederim.
Yanıtlar:
Madde işareti rengini metinden alır. Bu nedenle, listenizdeki metinden farklı bir renk madde işaretine sahip olmak istiyorsanız, bazı işaretler eklemeniz gerekir.
Liste metnini bir aralıkta kaydırın:
<ul>
<li><span>item #1</span></li>
<li><span>item #2</span></li>
<li><span>item #3</span></li>
</ul>
Ardından stil kurallarınızı biraz değiştirin:
li {
color: red; /* bullet color */
}
li span {
color: black; /* text color */
}
:beforeMarc'ın aşağıdaki cevabında olduğu gibi kullanmayı tercih edeceğime katılıyorum .
betiket daha uygun olacaktır.
Bunu işaretleme eklemeden başardım, bunun yerine li: daha önce kullandım. Bu açıkça tüm sınırlamalara sahiptir :before(eski IE desteği yoktur), ancak bazı çok sınırlı testlerden sonra IE8, Firefox ve Chrome ile çalışıyor gibi görünüyor. Denetleyici ortamımızda çalışıyor, birinin bunu kontrol edip edemeyeceğini merak ediyor. Madde işareti stili de unicode'da bulunanlarla sınırlıdır.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
li {
list-style: none;
}
li:before {
/* For a round bullet */
content:'\2022';
/* For a square bullet */
/*content:'\25A0';*/
display: block;
position: relative;
max-width: 0px;
max-height: 0px;
left: -10px;
top: -0px;
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
</body>
</html>
Bu 2008'de imkansızdı, ancak yakında mümkün olacak (umarım)!
W3C CSS3 spesifikasyonuna göre , ::markersözde öğeli bir liste öğesinden önce oluşturulan herhangi bir sayı, glif veya diğer semboller üzerinde tam kontrole sahip olabilirsiniz . Bunu en çok oylanan yanıtın çözümüne uygulamak için:
<ul>
<li>item #1</li>
<li>item #2</li>
<li>item #3</li>
</ul>
li::marker {
color: red; /* bullet color */
}
li {
color: black /* text color */
}
Bununla birlikte, Temmuz 2016 itibarıyla bu çözümün W3C Çalışma Taslağının yalnızca bir parçası olduğunu ve henüz ana tarayıcıların hiçbirinde çalışmadığını unutmayın.
Bu özelliği istiyorsanız, şunları yapın:
<ul>
<li style="color: #888;"><span style="color: #000">test</span></li>
</ul>
bu yöntemle ilgili en büyük sorun fazladan işaretlemedir. (span etiketi)
betiket daha uygun olacaktır.
Merhaba belki bu cevap geç ama bunu başarmak için doğru olan cevap.
Tamam, gerçek şu ki, LIst metninin her zamanki siyah (ya da onu elde etmek istediğiniz her ne olursa olsun) olmasını sağlamak için dahili bir etiket belirtmelisiniz. Ancak CSS ile herhangi bir ETİKETİ ve dahili etiketi YENİDEN TANIMLAYabileceğiniz de doğrudur. Dolayısıyla, bunu yapmanın en iyi yolu, yeniden tanımlama için KISA bir etiket kullanmak
Bu CSS tanımını kullanın:
li { color: red; }
li b { color: black; font_weight: normal; }
.c1 { color: red; }
.c2 { color: blue; }
.c3 { color: green; }
Ve bu html kodu:
<ul>
<li><b>Text 1</b></li>
<li><b>Text 2</b></li>
<li><b>Text 3</b></li>
</ul>
Gerekli sonucu alırsınız. Ayrıca her diski farklı renkte yapabilirsiniz:
<ul>
<li class="c1"><b>Text 1</b></li>
<li class="c2"><b>Text 2</b></li>
<li class="c3"><b>Text 3</b></li>
</ul>
Bir grafik programında bir madde işareti yapın ve şunu kullanın list-style-image:
ul {
list-style-image:url('gray-bullet.gif');
}
list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='256' fill='#ff0000' /%3E%3C/svg%3E");
Liste öğesinin içindeki metni bir yayılma alanı (veya başka bir öğe) ile sarın ve madde işareti rengini liste öğesine ve metin rengini yayılma alanına uygulayın.
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
Çok sayıda sayfanız varsa ve gidip işaretlemeyi kendi başınıza düzenlemeniz gerekmiyorsa Jquery'yi kullanabilirsiniz.
İşte basit bir örnek:
$("li").each(function(){
var content = $(this).html();
var myDiv = $("<div />")
myDiv.css("color", "red"); //color of text.
myDiv.html(content);
$(this).html(myDiv).css("color", "yellow"); //color of bullet
});
2008 sorusu için, bir listedeki mermilerin rengini nasıl değiştirebileceğinize dair daha yeni ve güncel bir cevap ekleyebileceğimi düşündüm.
Harici kitaplıkları kullanmaya istekli iseniz, Font Awesome size ölçeklenebilir vektör simgeleri sunar ve Bootstrap'in yardımcı sınıflarıyla (örneğin text-success) birleştirildiğinde oldukça havalı ve özelleştirilebilir listeler oluşturabilirsiniz.
Aşağıdaki Font Awesome listesi örnekleri sayfasından alıntıyı genişlettim :
Sırasız listelerde varsayılan madde işaretlerini kolayca değiştirmek için
fa-ulve kullanınfa-li.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="fa-ul">
<li><i class="fa-li fa fa-circle"></i>List icons</li>
<li><i class="fa-li fa fa-check-square text-success"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin text-primary"></i>as bullets</li>
<li><i class="fa-li fa fa-square text-danger"></i>in lists</li>
</ul>Font Awesome (çoğunlukla) IE8'i destekler ve yalnızca eski 3.2.1 sürümünü kullanıyorsanız IE7'yi destekler .
Her öğe için renk ayarlarsak da işe yarar, örneğin: Sola biraz Kenar Boşluğu ekledim.
<article class="event-item">
<p>Black text here</p>
</article>
.event-item{
list-style-type: disc;
display: list-item;
color: #ff6f9a;
margin-left: 25px;
}
.event-item p {
margin: 0;
color: initial;
}
Bunu elde etmek için CSS kullanabilirsiniz. Listeyi seçtiğiniz renk ve stilde belirterek, metni farklı bir renk olarak da belirtebilirsiniz.
Http://www.echoecho.com/csslists.htm adresindeki örneği izleyin .
Sadece CSS kullanın:
<li style='color:#e0e0e0'>something</li>