& lt; link & gt; 외부 CSS 스타일 시트에 링크하는 태그?

<link> 태그를 사용하여 외부 CSS 스타일 시트에 링크하는 방법은 무엇입니까?

<link> 태그를 사용하여 외부 CSS 스타일 시트에 연결하려면 HTML 문서의 섹션 내에 포함해야합니다. CSS 파일을 연결하기위한 <link> 태그의 기본 구조는 다음과 같습니다.

 <code class="html"> <link rel="stylesheet" type="text/css" href="path/to/yourstylesheet.css"> </code>

다음은이 예제에 사용 된 속성의 고장입니다.

• rel="stylesheet" :이 속성은 현재 문서와 연결된 문서 간의 관계를 지정합니다. CSS 파일의 경우 항상 "스타일 시트"로 설정해야합니다.
• type="text/css" :이 속성은 링크 된 문서의 마임 유형을 지정합니다. 최신 HTML에서 선택 사항으로 간주되고 덜 사용되는 것으로 간주되지만 명확하거나 역 호환성을 위해 여전히 포함될 수 있습니다.
• href="path/to/yourstylesheet.css" :이 속성은 HTML 문서와 관련하여 CSS 파일의 위치를 ​​지정합니다. 절대 또는 상대 경로를 사용할 수 있습니다.

이 방법을 사용하면 외부 CSS 파일에서 HTML 문서에 스타일을 적용하여 여러 페이지에서 스타일을보다 쉽게 ​​관리하고 재사용 할 수 있습니다.

CSS의 <link> 태그와 함께 사용되는 일반적인 속성은 무엇입니까?

CSS 파일에 링크 할 때 <link> 태그와 함께 여러 속성이 일반적으로 사용됩니다. 가장 자주 사용되는 것들은 다음과 같습니다.

• rel : 현재 문서와 연결된 문서 간의 관계를 지정합니다. CSS의 경우 "스타일 시트"로 설정해야합니다.
• type : 연결된 리소스의 마임 유형을 나타냅니다. CSS 파일의 경우 일반적으로 "텍스트/CSS"이지만 브라우저가 rel 속성에서 유추 할 수 있으므로 최신 HTML5에서는 종종 생략됩니다.
• href : 연결된 리소스의 URL을 지정합니다. 이것은 CSS 파일의 상대적 또는 절대 경로 일 수 있습니다.
• media : 링크 된 리소스가 표시 될 장치를 지정합니다. 일반적인 값에는 "화면", "인쇄"및 "모두"가 포함됩니다. media="screen and (max-width: 600px)" 와 같은 미디어 쿼리를 사용할 수도 있습니다.
• title : 연결된 리소스에 대한 추가 정보를 제공하는 데 사용됩니다. 대체 스타일 시트가 있고 이름을 지정하려는 경우 특히 유용합니다.
• integrity : SRI (Subresource Integrity)에 사용되어 브라우저가 지정된 암호화 해시에 대해 파일을 확인하여 변조되지 않았는지 확인할 수 있습니다.
• crossorigin : 자원이 CORS와 함께 가져와야하는지 여부를 지정합니다. "익명"또는 "사용 간격"으로 설정할 수 있습니다.

다음은 이러한 속성 중 일부를 포함하는 예입니다.

 <code class="html"> <link rel="stylesheet" type="text/css" href="styles.css" media="screen" title="Default Styles"> </code>

<link> 태그를 사용하여 여러 CSS 파일을 연결할 수 있습니까? 그렇다면 어떻게해야합니까?

예, <link> 태그를 사용하여 여러 CSS 파일을 연결할 수 있습니다. 이렇게하려면 HTML 문서의 섹션에 여러 개의 <link> 태그를 포함 시키십시오. 각 CSS 파일을 가리키십시오. 여러 CSS 파일을 연결하는 방법의 예는 다음과 같습니다.

 <code class="html"> <link rel="stylesheet" href="styles1.css"> <link rel="stylesheet" href="styles2.css"> <link rel="stylesheet" href="styles3.css"> </code>

각 <link> 태그는 관련 CSS 파일을로드하므로 다양한 구성 요소의 스타일을 분리하거나 다른 미디어 유형에 다른 스타일을 사용하는 등의 요구에 따라 스타일을 다른 파일로 구성 할 수 있습니다.

다중 <link> 태그를 사용할 때 CSS 파일로드의 올바른 순서를 어떻게 보장 할 수 있습니까?

여러 <link> 태그를 사용하여 다른 CSS 파일을로드 할 때 HTML 문서의 태그 순서는 스타일이 적용되는 순서를 결정합니다. Cascade에 나중에 나타나는 CSS 규칙은 동일한 특이성이있는 경우 이전의 규칙을 무시합니다.

CSS 파일로드 및 애플리케이션의 올바른 순서를 보장하려면 섹션에 <link> 태그를 스타일을 적용하려는 순서로 배치해야합니다. 다음은 styles1.css 먼저 적용되고 styles2.css 및 styles3.css 이어지는 예입니다.

 <code class="html"> <link rel="stylesheet" href="styles1.css"> <link rel="stylesheet" href="styles2.css"> <link rel="stylesheet" href="styles3.css"> </code>

이 구성에서 styles2.css 의 규칙과 충돌하는 styles1.css 로 정의 된 모든 규칙은 styles1.css 의 규칙을 무시하고 styles3.css 의 규칙은 가장 우선합니다. 이를 통해 CSS 규칙의 특이성 및 재정의 동작을 효과적으로 관리 할 수 ​​있습니다.

위 내용은 & lt; link & gt; 외부 CSS 스타일 시트에 링크하는 태그?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!