cssの呼び出し方-フロントエンドQ&A-php.cn

cssの呼び出し方

WBOY

リリース： 2023-05-27 11:39:07

オリジナル

856 人が閲覧しました

CSS (Cascading Style Sheets) は、Web ページのスタイルを定義するために使用される言語で、Web ページのレイアウト、色、フォントなどを制御できます。 Web ページの制作では、通常、Web ページのスタイル効果を実現するために CSS ファイルと HTML ファイルを組み合わせる必要があります。それでは次に、CSS を呼び出す方法について説明します。

内部スタイルシート

内部スタイルシートとは、HTMLファイルのヘッダーにCSSスタイルを定義して切り替えを容易にし、HTML内にコードを埋め込むメソッドです。ファイル。このメソッドは、現在のページでのみ必要な特定のスタイルに適しています。呼び出しメソッドは次のとおりです:

<head>
    <title>我的页面</title>
    <style>
        /* CSS样式代码 */
    </style>
</head>

ログイン後にコピー

外部スタイルシート

外部スタイルシートは、別のファイルで CSS スタイルを定義し、HTML ファイル内のリンクを介してそのファイルを参照する方法。このメソッドは、複数のページで同じスタイルが必要な場合に適しています。呼び出しメソッドは次のとおりです:

(1) CSS ファイルにスタイルコードを定義します

/* style.css */
body {
    background: #f6f6f6;
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 14px;
}

h1 {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

ログイン後にコピー

(2) リンクHTML ファイル CSS ファイル

<head>
    <title>我的页面</title>
    <link rel="stylesheet" href="style.css">
</head>

ログイン後にコピー

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

インラインスタイルシートは、CSS スタイルを HTML タグ内に直接記述する方法です。このメソッドは、スタイルを設定する必要があるタグが 1 つだけ必要な場合に適しています。呼び出しメソッドは次のとおりです:

<h1 style="color:red;">这是一个标题</h1>

ログイン後にコピー

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

スタイルシートのインポートは、1 つの方法です。 CSS スタイルは別のファイルで定義され、別の CSS ファイルに導入されます。このメソッドは外部スタイルシート構造に似ていますが、呼び出し方法が少し異なります。

(1) main.css ファイルに style.css ファイルを導入します

/* main.css */
@import url('style.css');

/* 下面是对样式的调用 */
body {
    margin: 0;
}

.container {
    width: 960px;
    margin: 0 auto;
}

ログイン後にコピー

(2) HTML ファイル内リンク main.css ファイル

<head>
    <title>我的页面</title>
    <link rel="stylesheet" href="main.css">
</head>

ログイン後にコピー

継承スタイル

継承スタイルは、親タグのスタイルを子タグに適用する方法です。この方法は、要素が同じスタイルを持ち、親タグのスタイルによってコードを簡素化できる場合に適しています。例:

div {
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #333;
}

h1 {
    font-size: 24px;
    font-weight: bold;
}

/* 这里的h1将继承div中的color和font-family */

ログイン後にコピー

要約すると、CSS を呼び出す方法は数多くあり、実際のニーズに応じてさまざまな呼び出し方法を選択できます。 Web ページの制作では、適切な CSS 呼び出しメソッドを使用すると、Web ページのスタイルの効果をより適切に実現し、ユーザーエクスペリエンスを向上させることができます。

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