ホームページ  >  記事  >  ウェブフロントエンド  >  cssの呼び出し方

cssの呼び出し方

WBOY
WBOYオリジナル
2023-05-27 11:39:07842ブラウズ

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

  1. 内部スタイルシート

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

<head>
    <title>我的页面</title>
    <style>
        /* CSS样式代码 */
    </style>
</head>
  1. 外部スタイル シート

外部スタイル シートは、別のファイルで 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>
  1. インライン スタイル シート

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

<h1 style="color:red;">这是一个标题</h1>
  1. スタイル シートのインポート

スタイル シートのインポートは、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>
  1. 継承スタイル

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

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。