CSS 목록 스타일

CSS 목록

CSS 목록 속성 기능은 다음과 같습니다.

다른 목록 항목을 순서가 지정된 목록으로 표시하도록 설정

순서가 없는 목록으로 표시된 다른 목록 항목 설정

이미지로 표시된 목록 항목 설정

HTML에는 두 가지가 있습니다. 목록 유형:

순서가 지정되지 않은 목록 - 목록 항목은 특수 그래픽(예: 작은 검은색 점, 작은 상자 등)으로 표시됩니다.

순서가 지정된 목록 - 목록 항목은 숫자 또는 문자

는 CSS를 사용하여 추가 스타일을 지정할 수 있으며 이미지와 함께 목록 항목으로 표시할 수 있습니다.

1． 목록 기호

목록 기호는 각 목록 항목 앞에 표시되는 기호를 나타냅니다.

기본 형식은 다음과 같습니다.

list-style-type: 매개변수

매개변수 값 범위:

·디스크: 원형

·원: 속이 빈 원

·사각형: 정사각형

·decimal: 십진수

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

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

·lower-alpha : 그리스 소문자

·upper-alpha : 그리스 대문자

·none : 기호 표시 없음

< 🎜 매개변수의 디스크는 기본 옵션입니다.

아아아아

2． 그래픽 기호

그래픽 기호는 원래 목록의 글머리 기호가 그래픽으로 대체될 수 있음을 의미합니다.

기본 형식은 다음과 같습니다.

list-style-image: URL

URL은 글머리 기호를 대체하는 데 사용되는 그래픽 파일의 주소이며 다음을 사용할 수 있습니다. 상대 주소 또는 절대 주소.

3． 목록 위치

목록 위치는 목록이 표시되는 위치를 설명합니다.

기본 형식은 다음과 같습니다.

list-style-position: 매개변수

매개변수 값 범위:

·inside: BOX 모델 내부에 표시됩니다.

·외부: BOX 모델 외부에 표시

여기서 새로운 개념이 등장합니다: BOX 모델. BOX는 스타일 규칙이 적용되는 객체를 포함하는 컨테이너를 의미합니다. 자세한 내용은 나중에 설명하겠습니다.

이미지를 목록 항목 마커로 지정

이미지를 목록 항목 마커로 지정하려면 목록 스타일 이미지 속성을 사용하세요.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>无序列表实例:</p>
<ul class="a">
  <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ul>
<ul class="b">
 <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
 <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ol>
<ol class="d">
  <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ol>
</body>
</html>

위의 예는 작동합니다. 브라우저에서의 표시는 전혀 동일하지 않습니다. IE와 Opera는 Firefox, Chrome 및 Safari보다 약간 높은 이미지 태그를 표시합니다.

모든 브라우저에 동일한 이미지 로고를 배치하려면 브라우저 호환 솔루션을 사용해야 합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<style>
ul 
{
list-style-image:url('../style/images/sqpurple.gif');
}
</style>
</head>
<body>
<ul>
  <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ul>
</body>
</html>

예시 설명:

ul:

목록 스타일 유형을 목록 항목 태그 삭제 없음으로 설정

패딩 및 여백을 0px로 설정(브라우저 호환성)

ul의 모든 li:

이미지 URL 설정, 한 번만 표시되도록 설정합니다(반복 없음)

필요한 곳에 이미지를 배치합니다(왼쪽 0px, 위쪽 및 아래쪽 5px)

목록에 패딩을 사용하여 텍스트를 배치합니다. 왼쪽 속성

목록 축약 속성

모든 목록 속성을 단일 속성으로 지정할 수 있습니다. 이를 약어 속성이라고 합니다.

축약된 속성 값을 사용하는 경우 순서는 다음과 같습니다.

list-style-type

list-style-position(자세한 내용은 아래 CSS 속성 표 참조)

list-style-image

위 값 중 하나가 누락되고 나머지는 여전히 지정된 순서대로 되어 있어도 문제가 되지 않습니다.

모든 CSS 목록 속성

속성 🎜>

목록 스타일 단축 속성입니다. 이미지를 목록 항목 로고로 설정하려면

List-Style-IMAGE 문에서 목록에 사용되는 모든 속성을 설정하세요.

list-style-position 목록에서 목록 항목 표시의 위치를 설정합니다. ~ ~

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} </style> </head> <body> <p>无序列表实例:</p> <ul class="a"> <li>北京</li> <li>上海</li> <li>南京</li> </ul> <ul class="b"> <li>北京</li> <li>上海</li> <li>南京</li> </ul> <p>有序列表实例:</p> <ol class="c"> <li>北京</li> <li>上海</li> <li>南京</li> </ol> <ol class="d"> <li>北京</li> <li>上海</li> <li>南京</li> </ol> </body> </html>

제출하다 코드 재설정

자동운전