집 >웹 프론트엔드 >CSS 튜토리얼 >CSS: 목록 스타일 목록 스타일 사용법에 대한 자세한 설명

CSS: 목록 스타일 목록 스타일 사용법에 대한 자세한 설명

黄舟원래의: 2017-06-29 09:17:564016검색

일상 제작 페이지에서 목록 항목 개체에서는 속성 목록 스타일을 일반적으로 사용할 수 있지만 깊게 사용되지는 않습니다. 일반적으로 전체 페이지를 없음으로 설정하면 거의 괜찮습니다. 아마도 저를 포함해 많은 사람들이 list-style-type 속성에 대해 자세히 알지 못할 가능성이 높습니다. 속성 목록 스타일과 속성 목록 스타일을 알아두세요. -타입의 개념이 비교적 모호해서 다시 한번 생각해 봐야 하므로 다음과 같이 정리합니다.

Yihe 사용법

목록 스타일 단축 속성은 하나의 명령문에서 모든 목록 속성을 설정합니다.

Description
이 속성은 다른 모든 목록 스타일 속성을 포괄하는 단축 속성입니다. 표시 목록 항목이 있는 모든 요소에 적용되므로 일반 HTML 및 XHTML에서는 li 요소에만 사용할 수 있지만 실제로는 모든 요소에 적용할 수 있으며 목록 항목 요소에 상속됩니다.

다음 속성을 순서대로 설정할 수 있습니다.

•list-style-type
•list-style-position
•list-style-image

◆list-style

정의: 사용되는 위치 a 선언에서 목록의 모든 속성을 설정하는 단축 속성은 다른 모든 목록 스타일 속성을 포괄하고 목록 항목과 동일한 표시 값을 가진 객체(예: li 객체)에만 작동하는 단축 속성입니다.

관련: list-style-imagelist-style-positionlist-style-type

◆list-style-image

설명: 목록 항목에 표시된 이미지를 객체로 설정하거나 검색합니다. 이 속성의 값이 없음이거나 지정된 URL 주소의 이미지를 표시할 수 없는 경우 list-style-type 속성이 적용됩니다.

값:

없음: 기본값. 이미지를 지정하지 마세요.

url(url): 절대 또는 상대 URL 주소를 사용하여 이미지를 지정하세요.

이미지를 목록의 항목 태그로 설정하세요:

ul
  {
  list-style-image:url("/i/arrow.gif");
  list-style-type:square;
  }

Example

<html>
<head>
<style type="text/css">
ul 
{
list-style-image: url(&#39;/i/eg_arrow.gif&#39;)
}
</style>
</head>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>

◆list-style-position

설명: 개체인 목록 항목 태그가 텍스트를 기반으로 배열되는 방식을 설정하거나 검색합니다. 목록 항목의 왼쪽 여백(margin-left)을 0으로 설정하면 목록 항목 표시가 표시되지 않습니다. 왼쪽 여백은 최소 30으로 설정할 수 있습니다. 표시 속성 값이 목록 항목과 동일한 객체에서만 작동합니다. Li 개체와 같은.

값:

외부: 기본값. 목록 항목 마커가 텍스트 외부에 배치되고 주변 텍스트가 마커에 따라 정렬되지 않음

inside: 목록 항목 마커가 텍스트 내부에 배치되고 주변 텍스트가 마커에 따라 정렬됨

Example
을 지정합니다. 목록에서 목록 항목 표시자의 위치:

ul
  {
  list-style-position:inside;
  }

예제

<html>
<head>
<style type="text/css">
ul.inside 
{
list-style-position: inside
}
ul.outside 
{
list-style-position: outside
}
</style>
</head>
<body>
<p>该列表的 list-style-position 的值是 "inside"：</p>
<ul class="inside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
<p>该列表的 list-style-position 的值是 "outside"：</p>
<ul class="outside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
</body>
</html>

브라우저 지원

모든 브라우저는 목록 스타일 위치 속성을 지원합니다.

참고: 속성 값 "inherit"는 모든 버전의 Internet Explorer(IE8 포함)에서 지원되지 않습니다.

◆list-style-type

설명: 개체의 목록 항목에 사용되는 기본 태그를 설정하거나 검색합니다. 이 속성은 list-style-image 속성 값이 없음이거나 지정된 URL 주소의 이미지를 표시할 수 없는 경우 적용됩니다.

예
이 예는 목록 유형을 변경합니다.

<html>
<head>
<script type="text/javascript">
function changeList()
  {
  document.getElementById("ul1").style.listStyle="decimal inside";
  }
</script>
</head>
<body>
<ul id="ul1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Water</li>
  <li>Soda</li>
</ul>
<input type="button" onclick="changeList()"
value="Change list style" />
</body>
</html>

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

성명：

이전 기사：CSS의 목록 스타일 속성 사용에 대한 자세한 설명다음 기사：CSS의 목록 스타일 속성 사용에 대한 자세한 설명