CSSのビフォーアフターってどういう意味ですか？【詳しい使い方説明】-CSSチュートリアル-php.cn

CSSのビフォーアフターってどういう意味ですか？【詳しい使い方説明】

藏色散人

リリース： 2018-09-07 15:36:37

オリジナル

5859 人が閲覧しました

この記事では、CSS での疑似要素の具体的な使用法 (前と後) を詳しく紹介します。初心者の中には、一見聞き慣れた単語だと思うかもしれませんが、CSS に表示されると少し混乱してしまうかもしれません。 CSS が非常に強力であることは誰もが知っています。 WebページをこんなにカラフルにできるのはCSSの機能のおかげです。

まず第一に、CSS 疑似要素は、特定のセレクターに特殊効果を追加するために使用されます。 Web ページを作成するとき、いくつかの特殊なアニメーション効果は CSS 擬似要素から切り離すことができません。もちろん、CSS の疑似要素にはさまざまな種類がありますが、疑似要素によって制御される内容は要素によって制御される内容と同じですが、疑似要素はドキュメントツリーには存在せず、実際の要素ではないため、疑似要素と呼ばれます。疑似要素。以下では、具体的なコード例を通じて、CSS での :before および :after 疑似クラスの使用法を詳しく紹介します。

:before 疑似要素スタイルを持つ HTML コードの一部は次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        h1:before {content:url(/test/img/2.png)}
    </style>
</head>
<body>
<h1>这里是一段大标题</h1>
<p>css before伪元素使用代码示例</p>
</body>
</html>

ログイン後にコピー

上記のコードの効果は次のとおりです:

CSSのビフォーアフターってどういう意味ですか？【詳しい使い方説明】

2. HTML コードの一部:after 疑似要素スタイルを使用すると、次のようになります:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        h1:after {content:url(/test/img/2.png)}
    </style>
</head>
<body>
<h1>这里是一段大标题</h1>
<p>css :after伪元素使用代码示例</p>
</body>
</html>

ログイン後にコピー

コードの効果は次のようになります:

CSSのビフォーアフターってどういう意味ですか？【詳しい使い方説明】

したがって、上記の例 1 と 2 を通じて、前後の CSS の使用についていくつかの結論を導き出すことができますか?疑似クラス？実は、beforeとafterの中国語訳は、before...とafter...とほぼ同じです。

CSS では、:before 疑似要素の目的は、要素のコンテンツの前に新しいコンテンツを挿入することです。たとえば、例 1 では、:before 要素を使用して大きなタイトル h1 の前に画像を追加します。。

:after 疑似要素の使用は、要素のコンテンツの後に新しいコンテンツを挿入することです。たとえば、例 2 では、:after 要素を使用して h1 タイトルの後ろに画像を追加します。

実際、前後の疑似要素は実際の要素であるとも言えますが、疑似要素はドキュメントツリーに反映できませんが、任意のスタイルを追加することができ、スタイルは同じにすることができます。通常のページ要素と同様です。

CSS :before と :after 疑似要素の導入に関するこの記事は以上です。皆様のお役に立てれば幸いです。 CSS の知識について詳しくは、[CSS ビデオチュートリアル] または [CSS マニュアル] をご覧ください

以上がCSSのビフォーアフターってどういう意味ですか？【詳しい使い方説明】の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

CSSのビフォーアフターってどういう意味ですか？ 【詳しい使い方説明】

CSSのビフォーアフターってどういう意味ですか？【詳しい使い方説明】