> 웹 프론트엔드 > HTML 튜토리얼 > HTML에서 CSS 파일을 외부적으로 연결하는 방법

HTML에서 CSS 파일을 외부적으로 연결하는 방법

下次还敢
풀어 주다: 2024-04-11 10:02:56
원래의
1152명이 탐색했습니다.

HTML 외부 CSS 파일을 사용하면 유지 관리 및 스타일 지정이 단순화됩니다. 단계는 다음과 같습니다. styles.css와 같은 CSS 파일을 만듭니다. HTML <head> 섹션에서 <link> 요소를 사용하여 styles.css에 연결합니다. 표준 CSS 구문을 사용하여 CSS 파일의 스타일을 정의합니다. 파일을 저장하고 변경 사항을 검토합니다. 아웃바운드 CSS의 장점에는 유지 관리성, 재사용성 및 향상된 성능이 포함됩니다.

HTML에서 CSS 파일을 외부적으로 연결하는 방법

HTML 외부 CSS 파일 사용 방법

Outline CSS 파일을 사용하면 HTML 문서를 더 쉽게 유지 관리하고 스타일을 지정할 수 있습니다. 이를 수행하는 방법에 대한 단계별 가이드는 다음과 같습니다.

1. CSS 파일 만들기

먼저 텍스트 편집기를 사용하여 styles.css와 같은 CSS 파일을 만듭니다. 이 파일에 원하는 CSS 스타일을 작성하세요. styles.css。在该文件中,写入您所需的 CSS 样式。

2. 在 HTML 文档中链接 CSS 文件

在 HTML 文档的 <head> 部分中,使用 <link> 元素链接到外部 CSS 文件。其语法如下:

<code class="html"><link rel="stylesheet" href="styles.css"></code>
로그인 후 복사

其中:

  • rel="stylesheet" 指定该链接是指向样式表
  • href="styles.css"
  • 2. HTML 문서의 CSS 파일 연결

HTML 문서의 <head> 섹션에서 <link> 요소를 사용하여 외부 CSS에 연결하세요. 파일. 구문은 다음과 같습니다.

<code class="css">body {
  font-family: Arial, sans-serif;
  font-size: 16px;
}</code>
로그인 후 복사

그 중:

rel="stylesheet"는 링크가 스타일 시트

href="styles.css"를 가리키도록 지정합니다. code>는 CSS 파일 경로를 지정합니다.

3. CSS 스타일 정의

    표준 CSS 구문을 사용하여 외부 CSS 파일에 CSS 스타일을 배치합니다. 예:
  • rrreee4. 변경사항 보기
  • HTML 및 CSS 파일을 저장한 다음 브라우저에서 HTML 파일을 엽니다. CSS 스타일이 페이지에 적용된 것을 볼 수 있습니다.
  • 장점
  • 외부 CSS 파일을 사용하면 다음과 같은 장점이 있습니다.
  • 우수한 유지 관리성:
모든 스타일이 하나의 파일에 집중되어 있어 업데이트 및 유지 관리가 쉽습니다. 🎜🎜🎜재사용성: 🎜동일한 CSS 파일을 여러 HTML 페이지에서 사용할 수 있어 코드 재사용성이 향상됩니다. 🎜🎜🎜성능: 🎜CSS 파일을 별도로 로드하면 HTML 파일의 크기를 줄여 페이지 로딩 속도를 높이는 데 도움이 됩니다. 🎜🎜

위 내용은 HTML에서 CSS 파일을 외부적으로 연결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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