HTML に CSS を導入するいくつかの方法の紹介

HTML に CSS を導入するいくつかの方法の紹介

異なる方法を使用して 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 ページの重量が増加してランキングに有利になります。
2. HTML を保存すると、ブラウザは、ページを読み込み、同時に 2 つのスレッドでページを開くのと同じように、Web ページを別々のスレッドでダウンロードできるため、Web ページが非常に速く開くようになります。 (ユーザーがこのウェブページを閲覧すると、HTMLソースコードとCSSファイルが同時にダウンロードされるため、速度が速くなります)
3. Web ページのスタイルを変更するのに便利です。Web ページのアート スタイルを変更するには、CSS スタイルを変更するだけです。この方法を Web サイト プロジェクトで使用すると、サイト全体に共通の CSS 基本スタイルが適用されるため、サイト全体のスタイルを変更するのが迅速かつ便利です。

追加の

HTML では、CSS を導入する主な方法は、インライン、埋め込み、インポート、リンクの 3 つです。
インライン スタイル:つまり、タグのスタイル属性に CSS スタイルを設定します。この方法は本質的に CSS の利点を反映していないため、推奨されません。

例:

<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 ファイルに導入することであり、両者の間には対応する違いがあります。
実際、この 2 つの方法の最大の違いは、リンク メソッドでは HTML タグを使用して外部 CSS ファイルを導入するのに対し、インポート メソッドでは CSS ルールを使用して外部 CSS ファイルを導入することです。したがって、構文も異なります。
リンク スタイルを使用する場合は、次のステートメントを使用して外部 CSS ファイルをインポートする必要があります。

<link href="mystyle.css" rel="スタイルシート" type="text/css" />

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

<スタイル タイプ="text/css">
@import "mystyle.css";
</スタイル>

また、これら 2 つの方法を使用した後の表示効果は若干異なります。リンク方式を使用する場合、CSS ファイルはデバイス ページの主要部分より先に読み込まれるため、表示される Web ページは最初からスタイル効果が得られます。インポート方式を使用する場合、CSS ファイルはページ全体が読み込まれた後に読み込まれます。一部のブラウザーでは、Web ページ ファイルが大きい場合、スタイル設定されていないページが最初に表示され、その後、点滅してからスタイル設定効果が表示される場合があります。視聴者の観点から見ると、これはインポート方法を使用する場合の欠点です。大規模な Web サイトでは、メンテナンスを容易にするために、すべての CSS スタイルを複数の CSS ファイルに分類する必要がある場合があります。この場合、リンク スタイルのインポートを使用すると、CSS ファイルを個別にインポートするための複数のステートメントが必要になります。 CSS ファイルの分類を調整する場合は、HTML ファイルも同時に調整する必要があります。これはメンテナンス作業にとって不利です。インポート方式を使用する場合は、メイン CSS ファイルを 1 つだけ導入し、そのファイルに他の独立した CSS ファイルをインポートできます。リンク方式にはこの機能はありません。

したがって、私の提案は、CSS ファイルをインポートする必要がある場合はリンク メソッドを使用し、複数の CSS ファイルをインポートする必要がある場合は、最初にリンク メソッドを使用して「ディレクトリ」CSS ファイルをインポートし、次にインポート メソッドを使用してこの「ディレクトリ」CSS ファイル内の他の CSS ファイルをインポートすることです。

JavaScript を使用して、どの CSS ファイルをインポートするかを動的に決定する場合は、リンク メソッドを使用する必要があります。

<<:  シンプルなショッピングカート機能を実現するjs

>>:  MySQL の遅いクエリの例

推薦する

クロスドメイン js フロントエンドの 8 つの実装ソリューション

目次1. jsonp クロスドメイン2. document.domain + iframe クロスド...

Linux ディスクのマウント、パーティション分割、容量拡張操作を実装する方法

基本概念操作の前に、まずいくつかの基本的な概念を理解する必要がありますディスクLinux システムで...

Docker は次の「Linux」になれるか?

Linux オペレーティング システムは過去 20 年間にわたってデータ センターに革命をもたらし...

SpringBoot と Vue の相互作用におけるクロスドメイン問題の解決策

目次ブラウザ同一生成元ポリシー1. VUEフロントエンド構成プロキシはクロスドメインの問題を解決しま...

MySQL の集計関数 count の使用法とパフォーマンスの最適化テクニック

この記事の環境はWindows 10、MySQLのバージョンは5.7.12-logです1. 基本的な...

角丸四角形の HTML+CSS 実装コード

退屈していたので、突然角丸四角形の実装を思いつきました。しかし、私たちはこの話題についてあまりにも長...

dockerでpdflatex環境を設定する方法

技術的背景Latex は文書作成、特に記事作成には欠かせないツールであり、必須のテキスト組版ツールで...

Vueはショッピングカート決済機能をシミュレートします

この記事では、ショッピングカート決済機能を実現するためのVueの具体的なコードを例として紹介します。...

ウェブページのエクスペリエンス: ウェブページのカラーマッチング

<br />ウェブページの色はウェブサイトのイメージを確立する鍵の一つですが、ネットユー...

MySQLで日付を比較する方法の詳細な説明

データ型が datetime であるフィールド add_time を持つテーブル product が...

Pagoda Panel のインストール時にサーバーがデータベースにリモート接続できない問題の解決策

自分のウェブサイトを構築する予定なので、618 プロモーションを利用して Tencent Cloud...

MySQLのインストール時に発生する可能性のある問題

質問1:インストール中に net start mysql と入力すると、次のエラー メッセージが表示...

vue シンプルメモ帳開発の詳しい説明

この記事では、参考までにEasy Notepadを実装するためのVueの具体的なコードを紹介します。...

Hadoopカウンターとデータクリーニングの適用

データクリーニング (ETL)コアビジネスの MapReduce プログラムを実行する前に、まずデー...

MySQL トランザクション、分離レベル、ロックの使用例の分析

この記事では、例を使用して、MySQL トランザクション、分離レベル、およびロックの使用について説明...