HTML에 CSS를 추가하는 방법-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML에 CSS를 추가하는 방법

(*-*)浩

May 28, 2019 pm 03:47 PM

html

HTML에 CSS를 추가하는 방법에는 인라인, 포함, 링크 및 가져오기의 네 가지 주요 방법이 있습니다.

1. 인라인 스타일

인라인 스타일은 태그의 스타일 속성에 CSS 스타일을 설정하는 것입니다. 이 방법은 CSS의 장점을 반영하지 않으므로 권장되지 않습니다.

<div style = "width:100px;height:100px;>我是行内样式</div>

로그인 후 복사

2. Embedded

Embedded는 웹페이지의 태그 쌍에 CSS 스타일을 작성하는 것입니다. 형식은 다음과 같습니다.

  <head>
        <style type="text/css">
           ...此处写CSS样式
       </style>
  </head>

로그인 후 복사

단점은 웹페이지가 많은 웹사이트의 경우 웹페이지마다 임베딩을 사용하고 스타일을 수정하는 것이 매우 번거롭다는 점입니다. 단일 웹페이지에는 삽입 사용을 고려할 수 있습니다.

3 가져오기 방법은

독립적인 .css 파일을 HTML 파일에 도입합니다.

<style type="text/css">
    @import"mystyle.css"; //此处要注意.css文件的路径
</style>

로그인 후 복사

가져오기 방법은 전체 웹 페이지 뒤에 CSS 파일을 로드합니다. 웹 페이지가 상대적으로 크면 스타일이 지정되지 않은 페이지가 잠시 나타납니다. 그러면 웹 페이지의 스타일이 나타납니다. 이는 수입품의 본질적인 결함입니다.

4. 링크 유형

도 HTML 파일에 .css 파일을 도입하지만, 링크 유형은 HTML 규칙을 사용하여 외부 CSS 파일을 도입한다는 점에서 가져오기 유형과 다릅니다. 외부 스타일 시트 파일을 도입하기 위한 구문은 다음과 같습니다.

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

로그인 후 복사

링크 유형과 가져오기 유형을 사용할 때의 차이점은 웹 본문을 로드하기 전에 CSS 파일을 로드한다는 점입니다. 페이지 파일이므로 표시되는 웹 페이지는 처음부터 스타일 효과가 적용됩니다. 스타일이 지정되지 않은 웹 페이지를 먼저 표시한 다음 가져오기 유형과 같이 스타일이 지정된 웹 페이지를 표시하지 않습니다. 이것이 링크 유형의 장점입니다.

요약: 일반적으로 웹사이트를 만들 때 스타일은 대부분 여러 스타일 시트 파일로 작성되기 때문에 먼저 링크를 사용하여 일반 CSS 파일을 소개한 다음 가져오기를 사용하여 이 CSS 파일에 소개합니다. 기타 CSS 파일. 그러나 JavaScript를 통해 CSS 파일을 동적으로 도입하는 경우에는 연결만 사용할 수 있습니다.

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

본 웹사이트의 성명

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

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

자바 튜토리얼

1662

Cakephp 튜토리얼

1419

라라벨 튜토리얼

1311

PHP 튜토리얼

1262

C# 튜토리얼

1235

Related knowledge

HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM

HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML 입력 자리 표시자 Sep 04, 2024 pm 04:54 PM

HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

PHP에서 HTML/XML을 어떻게 구문 분석하고 처리합니까? Feb 07, 2025 am 11:57 AM

이 튜토리얼은 PHP를 사용하여 XML 문서를 효율적으로 처리하는 방법을 보여줍니다. XML (Extensible Markup Language)은 인간의 가독성과 기계 구문 분석을 위해 설계된 다목적 텍스트 기반 마크 업 언어입니다. 일반적으로 데이터 저장 AN에 사용됩니다