CSSを引用する方法-フロントエンドQ&A-php.cn

CSSを引用する方法

PHPz

リリース： 2023-04-24 09:42:06

オリジナル

2025 人が閲覧しました

CSS は Cascading Style Sheet の略称で、Web ページのスタイルを記述するために使用される言語です。 Web ページにスタイルを追加したい場合は、CSS を使用してそれを実現する必要があります。 Web ページを開発する場合、複数の CSS ファイルやスタイルシートが使用されることが多いため、CSS を正しく参照することが非常に重要です。この記事ではCSSを参照する方法を紹介します。

1. 内部スタイルシート

内部スタイルシートとは、HTML ファイル内に直接 CSS コードを記述するスタイルシートを指します。この方法は、ページの背景色、テキストサイズ、リンクの色などの一般的なスタイルで機能します。以下に示すように、HTML ドキュメントの先頭で <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>

ログイン後にコピー

2. 外部スタイルシート

外部スタイルシートは通常、別個の CSS ファイルに配置され、<link> タグを通じて HTML ファイル内で参照されます。この方法は、同じスタイルを使用する複数のページに適しており、コードの重複を節約できます。まず、style.css などの 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;
}

ログイン後にコピー

3. インラインスタイル

インラインスタイルとは、style# で CSS コードを記述することを指します。ラベルの #Attributes (以下に示すように):

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

ログイン後にコピー

このメソッドは、特定の境界線スタイルの設定など、1 つのラベルのみのスタイルを設定する場合に適しています。インラインスタイルは内部および外部スタイルシートよりも優先されることに注意してください。

概要:

上で紹介した 3 つの方法はいずれも CSS を参照するために使用できます。内部スタイルシートは必要なスタイルの数が少ない状況に適しており、外部スタイルシートは複数のページで同じスタイルを使用する状況に適しており、インラインスタイルは 1 つのラベルのみをスタイル設定する必要がある状況に適しています。どの方法を使用する場合でも、CSS を正しく引用すると、Web ページの保守性と効率が向上し、スタイルの変更がより便利になります。

以上がCSSを引用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。