"입니다. 2. "@import" 규칙을 사용하여 스타일 태그를 소개합니다. 구문은 "@import url("css 파일 경로");"입니다."/> "입니다. 2. "@import" 규칙을 사용하여 스타일 태그를 소개합니다. 구문은 "@import url("css 파일 경로");"입니다.">

 >  기사  >  웹 프론트엔드  >  CSS에 외부 스타일 시트를 도입하는 방법

CSS에 외부 스타일 시트를 도입하는 방법

青灯夜游
青灯夜游원래의
2021-11-10 15:08:3116618검색

소개 방법: 1. 링크 태그를 사용하여 소개합니다. 구문은 "4876c3289ec49ab24ddcc130b01021a7"입니다. 2. "@import" 규칙을 사용하여 소개합니다. 스타일 태그의 경우 구문은 " @import url("css file path");"입니다.

CSS에 외부 스타일 시트를 도입하는 방법

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

외부 스타일 시트를 브라우저에서 인식하고 구문 분석하려면 먼저 웹 문서로 가져와야 합니다. 외부 스타일 시트 파일은 두 가지 방법으로 HTML 문서로 가져올 수 있습니다.

1. 2cdf5bf648cf2f33323966d7f58a7f3f 태그를 사용하여 가져오기

2cdf5bf648cf2f33323966d7f58a7f3f 태그를 사용하여 외부 스타일 시트 파일 가져오기:

<link href="外部样式表文件路径" rel="stylesheet" type="text/css" />

각 속성 설명:

  • href 속성은 외부 스타일 시트 파일의 주소를 설정하며, 상대 주소 또는 절대 주소일 수 있습니다. href 属性设置外部样式表文件的地址,可以是相对地址,也可以是绝对地址。

  • rel 属性定义关联的文档,这里表示关联的是样式表。

  • type 属性定义导入文件的类型,同 style 元素一样,text/css表明为 CSS 文本文件。

一般在定义 2cdf5bf648cf2f33323966d7f58a7f3f 标签时,应定义 3 个基本属性,其中 href 是必须设置属性。

也可以在 link 元素中添加 title 属性,设置可选样式表的标题,即当一个网页文档导入了多个样式表后,可以通过 title 属性值选择所要应用的样式表文件。

提示:在 Firefox 浏览器中可以在菜单中选择“查看 --> 页面样式”选项,然后在子菜单中会显示 title 属性值,只需选择不同的 title 属性值,可以有选择地应用需要的样式表文件。IE 浏览器不支持该功能。

另外,title 属性与 rel 属性存在联系,按 W3C 组织的计划,未来的网页文档会使用多个 2cdf5bf648cf2f33323966d7f58a7f3f 元素导入不同的外部文件,如样式表文件、脚本文件、主题文件,甚至可以包括个人自定义的其他补充文件。导入这么多不同类型、名称各异的文件后,可以使用 title 属性进行选择,这时 rel 属性的作用就显现出来了,它可以指定网页文件初始显示时应用的导入文件类型,目前只能关联 CSS 样式表类型。

外部样式是 CSS 应用的最佳方案,一个样式表文件可以被多个网页文件引用,同时一个网页文件可以导入多个样式表,方法是重复使用 link 元素导入不同的样式表文件。

2、使用 @import 关键字导入

在 c9ccee2e6ea535a969eb3f532ad9fe89 标签内使用@import关键字导入外部样式表文件:

<style type="text/css">
@import url("外部样式表文件路径");
</style>

@import

rel 속성은 관련 문서를 정의합니다. 여기서는 관련 문서가 스타일 시트임을 의미합니다.

type 속성은 스타일 요소와 마찬가지로 CSS 텍스트 파일을 나타냅니다.

  • 일반적으로 2cdf5bf648cf2f33323966d7f58a7f3f 태그를 정의할 때 3가지 기본 속성을 정의해야 하며, 그 중 href는 필수 설정 속성입니다.

    link 요소에 title 속성을 추가하여 선택적 스타일 시트의 제목을 설정할 수도 있습니다. 즉, 웹 문서에서 여러 스타일 시트를 가져올 때 title 속성 값을 통해 적용할 스타일 시트 파일을 선택할 수 있습니다. .
  • 팁: Firefox 브라우저의 메뉴에서 "보기 --> 페이지 스타일" 옵션을 선택하면 제목 속성 값이 하위 메뉴에 표시됩니다. 다른 제목 속성 값만 선택하면 됩니다. 필수 스타일 시트 파일을 선택적으로 적용할 수 있습니다. IE 브라우저는 이 기능을 지원하지 않습니다.

    또한 title 속성은 rel 속성과 관련되어 있습니다. W3C 조직의 계획에 따르면 향후 웹 문서에서는 여러 개의 2cdf5bf648cf2f33323966d7f58a7f3f 요소를 사용하여 스타일 시트 파일, 스크립트 파일, 테마 파일은 물론 개인 사용자 정의를 위한 추가 보충 파일도 포함되어 있습니다. 다양한 유형과 이름의 파일을 너무 많이 가져온 후에는 title 속성을 사용하여 선택할 수 있습니다. 이때 rel 속성의 역할은 웹 페이지 파일이 처음 표시될 때 적용되는 가져온 파일 형식을 지정할 수 있습니다. 현재는 CSS 스타일 시트 유형에만 연결할 수 있습니다.
  • 외부 스타일은 CSS 애플리케이션을 위한 최상의 솔루션입니다. 하나의 스타일 시트 파일은 여러 웹 페이지에서 참조할 수 있으며, 하나의 웹 페이지 파일은 링크 요소를 반복적으로 사용하여 여러 스타일 시트를 가져올 수 있습니다.

  • 2. 가져오기에는 @import 키워드를 사용합니다.

외부 스타일 시트 파일을 가져오려면 c9ccee2e6ea535a969eb3f532ad9fe89 태그에 @import 키워드를 사용합니다.

rrreee

@import 키워드 뒤에 url() 함수를 사용하여 특정 외부 스타일 시트 파일의 주소를 포함합니다.

Comparison

🎜🎜스타일 시트를 가져오는 두 가지 방법 비교: 🎜🎜🎜🎜🎜🎜link는 HTML 태그에 속하고 @import는 CSS에서 제공됩니다. 🎜🎜🎜🎜페이지가 로드되면 링크도 동시에 로드되며 @import에서 참조하는 CSS는 페이지가 로드될 때까지 기다린 후 로드됩니다. 🎜🎜🎜🎜@import는 IE 5 이상에서만 인식 가능하며, 링크는 HTML 태그이므로 호환성 문제는 없습니다. 🎜🎜🎜🎜link 스타일 스타일은 @import 가중치보다 가중치가 더 높습니다. 🎜🎜🎜🎜스타일 시트를 가져올 때는 일반적으로 링크를 사용하는 것이 좋으며, @import를 보조 방법으로 사용할 수 있습니다. 🎜🎜(학습 영상 공유: 🎜css 영상 튜토리얼🎜)🎜

위 내용은 CSS에 외부 스타일 시트를 도입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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