HTML에 CSS 스타일을 추가하는 방법

HTML에 CSS 스타일을 추가하는 방법에는 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트가 포함됩니다. 자세한 소개: 1. 인라인 스타일은 HTML 요소 내에 직접 작성되고 스타일 속성을 통해 정의됩니다. 이 방법은 HTML 코드를 혼란스럽게 만들기 때문에 단일 요소의 스타일 정의에 적합하지 않습니다. 2. 내부 스타일 시트는 HTML 문서의 "

" 태그에 배치되고 "

인라인 스타일, 내부 스타일 시트, 외부 스타일 시트를 포함하여 HTML에 CSS 스타일을 추가하는 방법에는 여러 가지가 있습니다. 아래에서는 각 방법을 자세히 설명하고 해당 예제 코드를 제공하겠습니다.

인라인 스타일:

인라인 스타일은 HTML 요소 내부에 직접 작성되며 스타일 속성을 통해 정의됩니다. 이 방법은 단일 요소의 스타일 정의에 적합하며 HTML 코드를 복잡하게 만들고 유지 관리가 어렵게 만들 수 있으므로 대규모 프로젝트에서 널리 사용하는 것은 권장되지 않습니다.

샘플 코드:

这是一段红色的文本。

로그인 후 복사

내부 스타일 시트:

내부 스타일 시트는 HTML 문서의태그 내에 위치하며

这是一段红色的文本。

로그인 후 복사

외부 스타일 시트:

외부 스타일 시트는 태그를 통해 HTML 파일에서 참조되는 독립형 CSS 파일입니다. 이는 스타일과 콘텐츠를 분리하여 유지하고 코드 유지 관리성을 향상시키기 때문에 가장 권장되는 방법입니다. 동시에 외부 스타일 시트를 여러 HTML 파일에서 참조하여 코드를 재사용할 수 있습니다.

다음 콘텐츠가 포함된 styles.css라는 CSS 파일이 있다고 가정합니다.

p {  
  color: red;  
}

HTML 파일에서 이 CSS 파일을 참조하는 코드는 다음과 같습니다.

  
  
  
    

  
  
  
这是一段红色的文本。
  
  

위 코드에서 href 속성은 경로를 지정합니다. CSS 파일. CSS 파일과 HTML 파일이 같은 디렉터리에 있으면 파일 이름을 직접 사용할 수 있습니다. 동일한 디렉터리에 있지 않은 경우 상대 경로 또는 절대 경로를 제공해야 합니다.

위의 세 가지 방법 외에도 @import 문을 사용하여 CSS 스타일을 참조할 수도 있습니다. @import 문은 HTML 문서의 어느 곳에서나 사용할 수 있지만 일반적으로 태그 내에 배치됩니다. @import 문을 사용할 때 가져올 CSS 파일의 경로를 지정해야 합니다.

샘플 코드:

  
  
  
    

  
  
  
这是一段红色的文本。
  
  

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