CSS에서 목록 스타일을 제어하는 데 사용되는 속성-프런트엔드 Q&A-php.cn

CSS에서 목록 스타일을 제어하는 데 사용되는 속성

青灯夜游

풀어 주다： 2021-12-09 14:54:42

원래의

4549명이 탐색했습니다.

목록 스타일 속성 제어: 1. "list-style-type", 목록 표시 유형 설정 2. "list-style-position", 표시 위치 설정 3. "list- style-image", 이미지를 목록 표시로 설정합니다. 4. "list-style".

CSS에서 목록 스타일을 제어하는 데 사용되는 속성

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

List property

스타일-이미지설정 이미지를 목록 항목 마커로1list-style-position목록 항목 마커의 배치 위치 설정1list-style-type목록 항목 마커의 유형 설정 1

Property	Description	CSS
list-style	모든 목록 속성을 하나의 문으로 설정	1

(1) list-style-type : 마커의 모양을 제어하는데 사용됩니다.

순서가 지정되지 않은 목록의 경우 이 속성의 값은 다음과 같습니다. 1. 없음, 마커 없음 2. 디스크(기본값), 채워진 원 3. 원, 속이 빈 원; .

순서가 지정된 목록의 경우 이 속성의 값은 다음과 같습니다. 1. 소수점, 숫자 2. 소수점 앞에 0이 오는 숫자, 3. 소문자, 소문자 4. , 대문자 ; 5. 로마자 소문자, 로마자 소문자 6. 로마자 대문자, 로마자.

(2) list-style-position: 이 속성은 목록 항목의 내용을 기준으로 목록 표시의 위치를 선언하는 데 사용됩니다.

외부 플래그는 목록 항목의 테두리에서 특정 거리에 배치되지만 이 거리는 CSS에서 정의되지 않습니다. 내부 플래그는 목록 항목 콘텐츠 앞에 삽입된 인라인 요소인 것처럼 처리됩니다. 중첩된 목록의 경우 상속 값을 사용하여 목록 스타일 위치 속성의 값이 상위 요소에서 상속되어야 함을 지정할 수 있습니다.

(3) list-style-image: 이미지를 마크업으로 지정합니다.

다음과 같이 사용하세요.

li { list-style-image: url("haha.gif") }

로그인 후 복사

중첩 목록을 사용하는 경우 이 속성은 상위 요소를 상속하므로 상속을 방지하려면 목록 스타일 이미지를 없음으로 설정해야 합니다.

(4) 목록 스타일: 축약형

은 위 세 가지 속성의 여러 속성을 한 번에 표현할 수 있으며 순서에 관계없이 나타날 수 있습니다.

테스트 렌더링은 다음과 같습니다.

CSS 코드는 다음과 같습니다.

li { border: red solid thin; }
ul { list-style: square outside }
ol { list-style: upper-alpha inside; }
 ul.one { list-style: url("test1.jpg") inside;  }

로그인 후 복사

HTML 코드는 다음과 같습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />  
		<base href="/testsmarty/templates/"></base>
		<title>CSS控制列表样式</title>
		<link rel="stylesheet" type="text/css" href="test1.css">
	</head>
	
	<body>
		<table width="700" border="1">
			<tr>
				<td>无序列表样式</td>
				<td>有序列表样式</td>
				<td>使用图片做标记符</td>
			</tr>
			<tr>
				<td>
					<ul>
						<li>one</li>
						<li>two</li>
						<li>three</li>
					</ul>
				</td>
				<td>
					<ol>
						<li>one</li>
						<li>two</li>
						<li>three</li>
					</ol>
				</td>
				<td>
					<ul class="one">
						<li>one</li>
						<li>two</li>
						<li>three</li>
					</ul>
				</td>
			</tr>
			<tr>
				<td colspan="3">注意outside与inside其标记符与li元素框的位置</td>
			</tr>
		</table>		
	</body>
</html>

로그인 후 복사

(동영상 공유 학습:

css 동영상 튜토리얼)

위 내용은 CSS에서 목록 스타일을 제어하는 데 사용되는 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!