>웹 프론트엔드 >프런트엔드 Q&A >CSS를 인용하는 방법

CSS를 인용하는 방법

PHPz
PHPz원래의
2023-04-24 09:08:362055검색

CSS는 웹 페이지의 스타일을 설명하는 데 사용되는 언어인 Cascading Style Sheets의 약어입니다. 웹페이지에 스타일을 추가하려면 CSS를 사용해야 합니다. 웹페이지를 개발할 때 여러 CSS 파일과 스타일시트를 사용하는 경우가 많기 때문에 CSS를 올바르게 참조하는 것이 매우 중요합니다. 이번 글에서는 CSS를 참조하는 방법을 소개하겠습니다.

1. 내부 스타일 시트

내부 스타일 시트는 HTML 파일에 CSS 코드를 직접 작성하는 스타일 시트를 말합니다. 이 방법은 페이지 배경색, 텍스트 크기, 링크 색상과 같은 일반적인 스타일에 적용됩니다. HTML 문서의 헤드 부분에 <style> 태그를 정의한 후 아래와 같이 그 안에 CSS 코드를 작성합니다. <style>标签,再在其内部编写CSS代码,如下所示:

<!DOCTYPE html>
<html>
    <head>
        <title>内部样式表</title>
        <style>
            /* CSS代码 */
            body {
                background-color: #f8f8f8;
            }
            h1 {
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1>欢迎来到我的网站</h1>
        <p>这是一个演示如何引用CSS的网页。</p>
    </body>
</html>

二、外部样式表

外部样式表通常会放在单独的CSS文件中,然后在HTML文件中通过<link>标签引用。这种方法适用于多个页面使用相同的样式时,可以节省代码的重复。首先创建一个CSS文件,例如style.css,然后在HTML文件的头部添加<link>标签,将CSS文件引用进来,如下所示:

<!DOCTYPE html>
<html>
    <head>
        <title>外部样式表</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>欢迎来到我的网站</h1>
        <p>这是一个演示如何引用CSS的网页。</p>
    </body>
</html>

在CSS文件中编写样式,如下所示:

/* style.css */
body {
    background-color: #f8f8f8;
}
h1 {
    color: blue;
}

三、行内样式

行内样式指的是将CSS代码写在标签的style

<!DOCTYPE html>
<html>
    <head>
        <title>行内样式</title>
    </head>
    <body>
        <h1 style="color:blue;">欢迎来到我的网站</h1>
        <p style="font-size:16px;">这是一个演示如何引用CSS的网页。</p>
    </body>
</html>
2. 외부 스타일 시트

외부 스타일 시트는 일반적으로 CSS 파일을 별도로 배치한 다음 <link> 태그를 통해 HTML 파일에서 참조합니다. 이 방법은 동일한 스타일을 사용하는 여러 페이지에 적합하므로 코드 중복을 줄일 수 있습니다. 먼저 style.css와 같은 CSS 파일을 만든 다음 HTML 파일의 헤드에 <link> 태그를 추가하여 표시된 것처럼 CSS 파일을 참조하세요. 아래:

rrreee

아래와 같이 CSS 파일에 스타일을 작성합니다.

rrreee

3. 인라인 스타일🎜🎜인라인 스타일은 아래와 같이 태그의 style 속성에 CSS 코드를 작성하는 것을 의미합니다. 🎜rrreee🎜이 방법은 특정 테두리 스타일을 설정하는 등 하나의 라벨에만 스타일을 설정하는 데 적합합니다. 인라인 스타일은 내부 및 외부 스타일 시트보다 우선합니다. 🎜🎜요약: 🎜🎜위에 소개된 세 가지 방법은 모두 CSS를 참조하는 데 사용할 수 있습니다. 내부 스타일 시트는 적은 수의 스타일이 필요한 상황에 적합하고, 외부 스타일 시트는 여러 페이지가 동일한 스타일을 사용하는 상황에 적합하며, 인라인 스타일은 하나의 레이블에만 스타일을 적용해야 하는 상황에 적합합니다. 어떤 방법을 사용하든 CSS를 올바르게 인용하면 웹 페이지의 유지 관리성과 효율성이 향상되어 스타일 수정이 더 편리해집니다. 🎜

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

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