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

집

웹 프론트엔드

CSS 튜토리얼

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

黄舟

Jun 29, 2017 am 09:17 AM

css

분석CSS 목록 스타일속성 목록 스타일

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

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.