異なる方法を使用して CSS スタイルシートを参照すると、最終的には同じ効果が得られますが、異なる方法を使用して CSS ファイルを適用すると、SEO や Web ページを開く速度と効率に影響します。 HTML参照CSSメソッドは次のとおりです 次に、HTML参照CSSメソッドの例を1つずつ説明します。 1. HTMLタグ要素にCSSスタイルを直接埋め込むたとえば、<div style="font-size:14px; color:#FF0000;">I am div css test content-www.jb51.net support</div> 効果は次のようになります。 2. HTMLのheadセクションにおけるスタイル宣言挿入コードは次のとおりです。 <スタイル タイプ="text/css"> <!-- .ceshi {font-size:14px; color:#FF0000;}/*ここにCSSスタイルのコンテンツがあります*/ --> </スタイル> 具体的な方法は以下の通りです。 3. @importを使用して外部CSSファイルを参照する<!doctypehtml> <html> <ヘッド> <メタ文字セット="utf-8"> <title>123WORDPRESS.COM テスト</title> <スタイル タイプ="text/css"> <!-- @import url(wcss.css);/*ここに@importで参照されるCSSスタイルコンテンツがあります*/ --> </スタイル> </head> <本文> <div class="ceshi">私は div css テスト コンテンツ - www.jb51.net サポートです</div> </本文> </html> Wcss.css ファイル内のコード.ceshi {font-size:14px; color:#FF0000;} 効果は以下のとおりです。 この方法の使用は、組み込みの CSS スタイルシート方法の使用に似ていることがわかります。どちらの方法も、外部 CSS を参照するために HTML ヘッド内のスタイル タグを使用する必要があります。 4. リンクを使用して外部 CSS ファイルを呼び出すHTML 参照 CSS ファイルを実装するために外部の wcss.css ファイルを呼び出して <link rel="stylesheet" href="wcss.css" type="text/css" /> をヘッド内に配置する 詳細は下記をご覧ください このメソッドはスタイル タグを必要とせず、スタイルをリンクすることで外部スタイルを直接参照します。通常、外部 CSS スタイル メソッドを参照するには、リンクを使用することをお勧めします。 外部CSSを参照するリンクを使用する利点1. SEO に有利です。この方法を使用して外部 CSS ファイルを参照すると、CSS スタイルを直接追加するよりも HTML ページのソース コードが大幅に少なくなります。検索エンジン スパイダーは Web ページをクロールするときに CSS ファイルをクロールしないため、HTML ソース コードが非常に小さくなり、スパイダーのクロール速度が速くなり、処理が少なくなり、この Web ページの重量が増加してランキングに有利になります。 追加のHTML では、CSS を導入する主な方法は、インライン、埋め込み、インポート、リンクの 3 つです。 例: <html> <ヘッド> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" /> <title>テキストデモ</title> </head> <本文> <h1 スタイル=色:白;背景色=青;> これはテキストの行です。 </h1> </本文> </html> 埋め込み:埋め込みでは、ページ内のさまざまな要素の設定を <head> と </head> の間に書き込みます。この方法は、単一の Web ページの場合に非常に便利です。しかし、ページ数の多いウェブサイトの場合、各ページが埋め込み方式で独自のスタイルを設定すると、CSS がもたらす大きな利点が失われます。そのため、ウェブサイトでは通常、独立した CSS スタイルシート ファイルを作成し、次の 2 つの方法のいずれかを使用して HTML ドキュメントに導入します。 <html> <ヘッド> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" /> <title>テキストデモ</title> <スタイル タイプ="text/css"> h1{ 色:白; 背景色:boue; } </スタイル> </head> <本文> <h1>これはテキストの行です。</h1> <h1>これは別のテキスト行です。</h1> </本文> </html> インポートとリンク:インポートとリンクの目的は、どちらも独立した CSS ファイルを HTML ファイルに導入することであり、両者の間には対応する違いがあります。 <link href="mystyle.css" rel="スタイルシート" type="text/css" /> インポート方式を使用する場合は、次のステートメントを使用する必要があります。
また、これら 2 つの方法を使用した後の表示効果は若干異なります。リンク方式を使用する場合、CSS ファイルはデバイス ページの主要部分より先に読み込まれるため、表示される Web ページは最初からスタイル効果が得られます。インポート方式を使用する場合、CSS ファイルはページ全体が読み込まれた後に読み込まれます。一部のブラウザーでは、Web ページ ファイルが大きい場合、スタイル設定されていないページが最初に表示され、その後、点滅してからスタイル設定効果が表示される場合があります。視聴者の観点から見ると、これはインポート方法を使用する場合の欠点です。大規模な Web サイトでは、メンテナンスを容易にするために、すべての CSS スタイルを複数の CSS ファイルに分類する必要がある場合があります。この場合、リンク スタイルのインポートを使用すると、CSS ファイルを個別にインポートするための複数のステートメントが必要になります。 CSS ファイルの分類を調整する場合は、HTML ファイルも同時に調整する必要があります。これはメンテナンス作業にとって不利です。インポート方式を使用する場合は、メイン CSS ファイルを 1 つだけ導入し、そのファイルに他の独立した CSS ファイルをインポートできます。リンク方式にはこの機能はありません。 したがって、私の提案は、CSS ファイルをインポートする必要がある場合はリンク メソッドを使用し、複数の CSS ファイルをインポートする必要がある場合は、最初にリンク メソッドを使用して「ディレクトリ」CSS ファイルをインポートし、次にインポート メソッドを使用してこの「ディレクトリ」CSS ファイル内の他の CSS ファイルをインポートすることです。 JavaScript を使用して、どの CSS ファイルをインポートするかを動的に決定する場合は、リンク メソッドを使用する必要があります。 |
目次1. jsonp クロスドメイン2. document.domain + iframe クロスド...
基本概念操作の前に、まずいくつかの基本的な概念を理解する必要がありますディスクLinux システムで...
Linux オペレーティング システムは過去 20 年間にわたってデータ センターに革命をもたらし...
目次ブラウザ同一生成元ポリシー1. VUEフロントエンド構成プロキシはクロスドメインの問題を解決しま...
この記事の環境はWindows 10、MySQLのバージョンは5.7.12-logです1. 基本的な...
退屈していたので、突然角丸四角形の実装を思いつきました。しかし、私たちはこの話題についてあまりにも長...
技術的背景Latex は文書作成、特に記事作成には欠かせないツールであり、必須のテキスト組版ツールで...
この記事では、ショッピングカート決済機能を実現するためのVueの具体的なコードを例として紹介します。...
<br />ウェブページの色はウェブサイトのイメージを確立する鍵の一つですが、ネットユー...
データ型が datetime であるフィールド add_time を持つテーブル product が...
自分のウェブサイトを構築する予定なので、618 プロモーションを利用して Tencent Cloud...
質問1:インストール中に net start mysql と入力すると、次のエラー メッセージが表示...
この記事では、参考までにEasy Notepadを実装するためのVueの具体的なコードを紹介します。...
データクリーニング (ETL)コアビジネスの MapReduce プログラムを実行する前に、まずデー...
この記事では、例を使用して、MySQL トランザクション、分離レベル、およびロックの使用について説明...