CSS 파일을 가져오는 방법

藏色散人
풀어 주다: 2023-01-06 11:17:51
원래의
19400명이 탐색했습니다.

CSS 파일 소개 방법: 1. 인라인 메소드 소개, 태그의 스타일 속성에 CSS 스타일 설정, 2. 임베디드 메소드 소개, 웹 페이지의 스타일 태그에 CSS 스타일 작성, 3. 링크 참조 사용 4. 외부 CSS 파일을 참조하려면 @import를 사용하세요.

CSS 파일을 가져오는 방법

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

CSS 파일을 가져오는 방법은 무엇입니까? CSS 파일을 HTML에 도입하는 여러 가지 방법

일반적으로 다음과 같은 네 가지 방법이 있습니다.

1. 인라인: 인라인이라고도 하며 CSS 스타일은 마크의 스타일 속성에 설정됩니다. 이 방법은 CSS의 장점을 반영하지 않습니다.

2. 임베디드: 웹페이지의 태그 쌍에 CSS 스타일을 집중시킵니다.

3. 링크 유형: 네 번째 가져오기 유형은 외부 유형 또는 외부 링크 유형이라고 하며, 외부 CSS 파일을 참조하려면 링크를 사용하세요.

4. 가져오기 유형: 외부 CSS 파일을 참조하려면 @import를 사용하세요. ------------------------------------- A

인라인 스타일은 글쓰기를 시작하는 가장 쉽고 편한 방법이지만, 이런 글쓰기 방식은 CSS의 장점을 전혀 반영하지 않습니다.

인라인으로 작성 중입니다

페이지에 태그가 많으면 이 작성 방법이 보기에 좋지 않습니다. 매우 번거롭고 반복적인 작업이므로 권장하지 않습니다!

-------------------------------------- -----B

Embedded도 상대적으로 페이지 수가 적다면 좋은 선택이지만, 프로젝트에 해당하는 페이지가 많으면 의심할 여지없이 약간 재앙이 될 것입니다.

얼굴과 비슷하지만 다음과 같이 하나씩 수정해야 합니다.

<span style="font-size:14px;"><style type="text/css"></span>
<span style="font-size:14px;">#demo{
position:absoulte;
left: 20px;
top:50px;
width:300px;
height: 50px;
border: solid 1px red;
padding-left: 20px;
color:gray;
font-size: 20px;
line-height: 50px;
text-align: center;</span>
<span style="font-size:14px;">}
</style></span>
로그인 후 복사

이 작성 방법은 페이지의 "스타일리스" 현상을 어느 정도 방지합니다. CSS가 로드된 후에 페이지가 렌더링됩니다. .

-- -------------------------------- ----- -CD

외부 CSS 스타일은 CSS 코드를 별도의 외부 파일에 작성하는 것입니다. 이 CSS 스타일 파일은 ".css" 확장자를 가지며 style> 태그) CSS 스타일 파일을 HTML 파일에 연결하려면 태그를 사용하세요. 이는 CSS의 장점을 극대화합니다. 물론 ".css" 파일의 이름에는 후속 수정이 용이하도록 특정 의미가 있어야 합니다. 또는 "main.css"와 같은 가독성 향상...

<link href="main.css" rel="stylesheet" style="text/css"/>
로그인 후 복사

rel="stylesheet" type="text/css"는 수정이 불가능한 고정된 쓰기 방식입니다

@를 통해 도입된 형식입니다. 가져오기는 다음과 같습니다.

<style type="text/css">
@import url(demo.css);
</style>
로그인 후 복사

이렇게 하면 CSS 파일이 전체 페이지가 로드된 후에만 도입됩니다. 명백한 문제는 페이지의 "줄무늬" 현상입니다. 경험

위의 두 가지 외부 도입 방법은 구문 구조의 차이점을 직접 볼 수 있습니다.

<span style="font-size:14px;"><link href="CSS路径" rel="stylesheet" type="text/css" /></span>
<span style="font-size:14px;">@import + 空格+ url(CSS文件路径地址);</span>
로그인 후 복사

@import 이 방법에서는 HTML과 CSS 파일을 다운로드할 때의 차이점에도 주의해야 합니다. add CSS 파일에서 @import

를 사용하여 사용할 경로를 직접 추가할 수 있습니다. 기본 스타일을 먼저 렌더링한 다음 기본 스타일을 먼저 렌더링하도록 선택할 수 있습니다. 원하는 경우 CSS 파일

으로 가져올 수 있습니다. 크지는 않지만 최적화하는 것이 좋습니다. 본질적으로 이 두 가지 외부 도입 방식은 큰 차이가 없으나, 프로젝트 내에서 사이트 스타일 편집의 편의를 위해 링크 방식을 사용하는 경우가 많습니다.

물론 XML을 편집 요구사항으로 사용하는 도입 방법도 있지만 일반적으로 사용되지는 않습니다....

추천 학습: "

css 비디오 튜토리얼

"

위 내용은 CSS 파일을 가져오는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
css
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