CSS: 목록 스타일 목록 스타일 사용법에 대한 자세한 설명-CSS 튜토리얼-php.cn

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

黄舟

풀어 주다： 2017-06-29 09:17:56

원래의

4007명이 탐색했습니다.

일상 제작 페이지에서 목록 항목 개체에서는 속성 목록 스타일을 일반적으로 사용할 수 있지만 깊게 사용되지는 않습니다. 일반적으로 전체 페이지를 없음으로 설정하면 거의 괜찮습니다. 아마도 저를 포함해 많은 사람들이 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!