ホームページ > 記事 > ウェブフロントエンド > HTMLでCSSを参照するにはどのような方法がありますか?

HTMLでCSSを参照するにはどのような方法がありますか?

php中世界最好的语言オリジナル: 2018-02-11 10:51:542087ブラウズ

今回は、HTMLでCSSを参照する方法と、HTMLでCSSを参照する注意点についてお届けします。以下は実際のケースですので、見ていきましょう。
HTMLでCSSを導入する主な方法は、インライン、埋め込み、インポート、リンクです。

インライン：つまり、マークのstyle属性にCSSスタイルを設定するこの方法は、本質的にCSSの利点を反映していません。使用はお勧めしません

例:

      <html>
      <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Demo</title>
      </head>
      <body>
<h1 style=color:white;background-color=blue;>
This is a line of Text.
</h1>
      </body>
      </html>

Embedded: Embedded は、93f0f5c25f18dab9d176bd4f6de5d30e と 9c3bca370b5104690d9ef395f2c5f8d1 の間のページ内のさまざまな要素の設定を記述することに重点を置きます。この方法は、単一の Web ページの場合、非常に便利です。しかし、多くのページを含む Web サイトの場合、各ページがインラインで独自のスタイルを設定すると、CSS によってもたらされる大きな利点が失われます。そのため、Web サイトは通常、次の 2 つの方法を使用して独立した CSS スタイルシートファイルを作成します。

HTML ドキュメント

に導入されました。例:

      <html>
      <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Demo</title>
<style type="text/css">
h1{
      color:white;
      background-color:boue;
      }
</style>
      </head>
      <body>
<h1>This is a line of Text.</h1>
<h1>This is another line of Text.</h1>
      </body>
      </html>

インポートタイプとリンクタイプ: インポートタイプとリンクタイプの目的は、独立した CSS ファイルを HTML ファイルに導入することであり、この 2 つの間には相応の違いがあります。

実際、この 2 つの最大の違いは、リンクタイプは HTML タグを使用して外部 CSS ファイルを導入するのに対し、インポートタイプは CSS ルールを使用して外部 CSS ファイルを導入することです。したがって、それらの構文も異なります。

リンクスタイルを使用する場合は、次のステートメントを使用して外部 CSS ファイルを導入する必要があります。

<link href="mystyle.css" rel="stylesheet" type="text/css" />

import を使用する場合は、次のステートメントを使用する必要があります。

<style type="text/css">
       @import"mystyle.css";
</style>

さらに、これら 2 つの方法を使用した後の表示効果も若干異なります。リンク方式を使用する場合、CSS ファイルはインストールページの本体部分よりも前に読み込まれるため、表示される Web ページに最初からスタイル効果が適用されます。インポート方式を使用する場合は、CSS ファイルはインストールページのメイン部分よりも後に読み込まれます。ページ全体が読み込まれます。一部のブラウザでは、Web ページファイルのサイズが比較的大きい場合、スタイルが設定されていないページが最初に表示され、次にスタイル設定された効果が表示されます。閲覧者の観点から見ると、これはインポートを使用する場合の欠点です。一部の比較的大規模な Web サイトでは、メンテナンスを容易にするために、すべての CSS スタイルを複数の CSS ファイルに含めることができます。この方法で、リンクインポートを使用する場合は、CSS ファイルを個別にインポートするためのいくつかのステートメントが必要になります。 CSS ファイルの分類を調整する場合は、HTML ファイルも同時に調整する必要があります。これはメンテナンス作業の欠点となります。インポートメソッドを使用する場合は、一般的な CSS ファイルのみをインポートし、その後、このファイル内の他の独立した CSS ファイルをインポートできます。リンクメソッドにはこの機能がありません。

それでは、CSS ファイルを導入する必要がある場合は、リンクメソッドを使用します。複数の CSS ファイルを導入する必要がある場合は、最初にリンクメソッドを使用して、「ディレクトリ」CSS ファイルを導入します。この「ディレクトリ」「 CSS ファイル次に、インポートを使用して他の CSS ファイルを導入します。
JavaScript
を通じてどの CSS ファイルをインポートするかを動的に決定したい場合は、リンクメソッドを使用してこれを実現する必要があります。
これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。