CSS로 목록을 디자인합니다. 범위를 사용하지 않고 HTML 목록의 글머리 기호 색상 변경 태그 목록 항목 색상이 다름

예 2: ::before 의사 요소 사용

• 북쪽
• 남쪽
• 서쪽
• 동쪽

이 예의 결과는 그림 1에 나와 있습니다. 2.

일

목록의 마커 모양을 변경하고 다른 기호로 바꿉니다.

해결책

HTML 또는 CSS를 사용하여 디스크(점), 원(원), 정사각형(사각형)의 세 가지 유형의 마커 중 하나를 설정할 수 있습니다. UL 또는 LI 선택기에 대해 지정된 목록 스타일 유형 스타일 속성에 이러한 값을 추가해야 합니다(예 1).

예 1: 표준 마커

HTML5 CSS 2.1 IE Cr Op Sa Fx

• 체브라시카
• 악어 제나
• 샤포크약

이 예에서는 사각형이 마커로 사용되었습니다(그림 1).

쌀. 1. 마커의 종류

자신만의 마커 기호를 선택하고 설정하는 것은 :before 의사 요소를 통해 매우 독특한 방식으로 이루어집니다. 첫 번째 단계는 list-style-type 속성을 없음으로 설정하여 목록에서 글머리 기호를 모두 제거한 다음 LI 선택기에 :before 의사 요소를 추가하는 것입니다. 기호 출력 자체는 원하는 텍스트 또는 기호 값을 갖는 콘텐츠 속성을 사용하여 수행됩니다(예 2).

예 2: 사용:before 및 내용

HTML5 CSS 2.1 IE Cr Op Sa Fx

• 체브라시카
• 악어 제나
• 샤포크약

이 예에서는 기본 마커가 숨겨지고 해당 위치에 기호가 추가됩니다(그림 2).

쌀. 2. 기호 형태의 마커

일부 까다로운 기호를 마커로 설정하려면 Microsoft Word나 기호 테이블을 사용할 수 있습니다. 이는 Windows에 포함된 표준 프로그램입니다. 코드 인코딩은 UTF-8이어야 합니다.

CSS 목록 마커 크기 (8)

목록에 있는 글머리 기호의 색상을 변경할 수 있는 방법이 있는지 궁금합니다.

나는 목록을 가지고 있습니다 :

• 집
• 정원

"span" 및 "p"와 같은 어떤 것도 li에 삽입할 수 없습니다. 글머리 기호의 색상은 변경할 수 있지만 텍스트는 변경할 수 없나요?

나에게 가장 좋은 옵션은 CSS 의사 요소를 사용하는 것이므로 디스크 불릿 디스크의 경우 다음과 같습니다.

ul ( 목록 스타일 유형: 없음; ) li ( 위치: 상대; ) li:before ( content: ""; 디스플레이: 블록; 위치: 절대; 너비: 5px; /* 필요에 맞게 조정 */ height: 5px; /* 필요에 맞게 조정 */ border-radius: 50%; /* 필요에 맞게 조정 */ top: 0.5em /* 필요에 맞게 조정 * / )

• 첫 번째
• 두번째
• 제삼

• 포인터를 반올림 상태로 유지하려면 너비와 높이가 동일한 값이어야 합니다.
• 사각형 글머리 기호를 원할 경우 테두리 반경을 0으로 설정할 수 있습니다

더 많은 글머리 기호 스타일을 보려면 다른 CSS 모양 https://css-tricks.com/examples/ShapesOfCSS/을 사용할 수 있습니다(삼각형과 같은 의사 요소가 필요하지 않은 이 형식을 선택하세요).

@ddilsaver의 답변을 바탕으로 합니다. 총알 스프라이트를 사용할 수 있기를 원했습니다. 이것은 작동하는 것 같습니다:

Li ( 목록 스타일: 없음; 위치: 상대; ) li:before ( 내용:""; 디스플레이: 블록; 위치: 절대; 너비: 20px; 높이: 20px; 왼쪽: -30px; 상단: 5px; 배경 이미지 : url(i20.png); background-position: 0px -40px; /* 또는 원하는 오프셋 */ )

