CSSの理解＆＃x27;コンテンツ＆＃x27;財産-CSSチュートリアル-php.cn

Understanding the CSS 'content' Property

コアポイント

csscontent属性は、生成されたコンテンツをWebページに挿入するために、::beforeおよび pseudo-elementsと組み合わせて使用されます。 ::after、normal、counter、文字列、attr、open-quote、url、initial、inheritなどのさまざまな値をサポートします。
contentプロパティを使用して、テキスト、エンコードされた文字、メディアファイル、さらにはカウンターの値を挿入できます。たとえば、attr()関数を使用して、指定されたプロパティの値を挿入できます。
open-quoteまたはclose-quote値はcontent属性を使用して、オープンまたは閉じた引用符を生成します。 no-open-quoteまたはno-close-quote値を使用して、指定された要素から開いた引用符または閉じた引用符を削除できます。
css content属性は主に::beforeおよび::after pseudo-elementsで使用されますが、リストの弾丸または数字の外観をカスタマイズするために::markerpseudo-elementsで使用することもできます。

あなたがフロントエンドの開発者である場合、あなたは擬似要素とCSSのcontentプロパティについて聞いたことがあるでしょう。この記事は擬似要素の深いダイビングには入りませんが、コンセプトに慣れていない場合や簡単なレビューが必要な場合は、Smashing Magazineに関するLouis Lazarisの記事をチェックすることをお勧めします。

この記事では、content属性に焦点を当てます。 cssのcontent属性は、::beforeおよび::after pseudo-elementsで使用されます（単一結腸または二重結腸構文で使用できます）。このプロパティは、生成されたコンテンツをWebページに挿入するために使用され、すべての主要なブラウザで完全にサポートされています。

content属性の基本的な構文

content属性の構文は次のとおりで、各値が含まれています。

p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}

ログイン後にコピー

CSSは、異なる値間でわずかに異なります。たとえば、

またはattr()で::before値を使用するには、次のようなCSSを書く必要があります。 ::after

これは単なる例であり、後で詳細に紹介されます。次のセクションでは、

p::after {
  content: " (" attr(title) ")";
}

ログイン後にコピー

を含む各値について説明します。

attr()

値：

またはnone normalがに設定されている場合、擬似要素は生成されません。

およびに設定すると、noneとして計算されます。 normal ::before ::afterこの方法は、すでに擬似要素を定義するネストされた要素に使用する場合がありますが、一部のコンテキストでは擬似エレメントを無効にしたいと思います。 none

p::before {
  content: normal;
}

p::after {
  content: none;
}

ログイン後にコピー

値：

この値はコンテンツを文字列に設定し、任意のテキストコンテンツにすることができます。非ラチン文字を使用する場合、文字をエンコードする必要があります。各例を見てみましょう。次のHTMLを検討してください：

p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}

ログイン後にコピー

次のCSS：

p::after {
  content: " (" attr(title) ")";
}

ログイン後にコピー

ここで、テキストコンテンツをリスト項目の1つに挿入し、エンコードされた文字（この場合は著作権記号）を段落要素に挿入します。

文字列値は引用符で囲まれている必要があります。これは、単一の引用符または二重引用符である場合があります。

値：<uri>

<uri>値は、特定のメディアを表示することに興味がある場合に非常に便利です。これは、画像などの外部リソースを指すことで行うことができます。何らかの理由でリソースまたは画像を表示できない場合、それは無視されるか、代わりにいくつかのプレースホルダーが使用されます。この値を示すいくつかのコードを見てみましょう。

これはhtml：

です

p::before {
  content: normal;
}

p::after {
  content: none;
}

ログイン後にコピー

これは、SitePointのお気に入りといくつかのテキストを示すCSSです。

<h2>Tutorial Categories</h2>
<ol>
  <li>HTML and CSS</li>
  <li class="new">Sass & Less</li>
  <li>JavaScript</li>
</ol>

<p class="copyright">SitePoint, 2015</p>

ログイン後にコピー

値：またはcounter()counters() この値は、

属性で使用できる最も複雑な値です。これは、2つの異なる関数の1つとして書かれています。 CSSカウンターの詳細については、この記事をご覧ください。しかし、ここに簡単な概要があります。

content最初の関数counter()の場合、生成されたテキストは、この擬似要素範囲内で指定した名前の最も内側のカウンターの値です。デフォルトでは、小数でフォーマットされますが、ローマ数字でフォーマットすることもできます。 counters()

別の関数は似ていますが、最も外側の層から最も内側の層までの順序で、指定された名前（最初のパラメーター）のすべてのカウンターを表します。これらのすべての値は、指定された文字列（2番目のパラメーター）によって分離されます。カウンター変数の名前を

、counter()、または

として指定すると、宣言は無視されます。

counters(name, string)以下は、カウンターの使用方法の例です。 none inheritこれはCSS：initialです

これにより、順序付けられたリストと同様に、生成されたコンテンツを使用してアイテムに番号が付けられます。この場合、注文されたリストを簡単に使用できます。これらのタイプのカウンターは、番号が付けられているアイテムが他の要素間に散らばっている場合、はるかに便利です。

