HTML 목록의 텍스트 서식 지정 방법

HTML 목록은 CSS로 매우 맞춤 설정할 수 있습니다. 많은 웹 사이트의 메뉴는주의 깊게 형식화 된 HTML 목록에 의해 제공됩니다. 페이스 북의 소스 코드를 볼 필요가 없다면, 정렬되지 않은 HTML리스트를 사용하여 네비게이션을 스타일 화하는 것을 볼 수있다. 목록의 텍스트 스타일을 지정하는 데는 두 가지 요소가 있습니다. 기본 목록 태그 ( "

") 및 목록 항목 태그 ("
• ") 클래스 또는 스타일을 사용하여 HTML 목록의 단일 또는 집합을 지정할 수도 있습니다. 텍스트의 서식은 모든 수준에서 처리 할 수 ​​있습니다.

  1.

  .css 파일 확장명을 사용하는 계단식 스타일 시트 파일을 선호하는 일반 텍스트 편집기에서 엽니 다. "ul"(또는 정렬 된 목록의 서식을 지정하는 경우 "ol") 또는 목록 태그의 ID를 지정하십시오. 예를 들어, "

  , "당신은 다음과 같이 시작할 것입니다 :

  ul {}

  2.

  정렬되지 않은 목록의 다른 서식과 함께 텍스트 서식을 추가하십시오. 예를 들어, 정렬되지 않은 목록의 모든 텍스트를 12pt 및 파란색으로 만들려면 다음과 같이 표시 할 수 있습니다.

  ul {font-size : 12pt; 색상 : # 8CCCC8; }

  삼.

  각 목록 항목의 시작 부분에 이미지 또는 기호 목록 스타일 유형을 변경하십시오. W3Schools.com은 목록 스타일에 대해 12 가지 이상의 다른 유형을 지정합니다. 목록의 시작 부분에 아무 것도 원하지 않으면 "list-style : none;"을 사용할 수 있습니다. 예 :

  ul {font-size : 12pt; 색상 : # 8CCCC8; 목록 스타일 : 없음; }

  4.

  스타일 시트와 문서를 저장 한 다음 브라우저에서 목록 항목을 테스트하십시오.

  팁

  • 수평 탐색 요소로 목록을 사용하려면 다음을 사용할 수 있습니다.
  • "display : inline"및 "float : left;".

  경고

  • HTML 및 CSS 파일을 편집하려면 메모장, 메모장 ++ 또는 TextWrangler와 같은 일반 텍스트 편집기 만 사용하십시오.