CSS: list-style-type 사용 방법에 대한 자세한 설명

이 글에서는 주로 CSS list-style-type 속성을 사용하는 방법을 소개합니다. 필요한 친구는

객체의 광고 항목 표시 유형을 미리 정의하는 방법을 참조하세요.
구문

{ list-style-type: sType }

가능한 값 ​​
sType
A string은 다음 값 중 하나를 지정합니다.

disc	기본값입니다. 단단한 원.
원	빈 원.
decimal	1, 2, 3, 4 등등.
lower-alpha	a, b, c, d 등등.
lower-roman	i, ii, iii, iv 등.
none	마커가 표시되지 않습니다.
square	단단한 정사각형.
upper-alpha	A, B, C, D 등등.
upper-roman	I, II, III, IV 등.

이 속성의 기본값은 disc 입니다. 이 속성은 상속됩니다.
주의사항
list-style-image 속성 값이 none 으로 설정되어 있거나 URL이 가리키는 이미지를 표시할 수 없는 경우 list-style-type 속성에 따라 list-item 태그의 모양이 결정됩니다.
list-style-type 속성은 여백 및 display:list-item 속성을 적용한 후 모든 요소에 적용할 수 있습니다.
여백 속성 중 하나를 사용하여 항목의 왼쪽 여백을 0으로 설정하면 목록 항목 마크업이 표시되지 않습니다. 이 여백은 최소 30포인트로 설정되어야 합니다.
예제
다음 예에서는 list-style-type 속성을 사용하여 마크업을 설정합니다. 이 예에서는 UL 요소를 인라인(전역) 스타일 시트의 선택기로 사용하여 마크업 유형을 원형으로 변경합니다.

<style> 
ul {list-style-type:circle} 
</style>

list-style-type -- 목록 스타일 정의

값: disc | 정사각형 | 소수점 앞부분 | 로마자 | 상위 라틴어 | 조지아어 | 상위 문자
Circle: 원
square: 정사각형
decimal: 숫자
decimal-leading-zero: 십진수, 두 자리 미만은 선행 0으로 채워집니다. 예: 01, 02, 03, ..., 98, 99
lower- roman : 소문자 로마 문자(예: i, ii, iii, iv, v, ...
upper-roman: 대문자 로마 문자(예: I, II, III, IV, V, ...
lower-) greek: 소문자 그리스 문자, 예: α(alpha), β(beta), γ(gamma), ...
lower-latin: 소문자 라틴어, 예: a, b, c, ... z
upper -latin: 대문자 라틴어, 예: A, B, C, ... Z
armenian: 아르메니아 숫자
georgian: 조지아 숫자, 예: an, ban, gan, ..., he, tan, in, in -an, .. .
lower-alpha: 소문자 라틴어, 예: a, b, c, ... z
upper-alpha: 대문자 라틴어, 예: A, B, C, ... Z
none : 없음 (모든 목록 스타일 취소)
inherit: Inheritance

초기값: disc

inheritance: is
적용 대상: list
list에 속한 모든 요소, 중국어 "list"는 .style을 의미, 중국어 "style"은 .type을 의미, 중국어 "유형"은 다음을 의미합니다.

예

ul    
{    
    list-style-type:disc;   
}   
ul#circle
{    
    list-style-type:circle;   
}   
ul#square
{    
    list-style-type:square;   
}   
ul#decimal   
{    
    list-style-type:decimal;   
}   
ul#decimal-leading-zero   
{    
    list-style-type:decimal-leading-zero;   
}   
ul#lower-roman   
{    
    list-style-type:lower-roman;   
}   
ul#upper-roman   
{    
    list-style-type:upper-roman;   
}   
ul#lower-greek   
{    
    list-style-type:lower-greek;   
}   
ul#lower-latin   
{    
    list-style-type:lower-latin;   
}   
ul#upper-latin   
{    
    list-style-type:upper-latin;   
}   
ul#armenian   
{    
    list-style-type:armenian;   
}   
ul#georgian   
{    
    list-style-type:georgian;   
}   
ul#lower-alpha   
{    
    list-style-type:lower-alpha;   
}   
ul#upper-alpha   
{    
    list-style-type:upper-alpha;   
}   
ul#none
{    
    list-style-type:none;   
}   
ol    
{    
    list-style-type:lower-roman;   
}

위 내용은 CSS: list-style-type 사용 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!