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 の遅いクエリの例

推薦する

MySQL学習エンジンの詳細な説明、説明、権限

エンジン導入InnodbエンジンInnodb エンジンは、データベース ACID トランザクションを...

CocosCreator 入門チュートリアル: ネットワーク通信

ネットワーク通信の概要オンライン ゲームを開発する場合、必然的にネットワーク通信に対処する必要があり...

ウェブページを自動更新するための 3 つのコード

実際、この効果を実現するのは非常に簡単で、この効果は特殊効果と呼ぶことすらできません。次のコードを ...

HTML テーブルタグと関連する改行の問題の詳細な分析

テーブルとは何ですか?テーブルは、データのキャリアである HTML テーブルです。以下は比較的標準的...

シンプルなID生成戦略: MySQLテーブルからグローバルに一意のIDを生成する実装

グローバル ID を生成する方法は多数あります。ここでは簡単な解決策を紹介します。MySQL の自動...

MySQL テーブル分割後にスムーズにオンラインになる方法

目次テーブルの目的例えばテーブル分割戦略すでにオンラインになっている実行中のテーブルはどうすればよい...

フロントエンドのパフォーマンス最適化を学ぶ準備として、HTMLページのレンダリングプロセスを理解する

現在、フロントエンドのパフォーマンス最適化について学んでいます。適切な解決策を見つけ、パフォーマンス...

MySQL でテーブル メタデータ ロックを待機する理由と方法

MySQL が alter table などの DDL 操作を実行すると、テーブル メタデータ ロッ...

WeChatミニプログラムのすべてのページがログインされていることを確認する方法

目次現状解決さらなる解決策やっと現状WeChat ミニプログラムには、ホームページ、個人ページ、いく...

mysql bin-log ログファイルを sql ファイルに変換する方法

mysqlbinlogのバージョンを表示mysqlbinlog -V [--version] bin...

js データ型とその判定方法の例

js データ型基本データ型: 数値、文字列、ブール値、未定義、null、シンボル、参照データ型: オ...

美しいHTMLコードの書き方

美しい HTML コードの外観 美しい HTML コードの書き方。外国人が書いた記事: 美しい HT...

Bootstrap 3.0 学習ノートボタンスタイル

この記事では主にボタンのスタイルについて説明します。 1. オプション2. サイズ3. 活動状況4....

Vue プロジェクトは、コードの暗号化と難読化を実装するために webpack-obfuscator を設定します。

背景会社のコードは第三者に提供され、利用されます。ソースコードが完全に漏洩しないようにするには、提供...

MySQL がタイムスタンプを使用するときにタイムゾーンの問題を無視できるのはなぜですか?

私はいつも、なぜMySQLデータベースのtimestampタイムゾーンの問題を無視できるのか疑問に思...