HTML ドキュメントに CSS を埋め込む一般的な 3 つの方法

HTML ドキュメントに CSS を埋め込む一般的な 3 つの方法
HTMLでCSSを定義するには、埋め込み、リンク、インラインの3つの方法が一般的に使用されます。

1. 埋め込み

ドキュメント内の CSS スタイルを定義するには、HTML スタイル要素を使用します。

コードをコピー
コードは次のとおりです。

<ヘッド>
<スタイル タイプ="text/css">
h1{色:赤}
p{色:青}
</スタイル>
<ヘッド>

2. インライン

すべての HTML 要素にはスタイルを直接定義できるスタイル属性が含まれています。このスタイルはこの要素のコンテンツにのみ適用され、同じ名前を持つ別の要素には影響しません。

コードをコピー
コードは次のとおりです。

<p style="color:#FFF;font-weight:bold;">インライン スタイル</p>

3. 外部参照

外部参照とは、HTML ドキュメント自体には CSS スタイルが含まれず、ドキュメントの表示を定義するために外部 CSS ファイルを動的に参照することを意味します。

1. スタイルシート処理命令文を使用する

HTML文書の先頭にスタイルシートの指示を記述する

コードをコピー
コードは次のとおりです。

<?xml-stylesheet type="text/css" href="mystyle.css" ?>
<html>
指示文
</html>

ただし、このディレクティブの使用をサポートしているのは、XML 構文形式で記述された HTML ドキュメントのみです。ほとんどのブラウザでは、XHTML または XML 形式で保存した場合にのみ有効であり、JS ではこの種の CSS を処理できないため、推奨されません。

2. @importコマンドを使用する

スタイル要素間で@importコマンドを使用して外部CSSファイルをインポートします。

コードをコピー
コードは次のとおりです。

<ヘッド>
<スタイル タイプ="text/css">
<!--次の2行のコードは、同じ効果があります
@import "mystyle.css";
@import url("mystyle.css");
-->
</スタイル>
</head>

任意の @import ルールは、他のすべての @import ルールの前に出現する必要があります。パラメータは CSS ファイルの URL です。 CSS ファイルで @import ディレクティブを使用して別の CSS ファイルをインポートすることもできます。

3. リンク要素を使用する

コードをコピー
コードは次のとおりです。

<ヘッド>
<link rel="stylesheet" href="cssのurl" type="text/css" >
</head>

これは最も一般的に使用される方法でもあります。

4. HTTPメッセージヘッダーを使用してスタイルシートにリンクする

HTTP メッセージ ヘッダーのリンク フィールドを使用して、外部スタイル シートにリンクできます。

コードをコピー
コードは次のとおりです。

リンク:<mystyle.css>;rel=スタイルシート;
//<link rel="stylesheet" href="css的url" type="text/css" > と同等

HTTP ヘッダーでは複数のリンクを使用して複数のスタイルシートをリンクすることができ、HTTP ヘッダー内のリンクは HTML ドキュメント内のリンク (head 要素内) よりも優先されます。

<<:  IDEA が docker を統合して springboot プロジェクトを展開するプロセス全体

>>:  JS ES の新機能: 拡張演算子の紹介

推薦する

JavaScript でシンプルな Web 時計を実装する

JavaScript を使用して Web ページ クロックを実装します。効果は次の図に示されています...

XHTMLコードの一般的なアプリケーション問題をまとめる

<br />しばらくの間、多くの人が XHTML の使い方を知らないことに気付きました。...

IntelliJ IDEA に Docker プラグインをインストールする詳細な手順 (2018 バージョン)

目次1. 開発環境2. dockerプラグインをインストールする1. アイデアのインストール2. イ...

RGBカラーテーブルコレクション

RGBカラーテーブル色英語名RGB 16色雪255 250 250 #FFFAFAゴーストホワイト2...

フロントエンド例外 502 不正なゲートウェイの原因と解決策

目次502 不正なゲートウェイ エラーの発生1. 502 不正なゲートウェイ エラーとは何ですか? ...

CSS テキスト装飾 text-decoration と text-emphasis の詳細な説明

CSS では、テキストは私たちが毎日扱う最も一般的なものの 1 つです。テキストの場合、テキストの装...

jQueryはシャトルボックス機能を実現する

この記事では、シャトルボックス機能を実現するためのjQueryの具体的なコードを参考までに紹介します...

HTML フレーム、Iframe、フレームセットの違い

10.4.1 フレームセットとフレームの違い まず、フレームセットとフレームの違いについて説明します...

サーバーから返される14の一般的なHTTPステータスコードの詳細な説明

HTTP ステータス コードステータス コードは 3 桁の数字と理由フレーズ (最も一般的なもの: ...

DockerコンテナでLNMPをコンパイルする例

目次1. プロジェクトの説明2. Nginxイメージの作成3. MySQLイメージの作成4. PHP...

マウスを傾けた状態でのフリップナビゲーションの問題に関する研究

この記事では、マウス フリップナビゲーションの制作についてまだ疑問を持っている友人の役に立つことを期...

Reactは一般的なスケルトン画面コンポーネントの例を実装します

目次スケルトンスクリーンとは何ですか?デモデザインのアイデア具体的な実装スケルトンスクリーンとは何で...

Nginx リバース プロキシでセッション永続性を実装する 2 つの方法の詳細な説明

1. ip_hash: ip_hash は、送信元アドレス ハッシュ アルゴリズムを使用して、サーバ...

Django+vue 登録とログインのサンプルコード

登録するフロントエンドは、vue の axios を使用して値を渡し、取得したアカウントとパスワード...

docker run によって起動されたコンテナがハングしてデータが失われた場合の対処方法

シナリオの説明あるシステムでは、機能サービスはdocker stack deploy xxxで起動し...