HTMLでCSSを参照するにはどのような方法がありますか?-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

php中世界最好的语言

Feb 11, 2018 am 10:51 AM

csshtml

今回は、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 は、

との間のページ内のさまざまな要素の設定を記述することに重点を置きます。この方法は、単一の 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 id="This-nbsp-is-nbsp-a-nbsp-line-nbsp-of-nbsp-Text">This is a line of Text.</h1>
<h1 id="This-nbsp-is-nbsp-another-nbsp-line-nbsp-of-nbsp-Text">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 サイトの他の関連記事に注目してください。

関連書籍:

ボーダーレス iframe とボーダーレス iframe の操作とは何ですか

HTML Web ページでアンカーポイントを使用する方法

HTML で js を使用してローカルシステム時間を取得する方法

HTMLハイパーリンクaのクリックイベント後、href

が指すアドレスにジャンプします

以上がHTMLでCSSを参照するにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

HTMLタグとHTML属性の違いは何ですか？May 14, 2025 am 12:01 AM

htmltagsdeTheStructureOfawebpage、whiLeattributesdddddddddtetails.1）tagslike、andoutlineThecontentのsplacement.2）属性、クラス、およびスチリーンハンシテアグビーズイメージソース、スタイリング、および改善、および改善の想像力。

HTMLの未来：進化とトレンドMay 13, 2025 am 12:01 AM

HTMLの未来は、よりセマンティック、機能的、モジュール式方向に発展します。 1）セマンティック化により、タグがコンテンツをより明確に説明し、SEOとバリアのないアクセスを改善します。 2）機能化は、ユーザーのニーズを満たすために新しい要素と属性を導入します。 3）モジュール性は、コンポーネントの開発をサポートし、コードの再利用性を改善します。

Web開発にとってHTML属性が重要なのはなぜですか？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevevermentmentmentmentmentmentmentmention behavior、like、andfunctionality.theyenhance -interactivity、accessibility、andseo.forexample、thesrcattribute intagsimpactsseo

Alt属性の目的は何ですか？なぜそれが重要なのですか？May 11, 2025 am 12:01 AM

ALT属性は、HTMLのタグの重要な部分であり、画像の代替テキストを提供するために使用されます。 1.画像をロードできない場合、ALT属性のテキストが表示され、ユーザーエクスペリエンスが向上します。 2。スクリーンリーダーは、ALT属性を使用して、視覚障害のあるユーザーが写真の内容を理解するのに役立ちます。 3. ALT属性のEnginesインデックステキストを検索して、WebページのSEOランキングを改善します。

HTML、CSS、およびJavaScript：例と実用的なアプリケーションMay 09, 2025 am 12:01 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造の構築に使用されます。 2。CSSは、Webページの外観を美化するために使用されます。 3. JavaScriptは、動的な相互作用を実現するために使用されます。タグ、スタイル、スクリプトを通じて、これら3つは最新のWebページのコア関数を構築します。

Lang属性をタグにどのように設定しますか？なぜこれが重要なのですか？May 08, 2025 am 12:03 AM

タグのLang属性を設定することは、WebアクセシビリティとSEOを最適化する重要なステップです。 1）ラング属性をタグに設定します。 2）多言語コンテンツでは、ようなさまざまな言語パーツのLang属性を設定します。 3）「EN」、「FR」、「ZH」などのISO639-1標準に準拠する言語コードを使用します。Lang属性を正しく設定すると、Webページと検索エンジンランキングのアクセシビリティが向上します。

HTML属性の目的は何ですか？May 07, 2025 am 12:01 AM

htmlattributeSareSientionalentionalentionalentionalentiallyance'functionalityandappearance.theyaddinformationtodefinebehavior、light、and interaction、makewebsitesteractive、responsive、andviseallyappaleal.attributeslikesrc、href、class、型、およびdoadabledransform