- 커피
- 차
- 코카콜라
- 커피
- 차
- 코카콜라
HTML 목록 및 CSS 목록 등록
HTML에서,리스트의 두 가지 유형이있다 :
- 정렬되지 않은 목록 (<ul>) -리스트 항목은 글 머리 기호로 표시되어 있습니다
- 주문 목록 (<ol>) -리스트 항목은 숫자 또는 문자로 표시됩니다
CSS의 목록 속성을 할 수 있습니다 :
- 주문 목록에 대한 설정 다른 목록 항목 마커
- 정렬되지 않은 목록에 대한 설정 다른 목록 항목 마커
- 목록 항목 마커와 같은 이미지를 설정
- 목록과 목록 항목에 배경 색상을 추가
다른 목록 항목 마커
list-style-type 속성은 목록 항목 마커의 유형을 지정합니다.
다음은 사용 가능한 목록 항목 마커의 일부 보여줍니다
예
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
} »그것을 자신을 시도 참고 : 값의 일부는 정렬되지 않은 목록에 대해, 일부 주문 목록에 대한.
목록 항목의 마커 이미지
list-style-image 속성은 목록 항목 마커와 같은 이미지를 지정합니다 :
목록 항목 마커의 위치를
list-style-position 속성은 목록 항목 마커가 내부 또는 콘텐츠 흐름 바깥에 표시할지 여부를 지정합니다 :
목록 - 약식 속성
list-style 속성은 약식 속성이다. 하나의 선언에있는 모든 목록 속성을 설정하는 데 사용됩니다 :
속기 속성을 사용하는 경우, 속성 값의 순서이다 :
-
list-style-type(목록 스타일의 이미지가 지정된 경우,이 속성의 값은 어떤 이유로 이미지를 표시 할 수없는 경우 표시됩니다) -
list-style-position(목록 항목 마커 콘텐츠 흐름의 내부 또는 외부에 표시할지 여부를 지정합니다) -
list-style-image(목록 항목 마커로 이미지를 지정)
어떤 경우 누락 된 상기 속성 값 중 하나가 누락 된 속성에 대한 디폴트 값이 삽입된다.
색상으로 스타일링 목록
우리는 또한 색상과 스타일리스트는 그들에게 좀 더 흥미로운 보이게 할 수 있습니다.
에 추가 아무것도 <ol> 또는 <ul> 속성을 추가하는 동안 태그, 목록 전체에 영향을 미치는 <li> 태그는 개별 목록 항목에 영향을 미칠 것입니다 :
예
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background:
#ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background:
#cce5ff;
margin: 5px;
}결과:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
더 예
전체 폭 경계 목록
이 예는 글 머리 기호가없는 경계 목록을 만드는 방법을 보여줍니다.
리스트의 모든 다른 목록 항목 마커
이 예제는 CSS의 모든 다른 목록 항목 마커를 보여줍니다.
연습으로 자신을 테스트!
모든 CSS 목록 등록
| 재산 | 기술 |
|---|---|
| list-style | 하나의 선언에서 목록의 모든 속성을 설정합니다 |
| list-style-image | 목록 항목 마커와 같은 이미지를 지정합니다 |
| list-style-position | 목록 항목 마커는 내부 또는 콘텐츠 흐름 외부에 나타납니다 지정하는 경우 |
| list-style-type | 목록 항목 마커의 유형을 지정합니다 |