CSS 페이지 레이아웃(목록 스타일)에 대한 상식 요약

CSS에는 많은 지식이 있으며 우리가 그것을 모두 기억하는 것은 불가능합니다. 여가 시간에 CSS 페이지 레이아웃에 대한 몇 가지 일반적인 지식을 정리했습니다. 이 기사에서는 CSS 목록 스타일에 대한 일반적인 지식을 공유할 것입니다. 도움이 필요한 친구들이 참고하면 도움이 될 것 같아요.

1. 순서가 없는 목록

순서가 없는 목록은 목록 기호가 숫자가 아닌 점 또는 기타 그래픽임을 의미합니다. 정렬되지 않은 목록의 구문은 다음과 같습니다.

<ul>
    <li>**</li>
    <li>**</li>
    ......
</ul>

ul의 기능은 포함된 목록이 정렬되지 않은 목록임을 나타내는 것이며, li의 각 그룹은 목록 항목을 포함하는 데 사용됩니다.

2.순서 있는 목록

순서 있는 목록의 목록 기호는 숫자입니다. 순서가 지정된 목록의 구문은 다음과 같습니다.

<ol>
    <li>**</li>
    <li>**</li>
    ......
</ol>

ol의 기능은 포함된 목록이 순서가 지정된 목록임을 나타내는 것이며 li의 각 그룹은 목록 항목을 포함하는 데 사용됩니다.

3. 정의 목록

정의 목록은 거의 사용되지 않습니다. 구문은 다음과 같습니다.

<dl>
   <dt>
      <dd>**</dd>
   </dt>
   ......
</dl>

dl의 기능은 포함된 목록이 정의 목록임을 나타내는 것입니다. 개념 설명 목록입니다.

4. 목록 기호 스타일 변경

CSS는 목록 스타일 유형, 목록 스타일 이미지 및 목록 스타일 위치 속성을 제공하여 목록 기호 스타일을 변경합니다.

내장 목록 기호 사용

구문: ​​

list-style-type：type;

type=none이면 목록에 목록 기호가 없습니다. 일반적으로 사용되는 유형은 다음과 같습니다.

square(채워진 정사각형)

disc(채워진 원)

cicle(빈 원)

decimal(아라비아 숫자)

lower-roman(로마 소문자)

upper-roman(대문자) ) 로마자)

배경 이미지를 목록 기호로 사용

필요에 따라 때로는 목록 기호를 더 작은 그림으로 대체할 수 있습니다. 구문은 다음과 같습니다.

list-style-image：url(picture.png);

목록 기호의 위치 변경

목록 기호를 삽입할 수 있습니다. 텍스트에 있거나 텍스트 콘텐츠 외부에 있을 수 있는 경우 구문은 다음과 같습니다.

list-style-position：inside/outside;

목록 속성의 약어

다음 코드:

list-style-image：url(picture.png);
list-style-position：inside/outside;

는 다음과 같이 약어일 수 있습니다.

list-style: url(picture.png) inside/outside;

참고: 일반적으로 list-style-type 및 list-style-image 후자가 전자보다 우선하므로 동시에 사용되지 않습니다.

위 내용은 CSS 페이지 레이아웃(목록 스타일)에 대한 상식 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!