HTML ドキュメントまたはフラグメントを CSS で生成されたコンテンツに表示できますか?-CSSチュートリアル-php.cn

HTML ドキュメントまたはフラグメントを CSS で生成されたコンテンツに表示できますか?

Linda Hamilton

リリース： 2024-10-24 01:46:02

オリジナル

426 人が閲覧しました

Can HTML Documents or Fragments Be Displayed in CSS Generated Content?

CSS コンテンツに .html ドキュメントまたは .html フラグメントを表示することは可能ですか?

HTML コンテンツプロパティは、HTML コンテンツプロパティを使用して挿入されます。外部リソースを要素に追加します。このリソースには、画像、ビデオ、または HTML ドキュメントを指定できます。

content プロパティに HTML ドキュメントを表示するには、url() 関数を使用してドキュメントの URL を指定します。例:

<code class="css">.content {
  content: url(example.html);
}</code>

ログイン後にコピー

これにより、example.html ファイルのコンテンツが .content 要素に表示されます。

content プロパティを使用して HTML フラグメントを表示することもできます。 HTML フラグメントは、を含まない HTML コードの一部です。または

タグ。 content プロパティに HTML フラグメントを表示するには、data: URI スキームを使用できます。例:

<code class="css">.content {
  content: url(data:text/html,<html><body><h1>Hello, world!</h1></body></html>);
}</code>

ログイン後にコピー

これにより、「Hello, world!」というテキストが表示されます。 .content 要素内。

CSS で生成されたコンテンツで .html ドキュメントまたは .html 要素をレンダリングすることは可能ですか。 @LGSon によって実証されたアプローチを使用します。 SVG の HTML 内にも CSS 生成されたコンテンツが含まれています。

はい、@LGSon によって実証されたアプローチを使用して、CSS 生成されたコンテンツ内で HTML ドキュメントまたは HTML 要素をレンダリングすることが可能です。この方法では、データ URI を使用して HTML コンテンツを CSS ファイルに埋め込み、次に content プロパティを使用して HTML コンテンツを表示します。

たとえば、次の CSS コードは例の HTML コンテンツを埋め込みます。 html ファイルを CSS ファイルに追加します。

<code class="css">.content {
  content: url(data:text/html,<?php echo file_get_contents('example.html'); ?>);
}</code>

ログイン後にコピー

このコードは、example.html ファイルの内容を .content 要素に表示します。

このアプローチを使用して HTML を表示することもできます。 CSS で生成されたコンテンツ内のフラグメント。たとえば、次の CSS コードは HTML フラグメント

Hello, world!

を埋め込みます。 CSS ファイルに次のように入力します:

<code class="css">.content {
  content: url(data:text/html,<p>Hello, world!</p>);
}</code>

ログイン後にコピー

このコードは、「Hello, world!」というテキストを表示します。 .content 要素内。

以上がHTML ドキュメントまたはフラグメントを CSS で生成されたコンテンツに表示できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

HTML ドキュメントまたはフラグメントを CSS で生成されたコンテンツに表示できますか?