CSS 목록(목록)

face 규칙

목록 속성은 목록 항목 표시 표시를 제어합니다.

HTML 목록 유형

• HTML에는 세 가지 다른 유형의 목록이 있습니다: 불순서 목록

• 기본적으로 항목 목록, 각 목록 항목에 목록 표시가 사용됩니다.

• 항목 목록, 각 목록 항목에 숫자가 표시됩니다. -정의 목록

항목 목록, 각 항목에 설명이 포함됩니다.목록에 대한 더 많은 정보를 얻으려면, 관련 튜토리얼을 확인하십시오.HTML 목록

튜토리얼.

CSS 스타일 목록

• CSS는 가장 일반적으로 사용되는 불순서 목록과 정렬 목록을 스타일화하는 몇 가지 속성을 제공합니다. 이 CSS 목록 속성은 일반적으로 다음과 같은 기능을 제공합니다:

• 표시의 모양이나 외관을 제어합니다.

• 표시의 이미지를 지정하여 목록 항목 점이나 숫자 대신 사용합니다.

• 표시와 목록 텍스트 간의 거리를 설정합니다.

표시나 목록 항목 점이 불순서 목록이나 정렬 목록을 포함하는 상자의 내부인지 외부인지를 지정합니다.

목록 스타일 유형기본적으로정렬 목록1의 항목은 아라비아 숫자로 표시됩니다.2의 항목은 아라비아 숫자로 표시됩니다.3와 같은 번호를 부여하고,불순서 목록에서항목을 원형 목록 표시로 표시합니다. 하지만, list를 사용하여 원형 목록 표시를 변경할 수 있습니다.-style-type 속성은 기본 목록 표시 유형을 원하는 유형으로 변경합니다. 예를 들어, 원형, 정方形, 로마자, 라틴 알파벳 등.

ul {
　　　　list-style-type: 정方形;
}
ol {
　　　　list-style-type: 상자;-로마자;
}

목록 표시 위치 변경

기본적으로, 목록 표시는 목록 항목 상자의 외부에 위치합니다. 하지만, list를 사용하여 목록 표시 위치를 변경할 수 있습니다.-style-position 속성을 사용하여 표시나 목록 항목 점이 목록 항목 경계의 내부인지 외부인지를 지정합니다.

이 속성은 값 inside나 outside를 취득하며, outside는 기본 값입니다. inside 값이 사용되면, 이 줄들은 표시 아래로 둘러싸이며 인디케이터보다 내려쓰기가 됩니다.

ul.in li {
　　　　list-style-position: 내부;
}
ul.out li {
　　　　list-style-position: 외부;
}

이미지를 목록 표시로 사용합니다.

list를 사용할 수도 있습니다.-style-image 속성은 이미지를 목록 표시로 설정합니다.

이 예제에서의 스타일 규칙은 불순서 목록의 모든 항목에 투명한 PNG 이미지 "arrow.png"을 목록 표시로 할당합니다.

ul li {
　　　　list-style-image: url("arrow.png");
}

위의 예제는 모든 브라우저에서 동일한 출력을 생성하지 않습니다. Internet Explorer와 Opera는 Firefox, Chrome 및 Safari보다 약간 더 높은 이미지 기호를 표시합니다.

이미지 기호의 크로스 브라우저 솔루션

이 list-style-image 속성을 목록 기호로 사용할 때, 목록 기호는 브라우저에서 정확하게 정렬되지 않습니다. 해결책은 다음과 같습니다: background-image CSS 속성이 목록 항목 이미지를 정확하게 정렬합니다. 먼저 목록을 비어있는 목록으로 설정합니다. 그런 다음 list 요소에 반복되지 않는 배경 이미지를 정의합니다.

이 예제는 모든 브라우저에서 동일하게 이미지 기호를 표시합니다:

ul {
　　　　list-style-type: none;
}
ul li {
　　　　background-image: url("arrow.png");
　　　　background-position: 0px　5px;　　　　/*　X-pos Y-pos (from top-left)　*/
　　　　background-repeat: no-repeat;
　　　　padding-left:　20px;
}

목록 스타일의 간결한 속성

이 list-style 속성은 모든 세 속성을 정의하는 간결한 속성 list입니다-style-type, list-style-image 및 list-style-position을 한 곳에 위치한 목록.

이 스타일 규칙은 정렬된 목록 항목의 목록 기호를 대문자 라틴 알파벳으로 설정하며, 이들은 목록 항목의 가장 앞에 나타납니다:

ol {
　　　　list-style: upper-latin inside;
}