아름다운 CSS 목록 스타일을 만드는 방법. 목록 스타일: CSS의 목록 스타일 속성 그룹입니다. 목록 항목의 이미지 list-style-image

Ul li( 테두리: 2px 솔리드 #ff0000; )

이제 보시면 이미지 마커가 위에서 만든 것과 동일한 프레임인 목록 요소 외부에 있습니다. 따라서 목록 요소 내부에 마커가 있어야 하는 경우가 있습니다. 이래서 재산이 있는거구나 목록 스타일 위치 , 처음에는 다음으로 설정되어 있습니다. 밖의 즉, 요소 ​​외부에 마커를 설정합니다.

요소 내부에 마커를 삽입하려면 다음 값을 사용하세요. 내부에 . 이제 이 속성을 다음과 같이 설정하면 내부에 , 그러면 마커가 목록 요소 내부에 있게 되고 빨간색 프레임이 이를 명확하게 보여줍니다.

Ul( list-style-image: url(../images/마커 이름 image.jpg); list-style-position:inside; ) ul li( border: 2px solid #ff0000; )

이것이 이 세 가지 속성이 작동하는 방식입니다. 이러한 모든 속성을 결합한 표기법의 단축 버전도 있습니다.

즉, 속성이 표시됩니다. 목록 스타일 그런 다음 마커 유형, 마커 위치 및 필요한 경우 마커가 될 사진 경로의 값을 순서대로 지정합니다. 그리고 우리는 다음과 같은 그림을 얻습니다.

Ul( 목록 스타일: inside url(../images/마커 이름 image.jpg); )

이렇게 쓰여있어요 짧은 버전목록의 모양과 관련된 규칙. 이 항목마커는 요소 내부에 있어야 하며 마커는 동일한 그림이 될 것이라고 말합니다.

이것이 목록에 관한 모든 것입니다. 그러나 목록에 좀 더 시간을 투자하고 다양한 마커를 설치하여 연습하고 모든 것이 어떻게 작동하는지 느껴보세요. 안에 데모마커 설정 옵션이 표시되며, 여기에서 작업의 정확성을 비교하여 확인할 수 있습니다.

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

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

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. 목록 스타일 위치

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

list-style-type 속성은 마커 유형을 설정합니다. 여기 테이블이 있어요 허용 가능한 값이 속성의 경우:

표에는 조지아어와 CJK 표의 문자라는 두 가지 매우 특이한 속성이 나열되어 있습니다. 이러한 속성은 지역적으로 사용됩니다. 이 속성에는 아르메니아어나 히라가나와 같은 다른 유사한 흥미로운 의미가 여러 가지 있지만 모두 나열하는 것은 의미가 없습니다.

이제 이 속성을 사용하는 예는 다음과 같습니다.

1. 첫 번째 요점.
2. 두 번째 요점.
3. 세 번째 요점.

번호가 매겨진 목록이 바뀌었으니 참고하세요.

라벨에.

그림 1. 목록 스타일 유형 속성.

없음 값에 주의하세요. 이 값은 마커를 완전히 제거합니다. 이 속성은 CSS를 사용하여 목록 형식을 지정하는 데 자주 사용됩니다.

list-style-type 속성은 목록 작업을 위한 다른 속성과 마찬가지로 매우 간단합니다.

list-style-image 속성은 마커 기호를 그래픽 파일로 설정합니다.

• 첫 번째 요점.
• 두 번째 요점.
• 세 번째 요점.




우리가 보는 것은 다음과 같습니다:

그림 3. 블록 형식 지정
.

목록 표시자가 요소 블록의 경계를 넘어 확장된다는 사실에 주의하는 것이 중요합니다.

• , 빨간색 테두리로 둘러싸여 있습니다. 이는 다음으로 이어질 수 있습니다. 예상치 못한 결과, 예를 들어 0으로 재설정하겠습니다. 심
  .
  • 첫 번째 요점.
  • 두 번째 요점.
  • 세 번째 요점.
  
  
  

  이것이 우리가 얻는 것입니다:

  그림 4. 블록 형식 지정
  .

  이제 목록 마커가 컨테이너 외부에 있습니다.

  . 따라서 마커는 목록이 속한 기사의 컨테이너를 넘어갈 수 있으며, 이는 사이트의 모양을 방해합니다.

  용기에 담아두는 것이 좋을 것 같아요

  • . 그거면 해결되겠지 이 문제. 이것이 바로 list-style-position 속성의 목적입니다.

    list-style-position 속성은 블록을 기준으로 마커의 위치를 ​​설정합니다.

  • . 이 속성에는 두 가지 의미가 있습니다.

    기본값은 외부입니다.

    이 속성을 예제에 적용하고 블록에 마커를 배치해 보겠습니다.

  • 이 속성을 inside 로 설정합니다.
    • 첫 번째 요점.
    • 두 번째 요점.
    • 세 번째 요점.
    
    
    

    우리가 얻은 것은 다음과 같습니다.

    그림 5. 목록 스타일 위치 속성.

    이제 목록 글머리 기호가 블록 내에 중첩됩니다.

  • .

    목록 스타일 속성

    목록 스타일 속성은 이전 세 가지 속성의 값을 모두 사용할 수 있는 약식 형식입니다.

    예: 마커로 그림을 만들고 마커를 목록 항목 블록 안에 배치합니다.

    • 첫 번째 요점.
    • 두 번째 요점.
    • 세 번째 요점.
    
    
    

    결과는 다음과 같습니다.

    그림 6. 목록 스타일 속성.

    하나의 목록 스타일 속성에 마커의 위치와 마커의 그래픽 파일 경로라는 두 가지 값을 지정했습니다.

    목록 스타일 속성은 단일 값을 설정하는 경우에도 가장 자주 사용됩니다. 짧고 쓰기 쉽습니다.

    관련 CSS 레시피

    • CSS에서 드롭다운 메뉴를 만드는 방법 복잡한 예그림자와 함께.

    CSS를 사용하면 글머리 기호 및 번호 매기기 목록을 만들고, 이미지로 글머리 기호 목록을 디자인하고, 필요한 경우 글머리 기호 목록 표시를 모두 제거할 수 있습니다.

    CSS 글머리 기호 목록 스타일.

    목록 스타일 유형

    목록 스타일 유형:디스크 | 원 | 광장 | 십진수 | 낮은 로마 | 상부 로마 | 낮은 알파 | 상위 알파 | 없음 ;

    의미 :

    디스크 – 채워진 원 형태의 글머리 기호 목록

    Circle – 채워지지 않은 원 형태의 글머리 기호 목록

    square – 채워진 사각형 형태의 글머리 기호 목록

    십진수 – 아라비아 숫자(1,2,3 등)가 포함된 번호 목록

    상위 로마자 – 큰 로마 숫자로 된 번호 목록(I, II, III, IV 등)

    로우 로마 숫자 – 작은 로마 숫자를 사용한 번호 목록(i,ii,iii,iv 등)

    upper-alpha – 대문자(A,B,C 등)로 된 번호가 매겨진 목록

    lower-alpha – 소문자로 된 번호가 매겨진 목록(a,b,c 등)

    없음 – 마커가 없습니다.

    예:

    • 최고를 믿고 최악을 예상하십시오.
    • 인생은 치명적인 결과를 가져오는 질병이다.
    • 결코 말하지 마십시오.
    
    
    

    결과 :

    목록에서 마커 표시를 제거해야 하는 경우가 있습니다. 이렇게 하려면 CSS 코드를 작성하세요.

    목록 스타일 유형:없음;

    예:

    • 최고를 믿고 최악을 예상하십시오.
    • 결코 말하지 마십시오.
    
    
    

    결과 :

    

    목록의 일반 마커를 교체할 수 있습니다. 자신의 이미지. 이는 list-style-image 속성을 사용하여 수행할 수 있습니다.

    목록 스타일 이미지

    목록 스타일 이미지: url(이미지.png);

    예:

    • 최고를 믿고 최악을 예상하십시오.
    • 인생은 치명적인 결과를 가져오는 질병이다.
    • 결코 말하지 마십시오.
    
    
    

    결과 :

    

    설정할 수도 있습니다. 글머리 기호 목록텍스트와의 거리. 이는 li 선택기의 padding-left 속성을 사용하여 수행할 수 있습니다.

    예:

    • 최고를 믿고 최악을 예상하십시오.
    • 인생은 치명적인 결과를 가져오는 질병이다.
    • 결코 말하지 마십시오.
    
    
    

    결과 :

    

    다음 작업은 텍스트 색상을 변경하지 않고 마커 색상을 변경하는 것입니다. 이것이 어떻게 가능한지? 테스트에 태그를 추가하여 마커 색상을 변경할 수 있습니다. .
    다음과 같습니다.

  • 텍스트

  예:

  • 최고를 믿고 최악을 예상하십시오.
  • 인생은 치명적인 결과를 가져오는 질병이다.
  • 결코 말하지 마십시오.
  
  
  

  결과 :

  

  일반 주제에 추가됩니다.
  어떤 이유로 마커 목록의 번호 매기기를 0이 아닌 8부터 설정해야 하는 경우 이렇게 이동할 수 있습니다.

  예:

  • 최고를 믿고 최악을 예상하라 1.
  • 인생은 치명적인 질병입니다. 포인트 2
  • 포인트 3 절대 말하지 마세요.
  • 그게 내가 아는 전부였습니다. 포인트 4
  
  
  

  결과 :

  

  이 주제는 끝났습니다.