HTML ページに CSS を導入するいくつかの一般的な方法-フロントエンドQ&A-php.cn

HTML ページに CSS を導入するいくつかの一般的な方法

PHPz

リリース： 2023-04-06 14:14:24

オリジナル

2708 人が閲覧しました

CSS は、Web ページのスタイルを設定するために使用されるプログラミング言語であり、Web ページをより美しく、プロフェッショナルに見せることができます。 CSS を使用して Web ページを装飾する前に、CSS を Web ページに導入する必要があります。この記事では、CSS を導入する一般的な方法をいくつか紹介します。

1. インラインスタイルシート

インラインスタイルシートとは、HTML 要素の style 属性に CSS コードを直接記述することを指します。この方法は、個々の要素がカスタムスタイルを必要とする状況に適しています。例:

<p style="color: red; font-size: 18px;">这是一个段落</p>

ログイン後にコピー

2. 内部スタイルシート

内部スタイルシートとは、<style> タグを使用してドキュメントの先頭に CSS コードを導入することを指します。 HTML 全体を制御するドキュメントのスタイル。例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <style>
        p{
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>

ログイン後にコピー

3. 外部スタイルシート

外部スタイルシートとは、CSS コードを CSS ファイルに個別に保存し、HTML ドキュメントで <link> を渡すことを指します。 タグはファイルを参照します。この方法は、複数のページを制御する必要があるスタイルに適しており、HTML ドキュメントをより簡潔にすることができます。例:

style.css ファイルに CSS コードを書き込みます:

p{
    color: red;
    font-size: 18px;
}

ログイン後にコピー

HTML ドキュメントで CSS ファイルを参照します:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>

ログイン後にコピー

4。スタイルシートのインポート

は外部スタイルシートに似ています。スタイルシートをインポートすると、ドキュメントの先頭にある

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <style>
        @import url("style.css");
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>

ログイン後にコピー

上記は、CSS を導入する一般的な方法をいくつか示しています。さまざまな使用シナリオの下で、さまざまな導入方法を選択することで、Web 開発をより効率的かつ簡潔にすることができます。

以上がHTML ページに CSS を導入するいくつかの一般的な方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。