>웹 프론트엔드 >프런트엔드 Q&A >CSS 스타일의 유형은 무엇입니까?

CSS 스타일의 유형은 무엇입니까?

青灯夜游
青灯夜游원래의
2021-04-08 19:02:1914371검색

CSS 스타일에는 세 가지 유형이 있습니다. 1. 스타일 속성을 사용하여 HTML 마크업에 CSS 코드를 직접 추가하는 인라인 스타일(임베디드 스타일) 2. CSS 스타일을 HTML 마크업에 작성하는 내부 스타일(인라인 스타일) 스타일 태그 ;3. 외부 스타일(외부 스타일), CSS 스타일을 별도의 ".css" 파일에 작성합니다.

CSS 스타일의 유형은 무엇입니까?

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

CSS 스타일에는 주로 다음 세 가지 유형이 포함됩니다.

1. 인라인 스타일(임베디드 스타일): 구조 내부, 즉 태그 시작 부분 안에 작성된 스타일입니다. 기인하다.

예:

<标记 style="样式的属性名1:样式的属性值1;属性名2:属性值2;......"></标记>

장점:

  • 때때로 효율성을 향상시킬 수 있는 스타일 시트 파일이 없습니다.

  • 스타일 속성을 사용하는 스타일 효과가 가장 강력하며 도입된 동일한 스타일을 덮어씁니다. 다른 방법으로.

단점:

  • 여러 요소가 스타일을 공유하기 어렵기 때문에 코드 재사용에 도움이 되지 않습니다.

  • HTML과 CSS 코드가 혼합되어 있어 프로그래머와 검색 엔진이 읽는 데 도움이 되지 않습니다.

2. 내부 스타일(인라인 스타일): HTML 페이지 내부에 작성하고, head 태그에 저장하며, 스타일 태그에 스타일을 작성합니다.

예:

<style>选择器 {属性名:属性值;属性名:属性值;......}</style>

장점: 인터라인 스타일 시트와 마찬가지로 추가 요청이 생성되지 않으며, 초기에 구조와 스타일의 분리를 구현하므로 단일 페이지 웹 사이트 애플리케이션에 더 적합합니다.

단점: 내부 스타일 시트가 HTML 파일로 작성되기 때문에 페이지가 순수하지 않고, 파일 크기가 크고, 웹 크롤러가 정보를 얻는 데 도움이 되지 않으며, 유지 관리에 도움이 되지 않으며, 스타일을 변경할 수 없습니다. 페이지 간 공유

3. 외부 스타일(external styles) 연결 스타일): CSS 파일에 작성됩니다.

그런 다음 2cdf5bf648cf2f33323966d7f58a7f3f 링크 태그를 통해 페이지에 링크를 걸어야 하며, 링크 설명은 페이지의 93f0f5c25f18dab9d176bd4f6de5d30e 태그 영역에 있어야 합니다.

예:

<link type="text/css" rel="stylesheet" href="css/main.css" />

장점:

  • 구조 코드와 성능 코드의 완벽한 분리

  • 재사용 및 유지 관리가 용이함

  • 별도의 파일로 분리되어 있으므로 HTML 파일의 크기가 대폭 줄어듭니다. 따라서 프로그래머와 웹 크롤러가 페이지 구조를 더 쉽게 읽을 수 있습니다.

  • 검색 엔진에 친화적이므로 검색 엔진이 페이지를 더 높게 평가할 수 있어 페이지의 검색 엔진 순위에 도움이 됩니다.

  • 외부 스타일 시트는 다음 용도로 사용됩니다. 사용자가 처음 접속한 후에는 사용자의 컴퓨터에 캐시되어 다음 번에 로드할 필요가 없습니다. 단점:

스타일이 많으면 CSS 파일이 매우 커지고 읽기가 어려워집니다. 찾다. 또한 CSS 파일이 하나 더 있다는 것은 HTTP 요청이 하나 더 있다는 의미이며, 이는 방문자가 많은 웹사이트

  • 에서 서버에 대한 부담을 증가시킵니다. (동영상 공유 학습:

    css 동영상 튜토리얼
  • )

위 내용은 CSS 스타일의 유형은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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