CSS 삽입 양식이란 무엇입니까?

CSS 삽입 양식: 1. 요소 태그의 스타일 속성에 CSS 코드를 작성합니다. 2. "" 사이에 CSS 코드를 작성합니다. code CSS 파일에 작성하고 link 태그를 사용하여 가져옵니다. 4. "@import" 규칙을 사용하여 CSS 코드 파일을 가져옵니다.

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

1. CSS란

　CSS(Cascading style sheet), CSS를 사용하여 웹 페이지용 스타일 시트를 만들고, 스타일 시트를 사용하여 웹 페이지를 아름답게 만드는 효과를 얻을 수 있습니다. 소위 계단식 배열은 웹 페이지를 높은 수준이 낮은 수준을 덮는 레이어별 구조로 생각할 수 있습니다. CSS는 웹 페이지의 스타일을 계층적으로 지정할 수 있습니다. (텍스트 크기, 배경색, 너비와 높이, 테두리 등)

CSS는 W3C 조직에서 만들고 유지 관리하는 언어로 1996년에 버전 1.0, 1998년에 버전 2.0이 있었고 2004년에 출시되었습니다. 버전 2.1 , CSS3에 대한 전체 릴리스 시간은 없습니다. 자세한 내용은 W3C 공식 웹사이트에서 확인할 수 있습니다.

2. CSS 삽입 방법

CSS 스타일 시트에는 4가지 삽입 방법이 있습니다: 인라인 스타일, 내부 스타일, 외부 스타일을 도입하는 링크 태그, 가져온 스타일

(1), 인라인 스타일(인라인 스타일)

　인라인 스타일: 요소의 스타일 속성에 CSS 코드를 작성할 수 있습니다. CSS 코드는 스타일 속성 뒤에 추가됩니다. 인라인 스타일은 인라인 태그에 기록됩니다.

하나의 스타일 속성에 여러 스타일을 작성할 수 있습니다. 속성의 서로 다른 값은 세미콜론(;)으로 구분됩니다. 이 스타일을 인라인 태그라고 합니다. 인라인 태그는 현재 요소에서만 작동합니다.

(2), 내부 스타일

내부 스타일: HTML(

스타일 태그에 콘텐츠를 추가하려면 먼저 스타일을 설정할 대상을 나타내는 CSS 콘텐츠 선택기를 작성해야 합니다. 태그 뒤에 중괄호 { }를 넣어 스타일을 설정해야 합니다. 지정된 스타일 태그에서 지정된 요소는 CSS 선택기를 통해 선택한 다음 이러한 요소에 대해 동시에 스타일을 설정할 수 있습니다. 이를 통해 스타일을 더 잘 재사용하고 구조와 스타일을 더욱 분리하고 개선할 수 있습니다. 의미론적 수준. (내부 스타일은 현재 페이지에서만 사용할 수 있습니다.)

(3) 외부 스타일

외부 스타일: 여러 페이지에서 동시에 여러 스타일을 사용할 수 있는 효과를 내기 위해, 링크 태그를 사용하여 CSS 파일(파일 접미사 .css)을 변환하면 현재 페이지에 도입됩니다.

자동 닫힘 태그입니다. 외부 파일이 현재 스타일 시트에 적용될 수 있도록 현재 페이지에 외부 CSS 파일을 도입합니다. href 속성은 외부 파일 주소 URL인 rel="stylesheet" type="text/css"를 가리킵니다. 이 부분이 기본값입니다. 스타일을 외부 파일에 균일하게 작성한 다음 링크 태그를 통해 도입합니다. 이 방법은 브라우저의 캐시를 사용하여 액세스 속도를 높이고 사용자 경험을 향상시킵니다.

css.css 파일 코드 내용은 p{color:blue} 이며 최종 성능은 내부 스타일을 사용하여 위에 표시된 효과와 일치합니다.

(4) 가져오기(@import)

가져오기: 두 CSS 파일 간의 상호 참조, CSS@import 규칙을 사용하여 외부 CSS 파일을 도입합니다.

링크 태그를 사용하여 외부 CSS 스타일 시트를 도입하는 것과 가져온 CSS 파일을 사용하는 것 사이에는 구현 효과에 약간의 차이가 있습니다.

링크 태그를 사용하면 메인 페이지 부분을 로드하기 전에 CSS 파일을 로드(위에서 아래로 순서대로 로드)하므로 로드된 페이지가 처음부터 스타일로 렌더링됩니다.

　가져오기 방법을 사용하면 전체 페이지가 로드된 후 CSS 파일이 로드됩니다. 일부 브라우저의 경우 페이지 파일이 상대적으로 크면 스타일이 없는 페이지가 먼저 나타난 후 깜박이는 현상이 발생합니다. 스타일 설정 화면이 다시 나타납니다. 사용자의 관점에서 보면 이는 가져오기의 결함입니다.

계획을 선택하고 CSS를 사용하여 다른 CSS 파일을 소개하세요.

• 단 하나의 CSS 파일만 소개하는 경우 링크 링크를 사용하는 것이 가장 좋습니다. (JavaScript를 통해 어떤 CSS 파일을 동적으로 가져오려면 링크 태그를 사용하여 가져와야 합니다.)
• 여러 CSS 파일을 참조해야 하는 경우 먼저 링크를 사용하여 "디렉토리" CSS 파일을 소개한 다음 " 디렉토리" CSS 파일 가져오기를 사용하여 다른 CSS 파일을 소개합니다.

다른 CSS 파일을 CSS에 추가하는 방법

세 개의 CSS 스타일 시트가 있다고 가정합니다: one.css; two.css; three.css

그런 다음 기본 스타일 style.css를 사용하여 이 세 가지 스타일 시트를 추가합니다. : (경로 주의)

@import "one.css"; 
@import "two.css";
@import "three.css";

전화시에는 style.css만 호출하시면 됩니다.

CSS 파일에서 다른 CSS 파일을 가져오는 가져오기 방법은 주로 @import 규칙을 사용합니다

(동영상 공유 학습: css 동영상 튜토리얼)

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