세 가지 유형의 CSS 규칙: 1. 인라인 스타일 시트, 스타일 속성을 사용하여 CSS 코드를 HTML 마크업에 직접 추가합니다. 구문은 "입니다. >"로 표시하세요. 2. 내부 스타일 시트에서 "" 태그에 CSS 스타일을 작성하고 "
이 튜토리얼의 운영 환경: 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를 통해