나는 이것이 아주 아주 오래된 질문이라는 것을 알고 있지만, 나는 이것을 가지고 놀다가 내가 본 적이 없는 방법을 생각해냈습니다. 목록에 색상을 지정한 다음 ::first-line selector::first-line 으로 텍스트 색상을 재정의합니다. 저는 전문가가 아니기 때문에 이 접근 방식에 제가 놓친 부분이 있을 수 있지만 작동하는 것 같습니다.

li ( 색상: 파란색; ) li::first-line ( 색상: 검정색; )

• 집
• 정원

나는 Mark의 답변도 정말 좋아했습니다. 다양한 색상의 UL 세트가 필요하며 분명히 클래스를 사용하는 것이 더 쉬울 것입니다. 예를 들어, 오렌지에 사용한 것은 다음과 같습니다.

Ul.orange( 목록 스타일: 없음; 패딩: 0px; ) ul.orange > li:before( content: "\25CF "; 글꼴 크기: 15px; 색상: #F00; 오른쪽 여백: 10px; 패딩: 0px ;줄 높이: 15px;

또한 "content:"에 사용한 16진수 코드가 Marc의 코드와 다르다는 사실을 발견했습니다(16진수 원이 너무 커 보였습니다). 제가 사용한 코드는 중앙에 완벽하게 자리 잡은 것 같습니다(사각형, 삼각형). , 서클 등)

@Marc와 @jessica의 솔루션을 기반으로 제가 사용하는 솔루션은 다음과 같습니다.

