내가 원하는 것은 목록의 총알 색상을 밝은 회색으로 변경할 수있는 것뿐입니다. 기본값은 검정색이며 변경 방법을 알 수 없습니다.
이미지 만 사용할 수 있다는 것을 알고 있습니다. 내가 도울 수 있다면 차라리 그렇게하지 않겠습니다.
답변:
글 머리 기호는 텍스트에서 색상을 가져옵니다. 따라서 목록의 텍스트와 다른 색상의 글 머리표를 사용하려면 일부 마크 업을 추가해야합니다.
목록 텍스트를 범위로 래핑합니다.
<ul>
<li><span>item #1</span></li>
<li><span>item #2</span></li>
<li><span>item #3</span></li>
</ul>
그런 다음 스타일 규칙을 약간 수정하십시오.
li {
color: red; /* bullet color */
}
li span {
color: black; /* text color */
}
:before아래 Marc의 답변에서와 같이 사용하도록 선택한다는 데 동의 합니다.
b태그가 더 적절할 것입니다.
마크 업을 추가하지 않고 대신 li : before를 사용하여 관리했습니다. 이것은 분명히 :before(이전 IE 지원 없음) 의 모든 한계를 가지고 있지만 매우 제한된 테스트 후에 IE8, Firefox 및 Chrome에서 작동하는 것 같습니다. 우리의 컨트롤러 환경에서 작동하며 누군가 이것을 확인할 수 있는지 궁금합니다. 글 머리 기호 스타일은 또한 유니 코드에있는 항목에 의해 제한됩니다.
<!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>
2008 년에는 불가능했지만 곧 가능해졌습니다.
W3C CSS3 사양 에 따르면 ::marker의사 요소가 있는 목록 항목 이전에 생성 된 숫자, 글리프 또는 기타 기호를 완전히 제어 할 수 있습니다 . 가장 많이 득표 한 답변의 솔루션에 이것을 적용하려면 :
<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 */
}
하지만 2016 년 7 월 현재이 솔루션은 W3C Working Draft의 일부일 뿐이며 아직 주요 브라우저에서는 작동하지 않습니다.
이 기능을 원하면 다음을 수행하십시오.
<ul>
<li style="color: #888;"><span style="color: #000">test</span></li>
</ul>
이 방법의 큰 문제는 추가 마크 업입니다. (스팬 태그)
b태그가 더 적절할 것입니다.
안녕하세요, 아마도이 답변이 늦었지만 이것을 달성하는 올바른 답변입니다.
사실은 LIst 텍스트가 보통 검은 색 (또는 원하는대로)이되도록 내부 태그를 지정해야한다는 것입니다. 그러나 CSS로 모든 태그와 내부 태그를 재정의 할 수 있다는 것도 사실입니다. 따라서이를 수행하는 가장 좋은 방법은 재정의에 SHORTER 태그를 사용하는 것입니다.
이 CSS 정의를 Usign :
li { color: red; }
li b { color: black; font_weight: normal; }
.c1 { color: red; }
.c2 { color: blue; }
.c3 { color: green; }
그리고이 html 코드 :
<ul>
<li><b>Text 1</b></li>
<li><b>Text 2</b></li>
<li><b>Text 3</b></li>
</ul>
필요한 결과를 얻습니다. 또한 각 디스크의 색상을 다르게 만들 수 있습니다.
<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>
그래픽 프로그램에서 총알을 사용하고 다음을 사용하십시오 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");
목록 항목 내의 텍스트를 범위 (또는 다른 요소)로 감싸고 글 머리 기호 색상을 목록 항목에 적용하고 텍스트 색상을 범위에 적용합니다.
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
2008 년 질문의 경우 목록에서 글 머리 기호의 색상을 변경하는 방법에 대한 최신 답변을 추가 할 수 있다고 생각했습니다.
외부 라이브러리를 사용하려는 경우 Font Awesome은 확장 가능한 벡터 아이콘을 제공 하며 Bootstrap의 도우미 클래스 (예 :text-success 하면 매우 멋지고 사용자 정의 가능한 목록을 만들 수 있습니다.
아래 의 Font Awesome 목록 예제 페이지 에서 추출한 내용을 확장했습니다 .
사용
fa-ul하고fa-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 (대부분)은 IE8을 지원하며 이전 버전 3.2.1 을 사용하는 경우 IE7 만 지원합니다 .
이를 위해 CSS를 사용할 수 있습니다. 선택한 색상과 스타일로 목록을 지정하여 텍스트를 다른 색상으로 지정할 수도 있습니다.
http://www.echoecho.com/csslists.htm 의 예를 따르십시오 .
CSS를 사용하십시오.
<li style='color:#e0e0e0'>something</li>