집 >웹 프론트엔드 >CSS 튜토리얼 >li 태그 스타일을 제어하기 위해 CSS의 목록 속성을 수정하는 목록 스타일 문제에 대해

li 태그 스타일을 제어하기 위해 CSS의 목록 속성을 수정하는 목록 스타일 문제에 대해

不言원래의: 2018-06-11 14:50:192416검색

이 글에서는 li 태그 스타일을 제어하기 위해 CSS에서 list 속성을 수정하는 문제를 주로 소개합니다. 이제 특정 참조 값이 있으므로 이를 참조할 수 있습니다.

list_style 속성을 사용합니다. 목록 속성을 수정합니다. list-style-type은 목록 항목 유형을 설정하는 데 사용되고, list-style-position은 목록 항목의 위치를 설정하는 데 사용되며, list-style-image는 대체할 이미지 사용을 설정하는 데 사용됩니다. 목록 항목 mark

list_style 속성은 목록을 수정하는 데 사용됩니다. 속성

의 형식은 다음과 같습니다.
list_style: 목록 항목 표시 유형 목록 항목 표시 위치 목록 항목 표시
목록 항목을 설정할 수도 있습니다. 별도로 표시:
list-style-type은 목록 항목 유형을 설정하는 데 사용됩니다.
기본값은 디스크가 채워진 원입니다.
공용 값: 비어 있지 않음
원형 빈 원
사각형 정사각형
십진수
lower-latin 소문자 라틴 문자 a, b, c.....
대 라틴 대문자 A, B, C ....
list-style-position은 이 목록 항목의 위치를 설정하는 데 사용됩니다.
외부의 기본값 li 태그 외부를 의미합니다. 이는 li에 테두리를 추가하는 것입니다. 1px 빨간색으로 표시의 위치를 볼 수 있습니다.
inside는 li 태그 안에 마크가 있다는 뜻으로, 테두리를 추가할 때 명확하게 보입니다.
list-style-image는 목록 항목 태그를 대체하기 위해 이미지 사용을 설정하는 데 사용됩니다.
기본값: 없음
선택값: URL, 형식은 url("url 주소")입니다.
예:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style type="text/css"> 
ul { 
border:1px solid red; 
} 
li{ 
border:1px solid red; 
list-style:disc outside url(news_list.gif); 
list-style-position:5px; 
} 
</style> 
</head> 
<ul> 
<li>你好</li> 
<li>我好</li> 
</ul> 
<body> 
</body> 
</html>

지정합니다. 이미지를 사용할 수 없는 경우 "list-style-type" 속성.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

li 태그 스타일을 제어하기 위해 CSS의 목록 속성을 수정하는 목록 스타일 문제에 대해

관련 기사