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

CSS는 HTML 스타일을 표현하는 데 사용되는 프로그래밍 언어로 웹페이지와 콘텐츠를 분리할 수 있는 스타일 언어입니다.

CSS는 주로 웹 페이지의 스타일을 디자인하고 웹 페이지를 아름답게 만드는 데 사용됩니다. 웹 페이지를 정적으로 수정할 수 있을 뿐만 아니라 다양한 스크립트 언어와 함께 웹 페이지의 다양한 요소의 형식을 동적으로 지정할 수도 있습니다.

CSS는 웹 페이지의 요소 위치 레이아웃에 대해 픽셀 수준의 정밀한 제어를 수행할 수 있고 거의 모든 글꼴 크기 스타일을 지원하며 웹 페이지 개체 및 모델 스타일을 편집할 수 있는 기능을 갖추고 있습니다.

CSS 스타일에는 주로 인라인 스타일(inline styles), 내부 스타일(inline styles), 외부 스타일(outline styles)의 세 가지 유형이 있습니다.

1. 인라인 스타일(inline styles):

구조 내부, 즉 태그에 작성된 스타일입니다. 스타일 속성에서 태그의 시작 부분 안에 작성됩니다.

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

예:

<h1 style="color:red;">style属性的应用</h1>

이 방법을 사용하면 요소의 스타일을 개별적으로 쉽게 정의할 수 있습니다.

장점:

• 스타일 시트 파일이 없으면 특정 시점에 효율성이 향상될 수 있습니다.

• 스타일 속성을 사용하는 스타일 효과가 가장 강력하며 다른 소개 방법의 동일한 스타일 효과를 무시합니다. .

단점:

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

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

2. 내부 스타일(인라인 스타일):

HTML 페이지 내부에 작성되며, head 태그에 저장되고, style 태그에 스타일이 작성됩니다.

<style>选择器 {属性名：属性值；属性名：属性值；......}</style>

예:

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

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

3. 외부 스타일(외부 링크 스타일):

코드는 CSS 파일에 작성됩니다. 그런 다음 링크 태그를 통해 페이지를 링크하고 링크 문을 페이지의

CSS 스타일이 웹 페이지 문서 외부의 파일에 배치된 경우 이를 외부 스타일 시트라고 합니다. CSS 스타일 시트 문서는 외부 스타일 시트를 나타냅니다.

실제로 외부 스타일 시트는 확장자가 .css인 텍스트 파일입니다. CSS 스타일 코드를 텍스트 파일에 복사하여 .css 파일로 저장하면 외부 스타일 시트가 됩니다.

아래 그림과 같이 외부 스타일 시트입니다:

외부 스타일 시트 도입 방법:

HTML 파일은 확장자가 .css인 스타일 시트를 참조합니다. 링크. 유형 및 가져오기 유형.

1) CSS 링크 스타일

링크 스타일은 외부에서 CSS 스타일 시트를 정의하고 확장자가 .CSS인 파일을 구성한 후 링크 태그를 통해 페이지에 연결하는 것을 의미하며, 링크 문은 반드시 페이지의

문법:

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

2), CSS 가져오기

가져오기는 @import를 통해

문법:

<style type="text/css">
  @import url("css文件路径");
</style>

간단한 예:

외부 스타일 시트의 장단점

장점:

• 구조 코드와 성능 코드의 완전한 분리 실현

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

• 별도의 파일로 분리되어 있기 때문에 HTML 파일의 크기가 대폭 줄어들어 프로그래머나 웹 크롤러가 페이지 구조를 쉽게 읽을 수 있습니다.

• 검색 엔진용 친절하고 검색 엔진이 페이지를 더 높게 평가할 수 있게 하여 페이지의 검색 엔진 순위에 도움이 됩니다

• 외부 스타일 시트는 사용자가 처음 방문한 후 사용자의 컴퓨터에 캐시되므로 로드할 필요가 없습니다. 다음 방문

단점:

• 스타일이 많으면 CSS 파일이 너무 커지고 찾기가 어려워집니다. 또한 CSS 파일이 하나 더 있다는 것은 HTTP 요청이 하나 더 있다는 것을 의미하며, 이는 방문자가 많은 웹 사이트의 서버에 대한 부담을 증가시킵니다.

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