CSS로 li 스타일을 설정하는 방법

CSS에서 li 스타일을 설정하는 방법: 1. list-style-type 속성을 통해 li 목록의 글머리 기호를 정의합니다. 2. list-style-image 속성을 통해 그림을 사용하여 글머리 기호를 대체합니다. 목록 스타일 속성 li 스타일이면 충분합니다.

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

추천: css 비디오 튜토리얼

li 태그의 기본 스타일은 앞에 작은 점이나 숫자가 있는데, li 태그의 기본 스타일을 어떻게 변경하나요?

CSS에서 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 속성에 대한 많은 속성 값이 있습니다. 여기서는 가장 일반적으로 사용되는 속성 값 중 일부만 나열합니다.

none: 글머리 기호를 사용하지 마세요.

디스크: 단색 원.

원: 속이 빈 원.

사각형: 정사각형입니다.

demical: 아라비아 숫자.

lower-alpha: 영문 소문자.

upper-alpha: 영문 대문자.

lower-roman: 소문자 로마 숫자.

upper-roman: 대문자 로마 숫자.

list-style-type 속성을 사용하는 샘플 코드는 다음과 같습니다.

li{
    list-style-type:square;
}
<ul>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
</ul>

2. list-style-image 속성

list-style-image 속성은 대신 그림 사용을 정의하는 데 사용됩니다. 총알의. 이는 상속 가능한 속성이기도 하며 구문 구조는 다음과 같습니다.

list-style-image:none/url

list-style-image 속성은 두 가지 값을 가질 수 있습니다.

none: 대체된 이미지가 없습니다.

url: 교체할 이미지의 경로입니다.

코드를 살펴보겠습니다:

li{
    list-style-image:url(images/bg03.gif);
}
<ul>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
</ul>

3. List-style-position 속성

list-style-position 속성은 목록에서 글머리 기호의 표시 위치를 정의하는 데 사용되는 속성입니다. 상속 가능한 속성이기도 하며 구문 구조는 다음과 같습니다.

list-style-position: inside/outside

inside: 글머리 기호가 텍스트 내부에 배치됩니다.

외부: 글머리 기호가 텍스트 외부에 배치됩니다.

list-style-position 속성을 사용한 예는 다음과 같습니다.

li{
    list-style-type:square;
    list-style-position:outside;
}
<ul>
    <li>这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
</ul>

속성 값이 포함된 스타일을 살펴보겠습니다.

li{
    list-style-type:square;
    list-style-position:inside;
}
<ul>
    <li>这里是使用list-style-position属性值为inside的示例。请注意换行以后项目符号的位置。</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
</ul>

4. 목록 스타일 속성

목록 스타일 속성은 li 스타일을 포괄적으로 설정하는 속성이기도 합니다. 구문 구조는 다음과 같습니다.

li-style:list-style-type/list-style-image/list-style-position

각 값의 위치. 교환할 수 있습니다. 예:

li{
    list-style:url(images/bg03.gif) inside;
}
<ul>
    <li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>
    <li>这里是列表内容</li>
</ul>

위 내용은 CSS로 li 스타일을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!