Li( 위치: 상대; ) li: 전( 내용:""; 표시: 블록; 위치: 절대; 너비: 6px; 높이:6px; 테두리 반경:6px; 왼쪽: -20px; 위쪽: .5em; 배경- 색상: #000;

나는 글꼴 크기에 em을 사용하므로 top을 .5em으로 설정하면 항상 텍스트 첫 줄의 중간에 배치됩니다. 나는 left:-20px를 사용했는데, 이것이 브라우저의 기본 left:-20px 위치이기 때문입니다: parent padding/2

@Marc의 솔루션을 기반으로 합니다. 글머리 기호 기호는 글꼴과 브라우저에 따라 다르게 렌더링되므로 테두리 반경이 있는 다음 CSS3 기술을 사용하여 글머리 기호를 더 잘 제어할 수 있게 만들었습니다.

Li:이전( 내용: ""; 배경색: #898989; 디스플레이: 인라인 블록; 위치: 상대; 높이: 12px; 너비: 12px; 테두리 반경: 6px; -webkit-border-radius: 6px; - moz-테두리-반경: 6px; -moz-배경-클립: 패딩; -webkit-배경-클립: 패딩-박스;

우리는 list-style-image를 svg와 결합할 수 있습니다. CSS에 포함! 이 방법은 무엇이든 될 수 있는 "총알"에 대한 놀라운 제어 기능을 제공합니다.

빨간색 원을 얻으려면 다음 CSS를 사용하십시오.

"); }

그러나 이것은 시작에 불과합니다. 이를 통해 우리는 이 총알로 원하는 어떤 미친 짓이라도 할 수 있습니다. 원이나 직사각형은 쉽지만 svg로 그릴 수 있는 것은 무엇이든 거기에 갈 수 있습니다! 아래의 사과 사과 예시를 참조하세요.

ul ( 목록 스타일 이미지: url("data:image/svg+xml, "); ) ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul.bulls-eye ( list-style-image: url("data:image/svg+xml, "); ) ul.multi-color ( list-style-image: url("data:image/svg+xml, "); }

• 큰 원!
  • 큰 직사각형!
  • 비
    • 작은 원!
    • 씨
      • 작은 직사각형!

• 불스
• 눈.

• 다중
• 색상

속성 너비/높이

일부 브라우저에서는 너비 및 높이 속성을 다음으로 설정해야 합니다.

인코딩

마크업을 추가하지 않고 이를 관리했지만 대신 li:before를 사용했습니다. 이것은 분명히 이전(레거시 IE 지원 없음)의 모든 제한 사항을 가지고 있지만 매우 제한된 테스트 후에 IE8, Firefox 및 Chrome에서 작동하는 것으로 보입니다. 글머리 기호 스타일도 유니코드로 제한됩니다.

li ( 목록 스타일: 없음; ) li:before ( /* 둥근 글머리 기호의 경우 */ content: "\2022"; /* 사각형 글머리 기호의 경우 */ /*content:"\25A0";*/ display: block ; 위치: 상대 높이: 0;

글머리 기호 목록의 줄을 기본 텍스트와 어떻게든 구별하기 위해 목록의 글머리 기호 색상을 텍스트 색상과 다르게 만들 수 있습니다.

기본값은 검은색 점입니다. 단순히 색상을 li 요소로 설정하면 아무 것도 작동하지 않습니다. 색상은 전체 라인으로 설정되며 마커의 색상(점의 ul li 색상)만 변경하면 됩니다.

CSS를 사용하여 글머리 기호 색상을 변경하는 방법

1. 속성을 사용하여 원래 목록 표시 숨기기 목록 스타일 유형
2. 의사 요소를 사용하여 자신만의 마커 추가하기 :전에및 속성 콘텐츠. 이렇게 하면 요소 앞에 텍스트나 문자를 삽입할 수 있습니다. 리.
3. 마커의 모양은 CSS 스타일을 통해 색상, 글꼴, 배경 등을 변경하여 제어할 수 있습니다. 굵은 Montserrat 글꼴을 사용했습니다.

예를 들어 메인 메뉴나 바닥글의 중복 메뉴와 같이 불필요한 위치에 마커가 나타나는 상황이 있는 경우 이 문제를 쉽게 해결할 수 있습니다. 마커 색상을 변경해야 하는 목록이 포함된 상위 요소를 추가하기만 하면 됩니다. 말을 추가했어요 기사이제 이러한 변경 사항은 사이트의 콘텐츠 영역에만 적용됩니다.

CSS 목록— 목록 디자인을 담당하는 속성 집합입니다. 웹 사이트 탐색 모음을 만들 때 HTML 목록을 사용하는 것은 매우 일반적입니다. 목록 항목은 블록 요소의 컬렉션을 나타냅니다.

표준 CSS 속성을 사용하면 다음을 수행할 수 있습니다. 목록 표시자의 모양 변경, 마커에 대한 이미지 추가, 그리고 마커 위치 변경. 표식기 블록의 높이는 line-height 속성을 사용하여 설정할 수 있습니다.

CSS 스타일을 사용하여 목록 디자인

1. 목록 표시 유형 list-style-type

속성은 마커 유형을 변경하거나 마커를 제거합니다글머리 기호 및 번호 매기기 목록의 경우. 상속됨.

통사론

Ul (목록 스타일 유형: 없음;) ul (목록 스타일 유형: 사각형;) ol (목록 스타일 유형: 없음;) ol (목록 스타일 유형: lower-alpha;) 쌀. 1. 글머리 기호 및 번호 목록 디자인 예

2. 목록 항목의 이미지 list-style-image

이미지와 그라데이션 채우기를 목록 항목 표시자로 사용할 수 있습니다. 상속됨.

통사론

Ul (목록 스타일 이미지: url("images/romb.png");) ul (목록 스타일 이미지: 선형 그라데이션(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
쌀. 2. 이미지를 사용하여 글머리 기호 목록 디자인
쌀. 3. 그라데이션을 사용하여 글머리 기호 목록 디자인

3. 목록 스타일 위치

이 속성은 목록 항목의 콘텐츠 외부 또는 내부에 마커를 배치하는 기능을 제공합니다. 상속됨.