CSS 스타일 목록 (UL)

다음과 같이 CSS 목록 속성 역할은 다음과 같습니다

• 설정 다른 목록 항목이 정렬 된 목록으로 표시됩니다
• 설정 다른 목록 항목이 정렬되지 않은 목록으로 표시됩니다
• 설정 목록 항목 마커 이미지

명부

HTML에서,리스트의 두 가지 유형이 있습니다 :

• 정렬되지 않은 목록 - 목록 항목이 특별한 그래픽으로 표시됩니다 (등 검은 반점, 작은 상자, 등)
• 정렬 된 목록 - 목록 항목은 숫자 또는 문자로 표시됩니다

CSS를 사용하면 스타일을 더 나열 할 수 있습니다, 그리고 이미지 목록 항목 마커를 만들 수 있습니다.

다른 목록 항목 마커

목록 스타일 타입 속성 목록 항목 마커의 유형이 지정 ::

일부 값은 정렬되지 않은 목록입니다, 일부는 정렬 된 목록입니다.

화상리스트 아이템 마커

목록 스타일의 이미지 속성을 사용하여 이미지 목록 항목 마커를 지정하려면 :

위의 예는 모든 브라우저에서 동일하지 표시, IE와 오페라 파이어 폭스, 크롬과 조금 더 높은 사파리보다 이미지 태그를 표시합니다.

모든 브라우저에서 로고 같은 이미지를 배치 할 경우 다음과 같이 브라우저 호환성 솔루션을 사용한다

브라우저 호환성 솔루션

또한 모든 브라우저에서, 다음의 예는 이미지 태그를 표시합니다 :

예 설명 :

• UL :
  • 목록 항목 마커를 삭제하지 않는 목록 - 스타일 유형을 설정
  • 설정 패딩과 마진 0 픽셀 (브라우저 호환성)
• 모든 UL 리 :
  • 이미지의 URL을 설정하고 한 번만 표시 설정 (없음 반복)
  • 당신은 이미지 위치 (왼쪽 0 픽셀과 수직 5px)를 찾아야합니다
  • 목록에서 텍스트 패딩 왼쪽 속성

목록 - 약식 속성

당신은 하나의 속성에있는 모든 속성의 목록을 지정할 수 있습니다. 이것은 약식 속성이라고합니다.

다음과 같이 목록에 약어 속성을 사용하여 스타일 속성 목록이 설정됩니다

당신이 약식 속성 값을 사용하는 경우 순서는의 :

• 목록 스타일 형
• 목록 스타일 위치 (자세한 사항은, 다음과 같은 CSS 속성 표 참조)
• 목록 스타일 이미지

이 값은 여전히 ​​지정된 나머지 순서 중 하나를 누락하는 경우, 그것은 중요하지 않습니다.

더 많은 예제

모든 다른 목록 항목 마커
이 예는 모든 다른 CSS 목록 항목 마커를 보여줍니다.

모든 CSS 목록 등록