예
일부 다른 목록 스타일을 설정합니다 :
ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ol.upper-roman {list-style-type: upper-roman;}
ol.lower-alpha {list-style-type: lower-alpha;}
»그것을 자신을 시도 더 "Try it Yourself" 아래의 예.
정의 및 사용
목록 - 스타일 유형 목록에서 목록 항목 마커의 유형을 지정합니다.
| 기본값: | disc |
|---|---|
| 상속 : | yes |
| 애니메이션 : | no. Read about animatable |
| 번역: | CSS1 |
| 자바 스크립트 구문 : | object .style.listStyleType="square" Try it |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| list-style-type | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: 인터넷 익스플로러와 오페라 12 및 이전 버전 값을 지원하지 않습니다 CJK-표의 문자, 히브리어, 히라가나, 히라가나 - 이로 하, 가타카나와 가타카나-이로 하.
Note: IE8을 이전 만 속성 값을 지원 진수를 선도하는 제로를, 낮은 그리스 낮은 라틴, 그루지야, - 상단 라틴, 아르메니아, 그리고 DOCTYPE이 지정된 경우 상속!
CSS 구문
list-style-type:value;속성 값
| 값 | 기술 | 플레이 |
|---|---|---|
| disc | 기본값. 마커는 채워진 동그라미이고 | »플레이 |
| armenian | 마커는 기존의 아르메니아어 번호입니다 | »플레이 |
| circle | 마커는 원이다 | »플레이 |
| cjk-ideographic | 마커는 일반 표의 숫자입니다 | »플레이 |
| decimal | 마커는 숫자입니다 | »플레이 |
| decimal-leading-zero | 마커는 앞에 0 (01, 02, 03 등)의 숫자입니다 | »플레이 |
| georgian | 마커는 전통적인 그루지야 번호입니다 | »플레이 |
| hebrew | 마커는 기존의 히브리어 번호입니다 | »플레이 |
| hiragana | 마커는 기존의 히라가나 번호입니다 | »플레이 |
| hiragana-iroha | 마커는 기존의 히라가나 이로 번호입니다 | »플레이 |
| katakana | 마커는 기존의 가타카나 번호입니다 | »플레이 |
| katakana-iroha | 마커는 기존의 가타카나 이로 번호입니다 | »플레이 |
| lower-alpha | 마커 저급 알파 (a, b, c, d, e, etc.) | »플레이 |
| lower-greek | 마커는 낮은 그리스어입니다 | »플레이 |
| lower-latin | 마커는 저급 - 라틴어 (a, b, c, d, e, etc.) | »플레이 |
| lower-roman | 마커는 저급 - 로마이다 (i, ii, iii, iv, v, etc.) | »플레이 |
| none | 마커가 표시되지 않습니다 | »플레이 |
| square | 마커는 정사각형 | »플레이 |
| upper-alpha | 마커는 상위 인 알파 (A, B, C, D, E, etc.) | »플레이 |
| upper-latin | 마커 어퍼 라틴어 (A, B, C, D, E, etc.) | »플레이 |
| upper-roman | 마커가 상위 인 로마 (I, II, III, IV, V, etc.) | »플레이 |
| initial | 기본값으로이 속성을 설정합니다. 초기에 대해 알아보기 | »플레이 |
| inherit | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 |
더 예
예
이 예는 다른 모든 목록 항목 마커를 보여줍니다
ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c
{list-style-type: square;}
ol.d {list-style-type: armenian;}
ol.e
{list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type:
georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type:
hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l
{list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-latin;}
ol.t {list-style-type: upper-roman;}
ol.u {list-style-type: none;}
ol.v {list-style-type: inherit;} »그것을 자신을 시도 예
대한 총알 색상을 추가하는 방법 <ul> 또는 <ol> 기본 총알을 제거하고 총알처럼 보이는 HTML 개체 추가하여 (•) :
ul {
list-style: none; /* Remove list bullets */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li:before {
content: "•"; /* Insert content that
looks like bullets */
padding-right: 8px;
color: blue; /* Or a color you prefer */
} »그것을 자신을 시도 관련 페이지
CSS 자습서 : CSS 목록
CSS 참조 : list-style property
HTML DOM 참조 : listStyleType property