>  기사  >  웹 프론트엔드  >  주요 CSS 지식 요약

주요 CSS 지식 요약

巴扎黑
巴扎黑원래의
2017-07-18 17:21:031334검색

1 개요

1. CSS란?

계단식 스타일 시트인 계단식 스타일 시트는 페이지 콘텐츠의 표시 스타일을 설정하는 데 사용됩니다.


CSS를 사용하는 이유와 장점은 무엇인가요?

1: [내용]과 [성능]이 분리되어 있습니다. HTML 파일에는 텍스트 정보만 저장되고, 스타일 부분은 독립된 스타일 파일에 배치됩니다. 이 페이지는 검색 엔진에 더 친숙합니다.

2: 페이지 탐색 속도를 향상시킵니다. CSS 레이아웃을 사용하는 페이지의 용량은 일반적으로 TABLE 레이아웃의 페이지 파일 용량보다 훨씬 작습니다.

3: 유지 관리 및 수정이 쉽습니다. 해당 CSS 파일을 수정하면 전체 웹사이트 페이지를 다시 디자인할 수 있습니다.

4: CSS 레이아웃을 사용하는 것은 현재 W3C 표준에 더 가깝습니다. W3C 조직은 HTML, CSS 및 XML과 같은 표준을 맞춤화하는 비영리 조직입니다.


CSS 스타일 시트를 호출하는 방법은 무엇입니까?

1. CSS 스타일 시트를 문서에 넣습니다. 형식은 다음과 같습니다.


2. 요소에 여러 스타일 추가

요소는 여러 클래스를 정의할 수 있습니다. 동시에 class="xxx01 xxx02"와 같이 서로 다른 클래스를 공백으로 구분합니다.

3. 하위 요소에 스타일 추가

하위 요소의 스타일을 설정하는 방법: 상위 요소 + 공백 + 하위 요소 {}, 일반적으로 ID + 클래스.

2 공통 속성

1. 텍스트

  • text-align:center: 텍스트가 가운데 정렬됩니다.

2. 내부 패치

  • padding: 내부 패치, 즉 내부 너비. 형식: 패딩: 5px(하나의 값 또는 4개의 값을 정의할 수 있음), 인접한 요소와 해당 테두리 사이의 거리를 설정하는 데 사용됩니다.

    3. 외부 패치

margin: 개체와 다른 개체 사이의 공백을 늘리거나 줄입니다. 증가된 공간은 개체 외부이므로 사용 방법은 다음과 같습니다. 내부 패치 패딩과 동일합니다.
  • 4. 레이아웃

오버플로: 개체의 내용이 지정된 범위를 초과하는 경우 처리 방법을 설정합니다.

auto: 필요한 경우에만 스크롤 막대나 기울이기를 사용하세요.
  • hidden: 범위를 벗어난 콘텐츠를 표시하지 않습니다.
  • visible: 기본값, 잘림 없음, 스크롤 막대 없음.
  • 스크롤: 항상 스크롤 막대를 표시합니다.
  • 디스플레이: 개체가 표시되는 방식을 변경합니다.

inline-block: 객체를 인라인 객체로 처리하고 객체의 내용을 블록 객체로 처리합니다. 일반적으로 너비는 정렬할 개체의 너비를 설정하기 위해 추가됩니다.
  • none: 숨겨진 요소, 이 요소는 공간을 차지하지 않습니다.
  • visibility:hidden: 숨겨진 개체, 숨겨진 개체는 여전히 공간을 차지합니다.

위 내용은 주요 CSS 지식 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.