이미지 나 범위 태그를 사용하지 않고 CSS를 통해 UL / LI HTML 목록에서 글 머리 기호 색상을 설정하는 방법
이 질문에는 이미 답변이 있습니다.
일부 <li>항목이 포함 된 간단한 정렬되지 않은 목록을 상상해보십시오 . 지금, 나는이를 통해 정사각형 모양으로 총알을 정의 list-style:square;하지만, 나는의 색상 설정 한 경우 <li>와 항목을 color: #F00;다음 모든 빨간색이됩니다!
사각형 글 머리 기호의 색만 설정하고 싶습니다. CSS에서 글 머리 기호의 색상을 정의 하는 우아한 방법 이 있습니까?
스프라이트 이미지 나 스팬 태그를 사용하지 않고!
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>
CSS
li{
list-style:square;
}
이 작업을 수행하는 가장 일반적인 방법은 다음과 같은 내용입니다.
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 1em;
text-indent: -.7em;
}
li::before {
content: "• ";
color: red; /* or whatever color you prefer */
}<ul>
<li>Foo</li>
<li>Bar</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>JSFiddle : http://jsfiddle.net/leaverou/ytH5P/
버전 8 이상의 IE를 포함한 모든 브라우저에서 작동합니다.
언젠가 탐색,이 사이트를 발견,이 대안을 시도 했습니까?
li{
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
}
딱딱하게 들리지만 여기에 자신의 png 이미지 / 패턴을 만든 다음 코드를 복사 / 붙여 넣기하고 글 머리 기호 =) 여전히 우아하게 꾸밀 수 있습니까?
편집하다:
다른 답변에 대한 @ lea-verou의 아이디어를 따르고이 외부 소스 향상의 철학을 적용하면이 다른 솔루션에 도달했습니다.
- Webfont 아이콘 라이브러리의 스타일 시트 (이 경우 Font Awesome)를 머리에 삽입하십시오.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
- FontAwesome cheatsheet (또는 다른 웹 폰트 아이콘) 에서 코드를 가져옵니다 .
i.e.: fa-angle-right []
그리고 f ...의 마지막 부분과 다음과 같은 숫자를 사용하십시오 font-family.
li:before {
content: "\f105";
font-family: FontAwesome;
color: red; /* or whatever color you prefer */
margin-right: 4px;
}
그리고 그게 다야! 이제 당신은 맞춤 총알 팁이 있습니다 =)
모든 브라우저에서 작동하는이 문제를 간단히 해결합니다.
HTML :
<ul>
<li><span>Foo</span></li>
<li><span>Bar</span></li>
<li><span>Bat</span></li>
</ul>
CSS :
ul li{
color: red
}
ul li span{
color: blue;
}
CSS 3 Lists 모듈 의 현재 사양은 원하는 것을 정확하게 수행 하는 ::marker의사 요소 를 지정합니다 . FF는 지원하지 않는 것으로 테스트되었으며 ::markerSafari 또는 Opera에 해당 기능이 있는지 의심됩니다. 물론 IE는이를 지원하지 않습니다.
따라서 지금이 작업을 수행하는 유일한 방법은로 이미지를 사용하는 것입니다 list-style-image.
나는 당신이 내용을 포장있을 것 같아요 li로모그래퍼 span다음 각의 색상을 설정할 수 있지만, 나에게 조금 hackish 보인다.
그것을 할 수있는 한 가지 방법은 사용 li:before으로 content: ""하고로 스타일링 inline-block요소입니다.
작동 코드 스 니펫은 다음과 같습니다.
ul {
list-style-type: none; /* no default bullets */
}
ul li {
font-family: Arial;
font-size: 18px;
}
ul li:before { /* the custom styled bullets */
background-color: #14CCBB;
border-radius: 50%;
content: "";
display: inline-block;
margin-right: 10px;
margin-bottom: 2px;
height: 10px;
width: 10px;
}<ul>
<li>Swollen joints</li>
<li>Pain in hands and knees</li>
<li>Redness around joints</li>
<li>Constant fatigue</li>
<li>Morning stiffness in joints</li>
<li>High fevers</li>
<li>Rheumatoid nodules, which develop around joints</li>
</ul>그러나 또 다른 해결책 :before은와 의사 요소를 사용하는 것 border-radius: 50%입니다. 이것은 IE 8 이상을 포함한 모든 브라우저에서 작동합니다.
은 Using em유닛은 폰트 크기 변경에 응답 할 수있다. jsFiddle 창의 크기를 조정하여이를 테스트 할 수 있습니다.
ul {
list-style: none;
line-height: 1em;
font-size: 3vw;
}
ul li:before {
content: "";
line-height: 1em;
width: .5em;
height: .5em;
background-color: red;
float: left;
margin: .25em .25em 0;
border-radius: 50%;
}
당신은 심지어 box-shadow멋진 그림자를 만들기 위해 content: "• "솔루션을 사용하여 멋지게 보이지 않을 수도 있습니다.
나는 이것을 시도했고 일이 나에게 이상 해졌다. (CSS는 후 작동이 중단 :after {content: "";}내가 방금 사용하여 총알을 색상 수 있습니다 발견했다.이 튜토리얼의 일부 color:#ddd;온 li항목 자체.
다음은 예 입니다.
li{
color:#ff0000;
list-style:square;
}
a {
text-decoration: none;
color:#00ff00;
}
a:hover {
background-color: #ddd;
}
나는 이것을 위해 jQuery를 사용한다 :
jQuery('li').wrapInner('<span class="li_content" />');
& 일부 CSS와 함께 :
li { color: red; }
li span.li_content { color: black; }
과잉이지만 CMS를 코딩 할 때 편집자에게 모든 목록 항목에 추가 범위를 추가하도록 요청하지 않으려는 경우 유용합니다.
내가주는 것이 좋습니다 LI을 background-image하고 padding-left. 이 list-style-image속성은 브라우저 간 환경에서 결함이 있으며 범위와 같은 추가 요소를 추가 할 필요가 없습니다. 따라서 코드는 다음과 같이 보입니다.
li {
background:url(../images/bullet.png) 0 0 no-repeat;
list-style:none;
padding-left:10px;
}
당신이 할 수있는 가장 쉬운 방법은의 내용을 포장입니다 <li>A의 <span>다음 독립적으로 색상을 설정할 수 있습니다 또는 이에 상응하는.
또는 원하는 글 머리 기호 색상으로 이미지를 만들고 list-style-image속성으로 설정할 수 있습니다.
여러 줄로 된 항목을 들여 쓰기 한 Lea Verou 솔루션 의 변형은 다음과 같습니다.
ul{
list-style: none;
position: relative;
padding: 0;
margin: 0;
}
li{
padding-left: 1.5em;
}
li:before {
position: absolute;
content: "•";
color: red;
left: 0;
}
이 문제에 솔루션을 추가하고 있습니다.
나는 이미지를 사용하고 싶지 않으며 유효성 검사기는 CSS에서 음수 값을 사용하는 것에 대해 처벌하므로 다음과 같이하십시오.
ul { list-style:none; padding:0; margin:0; }
li { padding-left:0.75em; position:relative; }
li:before { content:"•"; color:#e60000; position:absolute; left:0em; }
이 게시물에 대한 답변이 약간 늦었지만 참고 용으로 ...
CSS
ul {
color: red;
}
li {
color: black;
}
글 머리 기호 색상은 ul 태그에서 정의 된 다음 li 색상을 다시 전환합니다.
Lea의 데모를 살펴보면 다음과 같이 경계가없는 순서가없는 목록을 만드는 다른 방법이 있습니다. http://jsfiddle.net/vX4K8/7/
HTML
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<ul>
<li>Son</li>
<li>Of</li>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
</ul>
</ul>
CSS
ul {
list-style: none;
margin: 0;
}
ul:first-child {
padding: 0;
}
li {
line-height: 180%;
border-bottom: 1px dashed #CCC;
margin-left: 14px;
text-indent: -14px;
}
li:last-child {
border: none;
}
li:before {
content: "";
border-left: 4px solid #CCC;
padding-left: 10px;
}
Lea Verous 솔루션은 좋지만 총알의 위치를 더 세밀하게 제어하고 싶었습니다.
.entry ul {
list-style: none;
padding: 0;
margin: 0;
/* hide overflow in the case of floating elements around ... */
overflow: hidden;
}
.entry li {
position: relative;
padding-left: 24px;
}
.entry li:before {
/* with absolute position you can move this around or make it bigger without getting unwanted scrollbars */
position: absolute;
content: "• ";
color: #E94E24;
font-size: 30px;
left: 0;
/* use fonts like "arial" or use "sans-serif" to make the dot perfect round */
font-family: Arial, sans-serif;
}
이렇게하겠습니다 ..
li{
color: #fff;
}
'development' 카테고리의 다른 글
| Objective-C에서 추상 클래스 작성 (0) | 2020.02.12 |
|---|---|
| 스플래시 화면을 만들려면 어떻게합니까? (0) | 2020.02.12 |
| 문자열 유형으로 열거 형을 열거하는 방법은 무엇입니까? (0) | 2020.02.12 |
| 문자 집합간에 텍스트 파일을 변환하는 가장 좋은 방법은 무엇입니까? (0) | 2020.02.12 |
| 파이썬에서 상대적 가져 오기를 수행하는 방법? (0) | 2020.02.12 |