CSS 목록 스타일
앞의 HTML 장에서 배웠습니다:
1. 순서가 지정되지 않은 목록 - 목록 항목은 특수 그래픽(예: 작은 검은색 점, 작은 상자 등)으로 표시됩니다.
2. 예 시퀀스 목록 - 목록 항목은 숫자나 문자로 표시됩니다.
CSS의 목록을 살펴보겠습니다.
CSS의 ul 및 li 스타일에 대한 자세한 설명
ul 및 li 목록이 표시됩니다. CSS 일반적으로 사용되는 요소를 사용합니다. CSS에는 목록 성능을 구체적으로 제어하는 속성이 있습니다. 일반적으로 사용되는 속성에는 목록 스타일 유형 속성, 목록 스타일 이미지 속성, 목록 스타일 위치 속성 및 목록 스타일 속성이 있습니다.
1. list-style-type 속성
list-style-type 속성은 li 목록의 글머리 기호를 정의하는 데 사용됩니다. 목록 맨 앞에 있는 장식입니다. list-style-type 속성은 상속 가능한 속성입니다. 구문 구조는 다음과 같습니다. (일반적으로 사용되는 일부 속성 값 나열)
list-style-type: none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper -roman
list-style-type 속성에는 많은 속성 값이 있습니다. 여기서는 가장 일반적으로 사용되는 속성 값 중 일부만 나열합니다.
없음: 글머리 기호를 사용하지 마세요. 디스크: 단단한 원. 원: 속이 빈 원. 정사각형: 정사각형. 데미칼(demical): 아라비아 숫자. lower-alpha : 영문 소문자. upper-alpha : 영문 대문자. 소문자 로마 숫자: 소문자 로마 숫자. Upper-Roman: 대문자 로마 숫자.
list-style-type 속성을 사용하는 샘플 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style-type:square;}
</style>
</head>
<body>
<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
</body>
</html>List-style-image 속성
list-style-image 속성은 글머리 기호 대신 그림 사용을 정의하는 데 사용됩니다. 이는 상속 가능한 속성이기도 하며 구문 구조는 다음과 같습니다.
List-style-image:none/url
list-style-image 속성은 두 가지 값을 가질 수 있습니다.
없음: 대체 이미지가 없습니다. url: 교체할 이미지의 경로입니다.
코드를 살펴보겠습니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style-image:url(//m.sbmmt.com/style/images/sqpurple.gif);}
</style>
</head>
<body>
<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
</body>
</html>3. list-style-position 속성
list-style -position 속성은 목록에서 글머리 기호 표시 위치를 정의하는 데 사용되는 속성입니다. 이는 또한 다음 구문 구조를 갖는 상속 가능한 속성입니다.
목록 스타일 위치: 내부/외부
내부: 글머리 기호는 텍스트 내에 배치됩니다. 외부: 글머리 기호가 텍스트 외부에 배치됩니다.
list-style-position 속성 사용 예시는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style-type:square;list-style-position:outside;}
</style>
</head>
<body>
<ul>
<li>这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。
这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。
这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
</body>
</html>4. list-style 속성
list- style 속성은 li 스타일을 포괄적으로 설정하는 속성이기도 하며 구문 구조는 다음과 같습니다.
li-style:list-style-type/list-style- image/list-style-position
각 값의 위치는 서로 바뀔 수 있습니다. 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style:url( inside;}
</style>
</head>
<body>
<ul>
<li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。
这里是使用list-style属性的示例。请注意换行以后项目符号的位置。
这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
</ul>
</body>
</html>브라우저 호환성 솔루션
또한 모든 브라우저에서 다음 예는 이미지 태그를 표시합니다:
ul
{
목록 스타일 유형: 없음;
패딩: 0px;
여백: 0px;
}
ul li
{
배경 이미지: url(sqpurple.gif);
배경 반복: no-repeat;
배경 위치: 0px 5px;
padding -left: 14px;
}
예제 설명:
ul:
목록 항목 태그를 삭제하지 않도록 목록 스타일 유형을 설정합니다.
패딩과 여백을 0px로 설정(브라우저 호환성)
all li in ul:
이미지의 URL을 설정하고 한 번만 표시되도록 설정합니다(중복 없음). )
필요한 위치 지정 이미지의 위치(왼쪽 0px, 위쪽 및 아래쪽 5px)
padding-left 속성을 사용하여 목록에 텍스트를 배치하세요