.new::after {
  content: " New!";
  color: green;
}

.copyright::before {
  content: "<pre class="brush:php;toolbar:false"><code class="language-html"><a class="sp" href="https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7">SitePoint</a>

ログイン後にコピー

a9 "; }

値：

.sp::before {
  content: url(https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7favicon.ico);
}

ログイン後にコピー

前述のように、

関数は、指定されたプロパティの値を挿入します。これは唯一のパラメーターです。関連する要素に属性がない場合、空の文字列が返されます。 attr()これは例です：

上記のHTMLを使用して、次のCSSは、リンクテキストの横にあるブラケットにattr()属性値を表示します。

このトリックは、印刷されたWebページにリンクを表示できるように、印刷スタイルのシートでよく使用されます。

<h2>Name of First Four Planets</h2>
<p class="planets">Mercury</p>
<p class="planets">Venus</p>
<p class="planets">Earth</p>
<p class="planets">Mars</p>

ログイン後にコピー

値：hrefまたは

.planets {
  counter-increment: planetIndex;
}

.planets::before {
  content: counter(planetIndex) ". ";
}

ログイン後にコピー

これらの値のいずれかに

が設定されている場合、content属性はオープン見積書または閉じた引用を生成します。通常、<q>要素で使用されますが、任意の要素で使用できます。したがって、次のことを行うことができます

p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}

ログイン後にコピー

値はを使用して、同じ要素に

値がない場合、生成されません。何でも。 close-quote ::after::before値：open-quoteまたは

no-open-quote値は、指定された要素から開いた引用符を削除し、no-close-quote値は閉じた引用符を削除します。これらの値がどのように役立つか疑問に思うかもしれません。次のHTMLをご覧ください：

前の段落では、スピーカーは誰か（「賢者...」）を引用し、この人は他の誰か（「それらは...」）を引用します。したがって、私たちの引用は3層にネストされています。構文的には、この問題に対処する正しい方法があります。生成されたコンテンツを使用する場合、引用符が正しくネストされるようにする方法を以下に示します。 no-open-quote no-close-quote最初のセレクターは、

プロパティを使用して、3つのレイヤーの深さで使用する引用符のタイプを定義します。次に、擬似要素を使用してコンテンツとして引用符を挿入します。これは、前のセクションで行ったことに似ています。

p::after {
  content: " (" attr(title) ")";
}

ログイン後にコピー

および

値を使用してそれらをオーバーライドできます：

p::before {
  content: normal;
}

p::after {
  content: none;
}

ログイン後にコピー

quotesこの場合、引用符の2番目のレイヤーに

というクラスを追加しました。これにより、引用のネストがまだ認識されていることが保証されますが、要素の引用は表示されません。したがって、この段落の引用符の3番目の層には、単一の巻き毛のブレースではなく、二重の巻き毛の装具があります。

no-open-quoteno-close-quote結論

<h2>Tutorial Categories</h2>
<ol>
  <li>HTML and CSS</li>
  <li class="new">Sass & Less</li>
  <li>JavaScript</li>
</ol>

<p class="copyright">SitePoint, 2015</p>

ログイン後にコピー

このチュートリアルが、noquotesプロパティの各価値と、さまざまなシナリオでそれらを使用する方法をよりよく理解するのに役立つことを願っています。

CSSコンテンツ属性に関する

FAQ（FAQ）

CSSコンテンツプロパティとの使用方法は何ですか？ content

css

プロパティは、生成されたコンテンツをページのレイアウトに挿入できる強力なツールです。通常、HTMLに含めるのではなく、CSSを介して装飾的なコンテンツを追加するおよび pseudo-elementsで使用されます。たとえば、属性の値は、文字列、URL、カウンター、または属性の値です。

CSSコンテンツ属性は、`::before`および`::after`以外の要素で使用できます。

csscontent属性は、主に::beforeおよび::after pseudo-elementsで使用されます。ただし、リスト項目のタグボックスを表す::markerpseudo-elementで使用することもできます。これにより、リストの箇条書きまたは番号の外観をカスタマイズできます。

CSSコンテンツ属性を使用して属性値を表示する方法は？

csscontentプロパティは、attr()関数を使用して表示できます。たとえば、ユーザーが実際のURLを見ることができるように、リンクのhrefプロパティの値を表示するために使用できます。構文はcontent: attr(href)になります。

CSSコンテンツプロパティを使用して画像を挿入できますか？

はい、CSScontentプロパティをurl()関数を使用して画像に挿入できます。画像は、::beforeまたは::afterpseudo-elementが配置されているところに挿入されます。たとえば、content: url(image.jpg)はimage.jpgという名前の画像を挿入します。

CSSコンテンツプロパティでカウンターを使用する方法は？

csscontentプロパティは、counter()またはcounters()関数を使用して表示できます。これは、ドキュメントのタイトルまたはセクションを自動的に番号付けするのに役立ちます。最初に、counter-resetプロパティを使用してカウンターを作成またはリセットし、counter-incrementプロパティを使用してインクリメントします。その後、content: counter(myCounter)を使用して、カウンターの現在の値を表示できます。